dockview-core 4.0.1 → 4.2.0

package/dist/cjs/api/component.api.d.ts

@@ -1,4 +1,4 @@
-import { DockviewMaximizedGroupChanged, FloatingGroupOptions, IDockviewComponent, MovePanelEvent, SerializedDockview } from '../dockview/dockviewComponent';
+import { DockviewMaximizedGroupChanged, FloatingGroupOptions, IDockviewComponent, MovePanelEvent, PopoutGroupChangePositionEvent, PopoutGroupChangeSizeEvent, SerializedDockview } from '../dockview/dockviewComponent';
 import { AddGroupOptions, AddPanelOptions, DockviewComponentOptions, DockviewDndOverlayEvent, MovementOptions } from '../dockview/options';
 import { Parameters } from '../panel/types';
 import { Direction } from '../gridview/baseComponentGridview';
@@ -417,6 +417,8 @@ export declare class DockviewApi implements CommonApi<SerializedDockview> {
      */
     get onWillDragPanel(): Event<TabDragEvent>;
     get onUnhandledDragOverEvent(): Event<DockviewDndOverlayEvent>;
+    get onDidPopoutGroupSizeChange(): Event<PopoutGroupChangeSizeEvent>;
+    get onDidPopoutGroupPositionChange(): Event<PopoutGroupChangePositionEvent>;
     /**
      * All panel objects.
      */

package/dist/cjs/api/component.api.js

@@ -817,6 +817,20 @@ var DockviewApi = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(DockviewApi.prototype, "onDidPopoutGroupSizeChange", {
+        get: function () {
+            return this.component.onDidPopoutGroupSizeChange;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DockviewApi.prototype, "onDidPopoutGroupPositionChange", {
+        get: function () {
+            return this.component.onDidPopoutGroupPositionChange;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(DockviewApi.prototype, "panels", {
         /**
          * All panel objects.

package/dist/cjs/dockview/components/popupService.js

@@ -48,7 +48,7 @@ var PopupService = /** @class */ (function (_super) {
         wrapper.style.left = "".concat(position.x - offsetX, "px");
         this._element.appendChild(wrapper);
         this._active = wrapper;
-        this._activeDisposable.value = new lifecycle_1.CompositeDisposable((0, events_1.addDisposableWindowListener)(window, 'pointerdown', function (event) {
+        this._activeDisposable.value = new lifecycle_1.CompositeDisposable((0, events_1.addDisposableListener)(window, 'pointerdown', function (event) {
             var _a;
             var target = event.target;
             if (!(target instanceof HTMLElement)) {

package/dist/cjs/dockview/components/titlebar/tabs.js

@@ -80,9 +80,15 @@ var Tabs = /** @class */ (function (_super) {
         _this._tabsList = document.createElement('div');
         _this._tabsList.className = 'dv-tabs-container dv-horizontal';
         _this.showTabsOverflowControl = options.showTabsOverflowControl;
-        var scrollbar = new scrollbar_1.Scrollbar(_this._tabsList);
-        _this._element = scrollbar.element;
-        _this.addDisposables(_this._onOverflowTabsChange, _this._observerDisposable, scrollbar, _this._onWillShowOverlay, _this._onDrop, _this._onTabDragStart, (0, events_1.addDisposableListener)(_this.element, 'pointerdown', function (event) {
+        if (accessor.options.scrollbars === 'native') {
+            _this._element = _this._tabsList;
+        }
+        else {
+            var scrollbar = new scrollbar_1.Scrollbar(_this._tabsList);
+            _this._element = scrollbar.element;
+            _this.addDisposables(scrollbar);
+        }
+        _this.addDisposables(_this._onOverflowTabsChange, _this._observerDisposable, _this._onWillShowOverlay, _this._onDrop, _this._onTabDragStart, (0, events_1.addDisposableListener)(_this.element, 'pointerdown', function (event) {
             if (event.defaultPrevented) {
                 return;
             }

package/dist/cjs/dockview/dockviewComponent.d.ts

@@ -107,6 +107,16 @@ export interface DockviewMaximizedGroupChanged {
     group: DockviewGroupPanel;
     isMaximized: boolean;
 }
+export interface PopoutGroupChangeSizeEvent {
+    width: number;
+    height: number;
+    group: DockviewGroupPanel;
+}
+export interface PopoutGroupChangePositionEvent {
+    screenX: number;
+    screenY: number;
+    group: DockviewGroupPanel;
+}
 export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
     readonly activePanel: IDockviewPanel | undefined;
     readonly totalPanels: number;
@@ -127,6 +137,8 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
     readonly onUnhandledDragOverEvent: Event<DockviewDndOverlayEvent>;
     readonly onDidMovePanel: Event<MovePanelEvent>;
     readonly onDidMaximizedGroupChange: Event<DockviewMaximizedGroupChanged>;
+    readonly onDidPopoutGroupSizeChange: Event<PopoutGroupChangeSizeEvent>;
+    readonly onDidPopoutGroupPositionChange: Event<PopoutGroupChangePositionEvent>;
     readonly options: DockviewComponentOptions;
     updateOptions(options: DockviewOptions): void;
     moveGroupOrPanel(options: MoveGroupOrPanelOptions): void;
@@ -185,6 +197,10 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     readonly onDidRemovePanel: Event<IDockviewPanel>;
     private readonly _onDidAddPanel;
     readonly onDidAddPanel: Event<IDockviewPanel>;
+    private readonly _onDidPopoutGroupSizeChange;
+    readonly onDidPopoutGroupSizeChange: Event<PopoutGroupChangeSizeEvent>;
+    private readonly _onDidPopoutGroupPositionChange;
+    readonly onDidPopoutGroupPositionChange: Event<PopoutGroupChangePositionEvent>;
     private readonly _onDidLayoutFromJSON;
     readonly onDidLayoutFromJSON: Event<void>;
     private readonly _onDidActivePanelChange;

package/dist/cjs/dockview/dockviewComponent.js

@@ -142,6 +142,10 @@ var DockviewComponent = /** @class */ (function (_super) {
         _this.onDidRemovePanel = _this._onDidRemovePanel.event;
         _this._onDidAddPanel = new events_1.Emitter();
         _this.onDidAddPanel = _this._onDidAddPanel.event;
+        _this._onDidPopoutGroupSizeChange = new events_1.Emitter();
+        _this.onDidPopoutGroupSizeChange = _this._onDidPopoutGroupSizeChange.event;
+        _this._onDidPopoutGroupPositionChange = new events_1.Emitter();
+        _this.onDidPopoutGroupPositionChange = _this._onDidPopoutGroupPositionChange.event;
         _this._onDidLayoutFromJSON = new events_1.Emitter();
         _this.onDidLayoutFromJSON = _this._onDidLayoutFromJSON.event;
         _this._onDidActivePanelChange = new events_1.Emitter();
@@ -171,7 +175,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         if (options.debug) {
             _this.addDisposables(new strictEventsSequencing_1.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(function () {
+        _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(function () {
             _this.updateWatermark();
         }), _this.onDidAdd(function (event) {
             if (!_this._moving) {
@@ -192,7 +196,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             });
         }), events_1.Event.any(_this.onDidAdd, _this.onDidRemove)(function () {
             _this.updateWatermark();
-        }), events_1.Event.any(_this.onDidAddPanel, _this.onDidRemovePanel, _this.onDidAddGroup, _this.onDidRemove, _this.onDidMovePanel, _this.onDidActivePanelChange)(function () {
+        }), events_1.Event.any(_this.onDidAddPanel, _this.onDidRemovePanel, _this.onDidAddGroup, _this.onDidRemove, _this.onDidMovePanel, _this.onDidActivePanelChange, _this.onDidPopoutGroupPositionChange, _this.onDidPopoutGroupSizeChange)(function () {
             _this._bufferOnDidLayoutChange.fire();
         }), lifecycle_1.Disposable.from(function () {
             var e_1, _a, e_2, _b;
@@ -541,13 +545,26 @@ var DockviewComponent = /** @class */ (function (_super) {
                     },
                 },
             };
-            popoutWindowDisposable.addDisposables(
+            var _onDidWindowPositionChange = (0, dom_1.onDidWindowMoveEnd)(_window.window);
+            popoutWindowDisposable.addDisposables(_onDidWindowPositionChange, (0, dom_1.onDidWindowResizeEnd)(_window.window, function () {
+                _this._onDidPopoutGroupSizeChange.fire({
+                    width: _window.window.innerWidth,
+                    height: _window.window.innerHeight,
+                    group: group,
+                });
+            }), _onDidWindowPositionChange.event(function () {
+                _this._onDidPopoutGroupPositionChange.fire({
+                    screenX: _window.window.screenX,
+                    screenY: _window.window.screenX,
+                    group: 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
              */
-            (0, events_1.addDisposableWindowListener)(_window.window, 'resize', function () {
+            (0, events_1.addDisposableListener)(_window.window, 'resize', function () {
                 group.layout(_window.window.innerWidth, _window.window.innerHeight);
             }), overlayRenderContainer, lifecycle_1.Disposable.from(function () {
                 if (_this.isDisposed) {
@@ -770,7 +787,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         }
         this.updateWatermark();
     };
-    DockviewComponent.prototype.orthogonalize = function (position) {
+    DockviewComponent.prototype.orthogonalize = function (position, options) {
         switch (position) {
             case 'top':
             case 'bottom':
@@ -795,10 +812,10 @@ var DockviewComponent = /** @class */ (function (_super) {
             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 ".concat(position));
         }
@@ -1424,7 +1441,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                 }
             }
             else {
-                var group_1 = this.orthogonalize((0, droptarget_1.directionToPosition)(options.direction));
+                var group_1 = this.orthogonalize((0, droptarget_1.directionToPosition)(options.direction), options);
                 if (!options.skipSetActive) {
                     this.doSetGroupAndPanelActive(group_1);
                 }
@@ -1909,8 +1926,8 @@ var DockviewComponent = /** @class */ (function (_super) {
         });
         return panel;
     };
-    DockviewComponent.prototype.createGroupAtLocation = function (location, size) {
-        var group = this.createGroup();
+    DockviewComponent.prototype.createGroupAtLocation = function (location, size, options) {
+        var group = this.createGroup(options);
         this.doAddGroup(group, location, size);
         return group;
     };

package/dist/cjs/dockview/options.d.ts

@@ -58,6 +58,13 @@ export interface DockviewOptions {
     noPanelsOverlay?: 'emptyGroup' | 'watermark';
     theme?: DockviewTheme;
     disableTabsOverflowList?: boolean;
+    /**
+     * Select `native` to use built-in scrollbar behaviours and `custom` to use an internal implementation
+     * that allows for improved scrollbar overlay UX.
+     *
+     * This is only applied to the tab header section. Defaults to `custom`.
+     */
+    scrollbars?: 'native' | 'custom';
 }
 export interface DockviewDndOverlayEvent extends IAcceptableEvent {
     nativeEvent: DragEvent;

package/dist/cjs/dockview/options.js

@@ -53,6 +53,7 @@ exports.PROPERTY_KEYS_DOCKVIEW = (function () {
         dndEdges: undefined,
         theme: undefined,
         disableTabsOverflowList: undefined,
+        scrollbars: undefined,
     };
     return Object.keys(properties);
 })();

package/dist/cjs/dom.d.ts

@@ -1,4 +1,4 @@
-import { Event as DockviewEvent } from './events';
+import { Event as DockviewEvent, Emitter } from './events';
 import { IDisposable, CompositeDisposable } from './lifecycle';
 export interface OverflowEvent {
     hasScrollX: boolean;
@@ -15,13 +15,13 @@ export declare const removeClasses: (element: HTMLElement, ...classes: string[])
 export declare const addClasses: (element: HTMLElement, ...classes: string[]) => void;
 export declare const toggleClass: (element: HTMLElement, className: string, isToggled: boolean) => void;
 export declare function isAncestor(testChild: Node | null, testAncestor: Node | null): boolean;
-export declare function getElementsByTagName(tag: string): HTMLElement[];
+export declare function getElementsByTagName(tag: string, document: ParentNode): HTMLElement[];
 export interface IFocusTracker extends IDisposable {
     readonly onDidFocus: DockviewEvent<void>;
     readonly onDidBlur: DockviewEvent<void>;
     refreshState?(): void;
 }
-export declare function trackFocus(element: HTMLElement | Window): IFocusTracker;
+export declare function trackFocus(element: HTMLElement): IFocusTracker;
 export declare function quasiPreventDefault(event: Event): void;
 export declare function quasiDefaultPrevented(event: Event): boolean;
 export declare function addStyles(document: Document, styleSheetList: StyleSheetList): void;
@@ -37,7 +37,7 @@ export declare function getDomNodePagePosition(domNode: Element): {
  */
 export declare function isInDocument(element: Element): boolean;
 export declare function addTestId(element: HTMLElement, id: string): void;
-export declare function disableIframePointEvents(): {
+export declare function disableIframePointEvents(rootNode?: ParentNode): {
     release: () => void;
 };
 export declare function getDockviewTheme(element: HTMLElement): string | undefined;
@@ -48,3 +48,5 @@ export declare class Classnames {
     setClassNames(classNames: string): void;
 }
 export declare function isChildEntirelyVisibleWithinParent(child: HTMLElement, parent: HTMLElement): boolean;
+export declare function onDidWindowMoveEnd(window: Window): Emitter<void>;
+export declare function onDidWindowResizeEnd(element: Window, cb: () => void): CompositeDisposable;

package/dist/cjs/dom.js

@@ -25,33 +25,8 @@ var __values = (this && this.__values) || function(o) {
     };
     throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 };
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isChildEntirelyVisibleWithinParent = exports.Classnames = exports.getDockviewTheme = exports.disableIframePointEvents = exports.addTestId = exports.isInDocument = exports.getDomNodePagePosition = exports.addStyles = exports.quasiDefaultPrevented = exports.quasiPreventDefault = exports.trackFocus = exports.getElementsByTagName = exports.isAncestor = exports.toggleClass = exports.addClasses = exports.removeClasses = exports.watchElementResize = exports.OverflowObserver = void 0;
+exports.onDidWindowResizeEnd = exports.onDidWindowMoveEnd = exports.isChildEntirelyVisibleWithinParent = exports.Classnames = exports.getDockviewTheme = exports.disableIframePointEvents = exports.addTestId = exports.isInDocument = exports.getDomNodePagePosition = exports.addStyles = exports.quasiDefaultPrevented = exports.quasiPreventDefault = exports.trackFocus = exports.getElementsByTagName = exports.isAncestor = exports.toggleClass = exports.addClasses = exports.removeClasses = exports.watchElementResize = exports.OverflowObserver = void 0;
 var events_1 = require("./events");
 var lifecycle_1 = require("./lifecycle");
 var OverflowObserver = /** @class */ (function (_super) {
@@ -159,8 +134,8 @@ function isAncestor(testChild, testAncestor) {
     return false;
 }
 exports.isAncestor = isAncestor;
-function getElementsByTagName(tag) {
-    return Array.prototype.slice.call(document.getElementsByTagName(tag), 0);
+function getElementsByTagName(tag, document) {
+    return Array.prototype.slice.call(document.querySelectorAll(tag), 0);
 }
 exports.getElementsByTagName = getElementsByTagName;
 function trackFocus(element) {
@@ -211,14 +186,8 @@ var FocusTracker = /** @class */ (function (_super) {
                 }
             }
         };
-        if (element instanceof HTMLElement) {
-            _this.addDisposables((0, events_1.addDisposableListener)(element, 'focus', onFocus, true));
-            _this.addDisposables((0, events_1.addDisposableListener)(element, 'blur', onBlur, true));
-        }
-        else {
-            _this.addDisposables((0, events_1.addDisposableWindowListener)(element, 'focus', onFocus, true));
-            _this.addDisposables((0, events_1.addDisposableWindowListener)(element, 'blur', onBlur, true));
-        }
+        _this.addDisposables((0, events_1.addDisposableListener)(element, 'focus', onFocus, true));
+        _this.addDisposables((0, events_1.addDisposableListener)(element, 'blur', onBlur, true));
         return _this;
     }
     FocusTracker.prototype.refreshState = function () {
@@ -321,9 +290,43 @@ function addTestId(element, id) {
     element.setAttribute('data-testid', id);
 }
 exports.addTestId = addTestId;
-function disableIframePointEvents() {
-    var e_5, _a;
-    var iframes = __spreadArray(__spreadArray([], __read(getElementsByTagName('iframe')), false), __read(getElementsByTagName('webview')), false);
+/**
+ * Should be more efficient than element.querySelectorAll("*") since there
+ * is no need to store every element in-memory using this approach
+ */
+function allTagsNamesInclusiveOfShadowDoms(tagNames) {
+    var iframes = [];
+    function findIframesInNode(node) {
+        var e_5, _a;
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            if (tagNames.includes(node.tagName)) {
+                iframes.push(node);
+            }
+            if (node.shadowRoot) {
+                findIframesInNode(node.shadowRoot);
+            }
+            try {
+                for (var _b = __values(node.children), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var child = _c.value;
+                    findIframesInNode(child);
+                }
+            }
+            catch (e_5_1) { e_5 = { error: e_5_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_5) throw e_5.error; }
+            }
+        }
+    }
+    findIframesInNode(document.documentElement);
+    return iframes;
+}
+function disableIframePointEvents(rootNode) {
+    var e_6, _a;
+    if (rootNode === void 0) { rootNode = document; }
+    var iframes = allTagsNamesInclusiveOfShadowDoms(['IFRAME', 'WEBVIEW']);
     var original = new WeakMap(); // don't hold onto HTMLElement references longer than required
     try {
         for (var iframes_1 = __values(iframes), iframes_1_1 = iframes_1.next(); !iframes_1_1.done; iframes_1_1 = iframes_1.next()) {
@@ -332,16 +335,16 @@ function disableIframePointEvents() {
             iframe.style.pointerEvents = 'none';
         }
     }
-    catch (e_5_1) { e_5 = { error: e_5_1 }; }
+    catch (e_6_1) { e_6 = { error: e_6_1 }; }
     finally {
         try {
             if (iframes_1_1 && !iframes_1_1.done && (_a = iframes_1.return)) _a.call(iframes_1);
         }
-        finally { if (e_5) throw e_5.error; }
+        finally { if (e_6) throw e_6.error; }
     }
     return {
         release: function () {
-            var e_6, _a;
+            var e_7, _a;
             var _b;
             try {
                 for (var iframes_2 = __values(iframes), iframes_2_1 = iframes_2.next(); !iframes_2_1.done; iframes_2_1 = iframes_2.next()) {
@@ -349,12 +352,12 @@ function disableIframePointEvents() {
                     iframe.style.pointerEvents = (_b = original.get(iframe)) !== null && _b !== void 0 ? _b : 'auto';
                 }
             }
-            catch (e_6_1) { e_6 = { error: e_6_1 }; }
+            catch (e_7_1) { e_7 = { error: e_7_1 }; }
             finally {
                 try {
                     if (iframes_2_1 && !iframes_2_1.done && (_a = iframes_2.return)) _a.call(iframes_2);
                 }
-                finally { if (e_6) throw e_6.error; }
+                finally { if (e_7) throw e_7.error; }
             }
             iframes.splice(0, iframes.length); // don't hold onto HTMLElement references longer than required
         },
@@ -389,19 +392,19 @@ var Classnames = /** @class */ (function () {
         this._classNames = [];
     }
     Classnames.prototype.setClassNames = function (classNames) {
-        var e_7, _a, e_8, _b;
+        var e_8, _a, e_9, _b;
         try {
             for (var _c = __values(this._classNames), _d = _c.next(); !_d.done; _d = _c.next()) {
                 var className = _d.value;
                 (0, exports.toggleClass)(this.element, className, false);
             }
         }
-        catch (e_7_1) { e_7 = { error: e_7_1 }; }
+        catch (e_8_1) { e_8 = { error: e_8_1 }; }
         finally {
             try {
                 if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
             }
-            finally { if (e_7) throw e_7.error; }
+            finally { if (e_8) throw e_8.error; }
         }
         this._classNames = classNames
             .split(' ')
@@ -412,17 +415,18 @@ var Classnames = /** @class */ (function () {
                 (0, exports.toggleClass)(this.element, className, true);
             }
         }
-        catch (e_8_1) { e_8 = { error: e_8_1 }; }
+        catch (e_9_1) { e_9 = { error: e_9_1 }; }
         finally {
             try {
                 if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
             }
-            finally { if (e_8) throw e_8.error; }
+            finally { if (e_9) throw e_9.error; }
         }
     };
     return Classnames;
 }());
 exports.Classnames = Classnames;
+var DEBOUCE_DELAY = 100;
 function isChildEntirelyVisibleWithinParent(child, parent) {
     //
     var childPosition = getDomNodePagePosition(child);
@@ -437,3 +441,40 @@ function isChildEntirelyVisibleWithinParent(child, parent) {
     return true;
 }
 exports.isChildEntirelyVisibleWithinParent = isChildEntirelyVisibleWithinParent;
+function onDidWindowMoveEnd(window) {
+    var emitter = new events_1.Emitter();
+    var previousScreenX = window.screenX;
+    var previousScreenY = window.screenY;
+    var timeout;
+    var checkMovement = function () {
+        if (window.closed) {
+            return;
+        }
+        var currentScreenX = window.screenX;
+        var currentScreenY = window.screenY;
+        if (currentScreenX !== previousScreenX ||
+            currentScreenY !== previousScreenY) {
+            clearTimeout(timeout);
+            timeout = setTimeout(function () {
+                emitter.fire();
+            }, DEBOUCE_DELAY);
+            previousScreenX = currentScreenX;
+            previousScreenY = currentScreenY;
+        }
+        requestAnimationFrame(checkMovement);
+    };
+    checkMovement();
+    return emitter;
+}
+exports.onDidWindowMoveEnd = onDidWindowMoveEnd;
+function onDidWindowResizeEnd(element, cb) {
+    var resizeTimeout;
+    var disposable = new lifecycle_1.CompositeDisposable((0, events_1.addDisposableListener)(element, 'resize', function () {
+        clearTimeout(resizeTimeout);
+        resizeTimeout = setTimeout(function () {
+            cb();
+        }, DEBOUCE_DELAY);
+    }));
+    return disposable;
+}
+exports.onDidWindowResizeEnd = onDidWindowResizeEnd;

package/dist/cjs/events.d.ts

@@ -54,7 +54,7 @@ export declare class Emitter<T> implements IDisposable {
     fire(e: T): void;
     dispose(): void;
 }
-export declare function addDisposableWindowListener<K extends keyof WindowEventMap>(element: Window, type: K, listener: (this: Window, ev: WindowEventMap[K]) => any, options?: boolean | AddEventListenerOptions): IDisposable;
+export declare function addDisposableListener<K extends keyof WindowEventMap>(element: Window, type: K, listener: (this: Window, ev: WindowEventMap[K]) => any, options?: boolean | AddEventListenerOptions): IDisposable;
 export declare function addDisposableListener<K extends keyof HTMLElementEventMap>(element: HTMLElement, type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): IDisposable;
 /**
  *

package/dist/cjs/events.js

@@ -11,7 +11,7 @@ var __values = (this && this.__values) || function(o) {
     throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AsapEvent = exports.addDisposableListener = exports.addDisposableWindowListener = exports.Emitter = exports.AcceptableEvent = exports.DockviewEvent = exports.Event = void 0;
+exports.AsapEvent = exports.addDisposableListener = exports.Emitter = exports.AcceptableEvent = exports.DockviewEvent = exports.Event = void 0;
 var Event;
 (function (Event) {
     Event.any = function () {
@@ -216,15 +216,6 @@ var Emitter = /** @class */ (function () {
     return Emitter;
 }());
 exports.Emitter = Emitter;
-function addDisposableWindowListener(element, type, listener, options) {
-    element.addEventListener(type, listener, options);
-    return {
-        dispose: function () {
-            element.removeEventListener(type, listener, options);
-        },
-    };
-}
-exports.addDisposableWindowListener = addDisposableWindowListener;
 function addDisposableListener(element, type, listener, options) {
     element.addEventListener(type, listener, options);
     return {

package/dist/cjs/overlay/overlay.js

@@ -239,7 +239,7 @@ var Overlay = /** @class */ (function (_super) {
                 dispose: function () {
                     iframes.release();
                 },
-            }, (0, events_1.addDisposableWindowListener)(window, 'pointermove', function (e) {
+            }, (0, events_1.addDisposableListener)(window, 'pointermove', function (e) {
                 var containerRect = _this.options.container.getBoundingClientRect();
                 var x = e.clientX - containerRect.left;
                 var y = e.clientY - containerRect.top;
@@ -276,7 +276,7 @@ var Overlay = /** @class */ (function (_super) {
                     bounds.right = right;
                 }
                 _this.setBounds(bounds);
-            }), (0, events_1.addDisposableWindowListener)(window, 'pointerup', function () {
+            }), (0, events_1.addDisposableListener)(window, 'pointerup', function () {
                 (0, dom_1.toggleClass)(_this._element, 'dv-resize-container-dragging', false);
                 move.dispose();
                 _this._onDidChangeEnd.fire();
@@ -322,7 +322,7 @@ var Overlay = /** @class */ (function (_super) {
             e.preventDefault();
             var startPosition = null;
             var iframes = (0, dom_1.disableIframePointEvents)();
-            move.value = new lifecycle_1.CompositeDisposable((0, events_1.addDisposableWindowListener)(window, 'pointermove', function (e) {
+            move.value = new lifecycle_1.CompositeDisposable((0, events_1.addDisposableListener)(window, 'pointermove', function (e) {
                 var containerRect = _this.options.container.getBoundingClientRect();
                 var overlayRect = _this._element.getBoundingClientRect();
                 var y = e.clientY - containerRect.top;
@@ -446,7 +446,7 @@ var Overlay = /** @class */ (function (_super) {
                 dispose: function () {
                     iframes.release();
                 },
-            }, (0, events_1.addDisposableWindowListener)(window, 'pointerup', function () {
+            }, (0, events_1.addDisposableListener)(window, 'pointerup', function () {
                 move.dispose();
                 _this._onDidChangeEnd.fire();
             }));

package/dist/cjs/paneview/draggablePaneviewPanel.d.ts

@@ -12,14 +12,25 @@ export interface PaneviewDidDropEvent extends DroptargetEvent {
     api: PaneviewApi;
 }
 export declare abstract class DraggablePaneviewPanel extends PaneviewPanel {
-    private readonly accessor;
     private handler;
     private target;
     private readonly _onDidDrop;
     readonly onDidDrop: Event<PaneviewDidDropEvent>;
     private readonly _onUnhandledDragOverEvent;
     readonly onUnhandledDragOverEvent: Event<PaneviewDndOverlayEvent>;
-    constructor(accessor: IPaneviewComponent, id: string, component: string, headerComponent: string | undefined, orientation: Orientation, isExpanded: boolean, disableDnd: boolean);
+    readonly accessor: IPaneviewComponent;
+    constructor(options: {
+        accessor: IPaneviewComponent;
+        id: string;
+        component: string;
+        headerComponent: string | undefined;
+        orientation: Orientation;
+        isExpanded: boolean;
+        disableDnd: boolean;
+        headerSize: number;
+        minimumBodySize: number;
+        maximumBodySize: number;
+    });
     private initDragFeatures;
     private onDrop;
 }

package/dist/cjs/paneview/draggablePaneviewPanel.js

@@ -36,15 +36,25 @@ var options_1 = require("./options");
 var paneviewPanel_1 = require("./paneviewPanel");
 var DraggablePaneviewPanel = /** @class */ (function (_super) {
     __extends(DraggablePaneviewPanel, _super);
-    function DraggablePaneviewPanel(accessor, id, component, headerComponent, orientation, isExpanded, disableDnd) {
-        var _this = _super.call(this, id, component, headerComponent, orientation, isExpanded, true) || this;
-        _this.accessor = accessor;
+    function DraggablePaneviewPanel(options) {
+        var _this = _super.call(this, {
+            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;
         _this._onDidDrop = new events_1.Emitter();
         _this.onDidDrop = _this._onDidDrop.event;
         _this._onUnhandledDragOverEvent = new events_1.Emitter();
         _this.onUnhandledDragOverEvent = _this._onUnhandledDragOverEvent.event;
+        _this.accessor = options.accessor;
         _this.addDisposables(_this._onDidDrop, _this._onUnhandledDragOverEvent);
-        if (!disableDnd) {
+        if (!options.disableDnd) {
             _this.initDragFeatures();
         }
         return _this;

package/dist/cjs/paneview/paneviewComponent.d.ts

@@ -12,6 +12,7 @@ export interface SerializedPaneviewPanel {
     priority?: LayoutPriority;
     minimumSize?: number;
     maximumSize?: number;
+    headerSize?: number;
     data: {
         id: string;
         component: string;
@@ -40,6 +41,9 @@ export declare class PaneFramework extends DraggablePaneviewPanel {
         isExpanded: boolean;
         disableDnd: boolean;
         accessor: IPaneviewComponent;
+        headerSize: number;
+        minimumBodySize: number;
+        maximumBodySize: number;
     });
     getBodyComponent(): IPanePart;
     getHeaderComponent(): IPanePart;
@@ -51,6 +55,7 @@ export interface AddPaneviewComponentOptions<T extends object = Parameters> {
     params?: T;
     minimumBodySize?: number;
     maximumBodySize?: number;
+    headerSize?: number;
     isExpanded?: boolean;
     title: string;
     index?: number;