@polygonschmied/stellar-viz-core
v0.2.1
Published
Stellar DS visualization base — shared SVG theme, primitives and pan/zoom/drag hooks that give every diagram library the same Stellar look and feel.
Maintainers
Readme
@polygonschmied/stellar-viz-core
The shared visualization base for Stellar DS. It gives every diagram library the same Stellar look and feel by providing:
- Theme —
StellarVizThemelight / dark / high-contrast palettes as concrete OKLCh values (SVG can't reliably read CSS custom properties), plususeVizTheme()which followsdata-theme/data-contraston<html>. - SVG primitives —
VizSurface(themed, framed SVG canvas with a pan/zoom content group),VizNode,VizEdge,VizMarker,VizLabel. - Interaction hooks —
useZoomPananduseNodeDrag, so graphs and UML diagrams feel identical to interact with. - Generic input contract —
VizGraph({ nodes, edges }) andVizTreeNode({ children }), consumed by the renderer packages.
This package renders nothing on its own. Consumers (@polygonschmied/stellar-graphs,
and later a UML diagrams package) compute layouts and render through these
primitives.
import { VizSurface, VizNode, VizEdge, VizMarker } from "@polygonschmied/stellar-viz-core";
<VizSurface label="Example" defs={<VizMarker id="arrow" />}>
<VizEdge x1={40} y1={40} x2={160} y2={120} markerEndId="arrow" />
<VizNode x={40} y={40} label="A" />
<VizNode x={160} y={120} label="B" />
</VizSurface>;