dockview-core 1.16.1 → 1.17.1

package/dist/esm/dnd/groupDragHandler.js

@@ -9,7 +9,7 @@ export class GroupDragHandler extends DragHandler {
         this.accessor = accessor;
         this.group = group;
         this.panelTransfer = LocalSelectionTransfer.getInstance();
-        this.addDisposables(addDisposableListener(element, 'mousedown', (e) => {
+        this.addDisposables(addDisposableListener(element, 'pointerdown', (e) => {
             if (e.shiftKey) {
                 /**
                  * You cannot call e.preventDefault() because that will prevent drag events from firing

package/dist/esm/dockview/components/tab/defaultTab.js

@@ -16,7 +16,7 @@ export class DefaultTab extends CompositeDisposable {
         this.action.appendChild(createCloseButton());
         this._element.appendChild(this._content);
         this._element.appendChild(this.action);
-        this.addDisposables(addDisposableListener(this.action, 'mousedown', (ev) => {
+        this.addDisposables(addDisposableListener(this.action, 'pointerdown', (ev) => {
             ev.preventDefault();
         }));
         this.render();
@@ -26,7 +26,7 @@ export class DefaultTab extends CompositeDisposable {
         this.addDisposables(params.api.onDidTitleChange((event) => {
             this._title = event.title;
             this.render();
-        }), addDisposableListener(this.action, 'mousedown', (ev) => {
+        }), addDisposableListener(this.action, 'pointerdown', (ev) => {
             ev.preventDefault();
         }), addDisposableListener(this.action, 'click', (ev) => {
             if (ev.defaultPrevented) {

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

@@ -64,7 +64,7 @@ export class Tab extends CompositeDisposable {
         this.onWillShowOverlay = this.dropTarget.onWillShowOverlay;
         this.addDisposables(this._onChanged, this._onDropped, this._onDragStart, dragHandler.onDragStart((event) => {
             this._onDragStart.fire(event);
-        }), dragHandler, addDisposableListener(this._element, 'mousedown', (event) => {
+        }), dragHandler, addDisposableListener(this._element, 'pointerdown', (event) => {
             if (event.defaultPrevented) {
                 return;
             }

package/dist/esm/dockview/components/titlebar/tabsContainer.js

@@ -134,7 +134,7 @@ export class TabsContainer extends CompositeDisposable {
                 group: this.group,
                 getData: getPanelData,
             }));
-        }), addDisposableListener(this.voidContainer.element, 'mousedown', (event) => {
+        }), addDisposableListener(this.voidContainer.element, 'pointerdown', (event) => {
             const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
             if (isFloatingGroupsEnabled &&
                 event.shiftKey &&
@@ -148,7 +148,7 @@ export class TabsContainer extends CompositeDisposable {
                     inDragMode: true,
                 });
             }
-        }), addDisposableListener(this.tabContainer, 'mousedown', (event) => {
+        }), addDisposableListener(this.tabContainer, 'pointerdown', (event) => {
             if (event.defaultPrevented) {
                 return;
             }

package/dist/esm/dockview/components/watermark/watermark.d.ts

@@ -1,18 +1,11 @@
 import { IWatermarkRenderer, WatermarkRendererInitParameters } from '../../types';
 import { CompositeDisposable } from '../../../lifecycle';
-import { DockviewGroupPanel } from '../../dockviewGroupPanel';
-import { PanelUpdateEvent } from '../../../panel/types';
 export declare class Watermark extends CompositeDisposable implements IWatermarkRenderer {
     private _element;
     private _group;
     private _api;
     get element(): HTMLElement;
     constructor();
-    update(_event: PanelUpdateEvent): void;
-    focus(): void;
-    layout(_width: number, _height: number): void;
     init(_params: WatermarkRendererInitParameters): void;
-    updateParentGroup(group: DockviewGroupPanel, _visible: boolean): void;
-    dispose(): void;
     private render;
 }

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

@@ -26,34 +26,19 @@ export class Watermark extends CompositeDisposable {
         actionsContainer.appendChild(closeAnchor);
         title.appendChild(emptySpace);
         title.appendChild(actionsContainer);
-        this.addDisposables(addDisposableListener(closeAnchor, 'click', (ev) => {
+        this.addDisposables(addDisposableListener(closeAnchor, 'click', (event) => {
             var _a;
-            ev.preventDefault();
+            event.preventDefault();
             if (this._group) {
                 (_a = this._api) === null || _a === void 0 ? void 0 : _a.removeGroup(this._group);
             }
         }));
     }
-    update(_event) {
-        // noop
-    }
-    focus() {
-        // noop
-    }
-    layout(_width, _height) {
-        // noop
-    }
     init(_params) {
         this._api = _params.containerApi;
+        this._group = _params.group;
         this.render();
     }
-    updateParentGroup(group, _visible) {
-        this._group = group;
-        this.render();
-    }
-    dispose() {
-        super.dispose();
-    }
     render() {
         const isOneGroup = !!(this._api && this._api.size <= 1);
         toggleClass(this.element, 'has-actions', isOneGroup);

package/dist/esm/dockview/deserializer.js

@@ -20,6 +20,10 @@ export class DefaultDockviewDeserialzier {
         const view = new DockviewPanelModel(this.accessor, panelId, contentComponent, tabComponent);
         const panel = new DockviewPanel(panelId, contentComponent, tabComponent, this.accessor, new DockviewApi(this.accessor), group, view, {
             renderer: panelData.renderer,
+            minimumWidth: panelData.minimumWidth,
+            minimumHeight: panelData.minimumHeight,
+            maximumWidth: panelData.maximumWidth,
+            maximumHeight: panelData.maximumHeight,
         });
         panel.init({
             title: title !== null && title !== void 0 ? title : panelId,

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

@@ -220,6 +220,7 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     createWatermarkComponent(): IWatermarkRenderer;
     private updateWatermark;
     addGroup(options?: AddGroupOptions): DockviewGroupPanel;
+    private getLocationOrientation;
     removeGroup(group: DockviewGroupPanel, options?: {
         skipActive?: boolean;
         skipDispose?: boolean;
@@ -243,5 +244,6 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     private createPanel;
     private createGroupAtLocation;
     private findGroup;
+    private orientationAtLocation;
 }
 export {};

package/dist/esm/dockview/dockviewComponent.js

@@ -1,4 +1,4 @@
-import { getRelativeLocation, getGridLocation, } from '../gridview/gridview';
+import { getRelativeLocation, getGridLocation, orthogonal, } from '../gridview/gridview';
 import { directionToPosition, Droptarget, } from '../dnd/droptarget';
 import { tail, sequenceEquals, remove } from '../array';
 import { DockviewPanel } from './dockviewPanel';
@@ -10,13 +10,13 @@ import { DefaultDockviewDeserialzier } from './deserializer';
 import { DockviewUnhandledDragOverEvent, isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, } from './options';
 import { BaseGrid, toTarget, } from '../gridview/baseComponentGridview';
 import { DockviewApi } from '../api/component.api';
-import { Orientation, Sizing } from '../splitview/splitview';
+import { Orientation } from '../splitview/splitview';
 import { DockviewDidDropEvent, DockviewWillDropEvent, WillShowOverlayLocationEvent, } from './dockviewGroupPanelModel';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { DockviewPanelModel } from './dockviewPanelModel';
 import { getPanelData } from '../dnd/dataTransfer';
 import { Overlay } from '../overlay/overlay';
-import { addTestId, toggleClass, watchElementResize } from '../dom';
+import { addTestId, getDockviewTheme, 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';
@@ -39,25 +39,6 @@ function moveGroupWithoutDestroying(options) {
         });
     });
 }
-function getDockviewTheme(element) {
-    function toClassList(element) {
-        const list = [];
-        for (let i = 0; i < element.classList.length; i++) {
-            list.push(element.classList.item(i));
-        }
-        return list;
-    }
-    let theme = undefined;
-    let parent = element;
-    while (parent !== null) {
-        theme = toClassList(parent).find((cls) => cls.startsWith('dockview-theme-'));
-        if (typeof theme === 'string') {
-            break;
-        }
-        parent = parent.parentElement;
-    }
-    return theme;
-}
 export class DockviewComponent extends BaseGrid {
     get orientation() {
         return this.gridview.orientation;
@@ -93,13 +74,12 @@ export class DockviewComponent extends BaseGrid {
     }
     constructor(parentElement, options) {
         var _a;
-        super({
+        super(parentElement, {
             proportionalLayout: true,
             orientation: Orientation.HORIZONTAL,
             styles: options.hideBorders
                 ? { separatorBorder: 'transparent' }
                 : undefined,
-            parentElement: parentElement,
             disableAutoResizing: options.disableAutoResizing,
             locked: options.locked,
             margin: options.gap,
@@ -139,9 +119,6 @@ export class DockviewComponent extends BaseGrid {
         this._onDidActiveGroupChange = new Emitter();
         this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
         this._moving = false;
-        // const gready = document.createElement('div');
-        // gready.className = 'dv-overlay-render-container';
-        // this.gridview.element.appendChild(gready);
         this.overlayRenderContainer = new OverlayRenderContainer(this.gridview.element, this);
         toggleClass(this.gridview.element, 'dv-dockview', true);
         toggleClass(this.element, 'dv-debug', !!options.debug);
@@ -592,16 +569,11 @@ export class DockviewComponent extends BaseGrid {
         }
     }
     updateOptions(options) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         super.updateOptions(options);
-        const changed_floatingGroupBounds = 'floatingGroupBounds' in options &&
-            options.floatingGroupBounds !== this.options.floatingGroupBounds;
-        const changed_rootOverlayOptions = 'rootOverlayModel' in options &&
-            options.rootOverlayModel !== this.options.rootOverlayModel;
-        this._options = Object.assign(Object.assign({}, this.options), options);
-        if (changed_floatingGroupBounds) {
+        if ('floatingGroupBounds' in options) {
             for (const group of this._floatingGroups) {
-                switch (this.options.floatingGroupBounds) {
+                switch (options.floatingGroupBounds) {
                     case 'boundedWithinViewport':
                         group.overlay.minimumInViewportHeight = undefined;
                         group.overlay.minimumInViewportWidth = undefined;
@@ -614,25 +586,20 @@ export class DockviewComponent extends BaseGrid {
                         break;
                     default:
                         group.overlay.minimumInViewportHeight =
-                            (_a = this.options.floatingGroupBounds) === null || _a === void 0 ? void 0 : _a.minimumHeightWithinViewport;
+                            (_a = options.floatingGroupBounds) === null || _a === void 0 ? void 0 : _a.minimumHeightWithinViewport;
                         group.overlay.minimumInViewportWidth =
-                            (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport;
+                            (_b = options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport;
                 }
                 group.overlay.setBounds();
             }
         }
-        if (changed_rootOverlayOptions) {
-            this._rootDropTarget.setOverlayModel(options.rootOverlayModel);
-        }
-        if (
-        //  if explicitly set as `undefined`
-        'gap' in options &&
-            options.gap === undefined) {
-            this.gridview.margin = 0;
+        if ('rootOverlayModel' in options) {
+            this._rootDropTarget.setOverlayModel((_c = options.rootOverlayModel) !== null && _c !== void 0 ? _c : DEFAULT_ROOT_OVERLAY_MODEL);
         }
-        if (typeof options.gap === 'number') {
-            this.gridview.margin = options.gap;
+        if ('gap' in options) {
+            this.gridview.margin = (_d = options.gap) !== null && _d !== void 0 ? _d : 0;
         }
+        this._options = Object.assign(Object.assign({}, this.options), options);
         this.layout(this.gridview.width, this.gridview.height, true);
     }
     layout(width, height, forceResize) {
@@ -889,6 +856,10 @@ export class DockviewComponent extends BaseGrid {
         if (options.position && options.floating) {
             throw new Error('you can only provide one of: position, floating as arguments to .addPanel(...)');
         }
+        const initial = {
+            width: options.initialWidth,
+            height: options.initialHeight,
+        };
         if (options.position) {
             if (isPanelOptionsWithPanel(options.position)) {
                 const referencePanel = typeof options.position.referencePanel === 'string'
@@ -918,6 +889,10 @@ export class DockviewComponent extends BaseGrid {
                 if (!options.inactive) {
                     this.doSetGroupAndPanelActive(group);
                 }
+                group.api.setSize({
+                    height: initial === null || initial === void 0 ? void 0 : initial.height,
+                    width: initial === null || initial === void 0 ? void 0 : initial.width,
+                });
                 return panel;
             }
         }
@@ -948,6 +923,10 @@ export class DockviewComponent extends BaseGrid {
                     skipSetActive: options.inactive,
                     skipSetGroupActive: options.inactive,
                 });
+                referenceGroup.api.setSize({
+                    width: initial === null || initial === void 0 ? void 0 : initial.width,
+                    height: initial === null || initial === void 0 ? void 0 : initial.height,
+                });
                 if (!options.inactive) {
                     this.doSetGroupAndPanelActive(referenceGroup);
                 }
@@ -955,7 +934,10 @@ export class DockviewComponent extends BaseGrid {
             else {
                 const location = getGridLocation(referenceGroup.element);
                 const relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
-                const group = this.createGroupAtLocation(relativeLocation);
+                const group = this.createGroupAtLocation(relativeLocation, this.orientationAtLocation(relativeLocation) ===
+                    Orientation.VERTICAL
+                    ? initial === null || initial === void 0 ? void 0 : initial.height
+                    : initial === null || initial === void 0 ? void 0 : initial.width);
                 panel = this.createPanel(options, group);
                 group.model.openPanel(panel, {
                     skipSetActive: options.inactive,
@@ -981,7 +963,9 @@ export class DockviewComponent extends BaseGrid {
             });
         }
         else {
-            const group = this.createGroupAtLocation();
+            const group = this.createGroupAtLocation([0], this.gridview.orientation === Orientation.VERTICAL
+                ? initial === null || initial === void 0 ? void 0 : initial.height
+                : initial === null || initial === void 0 ? void 0 : initial.width);
             panel = this.createPanel(options, group);
             group.model.openPanel(panel, {
                 skipSetActive: options.inactive,
@@ -1075,7 +1059,11 @@ export class DockviewComponent extends BaseGrid {
             const location = getGridLocation(referenceGroup.element);
             const relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
             const group = this.createGroup(options);
-            this.doAddGroup(group, relativeLocation);
+            const size = this.getLocationOrientation(relativeLocation) ===
+                Orientation.VERTICAL
+                ? options.initialHeight
+                : options.initialWidth;
+            this.doAddGroup(group, relativeLocation, size);
             if (!options.skipSetActive) {
                 this.doSetGroupAndPanelActive(group);
             }
@@ -1088,6 +1076,12 @@ export class DockviewComponent extends BaseGrid {
             return group;
         }
     }
+    getLocationOrientation(location) {
+        return location.length % 2 == 0 &&
+            this.gridview.orientation === Orientation.HORIZONTAL
+            ? Orientation.HORIZONTAL
+            : Orientation.VERTICAL;
+    }
     removeGroup(group, options) {
         this.doRemoveGroup(group, options);
     }
@@ -1359,7 +1353,22 @@ export class DockviewComponent extends BaseGrid {
             }
             const referenceLocation = getGridLocation(to.element);
             const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
-            this.gridview.addView(from, Sizing.Distribute, dropLocation);
+            let size;
+            switch (this.gridview.orientation) {
+                case Orientation.VERTICAL:
+                    size =
+                        referenceLocation.length % 2 == 0
+                            ? from.api.width
+                            : from.api.height;
+                    break;
+                case Orientation.HORIZONTAL:
+                    size =
+                        referenceLocation.length % 2 == 0
+                            ? from.api.height
+                            : from.api.width;
+                    break;
+            }
+            this.gridview.addView(from, size, dropLocation);
         }
         from.panels.forEach((panel) => {
             this._onDidMovePanel.fire({ panel, from });
@@ -1471,20 +1480,32 @@ export class DockviewComponent extends BaseGrid {
         const contentComponent = options.component;
         const tabComponent = (_a = options.tabComponent) !== null && _a !== void 0 ? _a : this.options.defaultTabComponent;
         const view = new DockviewPanelModel(this, options.id, contentComponent, tabComponent);
-        const panel = new DockviewPanel(options.id, contentComponent, tabComponent, this, this._api, group, view, { renderer: options.renderer });
+        const panel = new DockviewPanel(options.id, contentComponent, tabComponent, this, this._api, group, view, {
+            renderer: options.renderer,
+            minimumWidth: options.minimumWidth,
+            minimumHeight: options.minimumHeight,
+            maximumWidth: options.maximumWidth,
+            maximumHeight: options.maximumHeight,
+        });
         panel.init({
             title: (_b = options.title) !== null && _b !== void 0 ? _b : options.id,
             params: (_c = options === null || options === void 0 ? void 0 : options.params) !== null && _c !== void 0 ? _c : {},
         });
         return panel;
     }
-    createGroupAtLocation(location = [0]) {
+    createGroupAtLocation(location, size) {
         const group = this.createGroup();
-        this.doAddGroup(group, location);
+        this.doAddGroup(group, location, size);
         return group;
     }
     findGroup(panel) {
         var _a;
         return (_a = Array.from(this._groups.values()).find((group) => group.value.model.containsPanel(panel))) === null || _a === void 0 ? void 0 : _a.value;
     }
+    orientationAtLocation(location) {
+        const rootOrientation = this.gridview.orientation;
+        return location.length % 2 == 1
+            ? rootOrientation
+            : orthogonal(rootOrientation);
+    }
 }

package/dist/esm/dockview/dockviewGroupPanel.d.ts

@@ -14,6 +14,10 @@ export interface IDockviewGroupPanel extends IGridviewPanel<DockviewGroupPanelAp
 export type IDockviewGroupPanelPublic = IDockviewGroupPanel;
 export declare class DockviewGroupPanel extends GridviewPanel<DockviewGroupPanelApiImpl> implements IDockviewGroupPanel {
     private readonly _model;
+    get minimumWidth(): number;
+    get minimumHeight(): number;
+    get maximumWidth(): number;
+    get maximumHeight(): number;
     get panels(): IDockviewPanel[];
     get activePanel(): IDockviewPanel | undefined;
     get size(): number;

package/dist/esm/dockview/dockviewGroupPanel.js

@@ -4,6 +4,34 @@ import { DockviewGroupPanelApiImpl, } from '../api/dockviewGroupPanelApi';
 const MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH = 100;
 const MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT = 100;
 export class DockviewGroupPanel extends GridviewPanel {
+    get minimumWidth() {
+        var _a;
+        const activePanelMinimumWidth = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.minimumWidth;
+        return typeof activePanelMinimumWidth === 'number'
+            ? activePanelMinimumWidth
+            : MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH;
+    }
+    get minimumHeight() {
+        var _a;
+        const activePanelMinimumHeight = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.minimumHeight;
+        return typeof activePanelMinimumHeight === 'number'
+            ? activePanelMinimumHeight
+            : MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT;
+    }
+    get maximumWidth() {
+        var _a;
+        const activePanelMaximumWidth = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.maximumWidth;
+        return typeof activePanelMaximumWidth === 'number'
+            ? activePanelMaximumWidth
+            : Number.MAX_SAFE_INTEGER;
+    }
+    get maximumHeight() {
+        var _a;
+        const activePanelMaximumHeight = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.maximumHeight;
+        return typeof activePanelMaximumHeight === 'number'
+            ? activePanelMaximumHeight
+            : Number.MAX_SAFE_INTEGER;
+    }
     get panels() {
         return this._model.panels;
     }
@@ -26,9 +54,12 @@ export class DockviewGroupPanel extends GridviewPanel {
         return this._model.header;
     }
     constructor(accessor, id, options) {
+        var _a, _b, _c, _d, _e, _f;
         super(id, 'groupview_default', {
-            minimumHeight: MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT,
-            minimumWidth: MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH,
+            minimumHeight: (_b = (_a = options.constraints) === null || _a === void 0 ? void 0 : _a.minimumHeight) !== null && _b !== void 0 ? _b : MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT,
+            minimumWidth: (_d = (_c = options.constraints) === null || _c === void 0 ? void 0 : _c.maximumHeight) !== null && _d !== void 0 ? _d : MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH,
+            maximumHeight: (_e = options.constraints) === null || _e === void 0 ? void 0 : _e.maximumHeight,
+            maximumWidth: (_f = options.constraints) === null || _f === void 0 ? void 0 : _f.maximumWidth,
         }, new DockviewGroupPanelApiImpl(id, accessor));
         this.api.initialize(this); // cannot use 'this' after after 'super' call
         this._model = new DockviewGroupPanelModel(this.element, accessor, id, options, this);

package/dist/esm/dockview/dockviewGroupPanelModel.d.ts

@@ -12,6 +12,7 @@ import { IDockviewPanel } from './dockviewPanel';
 import { DockviewDndOverlayEvent } from './options';
 import { OverlayRenderContainer } from '../overlay/overlayRenderContainer';
 import { TitleEvent } from '../api/dockviewPanelApi';
+import { Contraints } from '../gridview/gridviewPanel';
 interface GroupMoveEvent {
     groupId: string;
     itemId?: string;
@@ -22,6 +23,9 @@ interface CoreGroupOptions {
     locked?: DockviewGroupPanelLocked;
     hideHeader?: boolean;
     skipSetActive?: boolean;
+    constraints?: Partial<Contraints>;
+    initialWidth?: number;
+    initialHeight?: number;
 }
 export interface GroupOptions extends CoreGroupOptions {
     readonly panels?: IDockviewPanel[];

package/dist/esm/dockview/dockviewGroupPanelModel.js

@@ -540,7 +540,6 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
             });
             this.tabsContainer.hide();
             this.contentContainer.element.appendChild(this.watermark.element);
-            this.watermark.updateParentGroup(this.groupPanel, true);
         }
         if (!this.isEmpty && this.watermark) {
             this.watermark.element.remove();

package/dist/esm/dockview/dockviewPanel.d.ts

@@ -7,12 +7,17 @@ import { IPanel, PanelUpdateEvent, Parameters } from '../panel/types';
 import { IDockviewPanelModel } from './dockviewPanelModel';
 import { DockviewComponent } from './dockviewComponent';
 import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
+import { Contraints } from '../gridview/gridviewPanel';
 export interface IDockviewPanel extends IDisposable, IPanel {
     readonly view: IDockviewPanelModel;
     readonly group: DockviewGroupPanel;
     readonly api: DockviewPanelApi;
     readonly title: string | undefined;
     readonly params: Parameters | undefined;
+    readonly minimumWidth?: number;
+    readonly minimumHeight?: number;
+    readonly maximumWidth?: number;
+    readonly maximumHeight?: number;
     updateParentGroup(group: DockviewGroupPanel, options?: {
         skipSetActive?: boolean;
     }): void;
@@ -32,13 +37,21 @@ export declare class DockviewPanel extends CompositeDisposable implements IDockv
     private _params?;
     private _title;
     private _renderer;
+    private _minimumWidth;
+    private _minimumHeight;
+    private _maximumWidth;
+    private _maximumHeight;
     get params(): Parameters | undefined;
     get title(): string | undefined;
     get group(): DockviewGroupPanel;
     get renderer(): DockviewPanelRenderer;
+    get minimumWidth(): number | undefined;
+    get minimumHeight(): number | undefined;
+    get maximumWidth(): number | undefined;
+    get maximumHeight(): number | undefined;
     constructor(id: string, component: string, tabComponent: string | undefined, accessor: DockviewComponent, containerApi: DockviewApi, group: DockviewGroupPanel, view: IDockviewPanelModel, options: {
         renderer?: DockviewPanelRenderer;
-    });
+    } & Partial<Contraints>);
     init(params: IGroupPanelInitParameters): void;
     focus(): void;
     toJSON(): GroupviewPanelState;

package/dist/esm/dockview/dockviewPanel.js

@@ -15,6 +15,18 @@ export class DockviewPanel extends CompositeDisposable {
         var _a;
         return (_a = this._renderer) !== null && _a !== void 0 ? _a : this.accessor.renderer;
     }
+    get minimumWidth() {
+        return this._minimumWidth;
+    }
+    get minimumHeight() {
+        return this._minimumHeight;
+    }
+    get maximumWidth() {
+        return this._maximumWidth;
+    }
+    get maximumHeight() {
+        return this._maximumHeight;
+    }
     constructor(id, component, tabComponent, accessor, containerApi, group, view, options) {
         super();
         this.id = id;
@@ -23,6 +35,10 @@ export class DockviewPanel extends CompositeDisposable {
         this.view = view;
         this._renderer = options.renderer;
         this._group = group;
+        this._minimumWidth = options.minimumWidth;
+        this._minimumHeight = options.minimumHeight;
+        this._maximumWidth = options.maximumWidth;
+        this._maximumHeight = options.maximumHeight;
         this.api = new DockviewPanelApiImpl(this, this._group, accessor, component, tabComponent);
         this.addDisposables(this.api.onActiveChange(() => {
             accessor.setActivePanel(this);
@@ -59,6 +75,10 @@ export class DockviewPanel extends CompositeDisposable {
                 : undefined,
             title: this.title,
             renderer: this._renderer,
+            minimumHeight: this._minimumHeight,
+            maximumHeight: this._maximumHeight,
+            minimumWidth: this._minimumWidth,
+            maximumWidth: this._maximumWidth,
         };
     }
     setTitle(title) {

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

@@ -12,6 +12,7 @@ import { IDockviewPanel } from './dockviewPanel';
 import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
 import { IGroupHeaderProps } from './framework';
 import { FloatingGroupOptions } from './dockviewComponent';
+import { Contraints } from '../gridview/gridviewPanel';
 export interface IHeaderActionsRenderer extends IDisposable {
     readonly element: HTMLElement;
     init(params: IGroupHeaderProps): void;
@@ -71,19 +72,23 @@ export declare class DockviewUnhandledDragOverEvent implements DockviewDndOverla
     accept(): void;
 }
 export declare const PROPERTY_KEYS: (keyof DockviewOptions)[];
+export interface CreateComponentOptions {
+    /**
+     * The unqiue identifer of the component
+     */
+    id: string;
+    /**
+     * The component name, this should determine what is rendered.
+     */
+    name: string;
+}
 export interface DockviewFrameworkOptions {
     defaultTabComponent?: string;
     createRightHeaderActionComponent?: (group: DockviewGroupPanel) => IHeaderActionsRenderer;
     createLeftHeaderActionComponent?: (group: DockviewGroupPanel) => IHeaderActionsRenderer;
     createPrefixHeaderActionComponent?: (group: DockviewGroupPanel) => IHeaderActionsRenderer;
-    createTabComponent?: (options: {
-        id: string;
-        name: string;
-    }) => ITabRenderer | undefined;
-    createComponent: (options: {
-        id: string;
-        name: string;
-    }) => IContentRenderer;
+    createTabComponent?: (options: CreateComponentOptions) => ITabRenderer | undefined;
+    createComponent: (options: CreateComponentOptions) => IContentRenderer;
     createWatermarkComponent?: () => IWatermarkRenderer;
 }
 export type DockviewComponentOptions = DockviewOptions & DockviewFrameworkOptions;
@@ -149,7 +154,9 @@ export type AddPanelOptions<P extends object = Parameters> = {
      * Defaults to `false` which forces newly added panels to become active.
      */
     inactive?: boolean;
-} & Partial<AddPanelOptionsUnion>;
+    initialWidth?: number;
+    initialHeight?: number;
+} & Partial<AddPanelOptionsUnion> & Partial<Contraints>;
 type AddGroupOptionsWithPanel = {
     referencePanel: string | IDockviewPanel;
     direction?: Omit<Direction, 'within'>;

package/dist/esm/dockview/types.d.ts

@@ -2,7 +2,7 @@ import { DockviewPanelApi } from '../api/dockviewPanelApi';
 import { PanelInitParameters, IPanel } from '../panel/types';
 import { DockviewApi } from '../api/component.api';
 import { Optional } from '../types';
-import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel';
+import { IDockviewGroupPanel } from './dockviewGroupPanel';
 import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
 export interface HeaderPartInitParameters {
     title: string;
@@ -19,7 +19,6 @@ type RendererMethodOptionalList = 'dispose' | 'update' | 'layout' | 'toJSON' | '
 export interface IWatermarkRenderer extends Optional<Omit<IPanel, 'id' | 'init'>, RendererMethodOptionalList> {
     readonly element: HTMLElement;
     init: (params: WatermarkRendererInitParameters) => void;
-    updateParentGroup(group: DockviewGroupPanel, visible: boolean): void;
 }
 export interface ITabRenderer extends Optional<Omit<IPanel, 'id'>, RendererMethodOptionalList> {
     readonly element: HTMLElement;
@@ -40,5 +39,9 @@ export interface GroupviewPanelState {
     params?: {
         [key: string]: any;
     };
+    minimumWidth?: number;
+    minimumHeight?: number;
+    maximumWidth?: number;
+    maximumHeight?: number;
 }
 export {};