ui/node_modules/@xyflow/svelte/dist/lib/container/EdgeRenderer/EdgeRenderer.svelte

<script>import { onMount } from 'svelte';
import { EdgeWrapper } from '../../components/EdgeWrapper';
import { CallOnMount } from '../../components/CallOnMount';
import { MarkerDefinition } from './MarkerDefinition';
import { useStore } from '../../store';
export let defaultEdgeOptions;
const { visibleEdges, edgesInitialized, edges: { setDefaultOptions }, elementsSelectable } = useStore();
onMount(() => {
    if (defaultEdgeOptions)
        setDefaultOptions(defaultEdgeOptions);
});
</script>

<div class="svelte-flow__edges">
  <svg class="svelte-flow__marker">
    <MarkerDefinition />
  </svg>

  {#each $visibleEdges as edge (edge.id)}
    <EdgeWrapper
      id={edge.id}
      source={edge.source}
      target={edge.target}
      data={edge.data}
      style={edge.style}
      animated={edge.animated}
      selected={edge.selected}
      selectable={edge.selectable ?? $elementsSelectable}
      deletable={edge.deletable}
      hidden={edge.hidden}
      label={edge.label}
      labelStyle={edge.labelStyle}
      markerStart={edge.markerStart}
      markerEnd={edge.markerEnd}
      sourceHandle={edge.sourceHandle}
      targetHandle={edge.targetHandle}
      sourceX={edge.sourceX}
      sourceY={edge.sourceY}
      targetX={edge.targetX}
      targetY={edge.targetY}
      sourcePosition={edge.sourcePosition}
      targetPosition={edge.targetPosition}
      ariaLabel={edge.ariaLabel}
      interactionWidth={edge.interactionWidth}
      class={edge.class}
      type={edge.type || 'default'}
      zIndex={edge.zIndex}
      on:edgeclick
      on:edgecontextmenu
      on:edgemouseenter
      on:edgemouseleave
    />
  {/each}

  {#if $visibleEdges.length > 0}
    <CallOnMount
      onMount={() => {
        $edgesInitialized = true;
      }}
      onDestroy={() => {
        $edgesInitialized = false;
      }}
    />
  {/if}
</div>