<EdgeLabel />
Source on GitHub (opens in a new tab)
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 { getBezierPath, type EdgeProps } from '@xyflow/svelte';
type $$Props = EdgeProps;
export let id: $$Props['id'] = undefined;
export let label: $$Props['label'] = undefined;
export let labelStyle: $$Props['labelStyle'] = undefined;
export let sourceX: $$Props['sourceX'];
export let sourceY: $$Props['sourceY'];
export let sourcePosition: $$Props['sourcePosition'];
export let targetX: $$Props['targetX'];
export let targetY: $$Props['targetY'];
export let targetPosition: $$Props['targetPosition'];
$: [path, labelX, labelY] = getBezierPath({
sourceX,
sourceY,
targetX,
targetY,
sourcePosition,
targetPosition,
curvature: pathOptions?.curvature
});
</script>
<path
{id}
d={path}
fill="none"
/>
{#if label}
<EdgeLabel x={labelX} y={labelY} style={labelStyle}>
{label}
</EdgeLabel>
{/if}
Props
Name | Type |
---|---|
# style? | string |
# x? | number |
# y? | number |