feat: panel constraints

packages/dockview-core/src/dockview/deserializer.ts

@@ -57,6 +57,10 @@ export class DefaultDockviewDeserialzier implements IPanelDeserializer {
             view,
             {
                 renderer: panelData.renderer,
+                minimumWidth: panelData.minimumWidth,
+                minimumHeight: panelData.minimumHeight,
+                maximumWidth: panelData.maximumWidth,
+                maximumHeight: panelData.maximumHeight,
             }
         );
 

packages/dockview-core/src/dockview/dockviewComponent.ts

@@ -2242,7 +2242,13 @@ export class DockviewComponent
             this._api,
             group,
             view,
-            { renderer: options.renderer }
+            {
+                renderer: options.renderer,
+                minimumWidth: options.minimumWidth,
+                minimumHeight: options.minimumHeight,
+                maximumWidth: options.maximumWidth,
+                maximumHeight: options.maximumHeight,
+            }
         );
 
         panel.init({

packages/dockview-core/src/dockview/dockviewGroupPanel.ts

@@ -34,6 +34,38 @@ export class DockviewGroupPanel
 {
     private readonly _model: DockviewGroupPanelModel;
 
+    get minimumWidth(): number {
+        const sizes = this.panels
+            .filter((panel) => typeof panel.minimumWidth === 'number')
+            .map((panel) => panel.minimumWidth) as number[];
+
+        return sizes.length > 0 ? Math.max(...sizes) : 100;
+    }
+
+    get minimumHeight(): number {
+        const sizes = this.panels
+            .filter((panel) => typeof panel.minimumHeight === 'number')
+            .map((panel) => panel.minimumHeight) as number[];
+
+        return sizes.length > 0 ? Math.max(...sizes) : 100;
+    }
+
+    get maximumWidth(): number {
+        const sizes = this.panels
+            .filter((panel) => typeof panel.maximumWidth === 'number')
+            .map((panel) => panel.maximumWidth) as number[];
+
+        return sizes.length > 0 ? Math.min(...sizes) : Number.MAX_SAFE_INTEGER;
+    }
+
+    get maximumHeight(): number {
+        const sizes = this.panels
+            .filter((panel) => typeof panel.maximumHeight === 'number')
+            .map((panel) => panel.maximumHeight) as number[];
+
+        return sizes.length > 0 ? Math.min(...sizes) : Number.MAX_SAFE_INTEGER;
+    }
+
     get panels(): IDockviewPanel[] {
         return this._model.panels;
     }
@@ -71,8 +103,14 @@ export class DockviewGroupPanel
             id,
             'groupview_default',
             {
-                minimumHeight: MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT,
+                minimumHeight:
-                minimumWidth: MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH,
+                    options.constraints?.minimumHeight ??
+                    MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT,
+                minimumWidth:
+                    options.constraints?.maximumHeight ??
+                    MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH,
+                maximumHeight: options.constraints?.maximumHeight,
+                maximumWidth: options.constraints?.maximumWidth,
             },
             new DockviewGroupPanelApiImpl(id, accessor)
         );

packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts

@@ -38,6 +38,7 @@ import {
 } from './options';
 import { OverlayRenderContainer } from '../overlay/overlayRenderContainer';
 import { TitleEvent } from '../api/dockviewPanelApi';
+import { Contraints } from '../gridview/gridviewPanel';
 
 interface GroupMoveEvent {
     groupId: string;
@@ -50,6 +51,7 @@ interface CoreGroupOptions {
     locked?: DockviewGroupPanelLocked;
     hideHeader?: boolean;
     skipSetActive?: boolean;
+    constraints?: Partial<Contraints>;
 }
 
 export interface GroupOptions extends CoreGroupOptions {

packages/dockview-core/src/dockview/dockviewPanel.ts

@@ -11,6 +11,7 @@ import { IDockviewPanelModel } from './dockviewPanelModel';
 import { DockviewComponent } from './dockviewComponent';
 import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
 import { WillFocusEvent } from '../api/panelApi';
+import { Contraints } from '../gridview/gridviewPanel';
 
 export interface IDockviewPanel extends IDisposable, IPanel {
     readonly view: IDockviewPanelModel;
@@ -18,6 +19,10 @@ export interface IDockviewPanel extends IDisposable, IPanel {
     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 }
@@ -40,6 +45,11 @@ export class DockviewPanel
     private _title: string | undefined;
     private _renderer: DockviewPanelRenderer | undefined;
 
+    private _minimumWidth: number | undefined;
+    private _minimumHeight: number | undefined;
+    private _maximumWidth: number | undefined;
+    private _maximumHeight: number | undefined;
+
     get params(): Parameters | undefined {
         return this._params;
     }
@@ -56,6 +66,22 @@ export class DockviewPanel
         return this._renderer ?? this.accessor.renderer;
     }
 
+    get minimumWidth(): number | undefined {
+        return this._minimumWidth;
+    }
+
+    get minimumHeight(): number | undefined {
+        return this._minimumHeight;
+    }
+
+    get maximumWidth(): number | undefined {
+        return this._maximumWidth;
+    }
+
+    get maximumHeight(): number | undefined {
+        return this._maximumHeight;
+    }
+
     constructor(
         public readonly id: string,
         component: string,
@@ -64,11 +90,15 @@ export class DockviewPanel
         private readonly containerApi: DockviewApi,
         group: DockviewGroupPanel,
         readonly view: IDockviewPanelModel,
-        options: { renderer?: DockviewPanelRenderer }
+        options: { renderer?: DockviewPanelRenderer } & Partial<Contraints>
     ) {
         super();
         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,
@@ -129,6 +159,10 @@ export class DockviewPanel
                     : undefined,
             title: this.title,
             renderer: this._renderer,
+            minimumHeight: this._minimumHeight,
+            maximumHeight: this._maximumHeight,
+            minimumWidth: this._minimumWidth,
+            maximumWidth: this._maximumWidth,
         };
     }
 

packages/dockview-core/src/dockview/options.ts

@@ -16,6 +16,7 @@ import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
 import { IGroupHeaderProps } from './framework';
 import { AnchoredBox } from '../types';
 import { FloatingGroupOptions } from './dockviewComponent';
+import { Contraints } from '../gridview/gridviewPanel';
 
 export interface IHeaderActionsRenderer extends IDisposable {
     readonly element: HTMLElement;
@@ -116,6 +117,17 @@ export const PROPERTY_KEYS: (keyof DockviewOptions)[] = (() => {
     return Object.keys(properties) as (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?: (
@@ -127,14 +139,10 @@ export interface DockviewFrameworkOptions {
     createPrefixHeaderActionComponent?: (
         group: DockviewGroupPanel
     ) => IHeaderActionsRenderer;
-    createTabComponent?: (options: {
+    createTabComponent?: (
-        id: string;
+        options: CreateComponentOptions
-        name: string;
+    ) => ITabRenderer | undefined;
-    }) => ITabRenderer | undefined;
+    createComponent: (options: CreateComponentOptions) => IContentRenderer;
-    createComponent: (options: {
-        id: string;
-        name: string;
-    }) => IContentRenderer;
     createWatermarkComponent?: () => IWatermarkRenderer;
 }
 
@@ -230,7 +238,8 @@ export type AddPanelOptions<P extends object = Parameters> = {
      * Defaults to `false` which forces newly added panels to become active.
      */
     inactive?: boolean;
-} & Partial<AddPanelOptionsUnion>;
+} & Partial<AddPanelOptionsUnion> &
+    Partial<Contraints>;
 
 type AddGroupOptionsWithPanel = {
     referencePanel: string | IDockviewPanel;

packages/dockview-core/src/dockview/types.ts

@@ -63,4 +63,8 @@ export interface GroupviewPanelState {
     title?: string;
     renderer?: DockviewPanelRenderer;
     params?: { [key: string]: any };
+    minimumWidth?: number;
+    minimumHeight?: number;
+    maximumWidth?: number;
+    maximumHeight?: number;
 }

packages/dockview-core/src/gridview/gridviewPanel.ts

@@ -15,6 +15,13 @@ import { Emitter, Event } from '../events';
 import { IViewSize } from './gridview';
 import { BaseGrid, IGridPanelView } from './baseComponentGridview';
 
+export interface Contraints {
+    minimumWidth?: number;
+    maximumWidth?: number;
+    minimumHeight?: number;
+    maximumHeight?: number;
+}
+
 export interface GridviewInitParameters extends PanelInitParameters {
     minimumWidth?: number;
     maximumWidth?: number;