Merge pull request #11613 from elnabo/main

Allow mouse input if map is rendered in an other window

src/ol/MapBrowserEventHandler.js

@@ -239,19 +239,15 @@ class MapBrowserEventHandler extends EventTarget {
     this.down_ = pointerEvent;
 
     if (this.dragListenerKeys_.length === 0) {
+      const doc = this.map_.getOwnerDocument();
       this.dragListenerKeys_.push(
         listen(
-          document,
+          doc,
           MapBrowserEventType.POINTERMOVE,
           this.handlePointerMove_,
           this
         ),
-        listen(
+        listen(doc, MapBrowserEventType.POINTERUP, this.handlePointerUp_, this),
-          document,
-          MapBrowserEventType.POINTERUP,
-          this.handlePointerUp_,
-          this
-        ),
         /* Note that the listener for `pointercancel is set up on
          * `pointerEventHandler_` and not `documentPointerEventHandler_` like
          * the `pointerup` and `pointermove` listeners.
@@ -272,10 +268,7 @@ class MapBrowserEventHandler extends EventTarget {
           this
         )
       );
-      if (
+      if (this.element_.getRootNode && this.element_.getRootNode() !== doc) {
-        this.element_.getRootNode &&
-        this.element_.getRootNode() !== document
-      ) {
         this.dragListenerKeys_.push(
           listen(
             this.element_.getRootNode(),

src/ol/PluggableMap.js

@@ -130,7 +130,7 @@ import {removeNode} from './dom.js';
  * @property {HTMLElement|string} [target] The container for the map, either the
  * element itself or the `id` of the element. If not specified at construction
  * time, {@link module:ol/Map~Map#setTarget} must be called for the map to be
- * rendered.
+ * rendered. If passed by element, the container can be in a secondary document.
  * @property {View} [view] The map's view.  No layer sources will be
  * fetched unless this is specified at construction time or through
  * {@link module:ol/Map~Map#setView}.
@@ -953,6 +953,15 @@ class PluggableMap extends BaseObject {
     return this.overlayContainerStopEvent_;
   }
 
+  /**
+   * @return {!Document} The document where the map is displayed.
+   */
+  getOwnerDocument() {
+    return this.getTargetElement()
+      ? this.getTargetElement().ownerDocument
+      : document;
+  }
+
   /**
    * @param {import("./Tile.js").default} tile Tile.
    * @param {string} tileSourceKey Tile source key.
@@ -996,9 +1005,10 @@ class PluggableMap extends BaseObject {
       eventType === EventType.WHEEL ||
       eventType === EventType.KEYDOWN
     ) {
+      const doc = this.getOwnerDocument();
       const rootNode = this.viewport_.getRootNode
         ? this.viewport_.getRootNode()
-        : document;
+        : doc;
       const target =
         'host' in rootNode // ShadowRoot
           ? /** @type {ShadowRoot} */ (rootNode).elementFromPoint(
@@ -1014,9 +1024,7 @@ class PluggableMap extends BaseObject {
         // It's possible for the target to no longer be in the page if it has been removed in an
         // event listener, this might happen in a Control that recreates it's content based on
         // user interaction either manually or via a render in something like https://reactjs.org/
-        !(rootNode === document ? document.documentElement : rootNode).contains(
+        !(rootNode === doc ? doc.documentElement : rootNode).contains(target)
-          target
-        )
       ) {
         return;
       }

src/ol/control/ZoomSlider.js

@@ -250,9 +250,10 @@ class ZoomSlider extends Control {
       if (this.dragListenerKeys_.length === 0) {
         const drag = this.handleDraggerDrag_;
         const end = this.handleDraggerEnd_;
+        const doc = this.getMap().getOwnerDocument();
         this.dragListenerKeys_.push(
-          listen(document, PointerEventType.POINTERMOVE, drag, this),
+          listen(doc, PointerEventType.POINTERMOVE, drag, this),
-          listen(document, PointerEventType.POINTERUP, end, this)
+          listen(doc, PointerEventType.POINTERUP, end, this)
         );
       }
     }