dock-spawn-ts 3.19.0 → 3.21.0

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.
@@ -8,9 +9,11 @@ import { IDockContainer } from "./interfaces/IDockContainer.js";
  */
 export class SplitterPanel {
     panelElement: HTMLDivElement;
-    spiltterBars: SplitterBar[];
-    stackedVertical: boolean;
-    childContainers: IDockContainer[];
+    spiltterBars: SplitterBar[];
+    stackedVertical: boolean;
+    childContainers: IDockContainer[];
+    private preferredChildSizes = new WeakMap<IDockContainer, number>();
+    private preserveNonElasticSizes = false;
 
     constructor(childContainers: IDockContainer[], stackedVertical: boolean) {
         this.childContainers = childContainers;
@@ -45,10 +48,15 @@ export class SplitterPanel {
 
     performLayout(children: IDockContainer[], relayoutEvenIfEqual: boolean) {
         let containersEqual = Utils.arrayEqual(this.childContainers, children);
-        if (!containersEqual || relayoutEvenIfEqual) {
-            this.childContainers.forEach((container) => {
-                if (!children.some((item) => item == container)) {
-                    if (container.containerElement) {
+        if (!containersEqual || relayoutEvenIfEqual) {
+            if (!relayoutEvenIfEqual) {
+                this.preferredChildSizes = new WeakMap<IDockContainer, number>();
+                this.preserveNonElasticSizes = false;
+            }
+
+            this.childContainers.forEach((container) => {
+                if (!children.some((item) => item == container)) {
+                    if (container.containerElement) {
                         container.containerElement.classList.remove('splitter-container-vertical');
                         container.containerElement.classList.remove('splitter-container-horizontal');
                         Utils.removeNode(container.containerElement);
@@ -123,12 +131,14 @@ export class SplitterPanel {
             else
                 size = newContainerSize;
 
-            if (this.stackedVertical)
-                child.resize(child.width, Math.floor(size));
-            else
-                child.resize(Math.floor(size), child.height);
-        }
-    }
+            if (this.stackedVertical)
+                child.resize(child.width, Math.floor(size));
+            else
+                child.resize(Math.floor(size), child.height);
+            this.preferredChildSizes.set(child, Math.floor(size));
+        }
+        this.preserveNonElasticSizes = this.hasElasticChild();
+    }
 
     getRatios(): number[] {
         let barSize = this.stackedVertical ? this.spiltterBars[0].barElement.clientHeight : this.spiltterBars[0].barElement.clientWidth;
@@ -153,80 +163,147 @@ export class SplitterPanel {
             // Fix rounding error on last child so panels fill the available space exactly
             if (i === this.childContainers.length - 1)
                 size += splitPanelSize - updatedTotalSize;
-            if (this.stackedVertical)
-                child.resize(child.width, size);
-            else
-                child.resize(size, 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';
-
-        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;
+            if (this.stackedVertical)
+                child.resize(child.width, size);
+            else
+                child.resize(size, child.height);
+            this.preferredChildSizes.set(child, size);
+        }
+        this.preserveNonElasticSizes = this.hasElasticChild();
+    }
 
-
-        // 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;
+
+        if (!this.preserveNonElasticSizes || !this.hasElasticChild()) {
+            this.resizeProportionally(width, height, targetTotalChildPanelSize);
+            return;
+        }
+
+        let resizeIndex = this.getElasticChildIndex();
+        let childSizes = this.childContainers.map((container, index) => {
+            let currentSize = this.getChildSize(container);
+            if (index === resizeIndex)
+                return currentSize;
+            let preferredSize = this.preferredChildSizes.get(container);
+            if (preferredSize === undefined || currentSize > preferredSize)
+                preferredSize = currentSize;
+            this.preferredChildSizes.set(container, preferredSize);
+            return preferredSize;
+        });
+        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 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 resizeProportionally(width: number, height: number, targetTotalChildPanelSize: number) {
+        for (let 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);
+        }
+
+        let totalChildPanelSize = 0;
+        this.childContainers.forEach((container) => {
+            let size = this.stackedVertical ? container.height : container.width;
+            totalChildPanelSize += size;
+        });
+        totalChildPanelSize = Math.max(totalChildPanelSize, 1);
+        let scaleMultiplier = targetTotalChildPanelSize / totalChildPanelSize;
+
+        let updatedTotalChildPanelSize = 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 original = this.stackedVertical ? child.containerElement.clientHeight : child.containerElement.clientWidth;
+            let newSize = Math.floor(original * scaleMultiplier);
+            updatedTotalChildPanelSize += newSize;
+
+            if (i === this.childContainers.length - 1)
+                newSize += targetTotalChildPanelSize - updatedTotalChildPanelSize;
+
+            if (this.stackedVertical)
+                child.resize(child.width, newSize);
+            else
+                child.resize(newSize, child.height);
+            this.preferredChildSizes.set(child, newSize);
+        }
+    }
+
+    private hasElasticChild(): boolean {
+        return this.childContainers.some((container) =>
+            container.containerType === ContainerType.fill ||
+            container.containerType === ContainerType.horizontal ||
+            container.containerType === ContainerType.vertical);
+    }
+
+    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;
+    }
+
+    private getChildSize(container: IDockContainer): number {
+        return this.stackedVertical ? container.height : container.width;
+    }
+}