dockview-core 1.16.0 → 1.17.0

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

@@ -2,11 +2,11 @@ import { FloatingGroupOptions, IDockviewComponent, MovePanelEvent, SerializedDoc
 import { AddGroupOptions, AddPanelOptions, DockviewComponentOptions, DockviewDndOverlayEvent, MovementOptions } from '../dockview/options';
 import { Parameters } from '../panel/types';
 import { Direction } from '../gridview/baseComponentGridview';
-import { AddComponentOptions, GridviewComponentUpdateOptions, IGridviewComponent, SerializedGridviewComponent } from '../gridview/gridviewComponent';
+import { AddComponentOptions, IGridviewComponent, SerializedGridviewComponent } from '../gridview/gridviewComponent';
 import { IGridviewPanel } from '../gridview/gridviewPanel';
 import { AddPaneviewComponentOptions, SerializedPaneview, IPaneviewComponent } from '../paneview/paneviewComponent';
 import { IPaneviewPanel } from '../paneview/paneviewPanel';
-import { AddSplitviewComponentOptions, ISplitviewComponent, SerializedSplitview, SplitviewComponentUpdateOptions } from '../splitview/splitviewComponent';
+import { AddSplitviewComponentOptions, ISplitviewComponent, SerializedSplitview } from '../splitview/splitviewComponent';
 import { IView, Orientation, Sizing } from '../splitview/splitview';
 import { ISplitviewPanel } from '../splitview/splitviewPanel';
 import { DockviewGroupPanel, IDockviewGroupPanel } from '../dockview/dockviewGroupPanel';
@@ -17,6 +17,8 @@ import { GroupDragEvent, TabDragEvent } from '../dockview/components/titlebar/ta
 import { Box } from '../types';
 import { DockviewDidDropEvent, DockviewWillDropEvent, WillShowOverlayLocationEvent } from '../dockview/dockviewGroupPanelModel';
 import { PaneviewComponentOptions } from '../paneview/options';
+import { SplitviewComponentOptions } from '../splitview/options';
+import { GridviewComponentOptions } from '../gridview/options';
 export interface CommonApi<T = any> {
     readonly height: number;
     readonly width: number;
@@ -115,7 +117,7 @@ export declare class SplitviewApi implements CommonApi<SerializedSplitview> {
     /**
      * Update configuratable options.
      */
-    updateOptions(options: Partial<SplitviewComponentUpdateOptions>): void;
+    updateOptions(options: Partial<SplitviewComponentOptions>): void;
     /**
      * Release resources and teardown component. Do not call when using framework versions of dockview.
      */
@@ -305,7 +307,7 @@ export declare class GridviewApi implements CommonApi<SerializedGridviewComponen
      * Reset the component back to an empty and default state.
      */
     clear(): void;
-    updateOptions(options: Partial<GridviewComponentUpdateOptions>): void;
+    updateOptions(options: Partial<GridviewComponentOptions>): void;
     /**
      * Release resources and teardown component. Do not call when using framework versions of dockview.
      */

package/dist/cjs/dnd/groupDragHandler.js

@@ -28,7 +28,7 @@ var GroupDragHandler = /** @class */ (function (_super) {
         _this.accessor = accessor;
         _this.group = group;
         _this.panelTransfer = dataTransfer_1.LocalSelectionTransfer.getInstance();
-        _this.addDisposables((0, events_1.addDisposableListener)(element, 'mousedown', function (e) {
+        _this.addDisposables((0, events_1.addDisposableListener)(element, 'pointerdown', function (e) {
             if (e.shiftKey) {
                 /**
                  * You cannot call e.preventDefault() because that will prevent drag events from firing

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

@@ -32,7 +32,7 @@ var DefaultTab = /** @class */ (function (_super) {
         _this.action.appendChild((0, svg_1.createCloseButton)());
         _this._element.appendChild(_this._content);
         _this._element.appendChild(_this.action);
-        _this.addDisposables((0, events_1.addDisposableListener)(_this.action, 'mousedown', function (ev) {
+        _this.addDisposables((0, events_1.addDisposableListener)(_this.action, 'pointerdown', function (ev) {
             ev.preventDefault();
         }));
         _this.render();
@@ -51,7 +51,7 @@ var DefaultTab = /** @class */ (function (_super) {
         this.addDisposables(params.api.onDidTitleChange(function (event) {
             _this._title = event.title;
             _this.render();
-        }), (0, events_1.addDisposableListener)(this.action, 'mousedown', function (ev) {
+        }), (0, events_1.addDisposableListener)(this.action, 'pointerdown', function (ev) {
             ev.preventDefault();
         }), (0, events_1.addDisposableListener)(this.action, 'click', function (ev) {
             if (ev.defaultPrevented) {

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

@@ -84,7 +84,7 @@ var Tab = /** @class */ (function (_super) {
         _this.onWillShowOverlay = _this.dropTarget.onWillShowOverlay;
         _this.addDisposables(_this._onChanged, _this._onDropped, _this._onDragStart, dragHandler.onDragStart(function (event) {
             _this._onDragStart.fire(event);
-        }), dragHandler, (0, events_1.addDisposableListener)(_this._element, 'mousedown', function (event) {
+        }), dragHandler, (0, events_1.addDisposableListener)(_this._element, 'pointerdown', function (event) {
             if (event.defaultPrevented) {
                 return;
             }

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

@@ -119,7 +119,7 @@ var TabsContainer = /** @class */ (function (_super) {
                 group: _this.group,
                 getData: dataTransfer_1.getPanelData,
             }));
-        }), (0, events_1.addDisposableListener)(_this.voidContainer.element, 'mousedown', function (event) {
+        }), (0, events_1.addDisposableListener)(_this.voidContainer.element, 'pointerdown', function (event) {
             var isFloatingGroupsEnabled = !_this.accessor.options.disableFloatingGroups;
             if (isFloatingGroupsEnabled &&
                 event.shiftKey &&
@@ -133,7 +133,7 @@ var TabsContainer = /** @class */ (function (_super) {
                     inDragMode: true,
                 });
             }
-        }), (0, events_1.addDisposableListener)(_this.tabContainer, 'mousedown', function (event) {
+        }), (0, events_1.addDisposableListener)(_this.tabContainer, 'pointerdown', function (event) {
             if (event.defaultPrevented) {
                 return;
             }

package/dist/cjs/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/cjs/dockview/components/watermark/watermark.js

@@ -42,9 +42,9 @@ var Watermark = /** @class */ (function (_super) {
         actionsContainer.appendChild(closeAnchor);
         title.appendChild(emptySpace);
         title.appendChild(actionsContainer);
-        _this.addDisposables((0, events_1.addDisposableListener)(closeAnchor, 'click', function (ev) {
+        _this.addDisposables((0, events_1.addDisposableListener)(closeAnchor, 'click', function (event) {
             var _a;
-            ev.preventDefault();
+            event.preventDefault();
             if (_this._group) {
                 (_a = _this._api) === null || _a === void 0 ? void 0 : _a.removeGroup(_this._group);
             }
@@ -58,26 +58,11 @@ var Watermark = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Watermark.prototype.update = function (_event) {
-        // noop
-    };
-    Watermark.prototype.focus = function () {
-        // noop
-    };
-    Watermark.prototype.layout = function (_width, _height) {
-        // noop
-    };
     Watermark.prototype.init = function (_params) {
         this._api = _params.containerApi;
+        this._group = _params.group;
         this.render();
     };
-    Watermark.prototype.updateParentGroup = function (group, _visible) {
-        this._group = group;
-        this.render();
-    };
-    Watermark.prototype.dispose = function () {
-        _super.prototype.dispose.call(this);
-    };
     Watermark.prototype.render = function () {
         var isOneGroup = !!(this._api && this._api.size <= 1);
         (0, dom_1.toggleClass)(this.element, 'has-actions', isOneGroup);

package/dist/cjs/dockview/deserializer.js

@@ -23,6 +23,10 @@ var DefaultDockviewDeserialzier = /** @class */ (function () {
         var view = new dockviewPanelModel_1.DockviewPanelModel(this.accessor, panelId, contentComponent, tabComponent);
         var panel = new dockviewPanel_1.DockviewPanel(panelId, contentComponent, tabComponent, this.accessor, new component_api_1.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/cjs/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/cjs/dockview/dockviewComponent.js

@@ -104,38 +104,16 @@ function moveGroupWithoutDestroying(options) {
         });
     });
 }
-function getDockviewTheme(element) {
-    function toClassList(element) {
-        var list = [];
-        for (var i = 0; i < element.classList.length; i++) {
-            list.push(element.classList.item(i));
-        }
-        return list;
-    }
-    var theme = undefined;
-    var parent = element;
-    while (parent !== null) {
-        theme = toClassList(parent).find(function (cls) {
-            return cls.startsWith('dockview-theme-');
-        });
-        if (typeof theme === 'string') {
-            break;
-        }
-        parent = parent.parentElement;
-    }
-    return theme;
-}
 var DockviewComponent = /** @class */ (function (_super) {
     __extends(DockviewComponent, _super);
     function DockviewComponent(parentElement, options) {
         var _a;
-        var _this = _super.call(this, {
+        var _this = _super.call(this, parentElement, {
             proportionalLayout: true,
             orientation: splitview_1.Orientation.HORIZONTAL,
             styles: options.hideBorders
                 ? { separatorBorder: 'transparent' }
                 : undefined,
-            parentElement: parentElement,
             disableAutoResizing: options.disableAutoResizing,
             locked: options.locked,
             margin: options.gap,
@@ -175,9 +153,6 @@ var DockviewComponent = /** @class */ (function (_super) {
         _this._onDidActiveGroupChange = new events_1.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_1.OverlayRenderContainer(_this.gridview.element, _this);
         (0, dom_1.toggleClass)(_this.gridview.element, 'dv-dockview', true);
         (0, dom_1.toggleClass)(_this.element, 'dv-debug', !!options.debug);
@@ -390,7 +365,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             itemToPopout.group.size === 1) {
             return this.addPopoutGroup(itemToPopout.group, options);
         }
-        var theme = getDockviewTheme(this.gridview.element);
+        var theme = (0, dom_1.getDockviewTheme)(this.gridview.element);
         var element = this.element;
         function getBox() {
             if (options === null || options === void 0 ? void 0 : options.position) {
@@ -731,17 +706,13 @@ var DockviewComponent = /** @class */ (function (_super) {
     };
     DockviewComponent.prototype.updateOptions = function (options) {
         var e_3, _a;
-        var _b, _c;
-        var changed_floatingGroupBounds = 'floatingGroupBounds' in options &&
-            options.floatingGroupBounds !== this.options.floatingGroupBounds;
-        var changed_rootOverlayOptions = 'rootOverlayModel' in options &&
-            options.rootOverlayModel !== this.options.rootOverlayModel;
-        this._options = __assign(__assign({}, this.options), options);
-        if (changed_floatingGroupBounds) {
+        var _b, _c, _d, _e;
+        _super.prototype.updateOptions.call(this, options);
+        if ('floatingGroupBounds' in options) {
             try {
-                for (var _d = __values(this._floatingGroups), _e = _d.next(); !_e.done; _e = _d.next()) {
-                    var group = _e.value;
-                    switch (this.options.floatingGroupBounds) {
+                for (var _f = __values(this._floatingGroups), _g = _f.next(); !_g.done; _g = _f.next()) {
+                    var group = _g.value;
+                    switch (options.floatingGroupBounds) {
                         case 'boundedWithinViewport':
                             group.overlay.minimumInViewportHeight = undefined;
                             group.overlay.minimumInViewportWidth = undefined;
@@ -754,9 +725,9 @@ var DockviewComponent = /** @class */ (function (_super) {
                             break;
                         default:
                             group.overlay.minimumInViewportHeight =
-                                (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumHeightWithinViewport;
+                                (_b = options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumHeightWithinViewport;
                             group.overlay.minimumInViewportWidth =
-                                (_c = this.options.floatingGroupBounds) === null || _c === void 0 ? void 0 : _c.minimumWidthWithinViewport;
+                                (_c = options.floatingGroupBounds) === null || _c === void 0 ? void 0 : _c.minimumWidthWithinViewport;
                     }
                     group.overlay.setBounds();
                 }
@@ -764,23 +735,18 @@ var DockviewComponent = /** @class */ (function (_super) {
             catch (e_3_1) { e_3 = { error: e_3_1 }; }
             finally {
                 try {
-                    if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
+                    if (_g && !_g.done && (_a = _f.return)) _a.call(_f);
                 }
                 finally { if (e_3) throw e_3.error; }
             }
         }
-        if (changed_rootOverlayOptions) {
-            this._rootDropTarget.setOverlayModel(options.rootOverlayModel);
+        if ('rootOverlayModel' in options) {
+            this._rootDropTarget.setOverlayModel((_d = options.rootOverlayModel) !== null && _d !== void 0 ? _d : DEFAULT_ROOT_OVERLAY_MODEL);
         }
-        if (
-        //  if explicitly set as `undefined`
-        'gap' in options &&
-            options.gap === undefined) {
-            this.gridview.margin = 0;
-        }
-        if (typeof options.gap === 'number') {
-            this.gridview.margin = options.gap;
+        if ('gap' in options) {
+            this.gridview.margin = (_e = options.gap) !== null && _e !== void 0 ? _e : 0;
         }
+        this._options = __assign(__assign({}, this.options), options);
         this.layout(this.gridview.width, this.gridview.height, true);
     };
     DockviewComponent.prototype.layout = function (width, height, forceResize) {
@@ -1155,6 +1121,10 @@ var DockviewComponent = /** @class */ (function (_super) {
         if (options.position && options.floating) {
             throw new Error('you can only provide one of: position, floating as arguments to .addPanel(...)');
         }
+        var initial = {
+            width: options.initialWidth,
+            height: options.initialHeight,
+        };
         if (options.position) {
             if ((0, options_1.isPanelOptionsWithPanel)(options.position)) {
                 var referencePanel = typeof options.position.referencePanel === 'string'
@@ -1184,6 +1154,10 @@ var DockviewComponent = /** @class */ (function (_super) {
                 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_1;
             }
         }
@@ -1214,6 +1188,10 @@ var DockviewComponent = /** @class */ (function (_super) {
                     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);
                 }
@@ -1221,7 +1199,10 @@ var DockviewComponent = /** @class */ (function (_super) {
             else {
                 var location_1 = (0, gridview_1.getGridLocation)(referenceGroup.element);
                 var relativeLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, location_1, target);
-                var group = this.createGroupAtLocation(relativeLocation);
+                var group = this.createGroupAtLocation(relativeLocation, this.orientationAtLocation(relativeLocation) ===
+                    splitview_1.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,
@@ -1247,7 +1228,9 @@ var DockviewComponent = /** @class */ (function (_super) {
             });
         }
         else {
-            var group = this.createGroupAtLocation();
+            var group = this.createGroupAtLocation([0], this.gridview.orientation === splitview_1.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,
@@ -1342,7 +1325,11 @@ var DockviewComponent = /** @class */ (function (_super) {
             var location_2 = (0, gridview_1.getGridLocation)(referenceGroup.element);
             var relativeLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, location_2, target);
             var group = this.createGroup(options);
-            this.doAddGroup(group, relativeLocation);
+            var size = this.getLocationOrientation(relativeLocation) ===
+                splitview_1.Orientation.VERTICAL
+                ? options.initialHeight
+                : options.initialWidth;
+            this.doAddGroup(group, relativeLocation, size);
             if (!options.skipSetActive) {
                 this.doSetGroupAndPanelActive(group);
             }
@@ -1355,6 +1342,12 @@ var DockviewComponent = /** @class */ (function (_super) {
             return group;
         }
     };
+    DockviewComponent.prototype.getLocationOrientation = function (location) {
+        return location.length % 2 == 0 &&
+            this.gridview.orientation === splitview_1.Orientation.HORIZONTAL
+            ? splitview_1.Orientation.HORIZONTAL
+            : splitview_1.Orientation.VERTICAL;
+    };
     DockviewComponent.prototype.removeGroup = function (group, options) {
         this.doRemoveGroup(group, options);
     };
@@ -1668,7 +1661,22 @@ var DockviewComponent = /** @class */ (function (_super) {
             }
             var referenceLocation = (0, gridview_1.getGridLocation)(to.element);
             var dropLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, referenceLocation, target);
-            this.gridview.addView(from, splitview_1.Sizing.Distribute, dropLocation);
+            var size = void 0;
+            switch (this.gridview.orientation) {
+                case splitview_1.Orientation.VERTICAL:
+                    size =
+                        referenceLocation.length % 2 == 0
+                            ? from.api.width
+                            : from.api.height;
+                    break;
+                case splitview_1.Orientation.HORIZONTAL:
+                    size =
+                        referenceLocation.length % 2 == 0
+                            ? from.api.height
+                            : from.api.width;
+                    break;
+            }
+            this.gridview.addView(from, size, dropLocation);
         }
         from.panels.forEach(function (panel) {
             _this._onDidMovePanel.fire({ panel: panel, from: from });
@@ -1781,17 +1789,22 @@ var DockviewComponent = /** @class */ (function (_super) {
         var contentComponent = options.component;
         var tabComponent = (_a = options.tabComponent) !== null && _a !== void 0 ? _a : this.options.defaultTabComponent;
         var view = new dockviewPanelModel_1.DockviewPanelModel(this, options.id, contentComponent, tabComponent);
-        var panel = new dockviewPanel_1.DockviewPanel(options.id, contentComponent, tabComponent, this, this._api, group, view, { renderer: options.renderer });
+        var panel = new dockviewPanel_1.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;
     };
-    DockviewComponent.prototype.createGroupAtLocation = function (location) {
-        if (location === void 0) { location = [0]; }
+    DockviewComponent.prototype.createGroupAtLocation = function (location, size) {
         var group = this.createGroup();
-        this.doAddGroup(group, location);
+        this.doAddGroup(group, location, size);
         return group;
     };
     DockviewComponent.prototype.findGroup = function (panel) {
@@ -1800,6 +1813,12 @@ var DockviewComponent = /** @class */ (function (_super) {
             return group.value.model.containsPanel(panel);
         })) === null || _a === void 0 ? void 0 : _a.value;
     };
+    DockviewComponent.prototype.orientationAtLocation = function (location) {
+        var rootOrientation = this.gridview.orientation;
+        return location.length % 2 == 1
+            ? rootOrientation
+            : (0, gridview_1.orthogonal)(rootOrientation);
+    };
     return DockviewComponent;
 }(baseComponentGridview_1.BaseGrid));
 exports.DockviewComponent = DockviewComponent;

package/dist/cjs/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/cjs/dockview/dockviewGroupPanel.js

@@ -24,14 +24,61 @@ var MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT = 100;
 var DockviewGroupPanel = /** @class */ (function (_super) {
     __extends(DockviewGroupPanel, _super);
     function DockviewGroupPanel(accessor, id, options) {
+        var _a, _b, _c, _d, _e, _f;
         var _this = _super.call(this, 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 dockviewGroupPanelApi_1.DockviewGroupPanelApiImpl(id, accessor)) || this;
         _this.api.initialize(_this); // cannot use 'this' after after 'super' call
         _this._model = new dockviewGroupPanelModel_1.DockviewGroupPanelModel(_this.element, accessor, id, options, _this);
         return _this;
     }
+    Object.defineProperty(DockviewGroupPanel.prototype, "minimumWidth", {
+        get: function () {
+            var _a;
+            var activePanelMinimumWidth = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.minimumWidth;
+            return typeof activePanelMinimumWidth === 'number'
+                ? activePanelMinimumWidth
+                : MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DockviewGroupPanel.prototype, "minimumHeight", {
+        get: function () {
+            var _a;
+            var activePanelMinimumHeight = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.minimumHeight;
+            return typeof activePanelMinimumHeight === 'number'
+                ? activePanelMinimumHeight
+                : MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DockviewGroupPanel.prototype, "maximumWidth", {
+        get: function () {
+            var _a;
+            var activePanelMaximumWidth = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.maximumWidth;
+            return typeof activePanelMaximumWidth === 'number'
+                ? activePanelMaximumWidth
+                : Number.MAX_SAFE_INTEGER;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DockviewGroupPanel.prototype, "maximumHeight", {
+        get: function () {
+            var _a;
+            var activePanelMaximumHeight = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.maximumHeight;
+            return typeof activePanelMaximumHeight === 'number'
+                ? activePanelMaximumHeight
+                : Number.MAX_SAFE_INTEGER;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(DockviewGroupPanel.prototype, "panels", {
         get: function () {
             return this._model.panels;

package/dist/cjs/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/cjs/dockview/dockviewGroupPanelModel.js

@@ -730,7 +730,6 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
             });
             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/cjs/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/cjs/dockview/dockviewPanel.js

@@ -51,6 +51,10 @@ var DockviewPanel = /** @class */ (function (_super) {
         _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 dockviewPanelApi_1.DockviewPanelApiImpl(_this, _this._group, accessor, component, tabComponent);
         _this.addDisposables(_this.api.onActiveChange(function () {
             accessor.setActivePanel(_this);
@@ -92,6 +96,34 @@ var DockviewPanel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(DockviewPanel.prototype, "minimumWidth", {
+        get: function () {
+            return this._minimumWidth;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DockviewPanel.prototype, "minimumHeight", {
+        get: function () {
+            return this._minimumHeight;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DockviewPanel.prototype, "maximumWidth", {
+        get: function () {
+            return this._maximumWidth;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DockviewPanel.prototype, "maximumHeight", {
+        get: function () {
+            return this._maximumHeight;
+        },
+        enumerable: false,
+        configurable: true
+    });
     DockviewPanel.prototype.init = function (params) {
         this._params = params.params;
         this.view.init(__assign(__assign({}, params), { api: this.api, containerApi: this.containerApi }));
@@ -117,6 +149,10 @@ var DockviewPanel = /** @class */ (function (_super) {
                 : undefined,
             title: this.title,
             renderer: this._renderer,
+            minimumHeight: this._minimumHeight,
+            maximumHeight: this._maximumHeight,
+            minimumWidth: this._minimumWidth,
+            maximumWidth: this._maximumWidth,
         };
     };
     DockviewPanel.prototype.setTitle = function (title) {