Function applyCompactGridLayout

yaml-flow-editor/src/utils/layout.ts:453–536

* Place nodes in columns using greedy bin-packing by height budget. * Normal nodes (~80px) pack ~5 per column; oversized container nodes (while, for_each) * naturally get fewer neighbors or their own column, preventing one huge node from * stretching an entire column far beyond the others. * *

(
  nodes: FlowNode[],
  edges: FlowEdge[],
  direction: 'TB' | 'LR',
  nodeDimensions: Map<string, { width: number; height: number }>,
  gap: number,
  margin: number
)

 * Order = topo order; columns filled left-to-right (TB) or top-to-bottom (LR).
 */
function applyCompactGridLayout(
  nodes: FlowNode[],
  edges: FlowEdge[],
  direction: 'TB' | 'LR',
  nodeDimensions: Map<string, { width: number; height: number }>,
  gap: number,
  margin: number
): FlowNode[] {
  const n = nodes.length;
  if (n === 0) return nodes;
  const orderedIds = topoOrderIds(nodes, edges);
  const nodeById = new Map<string, FlowNode>();
  nodes.forEach((node) => nodeById.set(node.id, node));
  const orderedNodes = orderedIds.map((id) => nodeById.get(id)!).filter(Boolean);
  if (orderedNodes.length !== n) return nodes;

  // Stacking dimension helpers (TB: stack vertically, LR: stack horizontally)
  const mainSize = (node: FlowNode) => {
    const dim = nodeDimensions.get(node.id) || { width: DEFAULT_NODE_WIDTH, height: DEFAULT_NODE_HEIGHT };
    return direction === 'TB' ? dim.height : dim.width;
  };
  const crossSize = (node: FlowNode) => {
    const dim = nodeDimensions.get(node.id) || { width: DEFAULT_NODE_WIDTH, height: DEFAULT_NODE_HEIGHT };
    return direction === 'TB' ? dim.width : dim.height;
  };

  // Height budget per column: roughly 5 normal-sized nodes.
  // Oversized nodes consume more budget → fewer nodes in that column.
  const maxGroupMain = 5 * (COMPACT_MAX_ROW_HEIGHT + gap);

  // Greedy bin-packing: fill each column until the next node would exceed the budget
  const groups: number[][] = [[]];
  let currentMain = 0;

  for (let i = 0; i < orderedNodes.length; i++) {
    const nodeMain = mainSize(orderedNodes[i]);
    const added = groups[groups.length - 1].length > 0 ? gap + nodeMain : nodeMain;

    if (groups[groups.length - 1].length > 0 && currentMain + added > maxGroupMain) {
      // Start a new column
      groups.push([i]);
      currentMain = nodeMain;
    } else {
      groups[groups.length - 1].push(i);
      currentMain += added;
    }
  }

  // Column cross-axis widths (actual dimensions, no cap)
  const numGroups = groups.length;
  const groupCrossWidths: number[] = new Array(numGroups).fill(0);
  for (let g = 0; g < numGroups; g++) {
    for (const i of groups[g]) {
      groupCrossWidths[g] = Math.max(groupCrossWidths[g], crossSize(orderedNodes[i]));
    }
  }

  // Cumulative cross-axis positions for each column