ReferenceComponents
<BaseEdge />

<BaseEdge />

Source on GitHub

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, getStraightPath } from '@xyflow/svelte';
 
  const [edgePath] = getStraightPath({
    sourceX,
    sourceY,
    targetX,
    targetY,
  });
</script>
 
<BaseEdge path={edgePath} {...$$props} />

Props

#id
string
#interactionWidth
number
#path
string
#style
string
#class
string
#markerStart
string
#markerEnd
string
#label
string
#labelX
number
#labelY
number
#labelStyle
string

Notes

  • If you want to use an edge marker with the <BaseEdge /> component, you can pass the markerStart or markerEnd 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 the EdgeProps type.
ComponentsTypes