dockview-react 4.0.1 → 4.2.0

package/dist/dockview-react.amd.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview-react
- * @version 4.0.1
+ * @version 4.2.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -215,14 +215,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     }
     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 {
@@ -401,9 +393,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         return false;
     }
-    function getElementsByTagName(tag) {
-        return Array.prototype.slice.call(document.getElementsByTagName(tag), 0);
-    }
     function trackFocus(element) {
         return new FocusTracker(element);
     }
@@ -450,14 +439,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     }
                 }
             };
-            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();
@@ -531,11 +514,30 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     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);
@@ -587,6 +589,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
         }
     }
+    const DEBOUCE_DELAY = 100;
     function isChildEntirelyVisibleWithinParent(child, parent) {
         //
         const childPosition = getDomNodePagePosition(child);
@@ -600,6 +603,41 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         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) {
@@ -3539,6 +3577,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         get onUnhandledDragOverEvent() {
             return this.component.onUnhandledDragOverEvent;
         }
+        get onDidPopoutGroupSizeChange() {
+            return this.component.onDidPopoutGroupSizeChange;
+        }
+        get onDidPopoutGroupPositionChange() {
+            return this.component.onDidPopoutGroupPositionChange;
+        }
         /**
          * All panel objects.
          */
@@ -4504,26 +4548,25 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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;
@@ -4590,9 +4633,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             const [width, height] = this.orientation === exports.Orientation.HORIZONTAL
                 ? [size, orthogonalSize]
                 : [orthogonalSize, size];
-            if (this.isExpanded()) {
-                this.expandedSize = width;
-            }
             super.layout(width, height);
         }
         init(parameters) {
@@ -4649,15 +4689,25 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     }
 
     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();
             }
         }
@@ -5170,9 +5220,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._tabsList = document.createElement('div');
             this._tabsList.className = 'dv-tabs-container dv-horizontal';
             this.showTabsOverflowControl = options.showTabsOverflowControl;
-            const scrollbar = new Scrollbar(this._tabsList);
-            this._element = scrollbar.element;
-            this.addDisposables(this._onOverflowTabsChange, this._observerDisposable, scrollbar, this._onWillShowOverlay, this._onDrop, this._onTabDragStart, addDisposableListener(this.element, 'pointerdown', (event) => {
+            if (accessor.options.scrollbars === 'native') {
+                this._element = this._tabsList;
+            }
+            else {
+                const scrollbar = new Scrollbar(this._tabsList);
+                this._element = scrollbar.element;
+                this.addDisposables(scrollbar);
+            }
+            this.addDisposables(this._onOverflowTabsChange, this._observerDisposable, this._onWillShowOverlay, this._onDrop, this._onTabDragStart, addDisposableListener(this.element, 'pointerdown', (event) => {
                 if (event.defaultPrevented) {
                     return;
                 }
@@ -5597,6 +5653,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             dndEdges: undefined,
             theme: undefined,
             disableTabsOverflowList: undefined,
+            scrollbars: undefined,
         };
         return Object.keys(properties);
     })();
@@ -7291,7 +7348,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     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;
@@ -7328,7 +7385,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         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();
@@ -7373,7 +7430,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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;
@@ -7497,7 +7554,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     dispose: () => {
                         iframes.release();
                     },
-                }, addDisposableWindowListener(window, 'pointerup', () => {
+                }, addDisposableListener(window, 'pointerup', () => {
                     move.dispose();
                     this._onDidChangeEnd.fire();
                 }));
@@ -7780,7 +7837,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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
@@ -7815,7 +7872,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                              * 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
                                  */
@@ -7912,7 +7969,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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)) {
@@ -8091,6 +8148,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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();
@@ -8120,7 +8181,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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) {
@@ -8141,7 +8202,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 });
             }), 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
@@ -8402,13 +8463,26 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         },
                     },
                 };
-                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) {
@@ -8622,7 +8696,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             this.updateWatermark();
         }
-        orthogonalize(position) {
+        orthogonalize(position, options) {
             switch (position) {
                 case 'top':
                 case 'bottom':
@@ -8645,10 +8719,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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}`);
             }
@@ -9144,7 +9218,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     }
                 }
                 else {
-                    const group = this.orthogonalize(directionToPosition(options.direction));
+                    const group = this.orthogonalize(directionToPosition(options.direction), options);
                     if (!options.skipSetActive) {
                         this.doSetGroupAndPanelActive(group);
                     }
@@ -9586,8 +9660,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             });
             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;
         }
@@ -9921,6 +9995,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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);
@@ -10224,9 +10301,23 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     }
 
     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() {
@@ -10321,7 +10412,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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,
@@ -10346,12 +10437,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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,
@@ -10396,6 +10490,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     data: view.toJSON(),
                     minimumSize: minimum(view.minimumBodySize),
                     maximumSize: maximum(view.maximumBodySize),
+                    headerSize: view.headerSize,
                     expanded: view.isExpanded(),
                 };
             });
@@ -10416,6 +10511,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 descriptor: {
                     size,
                     views: views.map((view) => {
+                        var _a, _b, _c;
                         const data = view.data;
                         const body = this.options.createComponent({
                             id: data.id,
@@ -10442,6 +10538,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                             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(() => {