dockview 1.7.4 → 1.7.6

package/dist/dockview.esm.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.7.4
+ * @version 1.7.6
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -228,7 +228,7 @@ function addDisposableWindowListener(element, type, listener, options) {
     element.addEventListener(type, listener, options);
     return {
         dispose: () => {
-            element.removeEventListener(type, listener);
+            element.removeEventListener(type, listener, options);
         },
     };
 }
@@ -236,7 +236,7 @@ function addDisposableListener(element, type, listener, options) {
     element.addEventListener(type, listener, options);
     return {
         dispose: () => {
-            element.removeEventListener(type, listener);
+            element.removeEventListener(type, listener, options);
         },
     };
 }
@@ -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,20 +997,20 @@ class Splitview {
                         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);
                 },
             };
@@ -2104,58 +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');
         }
-        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
                 : 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 === Orientation.HORIZONTAL
@@ -2868,25 +2879,32 @@ class DragHandler extends CompositeDisposable {
     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';
                 /**
@@ -2901,11 +2919,8 @@ class DragHandler extends CompositeDisposable {
                 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();
         }));
     }
 }