dockview-core 4.0.0 → 4.1.0

package/dist/esm/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/esm/api/component.api.js

@@ -568,6 +568,12 @@ export class DockviewApi {
     get onUnhandledDragOverEvent() {
         return this.component.onUnhandledDragOverEvent;
     }
+    get onDidPopoutGroupSizeChange() {
+        return this.component.onDidPopoutGroupSizeChange;
+    }
+    get onDidPopoutGroupPositionChange() {
+        return this.component.onDidPopoutGroupPositionChange;
+    }
     /**
      * All panel objects.
      */

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

@@ -1,4 +1,4 @@
-import { addDisposableWindowListener } from '../../events';
+import { addDisposableListener } from '../../events';
 import { CompositeDisposable, Disposable, MutableDisposable, } from '../../lifecycle';
 export class PopupService extends CompositeDisposable {
     constructor(root) {
@@ -27,7 +27,7 @@ export class PopupService extends CompositeDisposable {
         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)) {

package/dist/esm/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/esm/dockview/dockviewComponent.js

@@ -3,7 +3,7 @@ import { directionToPosition, Droptarget, } from '../dnd/droptarget';
 import { tail, sequenceEquals, remove } from '../array';
 import { DockviewPanel } from './dockviewPanel';
 import { CompositeDisposable, Disposable } from '../lifecycle';
-import { Event, Emitter, addDisposableWindowListener } from '../events';
+import { Event, Emitter, addDisposableListener } from '../events';
 import { Watermark } from './components/watermark/watermark';
 import { sequentialNumberGenerator } from '../math';
 import { DefaultDockviewDeserialzier } from './deserializer';
@@ -16,7 +16,7 @@ import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { DockviewPanelModel } from './dockviewPanelModel';
 import { getPanelData } from '../dnd/dataTransfer';
 import { Overlay } from '../overlay/overlay';
-import { addTestId, Classnames, getDockviewTheme, toggleClass, watchElementResize, } from '../dom';
+import { addTestId, Classnames, getDockviewTheme, onDidWindowResizeEnd, onDidWindowMoveEnd, toggleClass, watchElementResize, } from '../dom';
 import { DockviewFloatingGroupPanel } from './dockviewFloatingGroupPanel';
 import { DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE, DEFAULT_FLOATING_GROUP_POSITION, } from '../constants';
 import { OverlayRenderContainer, } from '../overlay/overlayRenderContainer';
@@ -105,6 +105,10 @@ export class DockviewComponent extends BaseGrid {
         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();
@@ -134,7 +138,7 @@ export class DockviewComponent extends BaseGrid {
         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) {
@@ -155,7 +159,7 @@ export class DockviewComponent extends BaseGrid {
             });
         }), Event.any(this.onDidAdd, this.onDidRemove)(() => {
             this.updateWatermark();
-        }), Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidAddGroup, this.onDidRemove, this.onDidMovePanel, this.onDidActivePanelChange)(() => {
+        }), Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidAddGroup, this.onDidRemove, this.onDidMovePanel, this.onDidActivePanelChange, this.onDidPopoutGroupPositionChange, this.onDidPopoutGroupSizeChange)(() => {
             this._bufferOnDidLayoutChange.fire();
         }), Disposable.from(() => {
             // iterate over a copy of the array since .dispose() mutates the original array
@@ -416,13 +420,26 @@ export class DockviewComponent extends BaseGrid {
                     },
                 },
             };
-            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, Disposable.from(() => {
                 if (this.isDisposed) {
@@ -636,7 +653,7 @@ export class DockviewComponent extends BaseGrid {
         }
         this.updateWatermark();
     }
-    orthogonalize(position) {
+    orthogonalize(position, options) {
         switch (position) {
             case 'top':
             case 'bottom':
@@ -661,10 +678,10 @@ export class DockviewComponent extends BaseGrid {
             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}`);
         }
@@ -1160,7 +1177,7 @@ export class DockviewComponent extends BaseGrid {
                 }
             }
             else {
-                const group = this.orthogonalize(directionToPosition(options.direction));
+                const group = this.orthogonalize(directionToPosition(options.direction), options);
                 if (!options.skipSetActive) {
                     this.doSetGroupAndPanelActive(group);
                 }
@@ -1602,8 +1619,8 @@ export class DockviewComponent extends BaseGrid {
         });
         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;
     }

package/dist/esm/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/esm/dom.js

@@ -1,4 +1,4 @@
-import { Emitter, addDisposableListener, addDisposableWindowListener, } from './events';
+import { Emitter, addDisposableListener, } from './events';
 import { CompositeDisposable } from './lifecycle';
 export class OverflowObserver extends CompositeDisposable {
     constructor(el) {
@@ -66,8 +66,8 @@ export function isAncestor(testChild, testAncestor) {
     }
     return false;
 }
-export function getElementsByTagName(tag) {
-    return Array.prototype.slice.call(document.getElementsByTagName(tag), 0);
+export function getElementsByTagName(tag, document) {
+    return Array.prototype.slice.call(document.querySelectorAll(tag), 0);
 }
 export function trackFocus(element) {
     return new FocusTracker(element);
@@ -115,14 +115,8 @@ class FocusTracker extends CompositeDisposable {
                 }
             }
         };
-        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();
@@ -196,11 +190,30 @@ export function isInDocument(element) {
 export function addTestId(element, id) {
     element.setAttribute('data-testid', id);
 }
-export 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;
+}
+export 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);
@@ -252,6 +265,7 @@ export class Classnames {
         }
     }
 }
+const DEBOUCE_DELAY = 100;
 export function isChildEntirelyVisibleWithinParent(child, parent) {
     //
     const childPosition = getDomNodePagePosition(child);
@@ -265,3 +279,38 @@ export function isChildEntirelyVisibleWithinParent(child, parent) {
     }
     return true;
 }
+export 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;
+}
+export function onDidWindowResizeEnd(element, cb) {
+    let resizeTimeout;
+    const disposable = new CompositeDisposable(addDisposableListener(element, 'resize', () => {
+        clearTimeout(resizeTimeout);
+        resizeTimeout = setTimeout(() => {
+            cb();
+        }, DEBOUCE_DELAY);
+    }));
+    return disposable;
+}

package/dist/esm/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/esm/events.js

@@ -145,14 +145,6 @@ export class Emitter {
 }
 Emitter.ENABLE_TRACKING = false;
 Emitter.MEMORY_LEAK_WATCHER = new LeakageMonitor();
-export function addDisposableWindowListener(element, type, listener, options) {
-    element.addEventListener(type, listener, options);
-    return {
-        dispose: () => {
-            element.removeEventListener(type, listener, options);
-        },
-    };
-}
 export function addDisposableListener(element, type, listener, options) {
     element.addEventListener(type, listener, options);
     return {

package/dist/esm/overlay/overlay.js

@@ -1,5 +1,5 @@
 import { disableIframePointEvents, quasiDefaultPrevented, toggleClass, } from '../dom';
-import { Emitter, addDisposableListener, addDisposableWindowListener, } from '../events';
+import { Emitter, addDisposableListener, } from '../events';
 import { CompositeDisposable, MutableDisposable } from '../lifecycle';
 import { clamp } from '../math';
 class AriaLevelTracker {
@@ -164,7 +164,7 @@ export class Overlay extends CompositeDisposable {
                 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;
@@ -201,7 +201,7 @@ export class Overlay extends CompositeDisposable {
                     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();
@@ -246,7 +246,7 @@ export class Overlay extends CompositeDisposable {
             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;
@@ -370,7 +370,7 @@ export class Overlay extends CompositeDisposable {
                 dispose: () => {
                     iframes.release();
                 },
-            }, addDisposableWindowListener(window, 'pointerup', () => {
+            }, addDisposableListener(window, 'pointerup', () => {
                 move.dispose();
                 this._onDidChangeEnd.fire();
             }));

package/dist/esm/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/esm/paneview/draggablePaneviewPanel.js

@@ -6,15 +6,25 @@ import { Emitter } from '../events';
 import { PaneviewUnhandledDragOverEvent, } from './options';
 import { PaneviewPanel, } from './paneviewPanel';
 export 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();
         }
     }

package/dist/esm/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;

package/dist/esm/paneview/paneviewComponent.js

@@ -9,9 +9,23 @@ import { sequentialNumberGenerator } from '../math';
 import { Resizable } from '../resizable';
 import { Classnames } from '../dom';
 const nextLayoutId = sequentialNumberGenerator();
+const HEADER_SIZE = 22;
+const MINIMUM_BODY_SIZE = 0;
+const MAXIMUM_BODY_SIZE = Number.MAX_SAFE_INTEGER;
 export 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() {
@@ -106,7 +120,7 @@ export class PaneviewComponent extends Resizable {
         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,
@@ -131,12 +145,15 @@ export class PaneviewComponent extends Resizable {
             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 : 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,
@@ -181,6 +198,7 @@ export class PaneviewComponent extends Resizable {
                 data: view.toJSON(),
                 minimumSize: minimum(view.minimumBodySize),
                 maximumSize: maximum(view.maximumBodySize),
+                headerSize: view.headerSize,
                 expanded: view.isExpanded(),
             };
         });
@@ -201,6 +219,7 @@ export class PaneviewComponent extends Resizable {
             descriptor: {
                 size,
                 views: views.map((view) => {
+                    var _a, _b, _c;
                     const data = view.data;
                     const body = this.options.createComponent({
                         id: data.id,
@@ -227,6 +246,9 @@ export class PaneviewComponent extends Resizable {
                         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(() => {

package/dist/esm/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;