Rendering
WebGL2 draws structural geometry when available. Canvas 2D draws text, ports, hit regions, and the complete scene when WebGL2 is unavailable.
Coordinate system
Layout and occupancy use integer grid units. The renderer converts them to
pixels with GRID_UNIT = 12, then applies viewport translation
and scale. Packed route points use graph-pixel coordinates from the same
grid.
Scene state and snapshots
GraphScene holds the model, layout map, routing map, expansion state,
viewport, selection state, and frame-local hit regions. The worker serializes
node positions, layers, crossings, route offsets, route points, and route bounds.
The main thread restores the typed-array route data and indexes without rerunning
layout during drawing.
Exact tile queries
Each scope indexes exact node bounds, route bounds, and crossing points in a persistent tile pyramid.[5] Tile sizes are powers of two. A query selects a level from viewport scale, gathers intersecting cells, and applies an exact bounds test before returning candidates. Entries are replicated across levels; they are not aggregated or simplified.
Route points remain packed in typed arrays. Canvas rendering and hit testing unpack visible routes into temporary point objects.
Level of detail
| Rendered node width | Canvas overlay | Structural geometry |
|---|---|---|
< 2 px | No pixels; hit region may remain | Skipped |
2 px to < 8 px | Filled rectangle and compound marker | Rounded fill |
8 px to < 40 px | Rounded body and stroke | Rounded fill and outline |
≥ 40 px | Label, ID, ports, body, and compound toggle | Full structural body |
The thresholds are LOD_DOT = 2,
LOD_SIMPLIFIED = 8, and LOD_FULL = 40. Selection
changes alpha, not the thresholds; unrelated geometry uses
0.15 alpha while a selection is active.
Node borders and graph edges use a 2 px CSS stroke. WebGL2 represents
those strokes as filled geometry instead of relying on the platform's limited
line-width range, keeping them visible at high DPI.
Frame order
- The viewport becomes a graph-pixel visible rectangle. WebGL2 collects visible structural fills, routes, outlines, arrowheads, and crossing circles when available.
- Canvas 2D draws routes when WebGL2 is absent, then draws visible nodes, labels, ports, toggles, and compound frames. Hit-region arrays are rebuilt for the frame.
- Expanded child scopes render recursively with the child's local layout and the parent's pixel offset.