dockview-core 4.0.1 → 4.1.0

package/dist/cjs/paneview/paneviewComponent.js

@@ -65,10 +65,24 @@ var math_1 = require("../math");
 var resizable_1 = require("../resizable");
 var dom_1 = require("../dom");
 var nextLayoutId = (0, math_1.sequentialNumberGenerator)();
+var HEADER_SIZE = 22;
+var MINIMUM_BODY_SIZE = 0;
+var MAXIMUM_BODY_SIZE = Number.MAX_SAFE_INTEGER;
 var PaneFramework = /** @class */ (function (_super) {
     __extends(PaneFramework, _super);
     function PaneFramework(options) {
-        var _this = _super.call(this, options.accessor, options.id, options.component, options.headerComponent, options.orientation, options.isExpanded, options.disableDnd) || this;
+        var _this = _super.call(this, {
+            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;
         _this.options = options;
         return _this;
     }
@@ -201,7 +215,7 @@ var PaneviewComponent = /** @class */ (function (_super) {
         this._options = __assign(__assign({}, this.options), options);
     };
     PaneviewComponent.prototype.addPanel = function (options) {
-        var _a;
+        var _a, _b;
         var body = this.options.createComponent({
             id: options.id,
             name: options.component,
@@ -226,12 +240,15 @@ var PaneviewComponent = /** @class */ (function (_super) {
             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);
         var size = typeof options.size === 'number' ? options.size : splitview_1.Sizing.Distribute;
         var 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,
@@ -279,6 +296,7 @@ var PaneviewComponent = /** @class */ (function (_super) {
                 data: view.toJSON(),
                 minimumSize: minimum(view.minimumBodySize),
                 maximumSize: maximum(view.maximumBodySize),
+                headerSize: view.headerSize,
                 expanded: view.isExpanded(),
             };
         });
@@ -300,6 +318,7 @@ var PaneviewComponent = /** @class */ (function (_super) {
             descriptor: {
                 size: size,
                 views: views.map(function (view) {
+                    var _a, _b, _c;
                     var data = view.data;
                     var body = _this.options.createComponent({
                         id: data.id,
@@ -326,6 +345,9 @@ var PaneviewComponent = /** @class */ (function (_super) {
                         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(function () {

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

@@ -39,7 +39,6 @@ export interface IPaneviewPanel extends BasePanelViewExported<PaneviewPanelApiIm
     headerVisible: boolean;
 }
 export declare abstract class PaneviewPanel extends BasePanelView<PaneviewPanelApiImpl> implements IPaneview, IPaneviewPanel {
-    private readonly headerComponent;
     private readonly _onDidChangeExpansionState;
     onDidChangeExpansionState: Event<boolean>;
     private readonly _onDidChange;
@@ -47,7 +46,6 @@ export declare abstract class PaneviewPanel extends BasePanelView<PaneviewPanelA
         size?: number;
         orthogonalSize?: number;
     }>;
-    private readonly headerSize;
     private _orthogonalSize;
     private _size;
     private _minimumBodySize;
@@ -57,10 +55,11 @@ export declare abstract class PaneviewPanel extends BasePanelView<PaneviewPanelA
     protected body?: HTMLElement;
     private bodyPart?;
     private headerPart?;
-    private expandedSize;
     private animationTimer;
     private _orientation;
     private _headerVisible;
+    readonly headerSize: number;
+    readonly headerComponent: string | undefined;
     set orientation(value: Orientation);
     get orientation(): Orientation;
     get minimumSize(): number;
@@ -74,7 +73,17 @@ export declare abstract class PaneviewPanel extends BasePanelView<PaneviewPanelA
     set maximumBodySize(value: number);
     get headerVisible(): boolean;
     set headerVisible(value: boolean);
-    constructor(id: string, component: string, headerComponent: string | undefined, orientation: Orientation, isExpanded: boolean, isHeaderVisible: boolean);
+    constructor(options: {
+        id: string;
+        component: string;
+        headerComponent: string | undefined;
+        orientation: Orientation;
+        isExpanded: boolean;
+        isHeaderVisible: boolean;
+        headerSize: number;
+        minimumBodySize: number;
+        maximumBodySize: number;
+    });
     setVisible(isVisible: boolean): void;
     setActive(isActive: boolean): void;
     isExpanded(): boolean;

package/dist/cjs/paneview/paneviewPanel.js

@@ -50,26 +50,25 @@ var basePanelView_1 = require("../gridview/basePanelView");
 var splitview_1 = require("../splitview/splitview");
 var PaneviewPanel = /** @class */ (function (_super) {
     __extends(PaneviewPanel, _super);
-    function PaneviewPanel(id, component, headerComponent, orientation, isExpanded, isHeaderVisible) {
-        var _this = _super.call(this, id, component, new paneviewPanelApi_1.PaneviewPanelApiImpl(id, component)) || this;
-        _this.headerComponent = headerComponent;
+    function PaneviewPanel(options) {
+        var _this = _super.call(this, options.id, options.component, new paneviewPanelApi_1.PaneviewPanelApiImpl(options.id, options.component)) || this;
         _this._onDidChangeExpansionState = new events_1.Emitter({ replay: true });
         _this.onDidChangeExpansionState = _this._onDidChangeExpansionState.event;
         _this._onDidChange = new events_1.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(function (event) {
             var isVisible = event.isVisible;
@@ -217,9 +216,6 @@ var PaneviewPanel = /** @class */ (function (_super) {
         var _a = __read(this.orientation === splitview_1.Orientation.HORIZONTAL
             ? [size, orthogonalSize]
             : [orthogonalSize, size], 2), width = _a[0], height = _a[1];
-        if (this.isExpanded()) {
-            this.expandedSize = width;
-        }
         _super.prototype.layout.call(this, width, height);
     };
     PaneviewPanel.prototype.init = function (parameters) {

package/dist/cjs/popoutWindow.js

@@ -153,7 +153,7 @@ var PopoutWindow = /** @class */ (function (_super) {
                 this._window = { value: externalWindow, disposable: disposable };
                 disposable.addDisposables(lifecycle_1.Disposable.from(function () {
                     externalWindow.close();
-                }), (0, events_1.addDisposableWindowListener)(window, 'beforeunload', function () {
+                }), (0, events_1.addDisposableListener)(window, 'beforeunload', function () {
                     /**
                      * before the main window closes we should close this popup too
                      * to be good citizens
@@ -188,7 +188,7 @@ var PopoutWindow = /** @class */ (function (_super) {
                                  * beforeunload must be registered after load for reasons I could not determine
                                  * otherwise the beforeunload event will not fire when the window is closed
                                  */
-                                (0, events_1.addDisposableWindowListener)(externalWindow, 'beforeunload', function () {
+                                (0, events_1.addDisposableListener)(externalWindow, 'beforeunload', function () {
                                     /**
                                      * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
                                      */

package/dist/cjs/splitview/splitviewComponent.js

@@ -122,6 +122,9 @@ var SplitviewComponent = /** @class */ (function (_super) {
         },
         set: function (value) {
             var _this = this;
+            if (this._splitview) {
+                this._splitview.dispose();
+            }
             this._splitview = value;
             this._splitviewChangeDisposable.value = new lifecycle_1.CompositeDisposable(this._splitview.onDidSashEnd(function () {
                 _this._onDidLayoutChange.fire(undefined);

package/dist/dockview-core.amd.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 4.0.1
+ * @version 4.1.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -245,14 +245,6 @@ define(['exports'], (function (exports) { 'use strict';
   }
   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 {
@@ -431,9 +423,6 @@ define(['exports'], (function (exports) { 'use strict';
       }
       return false;
   }
-  function getElementsByTagName(tag) {
-      return Array.prototype.slice.call(document.getElementsByTagName(tag), 0);
-  }
   function trackFocus(element) {
       return new FocusTracker(element);
   }
@@ -480,14 +469,8 @@ define(['exports'], (function (exports) { 'use strict';
                   }
               }
           };
-          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();
@@ -561,11 +544,30 @@ define(['exports'], (function (exports) { 'use strict';
   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);
@@ -617,6 +619,7 @@ define(['exports'], (function (exports) { 'use strict';
           }
       }
   }
+  const DEBOUCE_DELAY = 100;
   function isChildEntirelyVisibleWithinParent(child, parent) {
       //
       const childPosition = getDomNodePagePosition(child);
@@ -630,6 +633,41 @@ define(['exports'], (function (exports) { 'use strict';
       }
       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) {
@@ -3569,6 +3607,12 @@ define(['exports'], (function (exports) { 'use strict';
       get onUnhandledDragOverEvent() {
           return this.component.onUnhandledDragOverEvent;
       }
+      get onDidPopoutGroupSizeChange() {
+          return this.component.onDidPopoutGroupSizeChange;
+      }
+      get onDidPopoutGroupPositionChange() {
+          return this.component.onDidPopoutGroupPositionChange;
+      }
       /**
        * All panel objects.
        */
@@ -4534,26 +4578,25 @@ define(['exports'], (function (exports) { 'use strict';
           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;
@@ -4620,9 +4663,6 @@ define(['exports'], (function (exports) { 'use strict';
           const [width, height] = this.orientation === exports.Orientation.HORIZONTAL
               ? [size, orthogonalSize]
               : [orthogonalSize, size];
-          if (this.isExpanded()) {
-              this.expandedSize = width;
-          }
           super.layout(width, height);
       }
       init(parameters) {
@@ -4679,15 +4719,25 @@ define(['exports'], (function (exports) { 'use strict';
   }
 
   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();
           }
       }
@@ -7321,7 +7371,7 @@ define(['exports'], (function (exports) { 'use strict';
                   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;
@@ -7358,7 +7408,7 @@ define(['exports'], (function (exports) { 'use strict';
                       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();
@@ -7403,7 +7453,7 @@ define(['exports'], (function (exports) { 'use strict';
               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;
@@ -7527,7 +7577,7 @@ define(['exports'], (function (exports) { 'use strict';
                   dispose: () => {
                       iframes.release();
                   },
-              }, addDisposableWindowListener(window, 'pointerup', () => {
+              }, addDisposableListener(window, 'pointerup', () => {
                   move.dispose();
                   this._onDidChangeEnd.fire();
               }));
@@ -7833,7 +7883,7 @@ define(['exports'], (function (exports) { 'use strict';
               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
@@ -7868,7 +7918,7 @@ define(['exports'], (function (exports) { 'use strict';
                            * 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
                                */
@@ -7965,7 +8015,7 @@ define(['exports'], (function (exports) { 'use strict';
           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)) {
@@ -8144,6 +8194,10 @@ define(['exports'], (function (exports) { 'use strict';
           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();
@@ -8173,7 +8227,7 @@ define(['exports'], (function (exports) { 'use strict';
           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) {
@@ -8194,7 +8248,7 @@ define(['exports'], (function (exports) { 'use strict';
               });
           }), 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
@@ -8455,13 +8509,26 @@ define(['exports'], (function (exports) { 'use strict';
                       },
                   },
               };
-              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) {
@@ -8675,7 +8742,7 @@ define(['exports'], (function (exports) { 'use strict';
           }
           this.updateWatermark();
       }
-      orthogonalize(position) {
+      orthogonalize(position, options) {
           switch (position) {
               case 'top':
               case 'bottom':
@@ -8698,10 +8765,10 @@ define(['exports'], (function (exports) { 'use strict';
               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}`);
           }
@@ -9197,7 +9264,7 @@ define(['exports'], (function (exports) { 'use strict';
                   }
               }
               else {
-                  const group = this.orthogonalize(directionToPosition(options.direction));
+                  const group = this.orthogonalize(directionToPosition(options.direction), options);
                   if (!options.skipSetActive) {
                       this.doSetGroupAndPanelActive(group);
                   }
@@ -9639,8 +9706,8 @@ define(['exports'], (function (exports) { 'use strict';
           });
           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;
       }
@@ -9974,6 +10041,9 @@ define(['exports'], (function (exports) { 'use strict';
           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);
@@ -10277,9 +10347,23 @@ define(['exports'], (function (exports) { 'use strict';
   }
 
   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() {
@@ -10374,7 +10458,7 @@ define(['exports'], (function (exports) { 'use strict';
           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,
@@ -10399,12 +10483,15 @@ define(['exports'], (function (exports) { 'use strict';
               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,
@@ -10449,6 +10536,7 @@ define(['exports'], (function (exports) { 'use strict';
                   data: view.toJSON(),
                   minimumSize: minimum(view.minimumBodySize),
                   maximumSize: maximum(view.maximumBodySize),
+                  headerSize: view.headerSize,
                   expanded: view.isExpanded(),
               };
           });
@@ -10469,6 +10557,7 @@ define(['exports'], (function (exports) { 'use strict';
               descriptor: {
                   size,
                   views: views.map((view) => {
+                      var _a, _b, _c;
                       const data = view.data;
                       const body = this.options.createComponent({
                           id: data.id,
@@ -10495,6 +10584,9 @@ define(['exports'], (function (exports) { 'use strict';
                           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(() => {