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

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

​

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.

AnchorDrawer