feat(f7.1): flowchart node/edge diff + styling emission (#22)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-11 16:31:09 -07:00
parent 78352c2922
commit 1454c7792a
2 changed files with 103 additions and 4 deletions
@@ -95,8 +95,60 @@ export function parseFlowchart(source: string): FlowGraph {
  return { header: header || "flowchart TD", nodes, edges };
 }

-// Replaced in Task 3 with the real diff/emit.
-export function diffFlowchart(_beforeSrc: string, currentSrc: string): string {
-  void CW_COLORS;
-  return currentSrc;
+function nodeChanged(a: FlowNode, b: FlowNode): boolean {
+  return (a.label ?? "") !== (b.label ?? "") || (a.open ?? "") !== (b.open ?? "");
+}
+const edgeKey = (e: FlowEdge): string => `${e.from} ${e.to}`;
+
+export function diffFlowchart(beforeSrc: string, currentSrc: string): string {
+  const before = parseFlowchart(beforeSrc);
+  const current = parseFlowchart(currentSrc);
+
+  const addedNodes: string[] = [];
+  const changedNodes: string[] = [];
+  for (const [id, cur] of current.nodes) {
+    const prev = before.nodes.get(id);
+    if (!prev) addedNodes.push(id);
+    else if (nodeChanged(prev, cur)) changedNodes.push(id);
+  }
+  const removedNodes: FlowNode[] = [];
+  for (const [id, prev] of before.nodes) {
+    if (!current.nodes.has(id)) removedNodes.push(prev);
+  }
+
+  const beforeEdgeKeys = new Set(before.edges.map(edgeKey));
+  const currentEdgeKeys = new Set(current.edges.map(edgeKey));
+  const addedEdgeIdx = current.edges.filter((e) => !beforeEdgeKeys.has(edgeKey(e))).map((e) => e.index);
+  const removedEdges = before.edges.filter((e) => !currentEdgeKeys.has(edgeKey(e)));
+
+  // Ghost-edge indices follow the current edge count, in deterministic order.
+  let nextIdx = current.edges.length;
+  const ghostEdgeLines: string[] = [];
+  const ghostEdgeIdx: number[] = [];
+  for (const e of removedEdges) {
+    ghostEdgeLines.push(`  ${e.from} -.-> ${e.to}`);
+    ghostEdgeIdx.push(nextIdx++);
+  }
+
+  const out: string[] = [currentSrc.replace(/\s+$/, "")];
+
+  // Ghost removed nodes: re-inject their declaration (or bare id) so they appear.
+  for (const n of removedNodes) out.push(`  ${n.decl ?? n.id}`);
+  out.push(...ghostEdgeLines);
+
+  // classDefs (always emit the three; harmless if a class is unused).
+  out.push(
+    `  classDef cwAdded fill:${CW_COLORS.added}22,stroke:${CW_COLORS.added},stroke-width:2px;`,
+    `  classDef cwChanged fill:${CW_COLORS.changed}22,stroke:${CW_COLORS.changed},stroke-width:2px;`,
+    `  classDef cwRemoved fill:${CW_COLORS.removed}11,stroke:${CW_COLORS.removed},stroke-width:1px,stroke-dasharray:5 3,color:${CW_COLORS.removed};`,
+  );
+  if (addedNodes.length) out.push(`  class ${addedNodes.join(",")} cwAdded;`);
+  if (changedNodes.length) out.push(`  class ${changedNodes.join(",")} cwChanged;`);
+  if (removedNodes.length) out.push(`  class ${removedNodes.map((n) => n.id).join(",")} cwRemoved;`);
+
+  for (const i of addedEdgeIdx) out.push(`  linkStyle ${i} stroke:${CW_COLORS.added},stroke-width:2px;`);
+  for (const i of ghostEdgeIdx)
+    out.push(`  linkStyle ${i} stroke:${CW_COLORS.removed},stroke-width:1px,stroke-dasharray:5 3;`);
+
+  return out.join("\n");
 }