dockview 1.7.4 → 1.7.6

package/dist/dockview.amd.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.7.4
+ * @version 1.7.6
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -247,7 +247,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       element.addEventListener(type, listener, options);
       return {
           dispose: () => {
-              element.removeEventListener(type, listener);
+              element.removeEventListener(type, listener, options);
           },
       };
   }
@@ -255,7 +255,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       element.addEventListener(type, listener, options);
       return {
           dispose: () => {
-              element.removeEventListener(type, listener);
+              element.removeEventListener(type, listener, options);
           },
       };
   }
@@ -940,7 +940,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;
                   }
@@ -999,11 +999,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();
@@ -1017,20 +1016,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('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);
                   },
               };
@@ -2123,58 +2122,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');
           }
-          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
@@ -2887,25 +2898,32 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       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';
                   /**
@@ -2920,11 +2938,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   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();
           }));
       }
   }