<BaseEdge />
The <BaseEdge />
component gets used internally for all the edges. It can be
used inside a custom edge and handles the invisible helper edge and the edge label
for you.
CustomEdge.svelte
<script lang="ts">
import { BaseEdge, getBezierPath, type EdgeProps } from '@xyflow/svelte';
let { sourceX, sourceY, targetX, targetY, ...props } : EdgeProps = $props();
const [edgePath] = $derived(getBezierPath({
sourceX,
sourceY,
targetX,
targetY,
}));
const {
markerStart,
markerEnd,
interactionWidth,
label,
labelStyle,
} = props;
</script>
<BaseEdge
path={edgePath}
{markerStart}
{markerEnd}
{interactionWidth}
{label}
{labelStyle}
/>
Props
The type for props of <BaseEdge />
component is exported as BaseEdgeProps
. Additionally, it extends the props of <svg />
.
Notes
- If you want to use an edge marker with the
<BaseEdge />
component, you can pass themarkerStart
ormarkerEnd
props passed to your custom edge through to the<BaseEdge />
component. You can see all the props passed to a custom edge by looking at theEdgeProps
type.
Last updated on