Edge
Description
Visualization and interaction behavior can be customized for Edges by creating your own custom components.
Edges styling can be fully controlled via CSS by passing the expose “path” variable on an HTML Path Element. Custom labels can also be passed via the “label” slot.
Custom Edges are then passed to the “edge” prop of an Anchor component. Any Edge initiated from that Anchor will render out your custom path and label.
Edges can also be passed to the Svelvet and Node components, enabling the ability to set a global Edge style which can be overriden at the Anchor or Node level.
Edges also accept callback functions that run in response to click events on the path.
When customizing the Edge path via your own path element, props controlling the Edge apperance such as color, width and animate will no longer apply
<script>
import { Edge } from 'svelvet';
</script>
<Edge let:path let:destroy edgeClick="{() => alert('Edge clicked')}" step>
<path d={path} />
<button on:click={destroy} slot="label">
<p>Custom Label</p>
</button>
</Edge>
<style>
path {
stroke: rgb(246, 231, 20);
stroke-width: 4px;
}
</style>
Props
Pixel width of stroke at scale 1.
Function to run when a click event is fired on an Edge.
Color of the Edge click target. Set to opacity 50%. Only displayed when an edgeClick function is passed.
Color of the edge path.
Boolean controlling curvate of edge path. Renders edge using “step” logic.
Boolean controlling curvate of edge path. Renders edge as straight line.
Radius of corners when rendering out a step path. Set to 0 for hard corners.
Renders edge path as a dashed, moving line.
Label text.
Color of the label.
Color of the label text.
Properties
The SVG path string used for rendering the edge. Pass to the “d” parameter on your custom path component.
Functions
Function to remove the edge and break Anchor connections.