From 672da85ce460e2ef997884daf557e7cfc859fd1f Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Wed, 1 May 2024 20:14:43 +0100 Subject: [PATCH] feat: preferred size --- .../dockview-core/src/api/dockviewPanelApi.ts | 11 ++- .../src/dockview/deserializer.ts | 3 +- .../src/dockview/dockviewComponent.ts | 73 +++++++++++++------ .../src/dockview/dockviewGroupPanelModel.ts | 4 +- .../src/dockview/dockviewPanel.ts | 17 +++-- .../dockview-core/src/dockview/options.ts | 3 +- packages/dockview-core/src/dockview/types.ts | 3 +- .../dockview-core/src/gridview/gridview.ts | 12 +++ .../demo-dockview/src/gridActions.tsx | 2 + 9 files changed, 95 insertions(+), 33 deletions(-) diff --git a/packages/dockview-core/src/api/dockviewPanelApi.ts b/packages/dockview-core/src/api/dockviewPanelApi.ts index 548d10a60..b00ad4dc3 100644 --- a/packages/dockview-core/src/api/dockviewPanelApi.ts +++ b/packages/dockview-core/src/api/dockviewPanelApi.ts @@ -40,7 +40,8 @@ export interface DockviewPanelApi readonly group: DockviewGroupPanel; readonly isGroupActive: boolean; readonly renderer: DockviewPanelRenderer; - readonly preferredSize: number | undefined; + readonly preferredWidth: number | undefined; + readonly preferredHeight: number | undefined; readonly title: string | undefined; readonly onDidActiveGroupChange: Event; readonly onDidGroupChange: Event; @@ -107,8 +108,12 @@ export class DockviewPanelApiImpl return this.panel.renderer; } - get preferredSize(): number | undefined { - return this.panel.preferredSize; + get preferredHeight(): number | undefined { + return this.panel.preferredHeight; + } + + get preferredWidth(): number | undefined { + return this.panel.preferredWidth; } set group(value: DockviewGroupPanel) { diff --git a/packages/dockview-core/src/dockview/deserializer.ts b/packages/dockview-core/src/dockview/deserializer.ts index de557bb1d..7ce97f279 100644 --- a/packages/dockview-core/src/dockview/deserializer.ts +++ b/packages/dockview-core/src/dockview/deserializer.ts @@ -58,7 +58,8 @@ export class DefaultDockviewDeserialzier implements IPanelDeserializer { { renderer: panelData.renderer, priority: panelData.priority, - preferredSize: panelData.preferredSize, + preferredWidth: panelData.preferredWidth, + preferredHeight: panelData.preferredHeight, } ); diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts index 9a0962923..2f9ece0b0 100644 --- a/packages/dockview-core/src/dockview/dockviewComponent.ts +++ b/packages/dockview-core/src/dockview/dockviewComponent.ts @@ -371,8 +371,6 @@ export class DockviewComponent }[] = []; private readonly _rootDropTarget: Droptarget; - private _ignoreEvents = 0; - private readonly _onDidRemoveGroup = new Emitter(); readonly onDidRemoveGroup: Event = this._onDidRemoveGroup.event; @@ -591,8 +589,14 @@ export class DockviewComponent group: this.orthogonalize( event.position, data.panelId - ? this.getGroupPanel(data.panelId)?.api - .preferredSize + ? { + width: this.getGroupPanel( + data.panelId + )?.api.preferredWidth, + height: this.getGroupPanel( + data.panelId + )?.api.preferredHeight, + } : undefined ), position: 'center', @@ -999,7 +1003,10 @@ export class DockviewComponent private orthogonalize( position: Position, - size?: number + options?: { + width?: number; + height?: number; + } ): DockviewGroupPanel { switch (position) { case 'top': @@ -1026,10 +1033,13 @@ export class DockviewComponent case 'top': case 'left': case 'center': - return this.createGroupAtLocation([0], size); // insert into first position + return this.createGroupAtLocation([0], options); // insert into first position case 'bottom': case 'right': - return this.createGroupAtLocation([this.gridview.length], size); // insert into last position + return this.createGroupAtLocation( + [this.gridview.length], + options + ); // insert into last position default: throw new Error(`unsupported position ${position}`); } @@ -1447,7 +1457,10 @@ export class DockviewComponent } else { const group = this.orthogonalize( directionToPosition(options.position.direction), - options.preferredSize + { + width: options.preferredWidth, + height: options.preferredHeight, + } ); const panel = this.createPanel(options, group); @@ -1517,7 +1530,11 @@ export class DockviewComponent ); const group = this.createGroupAtLocation( relativeLocation, - options.preferredSize + + { + width: options.preferredWidth, + height: options.preferredHeight, + } ); panel = this.createPanel(options, group); group.model.openPanel(panel, { @@ -1551,10 +1568,10 @@ export class DockviewComponent skipSetGroupActive: options.inactive, }); } else { - const group = this.createGroupAtLocation( - undefined, - options.preferredSize - ); + const group = this.createGroupAtLocation(undefined, { + width: options.preferredWidth, + height: options.preferredHeight, + }); panel = this.createPanel(options, group); group.model.openPanel(panel, { skipSetActive: options.inactive, @@ -1676,7 +1693,10 @@ export class DockviewComponent } else { const group = this.orthogonalize( directionToPosition(options.direction), - options.preferredSize + { + width: options.preferredWidth, + height: options.preferredHeight, + } ); if (!options.skipSetActive) { this.doSetGroupAndPanelActive(group); @@ -1963,7 +1983,10 @@ export class DockviewComponent this.doAddGroup( targetGroup, location, - targetGroup.activePanel?.api.preferredSize + this.gridview.predictOrientation(location) === + Orientation.HORIZONTAL + ? targetGroup.activePanel?.api.preferredWidth + : targetGroup.activePanel?.api.preferredHeight ) ); this.doSetGroupAndPanelActive(targetGroup); @@ -1990,10 +2013,10 @@ export class DockviewComponent destinationTarget ); - const group = this.createGroupAtLocation( - dropLocation, - removedPanel.api.preferredSize - ); + const group = this.createGroupAtLocation(dropLocation, { + width: removedPanel.api.preferredWidth, + height: removedPanel.api.preferredHeight, + }); this.movingLock(() => group.model.openPanel(removedPanel, { skipSetGroupActive: true, @@ -2248,7 +2271,8 @@ export class DockviewComponent { renderer: options.renderer, priority: options.priority, - preferredSize: options.preferredSize, + preferredWidth: options.preferredWidth, + preferredHeight: options.preferredHeight, } ); @@ -2262,9 +2286,16 @@ export class DockviewComponent private createGroupAtLocation( location: number[] = [0], - size?: number + options?: { width?: number; height?: number } ): DockviewGroupPanel { const group = this.createGroup(); + + const size = + this.gridview.predictOrientation(location) === + Orientation.HORIZONTAL + ? options?.width + : options?.height; + this.doAddGroup(group, location, size); return group; } diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts index 8cd6f3fd6..c4034d9f8 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 '../overlayRenderContainer'; import { TitleEvent } from '../api/dockviewPanelApi'; +import { readonly } from 'vue'; interface GroupMoveEvent { groupId: string; @@ -56,7 +57,8 @@ export interface GroupOptions extends CoreGroupOptions { readonly panels?: IDockviewPanel[]; readonly activePanel?: IDockviewPanel; readonly id?: string; - readonly preferredSize?: number; + readonly preferredWidth?: number; + readonly preferredHeight?: number; } export interface GroupPanelViewState extends CoreGroupOptions { diff --git a/packages/dockview-core/src/dockview/dockviewPanel.ts b/packages/dockview-core/src/dockview/dockviewPanel.ts index cefb92d74..4ce53fa9d 100644 --- a/packages/dockview-core/src/dockview/dockviewPanel.ts +++ b/packages/dockview-core/src/dockview/dockviewPanel.ts @@ -40,7 +40,8 @@ export class DockviewPanel private _title: string | undefined; private _renderer: DockviewPanelRenderer | undefined; private _priority: number | undefined; - private _preferredSize: number | undefined; + private _preferredWidth: number | undefined; + private _preferredHeight: number | undefined; get params(): Parameters | undefined { return this._params; @@ -58,10 +59,14 @@ export class DockviewPanel return this._renderer ?? this.accessor.renderer; } - get preferredSize(): number | undefined { - return this._preferredSize; + get preferredWidth(): number | undefined { + return this._preferredWidth; } + get preferredHeight(): number | undefined { + return this._preferredHeight; + } + get priority(): number { return this._priority ?? 0; } @@ -77,13 +82,15 @@ export class DockviewPanel options: { renderer?: DockviewPanelRenderer; priority?: number; - preferredSize?: number; + preferredWidth?: number; + preferredHeight?: number; } ) { super(); this._renderer = options.renderer; this._priority = options.priority; - this._preferredSize = options.preferredSize; + this._preferredWidth = options.preferredWidth; + this._preferredHeight = options.preferredHeight; this._group = group; this.api = new DockviewPanelApiImpl( diff --git a/packages/dockview-core/src/dockview/options.ts b/packages/dockview-core/src/dockview/options.ts index 97dc517e1..1e4b39ceb 100644 --- a/packages/dockview-core/src/dockview/options.ts +++ b/packages/dockview-core/src/dockview/options.ts @@ -229,7 +229,8 @@ export type AddPanelOptions

= { * Panel resizing priority */ priority?: number; - preferredSize?: number; + preferredWidth?: number; + preferredHeight?: number; } & Partial; type AddGroupOptionsWithPanel = { diff --git a/packages/dockview-core/src/dockview/types.ts b/packages/dockview-core/src/dockview/types.ts index c5020918a..426140dde 100644 --- a/packages/dockview-core/src/dockview/types.ts +++ b/packages/dockview-core/src/dockview/types.ts @@ -76,6 +76,7 @@ export interface GroupviewPanelState { title?: string; renderer?: DockviewPanelRenderer; priority?: number; - preferredSize?: number; + preferredWidth?: number; + preferredHeight?: number; params?: { [key: string]: any }; } diff --git a/packages/dockview-core/src/gridview/gridview.ts b/packages/dockview-core/src/gridview/gridview.ts index be601b596..353cd00f4 100644 --- a/packages/dockview-core/src/gridview/gridview.ts +++ b/packages/dockview-core/src/gridview/gridview.ts @@ -740,6 +740,18 @@ export class Gridview implements IDisposable { parent.moveChild(from, to); } + predictOrientation(location: number[]): Orientation { + const [rest, index] = tail(location); + const [pathToParent, parent] = this.getNode(rest); + + if (parent instanceof BranchNode) { + return parent.orientation; + } else { + const [grandParent, ..._] = [...pathToParent].reverse(); + return orthogonal(grandParent.orientation); + } + } + public addView( view: IGridView, size: number | Sizing, diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx index 745716a6d..7e74cc456 100644 --- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx +++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx @@ -44,6 +44,8 @@ export const GridActions = (props: { component: 'default', title: `Tab ${nextId()}`, inactive: options?.inactive, + preferredWidth: 200, + preferredHeight: 400, }); };