dockview 1.7.4 → 1.7.6

package/dist/dockview.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.7.4
+ * @version 1.7.6
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -221,7 +221,7 @@
         element.addEventListener(type, listener, options);
         return {
             dispose: () => {
-                element.removeEventListener(type, listener);
+                element.removeEventListener(type, listener, options);
             },
         };
     }
@@ -229,7 +229,7 @@
         element.addEventListener(type, listener, options);
         return {
             dispose: () => {
-                element.removeEventListener(type, listener);
+                element.removeEventListener(type, listener, options);
             },
         };
     }
@@ -914,7 +914,7 @@
                 //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;
                     }
@@ -973,11 +973,10 @@
                             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();
@@ -991,20 +990,20 @@
                             iframe.style.pointerEvents = 'auto';
                         }
                         this.saveProportions();
-                        document.removeEventListener('mousemove', mousemove);
-                        document.removeEventListener('mouseup', end);
-                        document.removeEventListener('mouseend', 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('mouseend', 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);
                     },
                 };
@@ -2097,58 +2096,70 @@
             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');
             }
-            const view = node.view;
-            node.dispose(); // dispose of node
-            const child = parent.removeChild(index, sizing);
-            child.dispose();
-            if (parent.children.length === 0) {
-                return view;
-            }
-            if (parent.children.length > 1) {
-                return view;
+            parent.removeChild(index, sizing);
+            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 view;
-                }
-                // we must promote sibling to be the new root
-                const child = parent.removeChild(0, sizing);
-                child.dispose();
+                    // if the sibling is a leaf node no action is required
+                    return nodeToRemove.view;
+                }
+                // 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 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);
-            const childNode = parent.removeChild(0, sizing);
-            childNode.dispose();
+            // 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));
-            const parentNode = grandParent.removeChild(parentIndex, sizing);
-            parentNode.dispose();
+            // 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 view;
+            return nodeToRemove.view;
         }
         layout(width, height) {
             const [size, orthogonalSize] = this.root.orientation === exports.Orientation.HORIZONTAL
@@ -2861,25 +2872,32 @@
         constructor(el) {
             super();
             this.el = el;
-            this.disposable = new MutableDisposable();
+            this.dataDisposable = new MutableDisposable();
+            this.pointerEventsDisposable = new MutableDisposable();
             this._onDragStart = new Emitter();
             this.onDragStart = this._onDragStart.event;
-            this.iframes = [];
-            this.addDisposables(this._onDragStart);
+            this.addDisposables(this._onDragStart, this.dataDisposable, this.pointerEventsDisposable);
             this.configure();
         }
         configure() {
             this.addDisposables(this._onDragStart, addDisposableListener(this.el, 'dragstart', (event) => {
-                this.iframes = [
+                const iframes = [
                     ...getElementsByTagName('iframe'),
                     ...getElementsByTagName('webview'),
                 ];
-                for (const iframe of this.iframes) {
+                this.pointerEventsDisposable.value = {
+                    dispose: () => {
+                        for (const iframe of iframes) {
+                            iframe.style.pointerEvents = 'auto';
+                        }
+                    },
+                };
+                for (const iframe of iframes) {
                     iframe.style.pointerEvents = 'none';
                 }
                 this.el.classList.add('dv-dragged');
                 setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
-                this.disposable.value = this.getData(event.dataTransfer);
+                this.dataDisposable.value = this.getData(event.dataTransfer);
                 if (event.dataTransfer) {
                     event.dataTransfer.effectAllowed = 'move';
                     /**
@@ -2894,11 +2912,8 @@
                     event.dataTransfer.setData('text/plain', '__dockview_internal_drag_event__');
                 }
             }), addDisposableListener(this.el, 'dragend', () => {
-                for (const iframe of this.iframes) {
-                    iframe.style.pointerEvents = 'auto';
-                }
-                this.iframes = [];
-                this.disposable.dispose();
+                this.pointerEventsDisposable.dispose();
+                this.dataDisposable.dispose();
             }));
         }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dockview",
-  "version": "1.7.4",
+  "version": "1.7.6",
   "description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -56,7 +56,7 @@
   "author": "https://github.com/mathuo",
   "license": "MIT",
   "dependencies": {
-    "dockview-core": "^1.7.4"
+    "dockview-core": "^1.7.6"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^15.0.1",
@@ -73,5 +73,5 @@
     "rollup": "^3.15.0",
     "rollup-plugin-postcss": "^4.0.2"
   },
-  "gitHead": "7dde18c6369bb154425ca36e2e8cec3b8fdbfe35"
+  "gitHead": "5d1b6c336f066cfc43eb07ad6d27e1e30d1fe16f"
 }