dock-spawn-ts - npm Package Compare versions

Comparing version 2.22.0 to 2.23.0

lib/js/DockLayoutEngine.d.ts

@@ -27,3 +27,3 @@ import { DockManager } from "./DockManager.js";
     _forceResizeCompositeContainer: (container: IDockContainer) => void;
-    _createDockContainer(containerType: string, newNode: DockNode, referenceNode: DockNode): FillDockContainer | HorizontalDockContainer | VerticalDockContainer;
+    _createDockContainer(containerType: string, newNode: DockNode, referenceNode: DockNode): FillDockContainer | VerticalDockContainer | HorizontalDockContainer;
     /**
@@ -30,0 +30,0 @@ * Gets the bounds of the new node if it were to dock with the specified configuration

lib/js/DockLayoutEngine.js

@@ -151,3 +151,2 @@ import { DockNode } from "./DockNode.js";
     _performDock(referenceNode, newNode, direction, insertBeforeReference) {
-        //(<PanelContainer>newNode.container).elementPanel.style.position = "relative";
         if (referenceNode.parent && referenceNode.parent.container.containerType === 'fill')
@@ -166,4 +165,2 @@ referenceNode = referenceNode.parent;
         if (referenceNode === model.rootNode) {
-            //compositeContainer = this._createDockContainer(direction, newNode, referenceNode);
-            //compositeNode = new DockNode(compositeContainer);
             if (insertBeforeReference) {
@@ -170,0 +167,0 @@ compositeContainer = this._createDockContainer(direction, newNode, referenceNode);

lib/js/DockManager.js

@@ -222,19 +222,19 @@ import { DockWheel } from "./DockWheel.js";
     dockLeft(referenceNode, container, ratio) {
-        return this._requestDockContainer(referenceNode, container, this.layoutEngine.dockLeft.bind(this.layoutEngine), ratio);
+        return this._requestDockContainer(referenceNode, container, this.layoutEngine.dockLeft.bind(this.layoutEngine), false, ratio);
     }
     /** Dock the [container] to the right of the [referenceNode] node */
     dockRight(referenceNode, container, ratio) {
-        return this._requestDockContainer(referenceNode, container, this.layoutEngine.dockRight.bind(this.layoutEngine), ratio);
+        return this._requestDockContainer(referenceNode, container, this.layoutEngine.dockRight.bind(this.layoutEngine), true, ratio);
     }
     /** Dock the [container] above the [referenceNode] node */
     dockUp(referenceNode, container, ratio) {
-        return this._requestDockContainer(referenceNode, container, this.layoutEngine.dockUp.bind(this.layoutEngine), ratio);
+        return this._requestDockContainer(referenceNode, container, this.layoutEngine.dockUp.bind(this.layoutEngine), false, ratio);
     }
     /** Dock the [container] below the [referenceNode] node */
     dockDown(referenceNode, container, ratio) {
-        return this._requestDockContainer(referenceNode, container, this.layoutEngine.dockDown.bind(this.layoutEngine), ratio);
+        return this._requestDockContainer(referenceNode, container, this.layoutEngine.dockDown.bind(this.layoutEngine), true, ratio);
     }
     /** Dock the [container] as a tab inside the [referenceNode] node */
     dockFill(referenceNode, container) {
-        return this._requestDockContainer(referenceNode, container, this.layoutEngine.dockFill.bind(this.layoutEngine));
+        return this._requestDockContainer(referenceNode, container, this.layoutEngine.dockFill.bind(this.layoutEngine), false);
     }
@@ -286,3 +286,3 @@ floatDialog(container, x, y) {
     }
-    _requestDockContainer(referenceNode, container, layoutDockFunction, ratio) {
+    _requestDockContainer(referenceNode, container, layoutDockFunction, dockedToPrevious, ratio) {
         // Get the active dialog that was dragged on to the dock wheel
@@ -295,7 +295,25 @@ let newNode = new DockNode(container);
         }
+        let ratios = null;
+        let oldSplitter;
+        if (referenceNode.parent && referenceNode.parent.container) {
+            oldSplitter = referenceNode.parent.container;
+            if (oldSplitter.getRatios)
+                ratios = oldSplitter.getRatios();
+        }
         layoutDockFunction(referenceNode, newNode);
-        if (ratio && newNode.parent &&
-            (newNode.parent.container.containerType === 'vertical' || newNode.parent.container.containerType === 'horizontal')) {
+        if (ratio && newNode.parent && (newNode.parent.container.containerType === 'vertical' || newNode.parent.container.containerType === 'horizontal')) {
             let splitter = newNode.parent.container;
-            splitter.setContainerRatio(container, ratio);
+            if (ratios && oldSplitter == splitter) {
+                if (dockedToPrevious) {
+                    ratios[ratios.length - 1] = ratios[ratios.length - 1] - ratio;
+                    ratios.push(ratio);
+                }
+                else {
+                    ratios[0] = ratios[0] - ratio;
+                    ratios.unshift(ratio);
+                }
+                splitter.setRatios(ratios);
+            }
+            else
+                splitter.setContainerRatio(container, ratio);
         }
@@ -302,0 +320,0 @@ this.rebuildLayout(this.context.model.rootNode);

lib/js/SplitterDockContainer.d.ts

@@ -29,2 +29,4 @@ import { DockManager } from "./DockManager.js";
     setContainerRatio(container: IDockContainer, ratio: number): void;
+    getRatios(): number[];
+    setRatios(ratios: number[]): void;
     saveState(state: IState): void;
@@ -31,0 +33,0 @@ loadState(state: IState): void;

lib/js/SplitterDockContainer.js

@@ -40,2 +40,9 @@ import { SplitterPanel } from "./SplitterPanel.js";
     }
+    getRatios() {
+        return this.splitterPanel.getRatios();
+    }
+    setRatios(ratios) {
+        this.splitterPanel.setRatios(ratios);
+        this.resize(this.width, this.height);
+    }
     saveState(state) {
@@ -42,0 +49,0 @@ state.width = this.width;

lib/js/SplitterPanel.d.ts

@@ -23,3 +23,5 @@ import { SplitterBar } from "./SplitterBar.js";
     setContainerRatio(container: IDockContainer, ratio: number): void;
+    getRatios(): number[];
+    setRatios(ratios: number[]): void;
     resize(width: number, height: number): void;
 }

lib/js/SplitterPanel.js

@@ -92,4 +92,3 @@ import { SplitterBar } from "./SplitterBar.js";
         let newContainerSize = splitPanelSize * ratio;
-        let barSize = this.stackedVertical ?
-            this.spiltterBars[0].barElement.clientHeight : this.spiltterBars[0].barElement.clientWidth;
+        let barSize = this.stackedVertical ? this.spiltterBars[0].barElement.clientHeight : this.spiltterBars[0].barElement.clientWidth;
         let otherPanelSizeQuota = splitPanelSize - newContainerSize - barSize * this.spiltterBars.length;
@@ -112,2 +111,25 @@ let otherPanelScaleMultipler = otherPanelSizeQuota / splitPanelSize;
     }
+    getRatios() {
+        let barSize = this.stackedVertical ? this.spiltterBars[0].barElement.clientHeight : this.spiltterBars[0].barElement.clientWidth;
+        let splitPanelSize = (this.stackedVertical ? this.panelElement.clientHeight : this.panelElement.clientWidth) - barSize * this.spiltterBars.length;
+        let result = [];
+        for (let i = 0; i < this.childContainers.length; i++) {
+            let child = this.childContainers[i];
+            let sizeOld = this.stackedVertical ? child.containerElement.clientHeight : child.containerElement.clientWidth;
+            result.push(sizeOld / splitPanelSize);
+        }
+        return result;
+    }
+    setRatios(ratios) {
+        let barSize = this.stackedVertical ? this.spiltterBars[0].barElement.clientHeight : this.spiltterBars[0].barElement.clientWidth;
+        let splitPanelSize = (this.stackedVertical ? this.panelElement.clientHeight : this.panelElement.clientWidth) - barSize * this.spiltterBars.length;
+        for (let i = 0; i < this.childContainers.length; i++) {
+            let child = this.childContainers[i];
+            let size = splitPanelSize * ratios[i];
+            if (this.stackedVertical)
+                child.resize(child.width, Math.floor(size));
+            else
+                child.resize(Math.floor(size), child.height);
+        }
+    }
     resize(width, height) {
@@ -114,0 +136,0 @@ if (this.childContainers.length <= 1)

package.json

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

src/DockLayoutEngine.ts

@@ -175,4 +175,2 @@ import { DockManager } from "./DockManager.js";
     _performDock(referenceNode: DockNode, newNode: DockNode, direction: string, insertBeforeReference: boolean) {
-        //(<PanelContainer>newNode.container).elementPanel.style.position = "relative";
-
         if (referenceNode.parent && referenceNode.parent.container.containerType === 'fill')
@@ -197,5 +195,2 @@ referenceNode = referenceNode.parent;
         if (referenceNode === model.rootNode) {
-            //compositeContainer = this._createDockContainer(direction, newNode, referenceNode);
-            //compositeNode = new DockNode(compositeContainer);
-
             if (insertBeforeReference) {
@@ -202,0 +197,0 @@ compositeContainer = this._createDockContainer(direction, newNode, referenceNode);

src/DockManager.ts

@@ -278,3 +278,3 @@ import { DockWheel } from "./DockWheel.js";
     dockLeft(referenceNode: DockNode, container: PanelContainer, ratio: number) {
-        return this._requestDockContainer(referenceNode, container, this.layoutEngine.dockLeft.bind(this.layoutEngine), ratio);
+        return this._requestDockContainer(referenceNode, container, this.layoutEngine.dockLeft.bind(this.layoutEngine), false, ratio);
     }
@@ -284,3 +284,3 @@
     dockRight(referenceNode: DockNode, container: PanelContainer, ratio: number) {
-        return this._requestDockContainer(referenceNode, container, this.layoutEngine.dockRight.bind(this.layoutEngine), ratio);
+        return this._requestDockContainer(referenceNode, container, this.layoutEngine.dockRight.bind(this.layoutEngine), true, ratio);
     }
@@ -290,3 +290,3 @@
     dockUp(referenceNode: DockNode, container: PanelContainer, ratio: number) {
-        return this._requestDockContainer(referenceNode, container, this.layoutEngine.dockUp.bind(this.layoutEngine), ratio);
+        return this._requestDockContainer(referenceNode, container, this.layoutEngine.dockUp.bind(this.layoutEngine), false, ratio);
     }
@@ -296,3 +296,3 @@
     dockDown(referenceNode: DockNode, container: PanelContainer, ratio: number) {
-        return this._requestDockContainer(referenceNode, container, this.layoutEngine.dockDown.bind(this.layoutEngine), ratio);
+        return this._requestDockContainer(referenceNode, container, this.layoutEngine.dockDown.bind(this.layoutEngine), true, ratio);
     }
@@ -302,3 +302,3 @@
     dockFill(referenceNode: DockNode, container: PanelContainer) {
-        return this._requestDockContainer(referenceNode, container, this.layoutEngine.dockFill.bind(this.layoutEngine));
+        return this._requestDockContainer(referenceNode, container, this.layoutEngine.dockFill.bind(this.layoutEngine), false);
     }
@@ -354,3 +354,3 @@
 
-    private _requestDockContainer(referenceNode: DockNode, container: IDockContainer, layoutDockFunction: (referenceNode: DockNode, newNode: DockNode) => void, ratio?: number) {
+    private _requestDockContainer(referenceNode: DockNode, container: IDockContainer, layoutDockFunction: (referenceNode: DockNode, newNode: DockNode) => void, dockedToPrevious: boolean, ratio?: number) {
         // Get the active dialog that was dragged on to the dock wheel
@@ -363,8 +363,27 @@ let newNode = new DockNode(container);
         }
+
+        let ratios: number[] = null;
+        let oldSplitter: SplitterDockContainer;
+        if (referenceNode.parent && referenceNode.parent.container) {
+            oldSplitter = referenceNode.parent.container as SplitterDockContainer;
+            if (oldSplitter.getRatios)
+                ratios = oldSplitter.getRatios();
+        }
+
         layoutDockFunction(referenceNode, newNode);
 
-        if (ratio && newNode.parent &&
-            (newNode.parent.container.containerType === 'vertical' || newNode.parent.container.containerType === 'horizontal')) {
+        if (ratio && newNode.parent && (newNode.parent.container.containerType === 'vertical' || newNode.parent.container.containerType === 'horizontal')) {
             let splitter = newNode.parent.container as SplitterDockContainer;
-            splitter.setContainerRatio(container, ratio);
+            if (ratios && oldSplitter == splitter) {
+                if (dockedToPrevious) {
+                    ratios[ratios.length - 1] = ratios[ratios.length - 1] - ratio;
+                    ratios.push(ratio);
+                } else {
+                    ratios[0] = ratios[0] - ratio;
+                    ratios.unshift(ratio);
+                }
+                splitter.setRatios(ratios);
+            }
+            else
+                splitter.setContainerRatio(container, ratio);
         }
@@ -371,0 +390,0 @@

src/SplitterDockContainer.ts

@@ -65,2 +65,11 @@ import { DockManager } from "./DockManager.js";
 
+    getRatios() : number[] {
+        return this.splitterPanel.getRatios();
+    }
+
+    setRatios(ratios: number[]) {
+        this.splitterPanel.setRatios(ratios);
+        this.resize(this.width, this.height);
+    }
+
     saveState(state: IState) {
@@ -67,0 +76,0 @@ state.width = this.width;

src/SplitterPanel.ts

@@ -112,5 +112,3 @@ import { SplitterBar } from "./SplitterBar.js";
         let newContainerSize = splitPanelSize * ratio;
-        let barSize = this.stackedVertical ?
-            this.spiltterBars[0].barElement.clientHeight : this.spiltterBars[0].barElement.clientWidth;
-
+        let barSize = this.stackedVertical ? this.spiltterBars[0].barElement.clientHeight : this.spiltterBars[0].barElement.clientWidth;
         let otherPanelSizeQuota = splitPanelSize - newContainerSize - barSize * this.spiltterBars.length;
@@ -136,2 +134,27 @@ let otherPanelScaleMultipler = otherPanelSizeQuota / splitPanelSize;
 
+    getRatios(): number[] {
+        let barSize = this.stackedVertical ? this.spiltterBars[0].barElement.clientHeight : this.spiltterBars[0].barElement.clientWidth;
+        let splitPanelSize = (this.stackedVertical ? this.panelElement.clientHeight : this.panelElement.clientWidth) - barSize * this.spiltterBars.length;
+        let result: number[] = [];
+        for (let i = 0; i < this.childContainers.length; i++) {
+            let child = this.childContainers[i];
+            let sizeOld = this.stackedVertical ? child.containerElement.clientHeight : child.containerElement.clientWidth;
+            result.push(sizeOld / splitPanelSize);
+        }
+        return result;
+    }
+
+    setRatios(ratios: number[]) {
+        let barSize = this.stackedVertical ? this.spiltterBars[0].barElement.clientHeight : this.spiltterBars[0].barElement.clientWidth;
+        let splitPanelSize = (this.stackedVertical ? this.panelElement.clientHeight : this.panelElement.clientWidth) - barSize * this.spiltterBars.length;
+        for (let i = 0; i < this.childContainers.length; i++) {
+            let child = this.childContainers[i];
+            let size = splitPanelSize * ratios[i];
+            if (this.stackedVertical)
+                child.resize(child.width, Math.floor(size));
+            else
+                child.resize(Math.floor(size), child.height);
+        }
+    }
+
     resize(width: number, height: number) {
@@ -138,0 +161,0 @@ if (this.childContainers.length <= 1)

No alert changes

Improved metrics

Total package byte prevSize

658316

increased by1.26%

Lines of code

9382

increased by1.03%

No dependency changes