@work-graph/cli 0.2.0

package/vendor/src/graphCanvasLitFlow/graphCanvasEdgeRouter.mjs

@@ -0,0 +1,142 @@
+/**
+ * Work Graph edge router (n8n-style bezier / vertical cubic).
+ * Used by SVG overlay; lit-flow flow-edge is not used for product views.
+ */
+
+/**
+ * @param {{ x: number, width: number }} node
+ * @param {number} targetCenterX
+ */
+function anchorX(node, targetCenterX) {
+  const ratio = (targetCenterX - node.x) / Math.max(node.width, 1);
+  return node.x + node.width * Math.max(0.15, Math.min(0.85, ratio));
+}
+
+/**
+ * @param {{
+ *   fromNode: { x: number, y: number, width: number, height: number },
+ *   toNode: { x: number, y: number, width: number, height: number },
+ *   rejected?: boolean,
+ *   label?: string,
+ * }} edge
+ * @param {'LR' | 'TB' | string} [layoutDirection]
+ */
+export function buildGraphCanvasEdgeGeometry(edge, layoutDirection = 'LR') {
+  const from = edge.fromNode;
+  const to = edge.toNode;
+  const fromCy = from.y + from.height / 2;
+  const toCy = to.y + to.height / 2;
+  const toCx = to.x + to.width / 2;
+  const fromCx = from.x + from.width / 2;
+
+  let startX;
+  let startY;
+  let endX;
+  let endY;
+  let orientation;
+
+  if (layoutDirection === 'LR') {
+    const goesRight = to.x > from.x + from.width - 8;
+    if (goesRight) {
+      orientation = 'horizontal';
+      startX = from.x + from.width;
+      startY = fromCy;
+      endX = to.x;
+      endY = toCy;
+    } else if (toCy > fromCy + 8) {
+      orientation = 'vertical';
+      startX = anchorX(from, toCx);
+      endX = anchorX(to, fromCx);
+      startY = from.y + from.height;
+      endY = to.y;
+    } else {
+      orientation = 'vertical-reverse';
+      startX = anchorX(from, toCx);
+      endX = anchorX(to, fromCx);
+      startY = from.y;
+      endY = to.y + to.height;
+    }
+  } else {
+    const goesDown = toCy > fromCy + 8;
+    if (goesDown) {
+      orientation = 'vertical';
+      startX = anchorX(from, toCx);
+      endX = anchorX(to, fromCx);
+      startY = from.y + from.height;
+      endY = to.y;
+    } else if (to.x >= from.x + from.width - 8) {
+      orientation = 'horizontal';
+      startX = from.x + from.width;
+      startY = fromCy;
+      endX = to.x;
+      endY = toCy;
+    } else {
+      orientation = 'horizontal-reverse';
+      startX = from.x;
+      startY = fromCy;
+      endX = to.x + to.width;
+      endY = toCy;
+    }
+  }
+
+  const dy = endY - startY;
+  const dx = endX - startX;
+  const bend = Math.max(28, Math.min(72, (Math.abs(dx) + Math.abs(dy)) * 0.22));
+  const d = orientation === 'vertical' || orientation === 'vertical-reverse'
+    ? `M ${startX} ${startY} C ${startX} ${startY + Math.sign(dy || 1) * bend}, ${endX} ${endY - Math.sign(dy || 1) * bend}, ${endX} ${endY}`
+    : (() => {
+      const midX = startX + (endX - startX) / 2;
+      return `M ${startX} ${startY} C ${midX} ${startY}, ${midX} ${endY}, ${endX} ${endY}`;
+    })();
+
+  const label = String(edge.label ?? '').trim();
+  const hideLabel = orientation === 'vertical' && label === 'подзадача';
+
+  return {
+    d,
+    startX,
+    startY,
+    endX,
+    endY,
+    orientation,
+    rejected: edge.rejected === true,
+    upstream: edge.upstream === true,
+    label: hideLabel ? '' : label,
+    labelX: (startX + endX) / 2,
+    labelY: orientation === 'horizontal' || orientation === 'horizontal-reverse'
+      ? Math.min(startY, endY) - 10
+      : startY + (endY - startY) / 2,
+    labelPlacement: orientation === 'horizontal' && to.x > from.x + from.width * 0.35
+      ? 'start'
+      : 'center',
+  };
+}
+
+/**
+ * @param {{
+ *   layoutDirection?: string,
+ *   nodes?: Array<{ id: string, x?: number, y?: number, width?: number, height?: number }>,
+ *   edges?: Array<{ id?: string, from: string, to: string, label?: string, rejected?: boolean, upstream?: boolean }>,
+ * }} projection
+ */
+export function buildGraphCanvasEdgeRoutes(projection) {
+  const layoutDirection = projection?.layoutDirection ?? 'LR';
+  const nodeById = new Map((projection?.nodes ?? []).map((node) => [node.id, node]));
+  const routes = [];
+
+  for (const edge of projection?.edges ?? []) {
+    const fromNode = nodeById.get(edge.from);
+    const toNode = nodeById.get(edge.to);
+    if (!fromNode || !toNode) {
+      continue;
+    }
+    routes.push({
+      id: edge.id ?? `${edge.from}-${edge.to}`,
+      from: edge.from,
+      to: edge.to,
+      ...buildGraphCanvasEdgeGeometry({ ...edge, fromNode, toNode }, layoutDirection),
+    });
+  }
+
+  return routes;
+}

package/vendor/src/graphCanvasLitFlow/graphCanvasLayoutProfile.mjs

@@ -0,0 +1,32 @@
+/**
+ * Dagre spacing inspired by n8n / Vue Flow layout recipes:
+ * generous ranksep, nodesep >= rendered card height gap, edgesep for parallel edges.
+ */
+
+/** @type {import('../dagreGraphLayout.mjs').DagreLayoutOptions} */
+export const N8N_INSPIRED_DAGRE_LR = {
+  rankdir: 'LR',
+  ranksep: 128,
+  nodesep: 64,
+  edgesep: 32,
+  marginx: 36,
+  marginy: 36,
+  ranker: 'network-simplex',
+  align: 'UL',
+  resolveOverlaps: true,
+  overlapGap: 32,
+};
+
+/** @type {import('../dagreGraphLayout.mjs').DagreLayoutOptions} */
+export const N8N_INSPIRED_DAGRE_TB = {
+  rankdir: 'TB',
+  ranksep: 96,
+  nodesep: 56,
+  edgesep: 28,
+  marginx: 32,
+  marginy: 32,
+  ranker: 'network-simplex',
+  align: 'UL',
+  resolveOverlaps: true,
+  overlapGap: 28,
+};

package/vendor/src/graphCanvasLitFlow/graphCanvasNodeMetrics.mjs

@@ -0,0 +1,45 @@
+/** Card width aligned with n8n-style node proportions (~240px). */
+export const GRAPH_CARD_WIDTH = 240;
+
+/** Minimum card height including layer pill + one title line. */
+export const GRAPH_CARD_MIN_HEIGHT = 96;
+
+/**
+ * Estimate rendered graph card height (must stay in sync with graphCardNode.ts).
+ *
+ * @param {{ title?: string, summary?: string, status?: string, layer?: boolean }} input
+ */
+export function estimateGraphCardHeight(input = {}) {
+  const title = String(input.title ?? '');
+  const summary = String(input.summary ?? '');
+  const hasStatus = String(input.status ?? '').trim() !== '';
+  const hasLayer = input.layer !== false;
+
+  const titleLines = Math.max(1, Math.ceil(title.length / 30));
+  const summaryLines = summary.trim() ? Math.max(1, Math.ceil(summary.length / 36)) : 0;
+
+  let height = 21;
+  if (hasLayer) {
+    height += 30;
+  }
+  height += titleLines * 18;
+  if (summaryLines) {
+    height += 6 + summaryLines * 16;
+  }
+  if (hasStatus) {
+    height += 31;
+  }
+  height += 12;
+
+  return Math.max(GRAPH_CARD_MIN_HEIGHT, height);
+}
+
+/**
+ * @param {{ title?: string, summary?: string, status?: string, layer?: boolean, width?: number }} input
+ */
+export function measureGraphCardNode(input = {}) {
+  return {
+    width: input.width ?? GRAPH_CARD_WIDTH,
+    height: estimateGraphCardHeight(input),
+  };
+}

package/vendor/src/graphCanvasLitFlow/graphCanvasProjection.mjs

@@ -0,0 +1,115 @@
+export const GRAPH_CANVAS_LIT_FLOW_PROJECTION_SCHEMA = 'workgraph.graph-canvas-lit-flow-projection.v1';
+
+/**
+ * @param {object} canvas intent roadmap canvas model
+ * @param {{ viewId?: string }} [options]
+ */
+export function buildGraphCanvasProjectionFromIntentCanvas(canvas, options = {}) {
+  const nodes = (canvas?.nodes ?? []).map((node) => ({
+    id: node.id,
+    kind: node.kind ?? 'unknown',
+    title: node.title ?? node.id,
+    layer: node.layer ?? '',
+    x: node.x ?? 0,
+    y: node.y ?? 0,
+    width: node.width ?? 220,
+    height: node.height ?? 78,
+    selected: node.selected === true,
+    rejected: node.kind === 'intent_option' && node.selected !== true,
+    status: node.status ?? '',
+    taskId: node.kind === 'work_item' || node.kind === 'work_epic' ? (node.workId ?? node.id) : undefined,
+    intentNodeId: String(node.kind ?? '').startsWith('intent_') ? node.id : undefined,
+    doneChildCount: node.doneChildCount,
+    childCount: node.childCount,
+  }));
+
+  const edges = (canvas?.edges ?? []).map((edge, index) => ({
+    id: edge.id ?? `${edge.from}-${edge.to}-${index}`,
+    from: edge.from,
+    to: edge.to,
+    label: edge.label ?? '',
+    rejected: edge.rejected === true,
+    upstream: false,
+  }));
+
+  return {
+    schema: GRAPH_CANVAS_LIT_FLOW_PROJECTION_SCHEMA,
+    layoutDirection: canvas?.layoutDirection ?? 'LR',
+    viewId: options.viewId ?? 'intent-roadmap',
+    nodes,
+    edges,
+  };
+}
+
+/**
+ * @param {object} layout architecture layout from buildArchitectureLayout
+ * @param {{ viewId?: string }} [options]
+ */
+export function buildGraphCanvasProjectionFromArchitectureLayout(layout, options = {}) {
+  const nodes = (layout?.nodes ?? []).map((node) => ({
+    id: node.block?.id ?? node.id,
+    kind: 'architecture_block',
+    title: node.block?.title ?? node.block?.id ?? node.id,
+    layer: node.block?.layer ?? '',
+    summary: node.block?.summary ?? '',
+    x: node.x ?? 0,
+    y: node.y ?? 0,
+    width: node.width ?? 220,
+    height: node.height ?? 78,
+    focused: node.focused === true,
+    blockId: node.block?.id ?? node.id,
+  }));
+
+  const edges = (layout?.edges ?? []).map((edge, index) => ({
+    id: edge.id ?? `${edge.from}-${edge.to}-${index}`,
+    from: edge.from,
+    to: edge.to,
+    label: edge.label ?? edge.type ?? '',
+    rejected: false,
+    upstream: edge.upstream === true || edge.type === 'maps_to',
+  }));
+
+  return {
+    schema: GRAPH_CANVAS_LIT_FLOW_PROJECTION_SCHEMA,
+    layoutDirection: 'LR',
+    viewId: options.viewId ?? 'architecture',
+    nodes,
+    edges,
+  };
+}
+
+/**
+ * @param {object} model schematic view model
+ * @param {{ viewId?: string }} [options]
+ */
+export function buildGraphCanvasProjectionFromSchematicModel(model, options = {}) {
+  const nodes = (model?.nodes ?? []).map((node) => ({
+    id: node.id,
+    kind: 'schematic_block',
+    title: node.title ?? node.id,
+    layer: node.layer ?? '',
+    summary: node.summary ?? '',
+    x: node.x ?? 0,
+    y: node.y ?? 0,
+    width: node.width ?? 220,
+    height: node.height ?? 78,
+    schematicId: node.id,
+  }));
+
+  const edges = (model?.edges ?? []).map((edge, index) => ({
+    id: edge.id ?? `${edge.from}-${edge.to}-${index}`,
+    from: edge.from,
+    to: edge.to,
+    label: edge.label ?? edge.type ?? '',
+    rejected: false,
+    upstream: edge.upstream === true,
+  }));
+
+  return {
+    schema: GRAPH_CANVAS_LIT_FLOW_PROJECTION_SCHEMA,
+    layoutDirection: 'LR',
+    viewId: options.viewId ?? 'schematic',
+    nodes,
+    edges,
+  };
+}

package/vendor/src/graphCanvasLitFlow/graphCanvasProjectionToFlow.mjs

@@ -0,0 +1,133 @@
+import {
+  buildGraphCanvasEdgeLabelHtml,
+  buildGraphCanvasEdgeStrokeStyle,
+} from './graphCanvasEdgeLabels.mjs';
+
+/**
+ * @param {object} edge
+ * @param {Array<{ id: string, x?: number, y?: number, width?: number, height?: number }>} layoutNodes
+ */
+function buildFlowEdgeHandles(edge, layoutNodes) {
+  const from = layoutNodes.find((node) => node.id === edge.from);
+  const to = layoutNodes.find((node) => node.id === edge.to);
+  if (!from || !to) {
+    return { sourceHandle: 'source', targetHandle: 'target', edgeType: 'default' };
+  }
+
+  const dx = (to.x ?? 0) - (from.x ?? 0);
+  const dy = (to.y ?? 0) - (from.y ?? 0);
+  const horizontal = dx > ((from.width ?? 0) * 0.35);
+  const verticalDown = !horizontal && dy > 12;
+
+  if (verticalDown) {
+    return {
+      sourceHandle: 'source-bottom',
+      targetHandle: 'target-top',
+      edgeType: 'smoothstep',
+    };
+  }
+
+  if (horizontal) {
+    return {
+      sourceHandle: 'source',
+      targetHandle: 'target',
+      edgeType: 'default',
+    };
+  }
+
+  return { sourceHandle: 'source', targetHandle: 'target', edgeType: 'default' };
+}
+
+/**
+ * @param {object} edge
+ * @param {Array<{ id: string, x?: number, y?: number, width?: number, height?: number }>} layoutNodes
+ * @param {'dark' | 'light'} theme
+ */
+function buildFlowEdgeLabelFields(edge, layoutNodes, theme) {
+  const label = String(edge.label ?? '').trim();
+  if (label === '') {
+    return {};
+  }
+
+  const from = layoutNodes.find((node) => node.id === edge.from);
+  const to = layoutNodes.find((node) => node.id === edge.to);
+  const html = buildGraphCanvasEdgeLabelHtml(label, theme, { rejected: edge.rejected === true });
+  const handles = buildFlowEdgeHandles(edge, layoutNodes);
+
+  if (handles.edgeType === 'smoothstep' && label === 'подзадача') {
+    return {};
+  }
+
+  if (handles.edgeType === 'default' && (to?.x ?? 0) > (from?.x ?? 0) + ((from?.width ?? 0) * 0.35)) {
+    return { startLabel: label, startLabelHtml: html };
+  }
+
+  return {};
+}
+
+/**
+ * @param {import('./graphCanvasProjection.mjs').GRAPH_CANVAS_LIT_FLOW_PROJECTION_SCHEMA extends string ? object : never} projection
+ * @param {{ theme?: 'dark' | 'light' }} [options]
+ */
+export function graphCanvasProjectionToFlow(projection, options = {}) {
+  const theme = options.theme === 'light' ? 'light' : 'dark';
+  const layoutNodes = projection?.nodes ?? [];
+  const nodes = (projection?.nodes ?? []).map((node) => ({
+    id: node.id,
+    type: 'graph-card',
+    position: { x: node.x, y: node.y },
+    data: {
+      kind: node.kind,
+      title: node.title,
+      layer: node.layer ?? '',
+      summary: node.summary ?? '',
+      status: node.status ?? '',
+      selected: node.selected === true,
+      rejected: node.rejected === true,
+      focused: node.focused === true,
+      taskId: node.taskId ?? '',
+      intentNodeId: node.intentNodeId ?? '',
+      blockId: node.blockId ?? '',
+      schematicId: node.schematicId ?? '',
+      doneChildCount: node.doneChildCount ?? 0,
+      childCount: node.childCount ?? 0,
+    },
+    width: node.width,
+    height: node.height,
+    draggable: false,
+    selectable: true,
+  }));
+
+  const edges = (projection?.edges ?? []).map((edge) => {
+    const rejected = edge.rejected === true;
+    const handles = buildFlowEdgeHandles(edge, layoutNodes);
+    return {
+      id: edge.id,
+      source: edge.from,
+      target: edge.to,
+      sourceHandle: handles.sourceHandle,
+      targetHandle: handles.targetHandle,
+      label: '',
+      type: handles.edgeType,
+      animated: false,
+      selectable: false,
+      markerEnd: {
+        type: 'ArrowClosed',
+        width: 14,
+        height: 14,
+        color: buildGraphCanvasEdgeStrokeStyle(edge, theme).stroke,
+      },
+      data: {
+        rejected,
+        upstream: edge.upstream === true,
+        ...buildFlowEdgeLabelFields(edge, layoutNodes, theme),
+      },
+      style: {
+        ...buildGraphCanvasEdgeStrokeStyle(edge, theme),
+        strokeWidth: rejected ? 1.75 : 2.25,
+      },
+    };
+  });
+
+  return { nodes, edges };
+}

package/vendor/src/graphCanvasLitFlow/graphCanvasTraversal.mjs

@@ -0,0 +1,77 @@
+function buildEdgeMaps(edges) {
+  /** @type {Map<string, Set<string>>} */
+  const outgoing = new Map();
+  /** @type {Map<string, Set<string>>} */
+  const incoming = new Map();
+
+  for (const edge of edges ?? []) {
+    if (!edge?.from || !edge?.to) {
+      continue;
+    }
+    if (!outgoing.has(edge.from)) {
+      outgoing.set(edge.from, new Set());
+    }
+    if (!incoming.has(edge.to)) {
+      incoming.set(edge.to, new Set());
+    }
+    outgoing.get(edge.from).add(edge.to);
+    incoming.get(edge.to).add(edge.from);
+  }
+
+  return { outgoing, incoming };
+}
+
+export function getOutgoingNodeIds(nodeId, edges) {
+  const { outgoing } = buildEdgeMaps(edges);
+  return [...(outgoing.get(nodeId) ?? [])];
+}
+
+export function getIncomingNodeIds(nodeId, edges) {
+  const { incoming } = buildEdgeMaps(edges);
+  return [...(incoming.get(nodeId) ?? [])];
+}
+
+export function getUpstreamNodeIds(nodeId, edges, visited = new Set()) {
+  if (visited.has(nodeId)) {
+    return [];
+  }
+  visited.add(nodeId);
+  const direct = getIncomingNodeIds(nodeId, edges);
+  const nested = direct.flatMap((id) => getUpstreamNodeIds(id, edges, visited));
+  return [...new Set([...direct, ...nested])];
+}
+
+export function getDownstreamNodeIds(nodeId, edges, visited = new Set()) {
+  if (visited.has(nodeId)) {
+    return [];
+  }
+  visited.add(nodeId);
+  const direct = getOutgoingNodeIds(nodeId, edges);
+  const nested = direct.flatMap((id) => getDownstreamNodeIds(id, edges, visited));
+  return [...new Set([...direct, ...nested])];
+}
+
+export function sortNodeIdsByVerticalPosition(nodeIds, nodes) {
+  const byId = new Map((nodes ?? []).map((node) => [node.id, node]));
+  return [...nodeIds].sort((left, right) => {
+    const leftNode = byId.get(left);
+    const rightNode = byId.get(right);
+    const dy = (leftNode?.y ?? 0) - (rightNode?.y ?? 0);
+    if (dy !== 0) {
+      return dy;
+    }
+    return String(left).localeCompare(String(right), 'en');
+  });
+}
+
+export function getSiblingNodeIds(nodeId, edges, nodes) {
+  const parents = getIncomingNodeIds(nodeId, edges);
+  if (parents.length === 0) {
+    return [];
+  }
+  const siblings = parents.flatMap((parentId) => getOutgoingNodeIds(parentId, edges));
+  return sortNodeIdsByVerticalPosition(
+    siblings.filter((id) => id !== nodeId),
+    nodes,
+  );
+}

package/vendor/src/graphCanvasLitFlow/layoutIntentRoadmapWorkStack.mjs

@@ -0,0 +1,73 @@
+/**
+ * Intent roadmap hybrid layout (n8n-style):
+ * - intent spine (question → … → decision) via dagre LR
+ * - work tree as a vertical stack column to the right of decision
+ *
+ * @param {Array<{ id: string, kind: string, width: number, height: number, [key: string]: unknown }>} workNodes
+ * @param {Array<{ from: string, to: string }>} workEdges
+ * @param {{ id: string, x: number, y: number, width: number, height: number }} anchorNode
+ * @param {{ ranksep?: number, gap?: number }} [options]
+ */
+export function layoutIntentRoadmapWorkStack(workNodes, workEdges, anchorNode, options = {}) {
+  if (!workNodes.length) {
+    return new Map();
+  }
+
+  const ranksep = options.ranksep ?? 128;
+  const gap = options.gap ?? 36;
+  const byId = new Map(workNodes.map((node) => [node.id, node]));
+  const order = [];
+
+  /** @type {Set<string>} */
+  const visited = new Set();
+  const roots = workNodes.filter((node) => !workEdges.some((edge) => edge.to === node.id));
+
+  function walk(nodeId) {
+    if (visited.has(nodeId) || !byId.has(nodeId)) {
+      return;
+    }
+    visited.add(nodeId);
+    order.push(nodeId);
+    for (const edge of workEdges.filter((candidate) => candidate.from === nodeId)) {
+      walk(edge.to);
+    }
+  }
+
+  for (const root of roots) {
+    walk(root.id);
+  }
+  for (const node of workNodes) {
+    walk(node.id);
+  }
+
+  const columnX = anchorNode.x + anchorNode.width + ranksep;
+  /** @type {Map<string, object>} */
+  const placed = new Map();
+
+  let y = anchorNode.y + anchorNode.height / 2 - (byId.get(order[0])?.height ?? 0) / 2;
+
+  for (const nodeId of order) {
+    const node = byId.get(nodeId);
+    if (!node) {
+      continue;
+    }
+    placed.set(nodeId, {
+      ...node,
+      x: columnX,
+      y,
+    });
+    y += node.height + gap;
+  }
+
+  return placed;
+}
+
+/**
+ * @param {Array<{ kind?: string }>} nodes
+ */
+export function isIntentRoadmapIntentKind(kind) {
+  return kind === 'intent_question'
+    || kind === 'intent_analysis'
+    || kind === 'intent_option'
+    || kind === 'intent_decision';
+}

package/vendor/src/graphCanvasLitFlow/resolveGraphCanvasOverlaps.mjs

@@ -0,0 +1,77 @@
+/**
+ * Post-layout pass: n8n stores manual positions; we auto-fix dagre underestimates
+ * when several nodes share the same rank (vertical stacks in LR layout).
+ *
+ * @param {Array<{ id: string, x: number, y: number, width: number, height: number }>} nodes
+ * @param {{ gap?: number, rankTolerance?: number, layoutDirection?: 'LR' | 'TB' | 'RL' | 'BT' }} [options]
+ */
+export function resolveGraphCanvasOverlaps(nodes, options = {}) {
+  if (!nodes.length) {
+    return nodes;
+  }
+
+  const gap = options.gap ?? 28;
+  const rankTolerance = options.rankTolerance ?? 48;
+  const horizontal = options.layoutDirection === 'LR' || options.layoutDirection === 'RL';
+  const rankKey = horizontal
+    ? (node) => Math.round(node.x / rankTolerance) * rankTolerance
+    : (node) => Math.round(node.y / rankTolerance) * rankTolerance;
+  const crossKey = horizontal
+    ? (node) => node.y
+    : (node) => node.x;
+
+  /** @type {Map<number, Array<typeof nodes[number]>>} */
+  const lanes = new Map();
+  for (const node of nodes) {
+    const key = rankKey(node);
+    if (!lanes.has(key)) {
+      lanes.set(key, []);
+    }
+    lanes.get(key).push(node);
+  }
+
+  for (const laneNodes of lanes.values()) {
+    laneNodes.sort((left, right) => crossKey(left) - crossKey(right));
+    for (let index = 1; index < laneNodes.length; index += 1) {
+      const previous = laneNodes[index - 1];
+      const current = laneNodes[index];
+      const previousEnd = horizontal
+        ? previous.y + previous.height
+        : previous.x + previous.width;
+      const currentStart = horizontal ? current.y : current.x;
+      const minStart = previousEnd + gap;
+      if (currentStart < minStart) {
+        const shift = minStart - currentStart;
+        for (let rest = index; rest < laneNodes.length; rest += 1) {
+          if (horizontal) {
+            laneNodes[rest].y += shift;
+          } else {
+            laneNodes[rest].x += shift;
+          }
+        }
+      }
+    }
+  }
+
+  return nodes;
+}
+
+/**
+ * @param {Array<{ x: number, y: number, width: number, height: number }>} nodes
+ */
+export function graphCanvasNodesOverlap(nodes) {
+  for (let leftIndex = 0; leftIndex < nodes.length; leftIndex += 1) {
+    for (let rightIndex = leftIndex + 1; rightIndex < nodes.length; rightIndex += 1) {
+      const left = nodes[leftIndex];
+      const right = nodes[rightIndex];
+      const separated = left.x + left.width <= right.x
+        || right.x + right.width <= left.x
+        || left.y + left.height <= right.y
+        || right.y + right.height <= left.y;
+      if (!separated) {
+        return true;
+      }
+    }
+  }
+  return false;
+}