feat: panel initial sizing

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

@@ -8,7 +8,7 @@ import { PanelUpdateEvent } from '../../panel/types';
 import { Orientation } from '../../splitview/splitview';
 import { CompositeDisposable } from '../../lifecycle';
 import { Emitter } from '../../events';
-import {  IDockviewPanel } from '../../dockview/dockviewPanel';
+import { IDockviewPanel } from '../../dockview/dockviewPanel';
 import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel';
 import { fireEvent, queryByTestId } from '@testing-library/dom';
 import { getPanelData } from '../../dnd/dataTransfer';
@@ -626,6 +626,7 @@ describe('dockviewComponent', () => {
                 panel1: {
                     id: 'panel1',
                     contentComponent: 'default',
+                    tabComponent: 'tab-default',
                     title: 'panel1',
                 },
                 panel2: {
@@ -637,22 +638,26 @@ describe('dockviewComponent', () => {
                     id: 'panel3',
                     contentComponent: 'default',
                     title: 'panel3',
+                    renderer: 'onlyWhenVisible',
                 },
                 panel4: {
                     id: 'panel4',
                     contentComponent: 'default',
                     title: 'panel4',
+                    renderer: 'always',
                 },
                 panel5: {
                     id: 'panel5',
                     contentComponent: 'default',
                     title: 'panel5',
+                    minimumHeight: 100,
+                    maximumHeight: 1000,
+                    minimumWidth: 200,
+                    maximumWidth: 2000,
                 },
             },
         });
 
-        // dockview.layout(1000, 1000, true);
-
         expect(JSON.parse(JSON.stringify(dockview.toJSON()))).toEqual({
             activeGroup: 'group-1',
             grid: {
@@ -712,6 +717,7 @@ describe('dockviewComponent', () => {
                 panel1: {
                     id: 'panel1',
                     contentComponent: 'default',
+                    tabComponent: 'tab-default',
                     title: 'panel1',
                 },
                 panel2: {
@@ -723,16 +729,22 @@ describe('dockviewComponent', () => {
                     id: 'panel3',
                     contentComponent: 'default',
                     title: 'panel3',
+                    renderer: 'onlyWhenVisible',
                 },
                 panel4: {
                     id: 'panel4',
                     contentComponent: 'default',
                     title: 'panel4',
+                    renderer: 'always',
                 },
                 panel5: {
                     id: 'panel5',
                     contentComponent: 'default',
                     title: 'panel5',
+                    minimumHeight: 100,
+                    maximumHeight: 1000,
+                    minimumWidth: 200,
+                    maximumWidth: 2000,
                 },
             },
         });

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

@@ -3,6 +3,7 @@ import {
     SerializedGridObject,
     getGridLocation,
     ISerializedLeafNode,
+    orthogonal,
 } from '../gridview/gridview';
 import {
     directionToPosition,
@@ -1371,6 +1372,11 @@ export class DockviewComponent
             );
         }
 
+        const initial = {
+            width: options.initialWidth,
+            height: options.initialHeight,
+        };
+
         if (options.position) {
             if (isPanelOptionsWithPanel(options.position)) {
                 const referencePanel =
@@ -1412,6 +1418,11 @@ export class DockviewComponent
                     this.doSetGroupAndPanelActive(group);
                 }
 
+                group.api.setSize({
+                    height: initial?.height,
+                    width: initial?.width,
+                });
+
                 return panel;
             }
         } else {
@@ -1458,6 +1469,11 @@ export class DockviewComponent
                     skipSetGroupActive: options.inactive,
                 });
 
+                referenceGroup.api.setSize({
+                    width: initial?.width,
+                    height: initial?.height,
+                });
+
                 if (!options.inactive) {
                     this.doSetGroupAndPanelActive(referenceGroup);
                 }
@@ -1468,7 +1484,13 @@ export class DockviewComponent
                     location,
                     target
                 );
-                const group = this.createGroupAtLocation(relativeLocation);
+                const group = this.createGroupAtLocation(
+                    relativeLocation,
+                    this.orientationAtLocation(relativeLocation) ===
+                        Orientation.VERTICAL
+                        ? initial?.height
+                        : initial?.width
+                );
                 panel = this.createPanel(options, group);
                 group.model.openPanel(panel, {
                     skipSetActive: options.inactive,
@@ -1502,7 +1524,12 @@ export class DockviewComponent
                 skipSetGroupActive: options.inactive,
             });
         } else {
-            const group = this.createGroupAtLocation();
+            const group = this.createGroupAtLocation(
+                [0],
+                this.gridview.orientation === Orientation.VERTICAL
+                    ? initial?.height
+                    : initial?.width
+            );
             panel = this.createPanel(options, group);
             group.model.openPanel(panel, {
                 skipSetActive: options.inactive,
@@ -2272,10 +2299,11 @@ export class DockviewComponent
     }
 
     private createGroupAtLocation(
-        location: number[] = [0]
+        location: number[],
+        size?: number
     ): DockviewGroupPanel {
         const group = this.createGroup();
-        this.doAddGroup(group, location);
+        this.doAddGroup(group, location, size);
         return group;
     }
 
@@ -2284,4 +2312,11 @@ export class DockviewComponent
             group.value.model.containsPanel(panel)
         )?.value;
     }
+
+    private orientationAtLocation(location: number[]) {
+        const rootOrientation = this.gridview.orientation;
+        return location.length % 2 == 1
+            ? rootOrientation
+            : orthogonal(rootOrientation);
+    }
 }

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

@@ -35,35 +35,31 @@ 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;
+        const activePanelMinimumWidth = this.activePanel?.minimumWidth;
+        return typeof activePanelMinimumWidth === 'number'
+            ? activePanelMinimumWidth
+            : MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH;
     }
 
     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;
+        const activePanelMinimumHeight = this.activePanel?.minimumHeight;
+        return typeof activePanelMinimumHeight === 'number'
+            ? activePanelMinimumHeight
+            : MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT;
     }
 
     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;
+        const activePanelMaximumWidth = this.activePanel?.maximumWidth;
+        return typeof activePanelMaximumWidth === 'number'
+            ? activePanelMaximumWidth
+            : 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;
+        const activePanelMaximumHeight = this.activePanel?.maximumHeight;
+        return typeof activePanelMaximumHeight === 'number'
+            ? activePanelMaximumHeight
+            : Number.MAX_SAFE_INTEGER;
     }
 
     get panels(): IDockviewPanel[] {

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

@@ -238,6 +238,8 @@ export type AddPanelOptions<P extends object = Parameters> = {
      * Defaults to `false` which forces newly added panels to become active.
      */
     inactive?: boolean;
+    initialWidth?: number;
+    initialHeight?: number;
 } & Partial<AddPanelOptionsUnion> &
     Partial<Contraints>;