Interactive graph canvas rendering
State: open/verified · Kind: module · Audience: system
Summary
Section titled “Summary”- @sksizer/graph-canvas renders an interactive force-directed graph as a plain Vue 3 component, driving both a 2D canvas renderer (force-graph) and a 3D three.js renderer (3d-force-graph) over pre-resolved node/edge styles so mode switches keep node positions.
- Also ships the graph palette — categorical slots, recency ramp, surface/ink/link colors — reading
the design system’s
--d-viz-*projection where the host supplies it, with a validated literal fallback so the package stays standalone.
Statement
Section titled “Statement”Style resolution (rules, templates, physics presets) is the consumer’s job; graph-canvas only paints
the ResolvedNodeStyle/ResolvedEdgeStyle shapes it’s handed, and applies live layout knobs
(charge, link distance, decay, dagMode). It is the rendering layer the System Graph experience
currently builds its graph visualization on; the two renderers are not equally expressive, so fields
the 3D one can’t honour (shape, icon, glow, per-node opacity, canvas labels, dashed edges) are
marked on the type contracts.
What it provides
Section titled “What it provides”- A
<GraphCanvas>Vue component generic over the node type, wrapping both force-graph and 3d-force-graph behind one API (dynamically imported per mode) - The graph palette (
@sksizer/graph-canvas/palette): categorical color assignment, recency ramp, surface/ink/link accessors - Type contracts (
GraphCanvasNode,GraphCanvasEdge,GraphCanvasLayout,ResolvedNodeStyle,ResolvedEdgeStyle)
Underlying implementation
Section titled “Underlying implementation”- packages/ts/graph-canvas/src/GraphCanvas.vue
- packages/ts/graph-canvas/src/palette.ts
- consumed by solutions/ontological/experiences/system-graph/app/pages/apps/system-graph/index.vue
Locations
Section titled “Locations”packages/ts/graph-canvas/packages/ts/graph-canvas/src/GraphCanvas.vuepackages/ts/graph-canvas/src/palette.ts