feat: panel initial sizing

mathuo · Aug 24, 2024 · bbcbac9 · bbcbac9
1 parent 2dc0daf
commit bbcbac9
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 24 deletions.
diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/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,30 @@ export class DockviewComponent
                     skipSetGroupActive: options.inactive,
                 });
 
+                if (target === 'center') {
+                    const location = getGridLocation(referenceGroup.element);
+
+                    if (
+                        this.orientationAtLocation(location) ===
+                        Orientation.VERTICAL
+                    ) {
+                        referenceGroup.api.setSize({
+                            height: initial?.height,
+                            width: initial?.width,
+                        });
+                    } else {
+                        referenceGroup.api.setSize({
+                            height: initial?.height,
+                            width: initial?.width,
+                        });
+                    }
+                } else {
+                    referenceGroup.api.setSize({
+                        width: initial?.width,
+                        height: initial?.height,
+                    });
+                }
+
                 if (!options.inactive) {
                     this.doSetGroupAndPanelActive(referenceGroup);
                 }
@@ -1468,7 +1503,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 +1543,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,
@@ -1517,6 +1563,13 @@ export class DockviewComponent
         return panel;
     }
 
+    private orientationAtLocation(location: number[]) {
+        const rootOrientation = this.gridview.orientation;
+        return location.length % 2 == 1
+            ? rootOrientation
+            : orthogonal(rootOrientation);
+    }
+
     removePanel(
         panel: IDockviewPanel,
         options: {
@@ -2272,10 +2325,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;
     }
 

diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanel.ts b/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[] {

diff --git a/packages/dockview-core/src/dockview/options.ts b/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>;