dock-spawn-ts 3.18.0 → 3.20.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/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/SplitterPanel.ts

@@ -1,6 +1,7 @@
-import { SplitterBar } from "./SplitterBar.js";
-import { Utils } from "./Utils.js";
-import { IDockContainer } from "./interfaces/IDockContainer.js";
+import { SplitterBar } from "./SplitterBar.js";
+import { Utils } from "./Utils.js";
+import { ContainerType } from "./ContainerType.js";
+import { IDockContainer } from "./interfaces/IDockContainer.js";
 
 /**
  * A splitter panel manages the child containers inside it with splitter bars.
@@ -160,73 +161,76 @@ export class SplitterPanel {
         }
     }
 
-    resize(width: number, height: number) {
-        if (this.childContainers.length <= 1)
-            return;
-
-        this.panelElement.style.width = width + 'px';
-        this.panelElement.style.height = height + 'px';
-
-        let i;
-
-        // Adjust the fixed dimension that is common to all (i.e. width, if stacked vertical; height, if stacked horizontally)
-        for (i = 0; i < this.childContainers.length; i++) {
-            let childContainer = this.childContainers[i];
-            if (this.stackedVertical)
-                childContainer.resize(width, !childContainer.height ? height : childContainer.height);
-            else
-                childContainer.resize(!childContainer.width ? width : childContainer.width, height);
-
-            if (i < this.spiltterBars.length) {
-                let splitBar = this.spiltterBars[i];
-                if (this.stackedVertical)
-                    splitBar.barElement.style.width = width + 'px';
-                else
-                    splitBar.barElement.style.height = height + 'px';
-            }
-        }
-
-        // Adjust the varying dimension
-        let totalChildPanelSize = 0;
-        // Find out how much space existing child containers take up (excluding the splitter bars)
-        this.childContainers.forEach((container) => {
-            let size = this.stackedVertical ?
-                container.height :
-                container.width;
-            totalChildPanelSize += size;
-        });
-
-        // Get the thickness of the bar
-        let barSize = this.stackedVertical ? this.spiltterBars[0].barElement.clientHeight : this.spiltterBars[0].barElement.clientWidth;
-
-        // Find out how much space existing child containers will take after being resized (excluding the splitter bars)
-        let targetTotalChildPanelSize = this.stackedVertical ? height : width;
-        targetTotalChildPanelSize -= barSize * this.spiltterBars.length;
-
-        // Get the scale multiplier
-        totalChildPanelSize = Math.max(totalChildPanelSize, 1);
-        let scaleMultiplier = targetTotalChildPanelSize / totalChildPanelSize;
-
-
-        // Update the size with this multiplier
-        let updatedTotalChildPanelSize = 0;
-        for (i = 0; i < this.childContainers.length; i++) {
-            let child = this.childContainers[i];
-            if (child.containerElement.style.display == 'none')
-                child.containerElement.style.display = 'block';
-            let original = this.stackedVertical ? child.containerElement.clientHeight : child.containerElement.clientWidth;
-            let newSize = Math.floor(original * scaleMultiplier);
-            updatedTotalChildPanelSize += newSize;
-
-            // If this is the last node, add any extra pixels to fix the rounding off errors and match the requested size
-            if (i === this.childContainers.length - 1)
-                newSize += targetTotalChildPanelSize - updatedTotalChildPanelSize;
-
-            // Set the size of the panel
-            if (this.stackedVertical)
-                child.resize(child.width, newSize);
-            else
-                child.resize(newSize, child.height);
-        }
-    }
-}
+    resize(width: number, height: number) {
+        if (this.childContainers.length <= 1)
+            return;
+
+        this.panelElement.style.width = width + 'px';
+        this.panelElement.style.height = height + 'px';
+
+        for (let i = 0; i < this.childContainers.length; i++) {
+            if (i < this.spiltterBars.length) {
+                let splitBar = this.spiltterBars[i];
+                if (this.stackedVertical)
+                    splitBar.barElement.style.width = width + 'px';
+                else
+                    splitBar.barElement.style.height = height + 'px';
+            }
+        }
+
+        let barSize = this.stackedVertical ? this.spiltterBars[0].barElement.clientHeight : this.spiltterBars[0].barElement.clientWidth;
+        let targetTotalChildPanelSize = this.stackedVertical ? height : width;
+        targetTotalChildPanelSize -= barSize * this.spiltterBars.length;
+
+        let childSizes = this.childContainers.map((container) => this.stackedVertical ? container.height : container.width);
+        let totalChildPanelSize = childSizes.reduce((sum, size) => sum + size, 0);
+        if (totalChildPanelSize <= 0) {
+            let size = targetTotalChildPanelSize / this.childContainers.length;
+            childSizes = this.childContainers.map(() => size);
+            totalChildPanelSize = targetTotalChildPanelSize;
+        }
+
+        let resizeIndex = this.getElasticChildIndex();
+        let sizeDelta = targetTotalChildPanelSize - totalChildPanelSize;
+        childSizes[resizeIndex] += sizeDelta;
+        if (childSizes[resizeIndex] < 0) {
+            let deficit = -childSizes[resizeIndex];
+            childSizes[resizeIndex] = 0;
+            for (let i = this.childContainers.length - 1; i >= 0 && deficit > 0; i--) {
+                if (i === resizeIndex)
+                    continue;
+                let reduction = Math.min(childSizes[i], deficit);
+                childSizes[i] -= reduction;
+                deficit -= reduction;
+            }
+        }
+
+        childSizes = childSizes.map((size) => Math.floor(size));
+        childSizes[resizeIndex] += targetTotalChildPanelSize - childSizes.reduce((sum, size) => sum + size, 0);
+
+        for (let i = 0; i < this.childContainers.length; i++) {
+            let child = this.childContainers[i];
+            if (child.containerElement.style.display == 'none')
+                child.containerElement.style.display = 'block';
+            let newSize = childSizes[i];
+
+            if (this.stackedVertical)
+                child.resize(width, newSize);
+            else
+                child.resize(newSize, height);
+        }
+    }
+
+    private getElasticChildIndex(): number {
+        let fillIndex = this.childContainers.findIndex((container) => container.containerType === ContainerType.fill);
+        if (fillIndex >= 0)
+            return fillIndex;
+
+        let compositeIndex = this.childContainers.findIndex((container) =>
+            container.containerType === ContainerType.horizontal || container.containerType === ContainerType.vertical);
+        if (compositeIndex >= 0)
+            return compositeIndex;
+
+        return this.childContainers.length - 1;
+    }
+}

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');
         }
     }
-}
+}