dock-spawn-ts 3.17.2 → 3.19.0

package/src/DraggableContainer.ts

@@ -16,12 +16,13 @@ export class DraggableContainer implements IDockContainer {
     dockManager: DockManager;
     topLevelElement: HTMLElement;
     containerType: ContainerType;
-    mouseDownHandler: EventHandler;
-    touchDownHandler: EventHandler;
-    minimumAllowedChildNodes: number;
-    previousMousePosition: { x: any; y: any; };
-    mouseMoveHandler: EventHandler;
-    mouseUpHandler: EventHandler;
+    mouseDownHandler: EventHandler;
+    touchDownHandler: EventHandler;
+    minimumAllowedChildNodes: number;
+    previousMousePosition: { x: any; y: any; };
+    dragOffset: Point;
+    mouseMoveHandler: EventHandler;
+    mouseUpHandler: EventHandler;
     private iframeEventHandlers: EventHandler[];
 
     constructor(dialog: Dialog, delegate: PanelContainer, topLevelElement: HTMLElement, dragHandle: HTMLElement) {
@@ -95,12 +96,13 @@ export class DraggableContainer implements IDockContainer {
             return;
         if (event.preventDefault)
             event.preventDefault();
-
-        this._startDragging(event);
-        this.previousMousePosition = { x: event.clientX, y: event.clientY };
-        if (this.mouseMoveHandler) {
-            this.mouseMoveHandler.cancel();
-            delete this.mouseMoveHandler;
+
+        this._startDragging(event);
+        this.previousMousePosition = { x: event.clientX, y: event.clientY };
+        this.setDragOffset(event.clientX, event.clientY);
+        if (this.mouseMoveHandler) {
+            this.mouseMoveHandler.cancel();
+            delete this.mouseMoveHandler;
         }
         if (this.mouseUpHandler) {
             this.mouseUpHandler.cancel();
@@ -157,21 +159,54 @@ export class DraggableContainer implements IDockContainer {
             event.preventDefault();
 
         let currentMousePosition = new Point(event.clientX, event.clientY);
-        if (iframeOffset)
-            currentMousePosition = new Point(event.clientX + iframeOffset.x, event.clientY + iframeOffset.y);
-
-        let dx = this.dockManager.checkXBounds(this.topLevelElement, currentMousePosition, this.previousMousePosition, false, false);
-        let dy = this.dockManager.checkYBounds(this.topLevelElement, currentMousePosition, this.previousMousePosition, false, false);
-        this._performDrag(dx, dy);
-        this.previousMousePosition = currentMousePosition;
-    }
-
-    _performDrag(dx: number, dy: number) {
-        let left = dx + Utils.getPixels(this.topLevelElement.style.left);
-        let top = dy + Utils.getPixels(this.topLevelElement.style.top);
-        this.topLevelElement.style.left = left + 'px';
-        this.topLevelElement.style.top = top + 'px';
-
+        if (iframeOffset)
+            currentMousePosition = new Point(event.clientX + iframeOffset.x, event.clientY + iframeOffset.y);
+
+        this._performDragToMouse(currentMousePosition);
+        this.previousMousePosition = currentMousePosition;
+    }
+
+    setDragOffset(clientX: number, clientY: number) {
+        const rect = this.topLevelElement.getBoundingClientRect();
+        this.dragOffset = new Point(clientX - rect.left, clientY - rect.top);
+    }
+
+    _performDragToMouse(mousePosition: Point) {
+        const rootRect = this.dockManager.config.dialogRootElement.getBoundingClientRect();
+        let left = mousePosition.x - rootRect.left - this.dragOffset.x;
+        let top = mousePosition.y - rootRect.top - this.dragOffset.y;
+        const constrained = this.constrainDragPosition(left, top);
+        this._setPosition(constrained.x, constrained.y);
+    }
+
+    private constrainDragPosition(left: number, top: number) {
+        if (this.dockManager.config.moveOnlyWithinDockConatiner) {
+            const rootRect = this.dockManager.config.dialogRootElement.getBoundingClientRect();
+            left = Math.min(Math.max(left, 0), Math.max(0, rootRect.width - this.topLevelElement.offsetWidth));
+            top = Math.min(Math.max(top, 0), Math.max(0, rootRect.height - this.topLevelElement.offsetHeight));
+            return new Point(left, top);
+        }
+
+        const rootRect = this.dockManager.config.dialogRootElement.getBoundingClientRect();
+        const minLeft = 40 - this.topLevelElement.offsetWidth - rootRect.left;
+        const maxLeft = window.innerWidth - 40 - rootRect.left;
+        const minTop = -rootRect.top;
+        const maxTop = window.innerHeight - 16 - rootRect.top;
+        left = Math.min(Math.max(left, minLeft), maxLeft);
+        top = Math.min(Math.max(top, minTop), maxTop);
+        return new Point(left, top);
+    }
+
+    _performDrag(dx: number, dy: number) {
+        let left = dx + Utils.getPixels(this.topLevelElement.style.left);
+        let top = dy + Utils.getPixels(this.topLevelElement.style.top);
+        this._setPosition(left, top);
+    }
+
+    private _setPosition(left: number, top: number) {
+        this.topLevelElement.style.left = left + 'px';
+        this.topLevelElement.style.top = top + 'px';
+
         this.dialog.panel.setDialogPosition(left, top);
     }
-}
+}

package/src/PanelContainer.ts

@@ -391,7 +391,7 @@ export class PanelContainer implements IDockContainerWithSize, IContextMenuProvi
         this.isDialog = true;
         this.undockInitiator.enabled = false;
         this.elementContentWrapper.style.display = "block";
-        this.elementContentContainer.style.visibility = 'hidden';
+        this.elementContentContainer.style.display = 'none';
         this.elementPanel.style.position = "";
         this.dockManager.requestClose(this);
     }
@@ -499,7 +499,7 @@ export class PanelContainer implements IDockContainerWithSize, IContextMenuProvi
     }
 
     setVisible(isVisible: boolean) {
-        this.elementContentContainer.style.visibility = isVisible ? '' : 'hidden';
+        this.elementContentContainer.style.display = isVisible ? '' : 'none';
     }
 
     setTitle(title: string) {

package/src/SplitterBar.ts

@@ -76,11 +76,11 @@ export class SplitterBar {
         dockManager.resumeLayout(this.nextContainer);
     }
 
-    _performDrag(dx: number, dy: number) {
-        let previousWidth = this.previousContainer.containerElement.clientWidth;
-        let previousHeight = this.previousContainer.containerElement.clientHeight;
-        let nextWidth = this.nextContainer.containerElement.clientWidth;
-        let nextHeight = this.nextContainer.containerElement.clientHeight;
+    _performDrag(dx: number, dy: number) {
+        let previousWidth = this.getContainerWidth(this.previousContainer);
+        let previousHeight = this.getContainerHeight(this.previousContainer);
+        let nextWidth = this.getContainerWidth(this.nextContainer);
+        let nextHeight = this.getContainerHeight(this.nextContainer);
 
         let previousPanelSize = this.stackedVertical ? previousHeight : previousWidth;
         let nextPanelSize = this.stackedVertical ? nextHeight : nextWidth;
@@ -112,11 +112,19 @@ export class SplitterBar {
                 this.nextContainer.resize(newNextPanelSize, nextHeight);
             }
         }
-
-        document.dispatchEvent(this.dockSpawnResizedEvent);
-    }
-
-    _startDragging(e: IMouseOrTouchEvent) {
+
+        document.dispatchEvent(this.dockSpawnResizedEvent);
+    }
+
+    private getContainerWidth(container: IDockContainer) {
+        return container.width || container.containerElement.getBoundingClientRect().width;
+    }
+
+    private getContainerHeight(container: IDockContainer) {
+        return container.height || container.containerElement.getBoundingClientRect().height;
+    }
+
+    _startDragging(e: IMouseOrTouchEvent) {
         Utils.disableGlobalTextSelection(this.previousContainer.dockManager.config.dialogRootElement);
         if (this.pointerMovedHandler) {
             this.pointerMovedHandler.cancel();
@@ -155,4 +163,4 @@ export class SplitterBar {
         }
         this.iframeEventHandlers = [];
     }
-}
+}

package/src/TabHandle.ts

@@ -212,11 +212,15 @@ export class TabHandle {
         this.touchUpHandler = new EventHandler(window, 'touchend', this.onMouseUp.bind(this));
     }
 
-    onMouseUp() {
-        if (this.elementBase) {
-            this.elementBase.classList.remove('dockspan-tab-handle-dragged');
-        }
-        this.dragged = false;
+    onMouseUp() {
+        this.cancelTabDrag();
+    }
+
+    private cancelTabDrag() {
+        if (this.elementBase) {
+            this.elementBase.classList.remove('dockspan-tab-handle-dragged');
+        }
+        this.dragged = false;
         if (this.mouseMoveHandler)
             this.mouseMoveHandler.cancel();
         if (this.touchMoveHandler)
@@ -225,11 +229,11 @@ export class TabHandle {
             this.mouseUpHandler.cancel();
         if (this.touchUpHandler)
             this.touchUpHandler.cancel();
-        delete this.mouseMoveHandler;
-        delete this.touchMoveHandler;
-        delete this.mouseUpHandler;
-        delete this.touchUpHandler;
-    }
+        delete this.mouseMoveHandler;
+        delete this.touchMoveHandler;
+        delete this.mouseUpHandler;
+        delete this.touchUpHandler;
+    }
 
     moveTabEvent(that, state) {
         that.eventListeners.forEach((listener) => {
@@ -312,12 +316,13 @@ export class TabHandle {
         }
     }
 
-    _performUndock(e, dragOffset) {
-        if (this.parent.container.containerType === 'panel') {
-            this.undockInitiator.enabled = false;
-            let panel = this.parent.container as PanelContainer;
-            return panel.performUndockToDialog(e, dragOffset);
-        }
+    _performUndock(e, dragOffset) {
+        if (this.parent.container.containerType === 'panel') {
+            this.undockInitiator.enabled = false;
+            this.cancelTabDrag();
+            let panel = this.parent.container as PanelContainer;
+            return panel.performUndockToDialog(e, dragOffset);
+        }
         else
             return null;
     }
@@ -351,4 +356,4 @@ export class TabHandle {
                 this.elementBase.classList.remove('dockspan-tab-handle-active');
         }
     }
-}
+}