@datagrok-libraries/dock-spawn-dg 0.0.2 → 0.1.0

package/{lib → src}/DockLayoutEngine.js

@@ -1,11 +1,15 @@
-import { DockNode } from './DockNode.js';
-import { Utils } from './Utils.js';
-import { HorizontalDockContainer } from './HorizontalDockContainer.js';
-import { VerticalDockContainer } from './VerticalDockContainer.js';
-import { FillDockContainer } from './FillDockContainer.js';
+import { DockNode } from "./DockNode";
+import { Utils } from "./Utils";
+import { HorizontalDockContainer } from "./HorizontalDockContainer";
+import { VerticalDockContainer } from "./VerticalDockContainer";
+import { FillDockContainer } from "./FillDockContainer";
 export class DockLayoutEngine {
-    dockManager;
     constructor(dockManager) {
+        this._forceResizeCompositeContainer = (container) => {
+            let width = container.containerElement.clientWidth;
+            let height = container.containerElement.clientHeight;
+            container.resize(width, height);
+        };
         this.dockManager = dockManager;
     }
     /** docks the [newNode] to the left of [referenceNode] */
@@ -29,26 +33,26 @@ export class DockLayoutEngine {
         this._performDock(referenceNode, newNode, 'fill', false);
     }
     undock(node) {
-        const parentNode = node.parent;
+        let parentNode = node.parent;
         if (!parentNode)
             throw new Error('Cannot undock.  panel is not a leaf node');
         // Get the position of the node relative to it's siblings
-        const siblingIndex = parentNode.children.indexOf(node);
+        let siblingIndex = parentNode.children.indexOf(node);
         // Detach the node from the dock manager's tree hierarchy
         node.detachFromParent();
         // Fix the node's parent hierarchy
         if (parentNode.children.length < parentNode.container.minimumAllowedChildNodes) {
             // If the child count falls below the minimum threshold, destroy the parent and merge
             // the children with their grandparents
-            const grandParent = parentNode.parent;
+            let grandParent = parentNode.parent;
             for (let i = 0; i < parentNode.children.length; i++) {
-                const otherChild = parentNode.children[i];
+                let otherChild = parentNode.children[i];
                 if (grandParent) {
                     // parent node is not a root node
                     grandParent.addChildAfter(parentNode, otherChild);
                     parentNode.detachFromParent();
-                    const width = parentNode.container.containerElement.clientWidth;
-                    const height = parentNode.container.containerElement.clientHeight;
+                    let width = parentNode.container.containerElement.clientWidth;
+                    let height = parentNode.container.containerElement.clientHeight;
                     parentNode.container.destroy();
                     otherChild.container.resize(width, height);
                     grandParent.performLayout(false);
@@ -68,7 +72,7 @@ export class DockLayoutEngine {
             parentNode.performLayout(false);
             // Set the next sibling as the active child (e.g. for a Tab host, it would select it as the active tab)
             if (parentNode.children.length > 0) {
-                const nextActiveSibling = parentNode.children[Math.max(0, siblingIndex - 1)];
+                let nextActiveSibling = parentNode.children[Math.max(0, siblingIndex - 1)];
                 parentNode.container.setActiveChild(nextActiveSibling.container);
             }
         }
@@ -76,33 +80,33 @@ export class DockLayoutEngine {
         this.dockManager.notifyOnUnDock(node);
     }
     close(node) {
-        const parentNode = node?.parent;
+        let parentNode = node === null || node === void 0 ? void 0 : node.parent;
         if (!parentNode)
             throw new Error('Cannot undock.  panel is not a leaf node');
         //check if closed tab was the active one
         let activetabClosed = false;
         if (parentNode.children.length > 0) {
             if (parentNode.container.tabHost != null) {
-                const activeTab = parentNode.container.tabHost.getActiveTab();
+                let activeTab = parentNode.container.tabHost.getActiveTab();
                 activetabClosed = activeTab.container == node.container;
             }
         }
         // Get the position of the node relative to it's siblings
-        const siblingIndex = parentNode.children.indexOf(node);
+        let siblingIndex = parentNode.children.indexOf(node);
         // Detach the node from the dock manager's tree hierarchy
         node.detachFromParent();
         if (parentNode.children.length < parentNode.container.minimumAllowedChildNodes) {
             // If the child count falls below the minimum threshold, destroy the parent and merge
             // the children with their grandparents
-            const grandParent = parentNode.parent;
+            let grandParent = parentNode.parent;
             for (let i = 0; i < parentNode.children.length; i++) {
-                const otherChild = parentNode.children[i];
+                let otherChild = parentNode.children[i];
                 if (grandParent) {
                     // parent node is not a root node
                     grandParent.addChildAfter(parentNode, otherChild);
                     parentNode.detachFromParent();
-                    const width = parentNode.container.containerElement.clientWidth;
-                    const height = parentNode.container.containerElement.clientHeight;
+                    let width = parentNode.container.containerElement.clientWidth;
+                    let height = parentNode.container.containerElement.clientHeight;
                     otherChild.container.resize(width, height);
                     parentNode.container.destroy();
                     grandParent.performLayout(false);
@@ -121,7 +125,7 @@ export class DockLayoutEngine {
             // using the parent composite container.
             parentNode.performLayout(false);
             if (activetabClosed) {
-                const nextActiveSibling = parentNode.children[Math.max(0, siblingIndex - 1)];
+                let nextActiveSibling = parentNode.children[Math.max(0, siblingIndex - 1)];
                 if (nextActiveSibling != null)
                     parentNode.container.setActiveChild(nextActiveSibling.container);
             }
@@ -130,14 +134,14 @@ export class DockLayoutEngine {
         this.dockManager.notifyOnUnDock(node);
     }
     reorderTabs(node, handle, state, index) {
-        const N = node.children.length;
-        const nodeIndexToDelete = state === 'left' ? index : index + 1;
+        let N = node.children.length;
+        let nodeIndexToDelete = state === 'left' ? index : index + 1;
         if (state == 'right' && nodeIndexToDelete >= node.children.length)
             return;
         if (state == 'left' && nodeIndexToDelete == 0)
             return;
-        const indexes = Array.apply(null, { length: N }).map(Number.call, Number);
-        const indexValue = indexes.splice(nodeIndexToDelete, 1)[0]; //remove element
+        let indexes = Array.apply(null, { length: N }).map(Number.call, Number);
+        let indexValue = indexes.splice(nodeIndexToDelete, 1)[0]; //remove element
         indexes.splice(state === 'left' ? index - 1 : index, 0, indexValue); //insert
         node.children = Utils.orderByIndexes(node.children, indexes); //apply
         node.container.tabHost.performTabsLayout(indexes);
@@ -155,10 +159,7 @@ export class DockLayoutEngine {
             return;
         }
         // Check if reference node is root node
-        const model = this.dockManager.context.model;
-        let compositeContainer;
-        let compositeNode;
-        let referenceParent;
+        let model = this.dockManager.context.model, compositeContainer, compositeNode, referenceParent;
         if (referenceNode === model.rootNode) {
             if (insertBeforeReference) {
                 compositeContainer = this._createDockContainer(direction, newNode, referenceNode);
@@ -183,11 +184,11 @@ export class DockLayoutEngine {
         if (referenceNode.parent.container.containerType !== direction) {
             referenceParent = referenceNode.parent;
             // Get the dimensions of the reference node, for resizing later on
-            const referenceNodeWidth = referenceNode.container.containerElement.clientWidth;
-            const referenceNodeHeight = referenceNode.container.containerElement.clientHeight;
+            let referenceNodeWidth = referenceNode.container.containerElement.clientWidth;
+            let referenceNodeHeight = referenceNode.container.containerElement.clientHeight;
             // Get the dimensions of the reference node, for resizing later on
-            const referenceNodeParentWidth = referenceParent.container.containerElement.clientWidth;
-            const referenceNodeParentHeight = referenceParent.container.containerElement.clientHeight;
+            let referenceNodeParentWidth = referenceParent.container.containerElement.clientWidth;
+            let referenceNodeParentHeight = referenceParent.container.containerElement.clientHeight;
             // Replace the reference node with a new composite node with the reference and new node as it's children
             compositeContainer = this._createDockContainer(direction, newNode, referenceNode);
             compositeNode = new DockNode(compositeContainer);
@@ -219,17 +220,12 @@ export class DockLayoutEngine {
             referenceParent.container.setActiveChild(newNode.container);
         }
         // force resize the panel
-        const containerWidth = newNode.container.containerElement.clientWidth;
-        const containerHeight = newNode.container.containerElement.clientHeight;
+        let containerWidth = newNode.container.containerElement.clientWidth;
+        let containerHeight = newNode.container.containerElement.clientHeight;
         newNode.container.resize(containerWidth, containerHeight);
         this.dockManager.invalidate();
         this.dockManager.notifyOnDock(newNode);
     }
-    _forceResizeCompositeContainer = (container) => {
-        const width = container.containerElement.clientWidth;
-        const height = container.containerElement.clientHeight;
-        container.resize(width, height);
-    };
     _createDockContainer(containerType, newNode, referenceNode) {
         if (containerType === 'horizontal')
             return new HorizontalDockContainer(this.dockManager, [newNode.container, referenceNode.container]);
@@ -240,10 +236,10 @@ export class DockLayoutEngine {
         throw new Error('Failed to create dock container of type: ' + containerType);
     }
     /**
-       * Gets the bounds of the new node if it were to dock with the specified configuration
-       * The state is not modified in this function.  It is used for showing a preview of where
-       * the panel would be docked when hovered over a dock wheel button
-       */
+     * Gets the bounds of the new node if it were to dock with the specified configuration
+     * The state is not modified in this function.  It is used for showing a preview of where
+     * the panel would be docked when hovered over a dock wheel button
+     */
     getDockBounds(referenceNode, containerToDock, direction, insertBeforeReference) {
         let compositeNode; // The node that contains the splitter / fill node
         let childCount;
@@ -252,9 +248,9 @@ export class DockLayoutEngine {
         if (direction === 'fill') {
             // Since this is a fill operation, the highlight bounds is the same as the reference node
             // TODO: Create a tab handle highlight to show that it's going to be docked in a tab
-            const targetElement = referenceNode.container.containerElement;
-            const outerRect = this.dockManager.element.getBoundingClientRect();
-            const targetElementRect = targetElement.getBoundingClientRect();
+            let targetElement = referenceNode.container.containerElement;
+            let outerRect = this.dockManager.element.getBoundingClientRect();
+            let targetElementRect = targetElement.getBoundingClientRect();
             return { x: targetElementRect.left - outerRect.left, y: targetElementRect.top - outerRect.top, width: targetElement.clientWidth, height: targetElement.clientHeight };
         }
         if (referenceNode.parent && referenceNode.parent.container.containerType === 'fill')
@@ -275,17 +271,17 @@ export class DockLayoutEngine {
             childPosition = (insertBeforeReference ? 0 : 1);
             hierarchyModified = true;
         }
-        const splitBarSize = 5; // TODO: Get from DOM
+        let splitBarSize = 5; // TODO: Get from DOM
         let targetPanelSize = 0;
         let targetPanelStart = 0;
         if (direction === 'vertical' || direction === 'horizontal') {
             // Existing size of the composite container (without the splitter bars).
             // This will also be the final size of the composite (splitter / fill)
             // container after the new panel has been docked
-            const compositeSize = this._getVaringDimension(compositeNode.container, direction) - (childCount - 1) * splitBarSize;
+            let compositeSize = this._getVaringDimension(compositeNode.container, direction) - (childCount - 1) * splitBarSize;
             // size of the newly added panel
-            const newPanelOriginalSize = this._getVaringDimension(containerToDock, direction);
-            const scaleMultiplier = compositeSize / (compositeSize + newPanelOriginalSize);
+            let newPanelOriginalSize = this._getVaringDimension(containerToDock, direction);
+            let scaleMultiplier = compositeSize / (compositeSize + newPanelOriginalSize);
             // Size of the panel after it has been docked and scaled
             targetPanelSize = newPanelOriginalSize * scaleMultiplier;
             if (hierarchyModified)
@@ -297,8 +293,8 @@ export class DockLayoutEngine {
             }
         }
         bounds = {};
-        const outerRect = this.dockManager.element.getBoundingClientRect();
-        const rect = compositeNode.container.containerElement.getBoundingClientRect();
+        let outerRect = this.dockManager.element.getBoundingClientRect();
+        let rect = compositeNode.container.containerElement.getBoundingClientRect();
         if (direction === 'vertical') {
             bounds.x = rect.left - outerRect.left;
             bounds.y = rect.top - outerRect.top + targetPanelStart;