dockview-react 4.0.1 → 4.1.0

package/dist/dockview-react.js

@@ -1,6 +1,6 @@
 /**
  * dockview-react
- * @version 4.0.1
+ * @version 4.1.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -249,14 +249,6 @@
   }
   Emitter.ENABLE_TRACKING = false;
   Emitter.MEMORY_LEAK_WATCHER = new LeakageMonitor();
-  function addDisposableWindowListener(element, type, listener, options) {
-      element.addEventListener(type, listener, options);
-      return {
-          dispose: () => {
-              element.removeEventListener(type, listener, options);
-          },
-      };
-  }
   function addDisposableListener(element, type, listener, options) {
       element.addEventListener(type, listener, options);
       return {
@@ -435,9 +427,6 @@
       }
       return false;
   }
-  function getElementsByTagName(tag) {
-      return Array.prototype.slice.call(document.getElementsByTagName(tag), 0);
-  }
   function trackFocus(element) {
       return new FocusTracker(element);
   }
@@ -484,14 +473,8 @@
                   }
               }
           };
-          if (element instanceof HTMLElement) {
-              this.addDisposables(addDisposableListener(element, 'focus', onFocus, true));
-              this.addDisposables(addDisposableListener(element, 'blur', onBlur, true));
-          }
-          else {
-              this.addDisposables(addDisposableWindowListener(element, 'focus', onFocus, true));
-              this.addDisposables(addDisposableWindowListener(element, 'blur', onBlur, true));
-          }
+          this.addDisposables(addDisposableListener(element, 'focus', onFocus, true));
+          this.addDisposables(addDisposableListener(element, 'blur', onBlur, true));
       }
       refreshState() {
           this._refreshStateHandler();
@@ -565,11 +548,30 @@
   function addTestId(element, id) {
       element.setAttribute('data-testid', id);
   }
-  function disableIframePointEvents() {
-      const iframes = [
-          ...getElementsByTagName('iframe'),
-          ...getElementsByTagName('webview'),
-      ];
+  /**
+   * Should be more efficient than element.querySelectorAll("*") since there
+   * is no need to store every element in-memory using this approach
+   */
+  function allTagsNamesInclusiveOfShadowDoms(tagNames) {
+      const iframes = [];
+      function findIframesInNode(node) {
+          if (node.nodeType === Node.ELEMENT_NODE) {
+              if (tagNames.includes(node.tagName)) {
+                  iframes.push(node);
+              }
+              if (node.shadowRoot) {
+                  findIframesInNode(node.shadowRoot);
+              }
+              for (const child of node.children) {
+                  findIframesInNode(child);
+              }
+          }
+      }
+      findIframesInNode(document.documentElement);
+      return iframes;
+  }
+  function disableIframePointEvents(rootNode = document) {
+      const iframes = allTagsNamesInclusiveOfShadowDoms(['IFRAME', 'WEBVIEW']);
       const original = new WeakMap(); // don't hold onto HTMLElement references longer than required
       for (const iframe of iframes) {
           original.set(iframe, iframe.style.pointerEvents);
@@ -621,6 +623,7 @@
           }
       }
   }
+  const DEBOUCE_DELAY = 100;
   function isChildEntirelyVisibleWithinParent(child, parent) {
       //
       const childPosition = getDomNodePagePosition(child);
@@ -634,6 +637,41 @@
       }
       return true;
   }
+  function onDidWindowMoveEnd(window) {
+      const emitter = new Emitter();
+      let previousScreenX = window.screenX;
+      let previousScreenY = window.screenY;
+      let timeout;
+      const checkMovement = () => {
+          if (window.closed) {
+              return;
+          }
+          const currentScreenX = window.screenX;
+          const currentScreenY = window.screenY;
+          if (currentScreenX !== previousScreenX ||
+              currentScreenY !== previousScreenY) {
+              clearTimeout(timeout);
+              timeout = setTimeout(() => {
+                  emitter.fire();
+              }, DEBOUCE_DELAY);
+              previousScreenX = currentScreenX;
+              previousScreenY = currentScreenY;
+          }
+          requestAnimationFrame(checkMovement);
+      };
+      checkMovement();
+      return emitter;
+  }
+  function onDidWindowResizeEnd(element, cb) {
+      let resizeTimeout;
+      const disposable = new CompositeDisposable(addDisposableListener(element, 'resize', () => {
+          clearTimeout(resizeTimeout);
+          resizeTimeout = setTimeout(() => {
+              cb();
+          }, DEBOUCE_DELAY);
+      }));
+      return disposable;
+  }
 
   function tail(arr) {
       if (arr.length === 0) {
@@ -3573,6 +3611,12 @@
       get onUnhandledDragOverEvent() {
           return this.component.onUnhandledDragOverEvent;
       }
+      get onDidPopoutGroupSizeChange() {
+          return this.component.onDidPopoutGroupSizeChange;
+      }
+      get onDidPopoutGroupPositionChange() {
+          return this.component.onDidPopoutGroupPositionChange;
+      }
       /**
        * All panel objects.
        */
@@ -4538,26 +4582,25 @@
           this._headerVisible = value;
           this.header.style.display = value ? '' : 'none';
       }
-      constructor(id, component, headerComponent, orientation, isExpanded, isHeaderVisible) {
-          super(id, component, new PaneviewPanelApiImpl(id, component));
-          this.headerComponent = headerComponent;
+      constructor(options) {
+          super(options.id, options.component, new PaneviewPanelApiImpl(options.id, options.component));
           this._onDidChangeExpansionState = new Emitter({ replay: true });
           this.onDidChangeExpansionState = this._onDidChangeExpansionState.event;
           this._onDidChange = new Emitter();
           this.onDidChange = this._onDidChange.event;
-          this.headerSize = 22;
           this._orthogonalSize = 0;
           this._size = 0;
-          this._minimumBodySize = 100;
-          this._maximumBodySize = Number.POSITIVE_INFINITY;
           this._isExpanded = false;
-          this.expandedSize = 0;
           this.api.pane = this; // TODO cannot use 'this' before 'super'
           this.api.initialize(this);
-          this._isExpanded = isExpanded;
-          this._headerVisible = isHeaderVisible;
+          this.headerSize = options.headerSize;
+          this.headerComponent = options.headerComponent;
+          this._minimumBodySize = options.minimumBodySize;
+          this._maximumBodySize = options.maximumBodySize;
+          this._isExpanded = options.isExpanded;
+          this._headerVisible = options.isHeaderVisible;
           this._onDidChangeExpansionState.fire(this.isExpanded()); // initialize value
-          this._orientation = orientation;
+          this._orientation = options.orientation;
           this.element.classList.add('dv-pane');
           this.addDisposables(this.api.onWillVisibilityChange((event) => {
               const { isVisible } = event;
@@ -4624,9 +4667,6 @@
           const [width, height] = this.orientation === exports.Orientation.HORIZONTAL
               ? [size, orthogonalSize]
               : [orthogonalSize, size];
-          if (this.isExpanded()) {
-              this.expandedSize = width;
-          }
           super.layout(width, height);
       }
       init(parameters) {
@@ -4683,15 +4723,25 @@
   }
 
   class DraggablePaneviewPanel extends PaneviewPanel {
-      constructor(accessor, id, component, headerComponent, orientation, isExpanded, disableDnd) {
-          super(id, component, headerComponent, orientation, isExpanded, true);
-          this.accessor = accessor;
+      constructor(options) {
+          super({
+              id: options.id,
+              component: options.component,
+              headerComponent: options.headerComponent,
+              orientation: options.orientation,
+              isExpanded: options.isExpanded,
+              isHeaderVisible: true,
+              headerSize: options.headerSize,
+              minimumBodySize: options.minimumBodySize,
+              maximumBodySize: options.maximumBodySize,
+          });
           this._onDidDrop = new Emitter();
           this.onDidDrop = this._onDidDrop.event;
           this._onUnhandledDragOverEvent = new Emitter();
           this.onUnhandledDragOverEvent = this._onUnhandledDragOverEvent.event;
+          this.accessor = options.accessor;
           this.addDisposables(this._onDidDrop, this._onUnhandledDragOverEvent);
-          if (!disableDnd) {
+          if (!options.disableDnd) {
               this.initDragFeatures();
           }
       }
@@ -7325,7 +7375,7 @@
                   dispose: () => {
                       iframes.release();
                   },
-              }, addDisposableWindowListener(window, 'pointermove', (e) => {
+              }, addDisposableListener(window, 'pointermove', (e) => {
                   const containerRect = this.options.container.getBoundingClientRect();
                   const x = e.clientX - containerRect.left;
                   const y = e.clientY - containerRect.top;
@@ -7362,7 +7412,7 @@
                       bounds.right = right;
                   }
                   this.setBounds(bounds);
-              }), addDisposableWindowListener(window, 'pointerup', () => {
+              }), addDisposableListener(window, 'pointerup', () => {
                   toggleClass(this._element, 'dv-resize-container-dragging', false);
                   move.dispose();
                   this._onDidChangeEnd.fire();
@@ -7407,7 +7457,7 @@
               e.preventDefault();
               let startPosition = null;
               const iframes = disableIframePointEvents();
-              move.value = new CompositeDisposable(addDisposableWindowListener(window, 'pointermove', (e) => {
+              move.value = new CompositeDisposable(addDisposableListener(window, 'pointermove', (e) => {
                   const containerRect = this.options.container.getBoundingClientRect();
                   const overlayRect = this._element.getBoundingClientRect();
                   const y = e.clientY - containerRect.top;
@@ -7531,7 +7581,7 @@
                   dispose: () => {
                       iframes.release();
                   },
-              }, addDisposableWindowListener(window, 'pointerup', () => {
+              }, addDisposableListener(window, 'pointerup', () => {
                   move.dispose();
                   this._onDidChangeEnd.fire();
               }));
@@ -7814,7 +7864,7 @@
               this._window = { value: externalWindow, disposable };
               disposable.addDisposables(exports.DockviewDisposable.from(() => {
                   externalWindow.close();
-              }), addDisposableWindowListener(window, 'beforeunload', () => {
+              }), addDisposableListener(window, 'beforeunload', () => {
                   /**
                    * before the main window closes we should close this popup too
                    * to be good citizens
@@ -7849,7 +7899,7 @@
                            * beforeunload must be registered after load for reasons I could not determine
                            * otherwise the beforeunload event will not fire when the window is closed
                            */
-                          addDisposableWindowListener(externalWindow, 'beforeunload', () => {
+                          addDisposableListener(externalWindow, 'beforeunload', () => {
                               /**
                                * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
                                */
@@ -7946,7 +7996,7 @@
           wrapper.style.left = `${position.x - offsetX}px`;
           this._element.appendChild(wrapper);
           this._active = wrapper;
-          this._activeDisposable.value = new CompositeDisposable(addDisposableWindowListener(window, 'pointerdown', (event) => {
+          this._activeDisposable.value = new CompositeDisposable(addDisposableListener(window, 'pointerdown', (event) => {
               var _a;
               const target = event.target;
               if (!(target instanceof HTMLElement)) {
@@ -8125,6 +8175,10 @@
           this.onDidRemovePanel = this._onDidRemovePanel.event;
           this._onDidAddPanel = new Emitter();
           this.onDidAddPanel = this._onDidAddPanel.event;
+          this._onDidPopoutGroupSizeChange = new Emitter();
+          this.onDidPopoutGroupSizeChange = this._onDidPopoutGroupSizeChange.event;
+          this._onDidPopoutGroupPositionChange = new Emitter();
+          this.onDidPopoutGroupPositionChange = this._onDidPopoutGroupPositionChange.event;
           this._onDidLayoutFromJSON = new Emitter();
           this.onDidLayoutFromJSON = this._onDidLayoutFromJSON.event;
           this._onDidActivePanelChange = new Emitter();
@@ -8154,7 +8208,7 @@
           if (options.debug) {
               this.addDisposables(new StrictEventsSequencing(this));
           }
-          this.addDisposables(this.rootDropTargetContainer, this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this._onUnhandledDragOverEvent, this._onDidMaximizedGroupChange, this._onDidOptionsChange, this.onDidViewVisibilityChangeMicroTaskQueue(() => {
+          this.addDisposables(this.rootDropTargetContainer, this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this._onUnhandledDragOverEvent, this._onDidMaximizedGroupChange, this._onDidOptionsChange, this._onDidPopoutGroupSizeChange, this._onDidPopoutGroupPositionChange, this.onDidViewVisibilityChangeMicroTaskQueue(() => {
               this.updateWatermark();
           }), this.onDidAdd((event) => {
               if (!this._moving) {
@@ -8175,7 +8229,7 @@
               });
           }), exports.DockviewEvent.any(this.onDidAdd, this.onDidRemove)(() => {
               this.updateWatermark();
-          }), exports.DockviewEvent.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidAddGroup, this.onDidRemove, this.onDidMovePanel, this.onDidActivePanelChange)(() => {
+          }), exports.DockviewEvent.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidAddGroup, this.onDidRemove, this.onDidMovePanel, this.onDidActivePanelChange, this.onDidPopoutGroupPositionChange, this.onDidPopoutGroupSizeChange)(() => {
               this._bufferOnDidLayoutChange.fire();
           }), exports.DockviewDisposable.from(() => {
               // iterate over a copy of the array since .dispose() mutates the original array
@@ -8436,13 +8490,26 @@
                       },
                   },
               };
-              popoutWindowDisposable.addDisposables(
+              const _onDidWindowPositionChange = onDidWindowMoveEnd(_window.window);
+              popoutWindowDisposable.addDisposables(_onDidWindowPositionChange, onDidWindowResizeEnd(_window.window, () => {
+                  this._onDidPopoutGroupSizeChange.fire({
+                      width: _window.window.innerWidth,
+                      height: _window.window.innerHeight,
+                      group,
+                  });
+              }), _onDidWindowPositionChange.event(() => {
+                  this._onDidPopoutGroupPositionChange.fire({
+                      screenX: _window.window.screenX,
+                      screenY: _window.window.screenX,
+                      group,
+                  });
+              }), 
               /**
                * ResizeObserver seems slow here, I do not know why but we don't need it
                * since we can reply on the window resize event as we will occupy the full
                * window dimensions
                */
-              addDisposableWindowListener(_window.window, 'resize', () => {
+              addDisposableListener(_window.window, 'resize', () => {
                   group.layout(_window.window.innerWidth, _window.window.innerHeight);
               }), overlayRenderContainer, exports.DockviewDisposable.from(() => {
                   if (this.isDisposed) {
@@ -8656,7 +8723,7 @@
           }
           this.updateWatermark();
       }
-      orthogonalize(position) {
+      orthogonalize(position, options) {
           switch (position) {
               case 'top':
               case 'bottom':
@@ -8679,10 +8746,10 @@
               case 'top':
               case 'left':
               case 'center':
-                  return this.createGroupAtLocation([0]); // insert into first position
+                  return this.createGroupAtLocation([0], undefined, options); // insert into first position
               case 'bottom':
               case 'right':
-                  return this.createGroupAtLocation([this.gridview.length]); // insert into last position
+                  return this.createGroupAtLocation([this.gridview.length], undefined, options); // insert into last position
               default:
                   throw new Error(`unsupported position ${position}`);
           }
@@ -9178,7 +9245,7 @@
                   }
               }
               else {
-                  const group = this.orthogonalize(directionToPosition(options.direction));
+                  const group = this.orthogonalize(directionToPosition(options.direction), options);
                   if (!options.skipSetActive) {
                       this.doSetGroupAndPanelActive(group);
                   }
@@ -9620,8 +9687,8 @@
           });
           return panel;
       }
-      createGroupAtLocation(location, size) {
-          const group = this.createGroup();
+      createGroupAtLocation(location, size, options) {
+          const group = this.createGroup(options);
           this.doAddGroup(group, location, size);
           return group;
       }
@@ -9955,6 +10022,9 @@
           return this._splitview;
       }
       set splitview(value) {
+          if (this._splitview) {
+              this._splitview.dispose();
+          }
           this._splitview = value;
           this._splitviewChangeDisposable.value = new CompositeDisposable(this._splitview.onDidSashEnd(() => {
               this._onDidLayoutChange.fire(undefined);
@@ -10258,9 +10328,23 @@
   }
 
   const nextLayoutId = sequentialNumberGenerator();
+  const HEADER_SIZE = 22;
+  const MINIMUM_BODY_SIZE = 0;
+  const MAXIMUM_BODY_SIZE = Number.MAX_SAFE_INTEGER;
   class PaneFramework extends DraggablePaneviewPanel {
       constructor(options) {
-          super(options.accessor, options.id, options.component, options.headerComponent, options.orientation, options.isExpanded, options.disableDnd);
+          super({
+              accessor: options.accessor,
+              id: options.id,
+              component: options.component,
+              headerComponent: options.headerComponent,
+              orientation: options.orientation,
+              isExpanded: options.isExpanded,
+              disableDnd: options.disableDnd,
+              headerSize: options.headerSize,
+              minimumBodySize: options.minimumBodySize,
+              maximumBodySize: options.maximumBodySize,
+          });
           this.options = options;
       }
       getBodyComponent() {
@@ -10355,7 +10439,7 @@
           this._options = Object.assign(Object.assign({}, this.options), options);
       }
       addPanel(options) {
-          var _a;
+          var _a, _b;
           const body = this.options.createComponent({
               id: options.id,
               name: options.component,
@@ -10380,12 +10464,15 @@
               isExpanded: !!options.isExpanded,
               disableDnd: !!this.options.disableDnd,
               accessor: this,
+              headerSize: (_a = options.headerSize) !== null && _a !== void 0 ? _a : HEADER_SIZE,
+              minimumBodySize: MINIMUM_BODY_SIZE,
+              maximumBodySize: MAXIMUM_BODY_SIZE,
           });
           this.doAddPanel(view);
           const size = typeof options.size === 'number' ? options.size : exports.Sizing.Distribute;
           const index = typeof options.index === 'number' ? options.index : undefined;
           view.init({
-              params: (_a = options.params) !== null && _a !== void 0 ? _a : {},
+              params: (_b = options.params) !== null && _b !== void 0 ? _b : {},
               minimumBodySize: options.minimumBodySize,
               maximumBodySize: options.maximumBodySize,
               isExpanded: options.isExpanded,
@@ -10430,6 +10517,7 @@
                   data: view.toJSON(),
                   minimumSize: minimum(view.minimumBodySize),
                   maximumSize: maximum(view.maximumBodySize),
+                  headerSize: view.headerSize,
                   expanded: view.isExpanded(),
               };
           });
@@ -10450,6 +10538,7 @@
               descriptor: {
                   size,
                   views: views.map((view) => {
+                      var _a, _b, _c;
                       const data = view.data;
                       const body = this.options.createComponent({
                           id: data.id,
@@ -10476,6 +10565,9 @@
                           isExpanded: !!view.expanded,
                           disableDnd: !!this.options.disableDnd,
                           accessor: this,
+                          headerSize: (_a = view.headerSize) !== null && _a !== void 0 ? _a : HEADER_SIZE,
+                          minimumBodySize: (_b = view.minimumSize) !== null && _b !== void 0 ? _b : MINIMUM_BODY_SIZE,
+                          maximumBodySize: (_c = view.maximumSize) !== null && _c !== void 0 ? _c : MAXIMUM_BODY_SIZE,
                       });
                       this.doAddPanel(panel);
                       queue.push(() => {