@shepai/cli 1.72.6-pr187.fb842c5 → 1.72.7

package/dist/src/presentation/web/lib/layout-with-dagre.js

@@ -1,4 +1,10 @@
 import dagre from '@dagrejs/dagre';
+/** Canonical layout defaults for the control-center canvas. */
+export const CANVAS_LAYOUT_DEFAULTS = {
+    direction: 'LR',
+    ranksep: 200,
+    nodesep: 15,
+};
 /** Known node-type dimensions for the canvas node types */
 const NODE_DIMENSIONS = {
     featureNode: { width: 288, height: 140 },
@@ -62,16 +68,92 @@ export function layoutWithDagre(nodes, edges, opts = {}) {
     }
     dagre.layout(g);
     const { targetPosition, sourcePosition } = getHandlePositions(direction);
-    const result = [];
-    // Map laid-out nodes, converting dagre center-coords to React Flow top-left
+    const isHorizontal = direction === 'LR' || direction === 'RL';
+    // Collect dagre center positions keyed by node id
+    const centerMap = new Map();
     for (const node of graphNodes) {
-        const pos = g.node(node.id);
+        const dagreNode = g.node(node.id);
         const size = getNodeSize(node, nodeSize);
+        centerMap.set(node.id, { cx: dagreNode.x, cy: dagreNode.y, w: size.width, h: size.height });
+    }
+    // Post-process: center each group of children around their parent's
+    // secondary-axis center so the edge fans out symmetrically.
+    // Build parent→children map from the edges.
+    const childrenOf = new Map();
+    for (const edge of edges) {
+        if (!centerMap.has(edge.source) || !centerMap.has(edge.target))
+            continue;
+        if (!childrenOf.has(edge.source))
+            childrenOf.set(edge.source, []);
+        childrenOf.get(edge.source).push(edge.target);
+    }
+    for (const [parentId, childIds] of childrenOf) {
+        if (childIds.length <= 1)
+            continue;
+        const parent = centerMap.get(parentId);
+        const parentCenter = isHorizontal ? parent.cy : parent.cx;
+        // Sort children by their current secondary-axis position
+        const sorted = childIds
+            .filter((id) => centerMap.has(id))
+            .sort((a, b) => {
+            const pa = centerMap.get(a);
+            const pb = centerMap.get(b);
+            return isHorizontal ? pa.cy - pb.cy : pa.cx - pb.cx;
+        });
+        // Compute the current center of the children group
+        const first = centerMap.get(sorted[0]);
+        const last = centerMap.get(sorted[sorted.length - 1]);
+        const groupCenter = isHorizontal ? (first.cy + last.cy) / 2 : (first.cx + last.cx) / 2;
+        // Shift all children so the group center aligns with the parent center
+        const shift = parentCenter - groupCenter;
+        if (Math.abs(shift) > 1) {
+            for (const childId of sorted) {
+                const c = centerMap.get(childId);
+                if (isHorizontal) {
+                    c.cy += shift;
+                }
+                else {
+                    c.cx += shift;
+                }
+            }
+        }
+    }
+    // Enforce input-order within each sibling group so that the caller's
+    // sort (e.g. by createdAt) is respected on the secondary axis.
+    const inputIndex = new Map();
+    for (let i = 0; i < graphNodes.length; i++) {
+        inputIndex.set(graphNodes[i].id, i);
+    }
+    for (const [, childIds] of childrenOf) {
+        const valid = childIds.filter((id) => centerMap.has(id));
+        if (valid.length <= 1)
+            continue;
+        // Collect current secondary-axis positions, sorted ascending
+        const positions = valid
+            .map((id) => (isHorizontal ? centerMap.get(id).cy : centerMap.get(id).cx))
+            .sort((a, b) => a - b);
+        // Sort children by input index (preserves caller's ordering, e.g. createdAt)
+        const byInput = [...valid].sort((a, b) => (inputIndex.get(a) ?? 0) - (inputIndex.get(b) ?? 0));
+        // Assign sorted positions in input order
+        for (let i = 0; i < byInput.length; i++) {
+            const c = centerMap.get(byInput[i]);
+            if (isHorizontal) {
+                c.cy = positions[i];
+            }
+            else {
+                c.cx = positions[i];
+            }
+        }
+    }
+    // Build result array converting center-coords to React Flow top-left
+    const result = [];
+    for (const node of graphNodes) {
+        const c = centerMap.get(node.id);
         result.push({
             ...node,
             targetPosition,
             sourcePosition,
-            position: { x: pos.x - size.width / 2, y: pos.y - size.height / 2 },
+            position: { x: c.cx - c.w / 2, y: c.cy - c.h / 2 },
         });
     }
     // Place disconnected nodes after the laid-out graph so they don't overlap