dockview 1.7.5 → 1.7.6

package/dist/dockview.amd.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.7.5
+ * @version 1.7.6
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -910,7 +910,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 //add sash
                 const sash = document.createElement('div');
                 sash.className = 'sash';
-                const onStart = (event) => {
+                const onPointerStart = (event) => {
                     for (const item of this.viewItems) {
                         item.enabled = false;
                     }
@@ -969,11 +969,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                             size: snappedViewItem.size,
                         };
                     }
-                    //
-                    const mousemove = (mousemoveEvent) => {
+                    const onPointerMove = (event) => {
                         const current = this._orientation === exports.Orientation.HORIZONTAL
-                            ? mousemoveEvent.clientX
-                            : mousemoveEvent.clientY;
+                            ? event.clientX
+                            : event.clientY;
                         const delta = current - start;
                         this.resize(sashIndex, delta, sizes, undefined, undefined, minDelta, maxDelta, snapBefore, snapAfter);
                         this.distributeEmptySpace();
@@ -987,18 +986,20 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                             iframe.style.pointerEvents = 'auto';
                         }
                         this.saveProportions();
-                        document.removeEventListener('mousemove', mousemove);
-                        document.removeEventListener('mouseup', end);
+                        document.removeEventListener('pointermove', onPointerMove);
+                        document.removeEventListener('pointerup', end);
+                        document.removeEventListener('pointercancel', end);
                         this._onDidSashEnd.fire(undefined);
                     };
-                    document.addEventListener('mousemove', mousemove);
-                    document.addEventListener('mouseup', end);
+                    document.addEventListener('pointermove', onPointerMove);
+                    document.addEventListener('pointerup', end);
+                    document.addEventListener('pointercancel', end);
                 };
-                sash.addEventListener('mousedown', onStart);
+                sash.addEventListener('pointerdown', onPointerStart);
                 const sashItem = {
                     container: sash,
                     disposable: () => {
-                        sash.removeEventListener('mousedown', onStart);
+                        sash.removeEventListener('pointerdown', onPointerStart);
                         this.sashContainer.removeChild(sash);
                     },
                 };
@@ -2091,52 +2092,70 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             if (!(parent instanceof BranchNode)) {
                 throw new Error('Invalid location');
             }
-            const node = parent.children[index];
-            if (!(node instanceof LeafNode)) {
+            const nodeToRemove = parent.children[index];
+            if (!(nodeToRemove instanceof LeafNode)) {
                 throw new Error('Invalid location');
             }
             parent.removeChild(index, sizing);
-            if (parent.children.length === 0) {
-                return node.view;
-            }
-            if (parent.children.length > 1) {
-                return node.view;
-            }
+            nodeToRemove.dispose();
+            if (parent.children.length !== 1) {
+                return nodeToRemove.view;
+            }
+            // if the parent has only one child and we know the parent is a BranchNode we can make the tree
+            // more efficiently spaced by replacing the parent BranchNode with the child.
+            // if that child is a LeafNode then we simply replace the BranchNode with the child otherwise if the child
+            // is a BranchNode too we should spread it's children into the grandparent.
+            // refer to the remaining child as the sibling
             const sibling = parent.children[0];
             if (pathToParent.length === 0) {
-                // parent is root
+                // if the parent is root
                 if (sibling instanceof LeafNode) {
-                    return node.view;
+                    // if the sibling is a leaf node no action is required
+                    return nodeToRemove.view;
                 }
-                // we must promote sibling to be the new root
+                // otherwise the sibling is a branch node. since the parent is the root and the root has only one child
+                // which is a branch node we can just set this branch node to be the new root node
+                // for good housekeeping we'll removing the sibling from it's existing tree
                 parent.removeChild(0, sizing);
+                // and set that sibling node to be root
                 this.root = sibling;
-                return node.view;
+                return nodeToRemove.view;
             }
+            // otherwise the parent is apart of a large sub-tree
             const [grandParent, ..._] = [...pathToParent].reverse();
             const [parentIndex, ...__] = [...rest].reverse();
             const isSiblingVisible = parent.isChildVisible(0);
+            // either way we need to remove the sibling from it's existing tree
             parent.removeChild(0, sizing);
+            // note the sizes of all of the grandparents children
             const sizes = grandParent.children.map((_size, i) => grandParent.getChildSize(i));
-            grandParent.removeChild(parentIndex, sizing);
+            // remove the parent from the grandparent since we are moving the sibling to take the parents place
+            // this parent is no longer used and can be disposed of
+            grandParent.removeChild(parentIndex, sizing).dispose();
             if (sibling instanceof BranchNode) {
+                // replace the parent with the siblings children
                 sizes.splice(parentIndex, 1, ...sibling.children.map((c) => c.size));
+                // and add those siblings to the grandparent
                 for (let i = 0; i < sibling.children.length; i++) {
                     const child = sibling.children[i];
                     grandParent.addChild(child, child.size, parentIndex + i);
                 }
             }
             else {
+                // otherwise create a new leaf node and add that to the grandparent
                 const newSibling = new LeafNode(sibling.view, orthogonal(sibling.orientation), sibling.size);
                 const siblingSizing = isSiblingVisible
                     ? sibling.orthogonalSize
                     : exports.Sizing.Invisible(sibling.orthogonalSize);
                 grandParent.addChild(newSibling, siblingSizing, parentIndex);
             }
+            // the containing node of the sibling is no longer required and can be disposed of
+            sibling.dispose();
+            // resize everything
             for (let i = 0; i < sizes.length; i++) {
                 grandParent.resizeChild(i, sizes[i]);
             }
-            return node.view;
+            return nodeToRemove.view;
         }
         layout(width, height) {
             const [size, orthogonalSize] = this.root.orientation === exports.Orientation.HORIZONTAL

package/dist/dockview.cjs.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.7.5
+ * @version 1.7.6
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -943,7 +943,7 @@ class Splitview {
             //add sash
             const sash = document.createElement('div');
             sash.className = 'sash';
-            const onStart = (event) => {
+            const onPointerStart = (event) => {
                 for (const item of this.viewItems) {
                     item.enabled = false;
                 }
@@ -1002,11 +1002,10 @@ class Splitview {
                         size: snappedViewItem.size,
                     };
                 }
-                //
-                const mousemove = (mousemoveEvent) => {
+                const onPointerMove = (event) => {
                     const current = this._orientation === exports.Orientation.HORIZONTAL
-                        ? mousemoveEvent.clientX
-                        : mousemoveEvent.clientY;
+                        ? event.clientX
+                        : event.clientY;
                     const delta = current - start;
                     this.resize(sashIndex, delta, sizes, undefined, undefined, minDelta, maxDelta, snapBefore, snapAfter);
                     this.distributeEmptySpace();
@@ -1020,18 +1019,20 @@ class Splitview {
                         iframe.style.pointerEvents = 'auto';
                     }
                     this.saveProportions();
-                    document.removeEventListener('mousemove', mousemove);
-                    document.removeEventListener('mouseup', end);
+                    document.removeEventListener('pointermove', onPointerMove);
+                    document.removeEventListener('pointerup', end);
+                    document.removeEventListener('pointercancel', end);
                     this._onDidSashEnd.fire(undefined);
                 };
-                document.addEventListener('mousemove', mousemove);
-                document.addEventListener('mouseup', end);
+                document.addEventListener('pointermove', onPointerMove);
+                document.addEventListener('pointerup', end);
+                document.addEventListener('pointercancel', end);
             };
-            sash.addEventListener('mousedown', onStart);
+            sash.addEventListener('pointerdown', onPointerStart);
             const sashItem = {
                 container: sash,
                 disposable: () => {
-                    sash.removeEventListener('mousedown', onStart);
+                    sash.removeEventListener('pointerdown', onPointerStart);
                     this.sashContainer.removeChild(sash);
                 },
             };
@@ -2124,52 +2125,70 @@ class Gridview {
         if (!(parent instanceof BranchNode)) {
             throw new Error('Invalid location');
         }
-        const node = parent.children[index];
-        if (!(node instanceof LeafNode)) {
+        const nodeToRemove = parent.children[index];
+        if (!(nodeToRemove instanceof LeafNode)) {
             throw new Error('Invalid location');
         }
         parent.removeChild(index, sizing);
-        if (parent.children.length === 0) {
-            return node.view;
-        }
-        if (parent.children.length > 1) {
-            return node.view;
-        }
+        nodeToRemove.dispose();
+        if (parent.children.length !== 1) {
+            return nodeToRemove.view;
+        }
+        // if the parent has only one child and we know the parent is a BranchNode we can make the tree
+        // more efficiently spaced by replacing the parent BranchNode with the child.
+        // if that child is a LeafNode then we simply replace the BranchNode with the child otherwise if the child
+        // is a BranchNode too we should spread it's children into the grandparent.
+        // refer to the remaining child as the sibling
         const sibling = parent.children[0];
         if (pathToParent.length === 0) {
-            // parent is root
+            // if the parent is root
             if (sibling instanceof LeafNode) {
-                return node.view;
+                // if the sibling is a leaf node no action is required
+                return nodeToRemove.view;
             }
-            // we must promote sibling to be the new root
+            // otherwise the sibling is a branch node. since the parent is the root and the root has only one child
+            // which is a branch node we can just set this branch node to be the new root node
+            // for good housekeeping we'll removing the sibling from it's existing tree
             parent.removeChild(0, sizing);
+            // and set that sibling node to be root
             this.root = sibling;
-            return node.view;
+            return nodeToRemove.view;
         }
+        // otherwise the parent is apart of a large sub-tree
         const [grandParent, ..._] = [...pathToParent].reverse();
         const [parentIndex, ...__] = [...rest].reverse();
         const isSiblingVisible = parent.isChildVisible(0);
+        // either way we need to remove the sibling from it's existing tree
         parent.removeChild(0, sizing);
+        // note the sizes of all of the grandparents children
         const sizes = grandParent.children.map((_size, i) => grandParent.getChildSize(i));
-        grandParent.removeChild(parentIndex, sizing);
+        // remove the parent from the grandparent since we are moving the sibling to take the parents place
+        // this parent is no longer used and can be disposed of
+        grandParent.removeChild(parentIndex, sizing).dispose();
         if (sibling instanceof BranchNode) {
+            // replace the parent with the siblings children
             sizes.splice(parentIndex, 1, ...sibling.children.map((c) => c.size));
+            // and add those siblings to the grandparent
             for (let i = 0; i < sibling.children.length; i++) {
                 const child = sibling.children[i];
                 grandParent.addChild(child, child.size, parentIndex + i);
             }
         }
         else {
+            // otherwise create a new leaf node and add that to the grandparent
             const newSibling = new LeafNode(sibling.view, orthogonal(sibling.orientation), sibling.size);
             const siblingSizing = isSiblingVisible
                 ? sibling.orthogonalSize
                 : exports.Sizing.Invisible(sibling.orthogonalSize);
             grandParent.addChild(newSibling, siblingSizing, parentIndex);
         }
+        // the containing node of the sibling is no longer required and can be disposed of
+        sibling.dispose();
+        // resize everything
         for (let i = 0; i < sizes.length; i++) {
             grandParent.resizeChild(i, sizes[i]);
         }
-        return node.view;
+        return nodeToRemove.view;
     }
     layout(width, height) {
         const [size, orthogonalSize] = this.root.orientation === exports.Orientation.HORIZONTAL

package/dist/dockview.esm.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.7.5
+ * @version 1.7.6
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -921,7 +921,7 @@ class Splitview {
             //add sash
             const sash = document.createElement('div');
             sash.className = 'sash';
-            const onStart = (event) => {
+            const onPointerStart = (event) => {
                 for (const item of this.viewItems) {
                     item.enabled = false;
                 }
@@ -980,11 +980,10 @@ class Splitview {
                         size: snappedViewItem.size,
                     };
                 }
-                //
-                const mousemove = (mousemoveEvent) => {
+                const onPointerMove = (event) => {
                     const current = this._orientation === Orientation.HORIZONTAL
-                        ? mousemoveEvent.clientX
-                        : mousemoveEvent.clientY;
+                        ? event.clientX
+                        : event.clientY;
                     const delta = current - start;
                     this.resize(sashIndex, delta, sizes, undefined, undefined, minDelta, maxDelta, snapBefore, snapAfter);
                     this.distributeEmptySpace();
@@ -998,18 +997,20 @@ class Splitview {
                         iframe.style.pointerEvents = 'auto';
                     }
                     this.saveProportions();
-                    document.removeEventListener('mousemove', mousemove);
-                    document.removeEventListener('mouseup', end);
+                    document.removeEventListener('pointermove', onPointerMove);
+                    document.removeEventListener('pointerup', end);
+                    document.removeEventListener('pointercancel', end);
                     this._onDidSashEnd.fire(undefined);
                 };
-                document.addEventListener('mousemove', mousemove);
-                document.addEventListener('mouseup', end);
+                document.addEventListener('pointermove', onPointerMove);
+                document.addEventListener('pointerup', end);
+                document.addEventListener('pointercancel', end);
             };
-            sash.addEventListener('mousedown', onStart);
+            sash.addEventListener('pointerdown', onPointerStart);
             const sashItem = {
                 container: sash,
                 disposable: () => {
-                    sash.removeEventListener('mousedown', onStart);
+                    sash.removeEventListener('pointerdown', onPointerStart);
                     this.sashContainer.removeChild(sash);
                 },
             };
@@ -2102,52 +2103,70 @@ class Gridview {
         if (!(parent instanceof BranchNode)) {
             throw new Error('Invalid location');
         }
-        const node = parent.children[index];
-        if (!(node instanceof LeafNode)) {
+        const nodeToRemove = parent.children[index];
+        if (!(nodeToRemove instanceof LeafNode)) {
             throw new Error('Invalid location');
         }
         parent.removeChild(index, sizing);
-        if (parent.children.length === 0) {
-            return node.view;
-        }
-        if (parent.children.length > 1) {
-            return node.view;
-        }
+        nodeToRemove.dispose();
+        if (parent.children.length !== 1) {
+            return nodeToRemove.view;
+        }
+        // if the parent has only one child and we know the parent is a BranchNode we can make the tree
+        // more efficiently spaced by replacing the parent BranchNode with the child.
+        // if that child is a LeafNode then we simply replace the BranchNode with the child otherwise if the child
+        // is a BranchNode too we should spread it's children into the grandparent.
+        // refer to the remaining child as the sibling
         const sibling = parent.children[0];
         if (pathToParent.length === 0) {
-            // parent is root
+            // if the parent is root
             if (sibling instanceof LeafNode) {
-                return node.view;
+                // if the sibling is a leaf node no action is required
+                return nodeToRemove.view;
             }
-            // we must promote sibling to be the new root
+            // otherwise the sibling is a branch node. since the parent is the root and the root has only one child
+            // which is a branch node we can just set this branch node to be the new root node
+            // for good housekeeping we'll removing the sibling from it's existing tree
             parent.removeChild(0, sizing);
+            // and set that sibling node to be root
             this.root = sibling;
-            return node.view;
+            return nodeToRemove.view;
         }
+        // otherwise the parent is apart of a large sub-tree
         const [grandParent, ..._] = [...pathToParent].reverse();
         const [parentIndex, ...__] = [...rest].reverse();
         const isSiblingVisible = parent.isChildVisible(0);
+        // either way we need to remove the sibling from it's existing tree
         parent.removeChild(0, sizing);
+        // note the sizes of all of the grandparents children
         const sizes = grandParent.children.map((_size, i) => grandParent.getChildSize(i));
-        grandParent.removeChild(parentIndex, sizing);
+        // remove the parent from the grandparent since we are moving the sibling to take the parents place
+        // this parent is no longer used and can be disposed of
+        grandParent.removeChild(parentIndex, sizing).dispose();
         if (sibling instanceof BranchNode) {
+            // replace the parent with the siblings children
             sizes.splice(parentIndex, 1, ...sibling.children.map((c) => c.size));
+            // and add those siblings to the grandparent
             for (let i = 0; i < sibling.children.length; i++) {
                 const child = sibling.children[i];
                 grandParent.addChild(child, child.size, parentIndex + i);
             }
         }
         else {
+            // otherwise create a new leaf node and add that to the grandparent
             const newSibling = new LeafNode(sibling.view, orthogonal(sibling.orientation), sibling.size);
             const siblingSizing = isSiblingVisible
                 ? sibling.orthogonalSize
                 : Sizing.Invisible(sibling.orthogonalSize);
             grandParent.addChild(newSibling, siblingSizing, parentIndex);
         }
+        // the containing node of the sibling is no longer required and can be disposed of
+        sibling.dispose();
+        // resize everything
         for (let i = 0; i < sizes.length; i++) {
             grandParent.resizeChild(i, sizes[i]);
         }
-        return node.view;
+        return nodeToRemove.view;
     }
     layout(width, height) {
         const [size, orthogonalSize] = this.root.orientation === Orientation.HORIZONTAL