feat(svelte): edge types, use edge-utils

packages/svelte/src/lib/components/edges/BaseEdge.svelte

@@ -1,26 +1,44 @@
 <script lang="ts">
-  export let id: string = '1';
+	import type { SvelteComponentTyped } from 'svelte';
+	import { Position } from '@reactflow/system';
+
+	import { useStore } from '$lib/store';
+  import BezierEdge from '$lib/components/edges/StraightEdge.svelte';
+	import type { EdgeProps } from '$lib/types';
+
+  export let id: string;
   export let type: string = 'default';
   export let sourceX: number = 0;
   export let sourceY: number = 0;
   export let targetX: number = 0;
   export let targetY: number = 0;
+  export let sourcePosition: Position = Position.Bottom;
+  export let targetPosition: Position = Position.Top;
+
+  const { edgeTypesStore } = useStore();
+  const edgeComponent: typeof SvelteComponentTyped<EdgeProps> = $edgeTypesStore[type] || BezierEdge;
 </script>
 
 <g
   class="react-flow__edge"
   data-id={id}
 >
-  <path
-    d={`M ${sourceX},${sourceY}L ${targetX},${targetY}`}
-    fill="none"
-    class="react-flow__edge-path"
+  <svelte:component
+    this={edgeComponent}
+    {id}
+    {sourceX}
+    {sourceY}
+    {targetX}
+    {targetY}
+    {sourcePosition}
+    {targetPosition}
   />
 </g>
 
 <style>
-  .react-flow__edge-path {
+  .react-flow__edge :global(path) {
     stroke: #ccc;
     stroke-width: 1;
+    fill: none;
   }
 </style>

packages/svelte/src/lib/components/edges/BezierEdge.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { getBezierPath } from '@reactflow/edge-utils';
+	import type { EdgeProps } from '$lib/types';
+
+  interface $$Props extends EdgeProps {}
+
+  export let id: $$Props['id'];
+  export let sourceX: $$Props['sourceX'] = 0;
+  export let sourceY: $$Props['sourceY'] = 0;
+  export let targetX: $$Props['targetX'] = 0;
+  export let targetY: $$Props['targetY'] = 0;
+  export let sourcePosition: $$Props['sourcePosition'] = undefined;
+  export let targetPosition: $$Props['targetPosition'] = undefined;
+
+  $: [path] = getBezierPath({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition });
+</script>
+
+<path
+  d={path}
+  class="react-flow__edge-path"
+/>

packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { getSmoothStepPath } from '@reactflow/edge-utils';
+	import type { EdgeProps } from '$lib/types';
+
+  interface $$Props extends EdgeProps {}
+
+  export let id: $$Props['id'];
+  export let sourceX: $$Props['sourceX'] = 0;
+  export let sourceY: $$Props['sourceY'] = 0;
+  export let targetX: $$Props['targetX'] = 0;
+  export let targetY: $$Props['targetY'] = 0;
+  export let sourcePosition: $$Props['sourcePosition'] = undefined;
+  export let targetPosition: $$Props['targetPosition'] = undefined;
+
+  $: [path] = getSmoothStepPath({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition });
+</script>
+
+<path
+  d={path}
+  class="react-flow__edge-path"
+/>

packages/svelte/src/lib/components/edges/StraightEdge.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { getStraightPath } from '@reactflow/edge-utils';
+	import type { EdgeProps } from '$lib/types';
+
+  interface $$Props extends EdgeProps {}
+
+  export let id: $$Props['id'];
+  export let sourceX: $$Props['sourceX'] = 0;
+  export let sourceY: $$Props['sourceY'] = 0;
+  export let targetX: $$Props['targetX'] = 0;
+  export let targetY: $$Props['targetY'] = 0;
+
+  $: [path] = getStraightPath({ sourceX, sourceY, targetX, targetY });
+</script>
+
+<path
+  d={path}
+  class="react-flow__edge-path"
+/>