Add size

Author: cmdcolin

packages/app-core/src/ui/App/TiledViewsContainer.tsx

@@ -166,17 +166,19 @@ const TiledViewsContainer = observer(function TiledViewsContainer({
       : undefined
 
     // If we have init configuration from URL params, use it
-    if (initLayout) {
+    if (initLayout && isSessionWithDockviewLayout(session)) {
       trackedViewIdsRef.current.clear()
       let firstPanelId: string | undefined
 
+      // Collect groups and their sizes for post-processing
+      const groupSizes: { group: DockviewGroupPanel; size: number }[] = []
+
       // Process nested layout structure
       // Returns the group created for this node (for use as reference by siblings)
       function processNode(
         node: typeof initLayout,
         referenceGroup: DockviewGroupPanel | undefined,
         direction: 'right' | 'below' | undefined,
-        size: number | undefined,
       ): DockviewGroupPanel | undefined {
         if (!node) {
           return undefined
@@ -189,7 +191,7 @@ const TiledViewsContainer = observer(function TiledViewsContainer({
           }
           const position =
             referenceGroup && direction
-              ? { referenceGroup, direction, size }
+              ? { referenceGroup, direction }
               : referenceGroup
                 ? { referenceGroup }
                 : undefined
@@ -199,11 +201,18 @@ const TiledViewsContainer = observer(function TiledViewsContainer({
           })
           // Populate panelViewAssignments from init
           for (const viewId of node.viewIds) {
-            session.assignViewToPanel(panelId, viewId)
+            if (isSessionWithDockviewLayout(session)) {
+              session.assignViewToPanel(panelId, viewId)
+            }
             trackedViewIdsRef.current.add(viewId)
           }
           // Return the group this panel was added to
-          return dockviewApi.getPanel(panelId)?.group
+          const group = dockviewApi.getPanel(panelId)?.group
+          // Track size for this group if specified
+          if (group && node.size !== undefined) {
+            groupSizes.push({ group, size: node.size })
+          }
+          return group
         }
         if (node.children && node.children.length > 0) {
           // Container node - process children
@@ -215,12 +224,7 @@ const TiledViewsContainer = observer(function TiledViewsContainer({
             // First child uses parent's reference/direction, subsequent children split from previous
             const childDirection = i === 0 ? direction : dockviewDirection
             const childRef = i === 0 ? referenceGroup : currentGroup
-            const newGroup = processNode(
-              child,
-              childRef,
-              childDirection,
-              child.size,
-            )
+            const newGroup = processNode(child, childRef, childDirection)
             if (newGroup) {
               currentGroup = newGroup
             }
@@ -230,7 +234,42 @@ const TiledViewsContainer = observer(function TiledViewsContainer({
         return undefined
       }
 
-      processNode(initLayout, undefined, undefined, undefined)
+      processNode(initLayout, undefined, undefined)
+
+      // Apply proportional sizes after all panels are created
+      // Only handle simple horizontal/vertical splits at the root level
+      // Use requestAnimationFrame to ensure layout is complete
+      if (
+        groupSizes.length >= 2 &&
+        initLayout.direction &&
+        groupSizes.length === initLayout.children?.length
+      ) {
+        const direction = initLayout.direction
+        requestAnimationFrame(() => {
+          const totalSize = groupSizes.reduce((sum, g) => sum + g.size, 0)
+          if (totalSize > 0) {
+            if (direction === 'horizontal') {
+              const containerWidth = dockviewApi.width
+              if (containerWidth > 0) {
+                for (const { group, size } of groupSizes) {
+                  const width = Math.round(containerWidth * (size / totalSize))
+                  group.api.setSize({ width })
+                }
+              }
+            } else {
+              const containerHeight = dockviewApi.height
+              if (containerHeight > 0) {
+                for (const { group, size } of groupSizes) {
+                  const height = Math.round(
+                    containerHeight * (size / totalSize),
+                  )
+                  group.api.setSize({ height })
+                }
+              }
+            }
+          }
+        })
+      }
 
       // Clear init after processing (it's only needed once)
       session.setInit(undefined)