<EdgeLabel />
The <EdgeLabel />
component is used in your custom edges
to display an edge label that selects the edge when it is clicked.
CustomEdge.svelte
<script lang="ts">
import { BaseEdge, getBezierPath, type EdgeProps } from '@xyflow/svelte';
let {
label,
labelStyle,
sourceX,
sourceY,
sourcePosition,
targetX,
targetY,
targetPosition
} : EdgeProps = $props();
let [path, labelX, labelY] = $derived(getBezierPath({
sourceX,
sourceY,
targetX,
targetY,
sourcePosition,
targetPosition,
curvature: pathOptions?.curvature
}));
</script>
<BaseEdge
{path}
>
{#if label}
<EdgeLabel x={labelX} y={labelY} style={labelStyle}>
{label}
</EdgeLabel>
{/if}
Props
The type for props of <EdgeLabel />
component is exported as EdgeLabelProps
. Additionally, it extends the props of <div />
.
Name | Type | Default |
---|---|---|
x | number | |
y | number | |
width | number | |
height | number | |
selectEdgeOnClick | boolean | |
transparent | boolean | |
...props | HTMLAttributes<HTMLDivElement> |
Last updated on