GraphEdge
Each example below is a real component instance — flip the theme toggle to see how it adapts.
Catalog#
Loading…
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| x1 * | number | — | |
| y1 * | number | — | |
| x2 * | number | — | |
| y2 * | number | — | |
| curve | { cx: number; cy: number; } | undefined | — | Optional Q-curve control point. |
| edgeStyle | enum | solid | |
| color | string | undefined | — | Stroke color override. Defaults to the style's tone. |
| arrowheadId | string | undefined | — | Marker id for an arrowhead. |
Not the same surface as the cytoscape adapter#
<GraphEdge> is an SVG primitive — drop it inside a parent <svg> to
draw a single styled line or curve. The @ship-it-ui/cytoscape adapter is
a separate rendering surface: cytoscape paints edges into its own canvas
using a stylesheet keyed on state classes (graph-canvas:path,
graph-canvas:dim), not the four edgeStyle variants here. To draw
GraphEdge-styled lines over a cytoscape graph (animated highlights,
preview paths, ad-hoc annotations), layer <PathOverlay> on top of the
canvas rather than trying to express these variants through the cytoscape
stylesheet.