Function getLayoutedElements

yaml-flow-editor/src/utils/layout.ts:569–667

(
  nodes: FlowNode[],
  edges: FlowEdge[],
  direction: 'TB' | 'LR' = 'TB',
  options: LayoutOptions = {}
)

}

export function getLayoutedElements(
  nodes: FlowNode[],
  edges: FlowEdge[],
  direction: 'TB' | 'LR' = 'TB',
  options: LayoutOptions = {}
): { nodes: FlowNode[]; edges: FlowEdge[] } {
  const { compact = false } = options;
  if (nodes.length === 0) {
    return { nodes, edges };
  }

  const nodeDimensions = new Map<string, { width: number; height: number }>();
  nodes.forEach((node) => {
    nodeDimensions.set(node.id, getNodeDimensions(node));
  });

  // ── Separate main workflow from orphan nodes ────────────────────
  // The main workflow is the connected component that contains a 'start' node.
  // All other components are treated as orphans and placed to the side.
  const components = findConnectedComponents(nodes, edges);
  const startNode = nodes.find((n) => n.type === 'start');
  const mainIds = startNode
    ? components.find((c) => c.has(startNode.id)) ?? new Set<string>()
    : components.reduce((largest, c) => (c.size > largest.size ? c : largest), new Set<string>());

  const mainNodes = nodes.filter((n) => mainIds.has(n.id));
  const orphanNodes = nodes.filter((n) => !mainIds.has(n.id));
  const mainEdges = edges.filter((e) => mainIds.has(e.source) && mainIds.has(e.target));

  // ── Layout main workflow ────────────────────────────────────────
  let layoutedMain: FlowNode[];

  if (compact) {
    layoutedMain = applyCompactGridLayout(
      mainNodes, mainEdges, direction, nodeDimensions,
      COMPACT_GRID_GAP, COMPACT_GRID_MARGIN,
    );
  } else {
    const dagreGraph = new dagre.graphlib.Graph();
    dagreGraph.setDefaultEdgeLabel(() => ({}));
    dagreGraph.setGraph({
      rankdir: direction,
      nodesep: DEFAULT_NODESEP,
      ranksep: DEFAULT_RANKSEP,
      marginx: DEFAULT_MARGIN,
      marginy: DEFAULT_MARGIN,
    });

    mainNodes.forEach((node) => {
      const dim = nodeDimensions.get(node.id)!;
      dagreGraph.setNode(node.id, { width: dim.width, height: dim.height });
    });
    mainEdges.forEach((edge) => {
      dagreGraph.setEdge(edge.source, edge.target);
    });
    dagre.layout(dagreGraph);

    const rawMain = mainNodes.map((node, index) => {