Edge

Optional component for customizing Edges and Edge labels

Description

Edges are the strings 🧶 used to connect nodes.

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 as children to the Anchor component or via 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

MyEdge.svelte

<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>

<script>
	import { Svelvet, Node } from 'svelvet';
    import MyEdge from './MyEdge.svelte
</script>

<Svelvet>
    <Node>
        <div class="my-node">
            <Anchor />
				<MyEdge slot="edge"/>
			<Anchor />
        </div>
    </Node>
</Svelvet>

When passing a custom label, you must specify slot=“label”

Props

width · number · default: "2"

Pixel width of stroke at scale 1.

edgeClick · (() => void) | null · default: "null"

Function to run when a click event is fired on an Edge.

targetColor · CSSColorString

Color of the Edge click target. Set to opacity 50%. Only displayed when an edgeClick function is passed.

color · CSS Color String · default: "theme dependent"

Color of the edge path.

straight · boolean · default: "false"

Boolean controlling curvate of edge path. Renders edge as straight line.

step · boolean · default: "false"

Boolean controlling curvate of edge path. Renders edge using “step” logic.

cornerRadius · number · default: "8"

Radius of corners when rendering out a step path. Set to 0 for hard corners.

animate · boolean · default: "false"

Renders edge path as a dashed, moving line.

start · 'arrow' | null · default: "null"

Adds an arrow to the start of the edge path.

end · 'arrow' | null · default: "null"

Adds an arrow to the end of the edge path.

label · string

Label text.

labelColor · CSS Color String · default: "theme dependent"

Color of the label.

textColor · CSS Color String · default: "theme dependent"

Color of the label text.

enableHover · boolean · default: "false"

Allows edges to be highlighted when hovering over them.

labelPosition · number · default: "0.5"

Places the label at a certain position along the Edge path. Defaults to middle. Value must be between 0 and 1.

Properties

let:path · string

The SVG path string used for rendering the edge. Pass to the “d” parameter on your custom path component.

let:hovering · boolean

True when the cursor is over the Edge element.
Note: You must set enableHover to true for this value to work.

Functions

let:destroy · function

Function to remove the edge and break Anchor connections.