dock-spawn-ts - npm Package Compare versions

Comparing version 2.41.0 to 2.42.0

lib/js/DraggableContainer.d.ts

@@ -25,2 +25,3 @@ import { Dialog } from "./Dialog.js";
     touchUpHandler: EventHandler;
+    private iframeEventHandlers;
     constructor(dialog: Dialog, delegate: IDockContainer, topLevelElement: HTMLElement, dragHandle: HTMLElement);
@@ -45,4 +46,8 @@ destroy(): void;
     _stopDragging(event: any): void;
-    onMouseMove(event: TouchEvent | MouseEvent): void;
+    onMouseMovedIframe(e: MouseEvent, iframe: HTMLIFrameElement): void;
+    onMouseMove(event: TouchEvent | MouseEvent, iframeOffset?: {
+        x: number;
+        y: number;
+    }): void;
     _performDrag(dx: number, dy: number): void;
 }

lib/js/DraggableContainer.js

@@ -17,2 +17,3 @@ import { EventHandler } from "./EventHandler.js";
         this.minimumAllowedChildNodes = delegate.minimumAllowedChildNodes;
+        this.iframeEventHandlers = [];
     }
@@ -92,2 +93,11 @@ destroy() {
         this.touchUpHandler = new EventHandler(event.target, 'touchend', this.onMouseUp.bind(this));
+        if (this.dockManager.iframes) {
+            for (let f of this.dockManager.iframes) {
+                let mmi = this.onMouseMovedIframe.bind(this);
+                this.iframeEventHandlers.push(new EventHandler(f.contentWindow, 'mousemove', (e) => mmi(e, f)));
+                this.iframeEventHandlers.push(new EventHandler(f.contentWindow, 'mouseup', this.onMouseUp.bind(this)));
+                this.iframeEventHandlers.push(new EventHandler(f.contentWindow, 'touchmove', (e) => mmi(e, f)));
+                this.iframeEventHandlers.push(new EventHandler(f.contentWindow, 'touchend', this.onMouseUp.bind(this)));
+            }
+        }
     }
@@ -104,2 +114,6 @@ onMouseUp(event) {
         delete this.touchUpHandler;
+        for (let e of this.iframeEventHandlers) {
+            e.cancel();
+        }
+        this.iframeEventHandlers = [];
     }
@@ -118,3 +132,7 @@ _startDragging(event) {
     }
-    onMouseMove(event) {
+    onMouseMovedIframe(e, iframe) {
+        let posIf = iframe.getBoundingClientRect();
+        this.onMouseMove(e, { x: posIf.x, y: posIf.y });
+    }
+    onMouseMove(event, iframeOffset) {
         let br = document.body.getBoundingClientRect();
@@ -149,2 +167,4 @@ if (event.touches != null) {
         let currentMousePosition = new Point(touchOrMouseData.clientX, touchOrMouseData.clientY);
+        if (iframeOffset)
+            currentMousePosition = new Point(touchOrMouseData.clientX + iframeOffset.x, touchOrMouseData.clientY + iframeOffset.y);
         let dx = this.dockManager.checkXBounds(this.topLevelElement, currentMousePosition, this.previousMousePosition, false, false);
@@ -151,0 +171,0 @@ let dy = this.dockManager.checkYBounds(this.topLevelElement, currentMousePosition, this.previousMousePosition, false, false);

lib/js/ResizableContainer.d.ts

@@ -25,2 +25,3 @@ import { Dialog } from "./Dialog.js";
     previousMousePosition: Point;
+    private iframeEventHandlers;
     constructor(dialog: Dialog, delegate: IDockContainer, topLevelElement: HTMLElement);
@@ -41,3 +42,7 @@ setActiveChild(): void;
     removeDecorator(): void;
-    onMouseMoved(handle: ResizeHandle, event: TouchEvent | MouseEvent): void;
+    onMouseMovedIframe(handle: any, e: MouseEvent, iframe: HTMLIFrameElement): void;
+    onMouseMoved(handle: ResizeHandle, event: TouchEvent | MouseEvent, iframeOffset?: {
+        x: number;
+        y: number;
+    }): void;
     onMouseDown(handle: any, event: TouchEvent | MouseEvent): void;
@@ -44,0 +49,0 @@ onMouseUp(handle: any): void;

lib/js/ResizableContainer.js

@@ -23,2 +23,3 @@ import { ResizeHandle } from "./ResizeHandle.js";
         this.dockSpawnResizedEvent = new CustomEvent("DockSpawnResizedEvent", { composed: true, bubbles: true });
+        this.iframeEventHandlers = [];
     }
@@ -105,3 +106,7 @@ setActiveChild( /*child*/) {
     }
-    onMouseMoved(handle, event) {
+    onMouseMovedIframe(handle, e, iframe) {
+        let posIf = iframe.getBoundingClientRect();
+        this.onMouseMoved(handle, e, { x: posIf.x, y: posIf.y });
+    }
+    onMouseMoved(handle, event, iframeOffset) {
         let touchOrMouseData = null;
@@ -122,2 +127,4 @@ if (event.changedTouches) {
         let currentMousePosition = new Point(touchOrMouseData.clientX, touchOrMouseData.clientY);
+        if (iframeOffset)
+            currentMousePosition = new Point(touchOrMouseData.clientX + iframeOffset.x, touchOrMouseData.clientY + iframeOffset.y);
         let dx = this.dockManager.checkXBounds(this.topLevelElement, currentMousePosition, this.previousMousePosition, handle.west, handle.east);
@@ -159,2 +166,6 @@ let dy = this.dockManager.checkYBounds(this.topLevelElement, currentMousePosition, this.previousMousePosition, handle.north, handle.south);
         }
+        for (let e of this.iframeEventHandlers) {
+            e.cancel();
+        }
+        this.iframeEventHandlers = [];
         // Create the mouse event handlers
@@ -165,2 +176,11 @@ handle.mouseMoveHandler = new EventHandler(window, 'mousemove', (e) => { this.onMouseMoved(handle, e); });
         handle.touchUpHandler = new EventHandler(window, 'touchend', (e) => { this.onMouseUp(handle); });
+        if (this.dockManager.iframes) {
+            for (let f of this.dockManager.iframes) {
+                let mmi = this.onMouseMovedIframe.bind(this);
+                this.iframeEventHandlers.push(new EventHandler(f.contentWindow, 'mousemove', (e) => mmi(handle, e, f)));
+                this.iframeEventHandlers.push(new EventHandler(f.contentWindow, 'mouseup', (e) => this.onMouseUp(handle)));
+                this.iframeEventHandlers.push(new EventHandler(f.contentWindow, 'touchmove', (e) => mmi(handle, e, f)));
+                this.iframeEventHandlers.push(new EventHandler(f.contentWindow, 'touchend', (e) => this.onMouseUp(handle)));
+            }
+        }
         Utils.disableGlobalTextSelection(this.dockManager.config.dialogRootElement);
@@ -177,2 +197,6 @@ }
         delete handle.touchUpHandler;
+        for (let e of this.iframeEventHandlers) {
+            e.cancel();
+        }
+        this.iframeEventHandlers = [];
         Utils.enableGlobalTextSelection(this.dockManager.config.dialogRootElement);
@@ -179,0 +203,0 @@ }

package.json

 {
   "name": "dock-spawn-ts",
-  "version": "2.41.0",
+  "version": "2.42.0",
   "description": "DockSpawn Typescript Version",
@@ -5,0 +5,0 @@ "license": "MIT",

src/DraggableContainer.ts

@@ -27,3 +27,4 @@ import { Dialog } from "./Dialog.js";
     touchUpHandler: EventHandler;
-   
+    private iframeEventHandlers: EventHandler[];
+
     constructor(dialog: Dialog, delegate: IDockContainer, topLevelElement: HTMLElement, dragHandle: HTMLElement) {
@@ -41,2 +42,3 @@ this.dialog = dialog;
         this.minimumAllowedChildNodes = delegate.minimumAllowedChildNodes;
+        this.iframeEventHandlers = [];
     }
@@ -128,2 +130,12 @@
         this.touchUpHandler = new EventHandler(<Element>event.target, 'touchend', this.onMouseUp.bind(this));
+
+        if (this.dockManager.iframes) {
+            for (let f of this.dockManager.iframes) {
+                let mmi = this.onMouseMovedIframe.bind(this);
+                this.iframeEventHandlers.push(new EventHandler(f.contentWindow, 'mousemove', (e) => mmi(e, f)));
+                this.iframeEventHandlers.push(new EventHandler(f.contentWindow, 'mouseup', this.onMouseUp.bind(this)));
+                this.iframeEventHandlers.push(new EventHandler(f.contentWindow, 'touchmove', (e) => mmi(e, f)));
+                this.iframeEventHandlers.push(new EventHandler(f.contentWindow, 'touchend', this.onMouseUp.bind(this)));
+            }
+        }
     }
@@ -141,2 +153,6 @@
         delete this.touchUpHandler;
+        for (let e of this.iframeEventHandlers) {
+            e.cancel();
+        }
+        this.iframeEventHandlers = [];
     }
@@ -158,3 +174,8 @@
 
-    onMouseMove(event: TouchEvent | MouseEvent) {
+    onMouseMovedIframe(e: MouseEvent, iframe: HTMLIFrameElement) {
+        let posIf = iframe.getBoundingClientRect();
+        this.onMouseMove(e, { x: posIf.x, y: posIf.y });
+    }
+
+    onMouseMove(event: TouchEvent | MouseEvent, iframeOffset?: { x: number, y: number }) {
         let br = document.body.getBoundingClientRect();
@@ -190,2 +211,4 @@
         let currentMousePosition = new Point(touchOrMouseData.clientX, touchOrMouseData.clientY);
+        if (iframeOffset)
+            currentMousePosition = new Point(touchOrMouseData.clientX + iframeOffset.x, touchOrMouseData.clientY + iframeOffset.y);
 
@@ -192,0 +215,0 @@ let dx = this.dockManager.checkXBounds(this.topLevelElement, currentMousePosition, this.previousMousePosition, false, false);

src/ResizableContainer.ts

@@ -29,2 +29,3 @@ import { Dialog } from "./Dialog.js";
     previousMousePosition: Point;
+    private iframeEventHandlers: EventHandler[];
 
@@ -43,3 +44,4 @@ constructor(dialog: Dialog, delegate: IDockContainer, topLevelElement: HTMLElement) {
         this.readyToProcessNextResize = true;
-        this.dockSpawnResizedEvent = new CustomEvent("DockSpawnResizedEvent", { composed : true, bubbles : true });
+        this.dockSpawnResizedEvent = new CustomEvent("DockSpawnResizedEvent", { composed: true, bubbles: true });
+        this.iframeEventHandlers = [];
     }
@@ -141,3 +143,8 @@
 
-    onMouseMoved(handle: ResizeHandle, event: TouchEvent | MouseEvent) {
+    onMouseMovedIframe(handle, e: MouseEvent, iframe: HTMLIFrameElement) {
+        let posIf = iframe.getBoundingClientRect();
+        this.onMouseMoved(handle, e, { x: posIf.x, y: posIf.y });
+    }
+
+    onMouseMoved(handle: ResizeHandle, event: TouchEvent | MouseEvent, iframeOffset?: { x: number, y: number }) {
         let touchOrMouseData: { clientX: number, clientY: number } = null;
@@ -159,2 +166,4 @@ if ((<TouchEvent>event).changedTouches) {
         let currentMousePosition = new Point(touchOrMouseData.clientX, touchOrMouseData.clientY);
+        if (iframeOffset)
+            currentMousePosition = new Point(touchOrMouseData.clientX + iframeOffset.x, touchOrMouseData.clientY + iframeOffset.y);
         let dx = this.dockManager.checkXBounds(this.topLevelElement, currentMousePosition, this.previousMousePosition, handle.west, handle.east);
@@ -198,2 +207,6 @@ let dy = this.dockManager.checkYBounds(this.topLevelElement, currentMousePosition, this.previousMousePosition, handle.north, handle.south);
         }
+        for (let e of this.iframeEventHandlers) {
+            e.cancel();
+        }
+        this.iframeEventHandlers = [];
 
@@ -206,2 +219,12 @@ // Create the mouse event handlers
 
+        if (this.dockManager.iframes) {
+            for (let f of this.dockManager.iframes) {
+                let mmi = this.onMouseMovedIframe.bind(this);
+                this.iframeEventHandlers.push(new EventHandler(f.contentWindow, 'mousemove', (e) => mmi(handle, e, f)));
+                this.iframeEventHandlers.push(new EventHandler(f.contentWindow, 'mouseup', (e) => this.onMouseUp(handle)));
+                this.iframeEventHandlers.push(new EventHandler(f.contentWindow, 'touchmove', (e) => mmi(handle, e, f)));
+                this.iframeEventHandlers.push(new EventHandler(f.contentWindow, 'touchend', (e) => this.onMouseUp(handle)));
+            }
+        }
+
         Utils.disableGlobalTextSelection(this.dockManager.config.dialogRootElement);
@@ -219,2 +242,6 @@ }
         delete handle.touchUpHandler;
+        for (let e of this.iframeEventHandlers) {
+            e.cancel();
+        }
+        this.iframeEventHandlers = [];
 
@@ -221,0 +248,0 @@ Utils.enableGlobalTextSelection(this.dockManager.config.dialogRootElement);

No alert changes

Improved metrics

Total package byte prevSize

697859

1.8%

Lines of code

9835

1.18%

No dependency changes