diff --git a/packages/dockview-core/src/dockview/deserializer.ts b/packages/dockview-core/src/dockview/deserializer.ts index 41a4a0102..1aa49b018 100644 --- a/packages/dockview-core/src/dockview/deserializer.ts +++ b/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, } ); diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts index 2a72db7fe..b06410090 100644 --- a/packages/dockview-core/src/dockview/dockviewComponent.ts +++ b/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({ diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanel.ts b/packages/dockview-core/src/dockview/dockviewGroupPanel.ts index 6f01fae5f..5edd14393 100644 --- a/packages/dockview-core/src/dockview/dockviewGroupPanel.ts +++ b/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, - minimumWidth: MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH, + minimumHeight: + 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) ); diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts index 548cf9ef6..ae3c07ae3 100644 --- a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts +++ b/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; } export interface GroupOptions extends CoreGroupOptions { diff --git a/packages/dockview-core/src/dockview/dockviewPanel.ts b/packages/dockview-core/src/dockview/dockviewPanel.ts index 984c3fcdb..8eb2cfb7f 100644 --- a/packages/dockview-core/src/dockview/dockviewPanel.ts +++ b/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 ) { 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, }; } diff --git a/packages/dockview-core/src/dockview/options.ts b/packages/dockview-core/src/dockview/options.ts index 5fce93ebf..bf3235b60 100644 --- a/packages/dockview-core/src/dockview/options.ts +++ b/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: { - id: string; - name: string; - }) => ITabRenderer | undefined; - createComponent: (options: { - id: string; - name: string; - }) => IContentRenderer; + createTabComponent?: ( + options: CreateComponentOptions + ) => ITabRenderer | undefined; + createComponent: (options: CreateComponentOptions) => IContentRenderer; createWatermarkComponent?: () => IWatermarkRenderer; } @@ -230,7 +238,8 @@ export type AddPanelOptions

= { * Defaults to `false` which forces newly added panels to become active. */ inactive?: boolean; -} & Partial; +} & Partial & + Partial; type AddGroupOptionsWithPanel = { referencePanel: string | IDockviewPanel; diff --git a/packages/dockview-core/src/dockview/types.ts b/packages/dockview-core/src/dockview/types.ts index 0151381bd..aa5cae998 100644 --- a/packages/dockview-core/src/dockview/types.ts +++ b/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; } diff --git a/packages/dockview-core/src/gridview/gridviewPanel.ts b/packages/dockview-core/src/gridview/gridviewPanel.ts index 916c4f1e1..956d9baf8 100644 --- a/packages/dockview-core/src/gridview/gridviewPanel.ts +++ b/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;