Repository navigation
Commit fb2e67a
committed
feat(diagrams): layout — layered, with orthogonal connectors, in one house style
diagram/theme.js the style guide as numbers: title 15, node name 13
semibold, second lines and edge labels 11.5, nothing
under 10.5; radius 8, border 1.25, padding 12; groups
inset 16; the accent a low-opacity fill and a 2px border.
Colours are editor theme tokens, with two fixed palettes
for exported files.
diagram/layout.js layout(spec, opts) gives geometry; inspect(geometry) lists
whatever overlaps, overflows or leaves the frame.
The spec names ELK.js. This is not ELK: ELK is EPL-2.0 in a repository that is
otherwise MIT-clean, about 1.5 MB, and this extension has no build step. The
spec's own open question asks whether a simpler layered layout is needed as a
fallback; this is that layout, as the only one. layout() is the single entry
point, so ELK can replace it without touching anything else.
What it does: ranks by longest path; crossings reduced by sweeps; positions
across the flow solved as constraints and then lined up by medians; a port per
edge; a track per connector in each gap, so lines cross but never run along
each other; and each edge label placed BESIDE its line, scored against nodes,
lines and other labels. A flow asked for left-to-right that will not fit its
column is laid out top-to-bottom instead.
A group's name sits in the top-left of its frame — which, when the flow runs
down, is exactly where lines come in. No connector runs through it. The name
slides along the frame to the nearest clear stretch; if there is none and the
lines have under 72px to move, they are moved to the far side of the name (the
frame grows by that much, never past the column); otherwise the name stays and
is marked to be drawn over the line.
Measured over 6,000 random specs at the model-facing limits: no node overlaps
another, no connector crosses a node or an unbacked group name, nothing leaves
the frame. Three known limits, each bounded in the suite so it cannot quietly
get worse:
an edge label that falls back to a halo over a line 6.5% of specs
two connectors that swap lanes in one gap 0.3%
a group's name with a connector behind it 2.7% of specs with groups
None of the nine gallery diagrams (fixtures/diagrams/gallery.json) shows any of
the three, at its natural width or at 560, 420 and 320px. The twelve-node one
lays out in under a millisecond once warm; the slowest of the 6,000 took 7ms.
diagramLayout (23 tests, one of them a 1,500-spec fuzz).1 parent 42159e5 commit fb2e67a
4 files changed
Lines changed: 2516 additions & 0 deletions
File tree
- extensions/levelcode-ai
- diagram
- test
- fixtures/diagrams
0 commit comments