mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-09-02 01:20:23 +08:00
00ebf91b90
A user's approval-workflow flowchart came out with the return arrow drawn straight through two unrelated steps, and a second report showed arrows leaving a box and bending straight back across it. Measured over 250 generated flowcharts (2722 edges): 347 arrows crossed an unrelated box and 215 waypoints landed inside a shape. Four defects, each measured in isolation: 1. The invisible layer containers draw_graph emits were handed to the router as frames, so every clean return path was rejected for "trespassing" on a border that is not drawn, and the fallback cut through two boxes. Excluding invisible containers: 347 -> 218 crossing arrows, no diagram made worse. 2. The router chose the horizontal-vs-vertical axis BEFORE searching, so when the only clean corridor ran along the other axis it was never looked at. A complete two-bend candidate generator that tries both trunk axes, all four sides at each end, and the port fractions: 218 -> 27. (An independent ablation measured the axis pre-choice alone at a 40% per-edge failure rate.) 3. Nothing stopped a route's first leg from turning back across its own source shape - the obstacle test exempts an edge's own endpoints, and must, since the line has to touch them. A terminal-leg rule refuses such routes outright: 215 -> 4 hooks. 4. A two-bend search cannot express the staircase needed when a box sits directly between two vertically aligned nodes (21 of the last 27 crossings). Added the orthogonal visibility graph + A* from Wybrow, Marriott & Stuckey, "Orthogonal Connector Routing" (GD 2009) - the libavoid algorithm - as the backstop when the candidate search finds nothing. The interesting-points grid is provably sufficient: any valid route shrinks onto it without getting longer or gaining bends. The A* state is (point, incoming direction) with libavoid's bend cost of 10, and the admissible bends-remaining heuristic, so it returns a cheapest route, not merely a route. Implemented from the paper, not ported. After all four: 0 crossing arrows and 0 hooks over the same 250 diagrams, page area unchanged (494k px^2 mean), 260ms for the whole corpus, mean 0.82 bends per edge. The shape ladder still runs first, so routes that were already clean are byte-identical. Also post-nudge validation now checks the whole path (the nudge pass only reverts the single segment it moved, judged in isolation) and restores the search's route if nudging made it dirty.
445 lines
16 KiB
TypeScript
445 lines
16 KiB
TypeScript
import { describe, expect, it } from "vitest"
|
|
import {
|
|
drawGraph,
|
|
type GraphEdge,
|
|
type GraphNode,
|
|
graphToOperations,
|
|
} from "@/lib/diagram-engine"
|
|
import {
|
|
absoluteRects,
|
|
edgePaths,
|
|
nodeCollisions,
|
|
rectOf,
|
|
} from "./fixtures/geometry"
|
|
|
|
const n = (id: string, label = id): GraphNode => ({ id, label })
|
|
const e = (source: string, target: string, label?: string): GraphEdge => ({
|
|
source,
|
|
target,
|
|
...(label ? { label } : {}),
|
|
})
|
|
|
|
describe("graphToOperations: layering", () => {
|
|
it("puts a chain in one node per layer", () => {
|
|
const { layers } = graphToOperations(
|
|
[n("a"), n("b"), n("c")],
|
|
[e("a", "b"), e("b", "c")],
|
|
)
|
|
expect(layers).toEqual([["a"], ["b"], ["c"]])
|
|
})
|
|
|
|
it("puts the branches of a decision in the same layer", () => {
|
|
const { layers } = graphToOperations(
|
|
[n("q"), n("yes"), n("no")],
|
|
[e("q", "yes"), e("q", "no")],
|
|
)
|
|
expect(layers[0]).toEqual(["q"])
|
|
expect(layers[1].sort()).toEqual(["no", "yes"])
|
|
})
|
|
|
|
it("uses the LONGEST path, so no arrow points sideways", () => {
|
|
// a→b, a→c, c→b. The shortest path would put b in layer 1 beside c, leaving c→b
|
|
// pointing sideways. b has to come after c.
|
|
const { layers } = graphToOperations(
|
|
[n("a"), n("b"), n("c")],
|
|
[e("a", "b"), e("a", "c"), e("c", "b")],
|
|
)
|
|
expect(layers).toEqual([["a"], ["c"], ["b"]])
|
|
})
|
|
|
|
it("keeps a node with no arrows at all", () => {
|
|
const { layers } = graphToOperations(
|
|
[n("a"), n("b"), n("island")],
|
|
[e("a", "b")],
|
|
)
|
|
expect(layers.flat().sort()).toEqual(["a", "b", "island"])
|
|
})
|
|
|
|
it("draws a loop but does not let it set the layering", () => {
|
|
const r = graphToOperations(
|
|
[n("a"), n("b"), n("c")],
|
|
[e("a", "b"), e("b", "c"), e("c", "a")],
|
|
)
|
|
expect(r.layers).toEqual([["a"], ["b"], ["c"]])
|
|
expect(r.backEdges).toEqual([{ source: "c", target: "a" }])
|
|
// The loop is still drawn.
|
|
expect(r.operations.filter((o) => o.op === "link").length).toBe(3)
|
|
})
|
|
|
|
it("draws a self-loop and keeps it out of the layering", () => {
|
|
const r = graphToOperations(
|
|
[n("a"), n("b")],
|
|
[e("a", "b"), e("a", "a")],
|
|
)
|
|
expect(r.layers).toEqual([["a"], ["b"]])
|
|
expect(r.operations.filter((o) => o.op === "link").length).toBe(2)
|
|
})
|
|
|
|
it("reports an edge naming a node that does not exist", () => {
|
|
const r = graphToOperations([n("a")], [e("a", "ghost")])
|
|
expect(r.unknownEndpoints).toEqual(["ghost"])
|
|
expect(r.operations.filter((o) => o.op === "link")).toEqual([])
|
|
})
|
|
|
|
it("survives a graph that is nothing but a cycle", () => {
|
|
const r = graphToOperations(
|
|
[n("a"), n("b")],
|
|
[e("a", "b"), e("b", "a")],
|
|
)
|
|
expect(r.layers.flat().sort()).toEqual(["a", "b"])
|
|
})
|
|
})
|
|
|
|
describe("graphToOperations: within-layer ordering", () => {
|
|
it("reverses a layer when that removes the crossings", () => {
|
|
// a→z, b→y, c→x. Declared order would make all three cross.
|
|
const { layers } = graphToOperations(
|
|
[n("a"), n("b"), n("c"), n("x"), n("y"), n("z")],
|
|
[e("a", "z"), e("b", "y"), e("c", "x")],
|
|
)
|
|
expect(layers[0]).toEqual(["a", "b", "c"])
|
|
expect(layers[1]).toEqual(["z", "y", "x"])
|
|
})
|
|
|
|
it("leaves an already-good order alone", () => {
|
|
const { layers } = graphToOperations(
|
|
[n("a"), n("b"), n("x"), n("y")],
|
|
[e("a", "x"), e("b", "y")],
|
|
)
|
|
expect(layers[1]).toEqual(["x", "y"])
|
|
})
|
|
})
|
|
|
|
describe("graphToOperations: emitted operations", () => {
|
|
it("does not wrap a layer holding one node", () => {
|
|
const { operations } = graphToOperations(
|
|
[n("a"), n("b")],
|
|
[e("a", "b")],
|
|
)
|
|
const containers = operations.filter((o) => o.op === "add_container")
|
|
// Only the outer flow container: neither single-node layer needs a wrapper.
|
|
expect(containers.length).toBe(1)
|
|
})
|
|
|
|
it("wraps a layer holding several nodes", () => {
|
|
const { operations } = graphToOperations(
|
|
[n("q"), n("yes"), n("no")],
|
|
[e("q", "yes"), e("q", "no")],
|
|
)
|
|
const containers = operations.filter((o) => o.op === "add_container")
|
|
expect(containers.length).toBe(2)
|
|
// The layer band runs ACROSS the flow.
|
|
const band = containers.find((c) => c.id !== "__layers")
|
|
expect(band?.dir).toBe("row")
|
|
})
|
|
|
|
it("flips both axes when the flow runs left to right", () => {
|
|
const { operations } = graphToOperations(
|
|
[n("q"), n("yes"), n("no")],
|
|
[e("q", "yes"), e("q", "no")],
|
|
{ flow: "row" },
|
|
)
|
|
const containers = operations.filter((o) => o.op === "add_container")
|
|
expect(containers.find((c) => c.id === "__layers")?.dir).toBe("row")
|
|
expect(containers.find((c) => c.id !== "__layers")?.dir).toBe("col")
|
|
})
|
|
|
|
it("carries shapes and labels through", () => {
|
|
const { operations } = graphToOperations(
|
|
[
|
|
{ id: "s", label: "Start", shape: "terminator" },
|
|
{ id: "q", label: "OK?", shape: "decision" },
|
|
],
|
|
[e("s", "q", "go")],
|
|
)
|
|
const boxes = operations.filter((o) => o.op === "add_box")
|
|
expect(boxes.map((b) => b.shape)).toEqual(["terminator", "decision"])
|
|
expect(operations.find((o) => o.op === "link")?.label).toBe("go")
|
|
})
|
|
|
|
it("emits an icon node as an icon", () => {
|
|
const { operations } = graphToOperations(
|
|
[{ id: "s3", label: "Bucket", icon: "s3" }],
|
|
[],
|
|
)
|
|
const icon = operations.find((o) => o.op === "add_icon")
|
|
expect(icon).toMatchObject({ id: "s3", name: "s3", label: "Bucket" })
|
|
})
|
|
|
|
it("does not emit a plain box shape as an explicit shape", () => {
|
|
const { operations } = graphToOperations(
|
|
[{ id: "a", label: "A", shape: "box" }],
|
|
[],
|
|
)
|
|
expect(operations.find((o) => o.op === "add_box")).not.toHaveProperty(
|
|
"shape",
|
|
)
|
|
})
|
|
})
|
|
|
|
describe("drawGraph: the whole pipeline", () => {
|
|
it("draws a decision flow with no arrow hitting an unrelated box", () => {
|
|
const ids = ["start", "check", "mgr", "auto", "ship", "reject"]
|
|
const r = drawGraph(
|
|
[
|
|
{ id: "start", label: "Order received", shape: "terminator" },
|
|
{ id: "check", label: "Amount > $1000?", shape: "decision" },
|
|
n("mgr", "Manager approval"),
|
|
n("auto", "Auto-approve"),
|
|
n("ship", "Ship order"),
|
|
{ id: "reject", label: "Reject", shape: "terminator" },
|
|
],
|
|
[
|
|
e("start", "check"),
|
|
e("check", "mgr", "yes"),
|
|
e("check", "auto", "no"),
|
|
e("mgr", "ship", "approved"),
|
|
e("mgr", "reject", "denied"),
|
|
e("auto", "ship"),
|
|
],
|
|
{ title: "Order Approval" },
|
|
)
|
|
expect(r.errors).toEqual([])
|
|
const xml = r.xml as string
|
|
const rects = absoluteRects(xml)
|
|
expect(nodeCollisions(edgePaths(xml, rects), rects, ids)).toEqual([])
|
|
|
|
// Layers descend in flow order.
|
|
expect(rectOf(rects, "start").y).toBeLessThan(rectOf(rects, "check").y)
|
|
expect(rectOf(rects, "check").y).toBeLessThan(rectOf(rects, "mgr").y)
|
|
expect(rectOf(rects, "mgr").y).toBe(rectOf(rects, "auto").y)
|
|
|
|
expect(xml).toContain("Order Approval")
|
|
})
|
|
|
|
it("renders a decision as a diamond and a terminator as a stadium", () => {
|
|
const r = drawGraph(
|
|
[
|
|
{ id: "s", label: "Start", shape: "terminator" },
|
|
{ id: "q", label: "OK?", shape: "decision" },
|
|
{ id: "d", label: "Report", shape: "document" },
|
|
{ id: "i", label: "Input", shape: "data" },
|
|
],
|
|
[e("s", "q"), e("q", "d"), e("q", "i")],
|
|
)
|
|
expect(r.errors).toEqual([])
|
|
const xml = r.xml as string
|
|
expect(xml).toMatch(/id="q"[^>]*rhombus/)
|
|
expect(xml).toMatch(/id="s"[^>]*arcSize=50/)
|
|
expect(xml).toMatch(/id="d"[^>]*shape=document/)
|
|
expect(xml).toMatch(/id="i"[^>]*shape=parallelogram/)
|
|
})
|
|
|
|
it("keeps a 14-node pipeline free of arrows through boxes", () => {
|
|
const ids = [
|
|
"commit",
|
|
"lint",
|
|
"unit",
|
|
"build",
|
|
"itest",
|
|
"sec",
|
|
"stage",
|
|
"smoke",
|
|
"approve",
|
|
"prod",
|
|
"canary",
|
|
"monitor",
|
|
"alert",
|
|
"rollback",
|
|
]
|
|
const r = drawGraph(
|
|
ids.map((id) => n(id)),
|
|
[
|
|
e("commit", "lint"),
|
|
e("commit", "unit"),
|
|
e("lint", "build"),
|
|
e("unit", "build"),
|
|
e("build", "itest"),
|
|
e("build", "sec"),
|
|
e("itest", "stage"),
|
|
e("sec", "stage"),
|
|
e("stage", "smoke"),
|
|
e("smoke", "approve"),
|
|
e("approve", "prod"),
|
|
e("prod", "canary"),
|
|
e("canary", "monitor"),
|
|
e("monitor", "alert"),
|
|
e("alert", "rollback"),
|
|
e("rollback", "stage"),
|
|
],
|
|
)
|
|
expect(r.errors).toEqual([])
|
|
const rects = absoluteRects(r.xml as string)
|
|
expect(
|
|
nodeCollisions(edgePaths(r.xml as string, rects), rects, ids),
|
|
).toEqual([])
|
|
})
|
|
|
|
it("rejects an empty node list rather than drawing nothing", () => {
|
|
const r = drawGraph([], [])
|
|
expect(r.xml).toBeNull()
|
|
expect(r.errors[0]).toContain("no nodes")
|
|
})
|
|
|
|
it("rejects a duplicate id instead of silently dropping one", () => {
|
|
const r = drawGraph([n("a"), n("a")], [])
|
|
expect(r.xml).toBeNull()
|
|
expect(r.errors[0]).toContain("duplicate")
|
|
})
|
|
|
|
it("warns about an edge naming a node that is not there", () => {
|
|
const r = drawGraph([n("a")], [e("a", "ghost")])
|
|
expect(r.errors).toEqual([])
|
|
expect(r.warnings.join(" ")).toContain("ghost")
|
|
})
|
|
|
|
it("warns which arrows were treated as loops", () => {
|
|
const r = drawGraph(
|
|
[n("a"), n("b")],
|
|
[e("a", "b"), e("b", "a", "retry")],
|
|
)
|
|
expect(r.errors).toEqual([])
|
|
expect(r.warnings.join(" ")).toContain("b→a")
|
|
})
|
|
})
|
|
|
|
/**
|
|
* Two defects that both showed up as an arrow drawn over a box, on a flowchart with a
|
|
* "send it back" loop in it. Neither was visible on the smaller flowcharts above: one
|
|
* needs a back edge whose return path is lined with other steps, the other needs an edge
|
|
* that skips over a layer holding more than one node.
|
|
*/
|
|
describe("graphToOperations: arrows do not run through boxes", () => {
|
|
/** Ids of the real steps, excluding the engine's own layout cells. */
|
|
const steps = (xml: string): string[] =>
|
|
[...xml.matchAll(/<mxCell id="([^"]+)"[^>]*dai_kind=(?:box|icon);/g)]
|
|
.map((m) => m[1])
|
|
.filter((id) => !id.startsWith("__"))
|
|
|
|
it("routes a back edge around the steps it returns past", () => {
|
|
// The reported case: "return for correction" goes back to "submit", and the two
|
|
// steps between them are directly in the way. The engine wraps each layer in an
|
|
// INVISIBLE container, and those used to be handed to the router as frames — so
|
|
// every clean return path was rejected for "trespassing" on a frame that is not
|
|
// drawn, and the fallback cut straight through both steps.
|
|
const r = drawGraph(
|
|
[
|
|
{ id: "start", label: "Start", shape: "terminator" },
|
|
{ id: "submit", label: "Submit Request", shape: "data" },
|
|
n("validate", "Validate Input"),
|
|
{ id: "valid", label: "Valid?", shape: "decision" },
|
|
n("fix", "Return for Correction"),
|
|
n("review", "Manager Review"),
|
|
{ id: "end", label: "End", shape: "terminator" },
|
|
],
|
|
[
|
|
e("start", "submit"),
|
|
e("submit", "validate"),
|
|
e("validate", "valid"),
|
|
e("valid", "fix", "No"),
|
|
e("fix", "submit"),
|
|
e("valid", "review", "Yes"),
|
|
e("review", "end"),
|
|
],
|
|
)
|
|
expect(r.errors).toEqual([])
|
|
const xml = r.xml as string
|
|
const rects = absoluteRects(xml)
|
|
expect(
|
|
nodeCollisions(edgePaths(xml, rects), rects, steps(xml)),
|
|
).toEqual([])
|
|
})
|
|
|
|
it("keeps the placeholders out of the reported layers", () => {
|
|
// They are an internal device for reserving space; a caller asked about its own nodes.
|
|
const { layers } = graphToOperations(
|
|
[n("a"), n("b1"), n("b2"), n("z")],
|
|
[
|
|
e("a", "b1"),
|
|
e("a", "b2"),
|
|
e("b1", "z"),
|
|
e("b2", "z"),
|
|
e("a", "z"),
|
|
],
|
|
)
|
|
expect(layers.flat().filter((id) => id.startsWith("__"))).toEqual([])
|
|
})
|
|
})
|
|
|
|
/**
|
|
* An arrow that leaves its own shape and immediately turns back across it.
|
|
*
|
|
* Reported on a request-handling flowchart: a short hook came out of the right side of
|
|
* "Manager approval" and bent straight back over the box's own edge. The ordinary obstacle
|
|
* test cannot see this — an edge is exempt from its own two endpoints, and it has to be,
|
|
* since the line must touch them — so it is checked separately here.
|
|
*/
|
|
describe("graphToOperations: arrows leave their own shape cleanly", () => {
|
|
/** Waypoints that land inside any box, which is what draws the hook. */
|
|
const waypointsInsideBoxes = (xml: string): string[] => {
|
|
const rects = absoluteRects(xml)
|
|
const boxes = [
|
|
...xml.matchAll(/<mxCell id="([^"]+)"[^>]*dai_kind=(?:box|icon);/g),
|
|
]
|
|
.map((m) => m[1])
|
|
.filter((id) => !id.startsWith("__"))
|
|
const bad: string[] = []
|
|
for (const p of edgePaths(xml, rects))
|
|
for (const w of p.points.slice(1, -1))
|
|
for (const id of boxes) {
|
|
const r = rects.get(id)
|
|
if (!r) continue
|
|
if (
|
|
w.x > r.x + 1 &&
|
|
w.x < r.x + r.w - 1 &&
|
|
w.y > r.y + 1 &&
|
|
w.y < r.y + r.h - 1
|
|
)
|
|
bad.push(`${p.source}→${p.target} bends inside ${id}`)
|
|
}
|
|
return [...new Set(bad)]
|
|
}
|
|
|
|
it("does not bend an arrow back over the box it just left", () => {
|
|
const r = drawGraph(
|
|
[
|
|
{
|
|
id: "start",
|
|
label: "Start: Request received",
|
|
shape: "terminator",
|
|
},
|
|
n("intake", "Log request in system"),
|
|
n("review", "Review details"),
|
|
{ id: "complete", label: "Info complete?", shape: "decision" },
|
|
{ id: "askinfo", label: "Request missing info", shape: "data" },
|
|
{ id: "approve", label: "Approval needed?", shape: "decision" },
|
|
n("manager", "Manager approval"),
|
|
n("process", "Process request"),
|
|
{ id: "report", label: "Generate report", shape: "document" },
|
|
n("notify", "Notify requester"),
|
|
{ id: "end", label: "End", shape: "terminator" },
|
|
{ id: "reject", label: "Reject & close", shape: "round" },
|
|
],
|
|
[
|
|
e("start", "intake"),
|
|
e("intake", "review"),
|
|
e("review", "complete"),
|
|
e("complete", "askinfo", "no"),
|
|
e("askinfo", "review", "resubmit"),
|
|
e("complete", "approve", "yes"),
|
|
e("approve", "manager", "yes"),
|
|
e("approve", "process", "no"),
|
|
e("manager", "process", "approved"),
|
|
e("manager", "reject", "declined"),
|
|
e("process", "report"),
|
|
e("report", "notify"),
|
|
e("reject", "notify"),
|
|
e("notify", "end"),
|
|
],
|
|
{ title: "Sample Request Handling Workflow" },
|
|
)
|
|
expect(r.errors).toEqual([])
|
|
expect(waypointsInsideBoxes(r.xml as string)).toEqual([])
|
|
})
|
|
})
|