feat: preferred size

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<ActiveGroupEvent>;
  readonly onDidGroupChange: Event<GroupChangedEvent>;
@@ -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) {

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,
  }
  );
 

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<DockviewGroupPanel>();
  readonly onDidRemoveGroup: Event<DockviewGroupPanel> =
  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(<Direction>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(<Direction>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;
  }

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 {

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(

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

@@ -229,7 +229,8 @@ export type AddPanelOptions<P extends object = Parameters> = {
  * Panel resizing priority
  */
  priority?: number;
- preferredSize?: number;
+ preferredWidth?: number;
+ preferredHeight?: number;
 } & Partial<AddPanelOptionsUnion>;
 
 type AddGroupOptionsWithPanel = {

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 };
 }

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,

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,
  });
  };