feat(svelte): edge marker support

packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { EdgeWrapper } from '$lib/components/EdgeWrapper';
+  import { MarkerDefinition } from '$lib/container/EdgeRenderer/MarkerDefinition';
   import { useStore } from '$lib/store';
 
   const { edgesLayouted, width, height } = useStore();
@@ -9,8 +10,11 @@
   {#each $edgesLayouted as edge (edge.id)}
     <EdgeWrapper {...edge} on:edge:click />
   {/each}
+
+  <MarkerDefinition />
 </svg>
 
+
 <style>
   .svelte-flow__edges {
     width: 100%;

packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { type MarkerProps, MarkerType } from '@reactflow/system';
+
+  type $$Props = MarkerProps;
+
+  export let id: $$Props['id'];
+  export let type: $$Props['type'];
+  export let width: $$Props['width'] = 12.5;
+  export let height: $$Props['height'] = 12.5;
+  export let markerUnits: $$Props['markerUnits'] = 'strokeWidth';
+  export let orient: $$Props['orient']= 'auto-start-reverse';
+  export let color: $$Props['color'] = undefined;
+  export let strokeWidth: $$Props['strokeWidth'] = undefined;
+</script>
+
+<marker
+  class="svelte-flow__arrowhead"
+  id={id}
+  markerWidth={`${width}`}
+  markerHeight={`${height}`}
+  viewBox="-10 -10 20 20"
+  markerUnits={markerUnits}
+  orient={orient}
+  refX="0"
+  refY="0"
+>
+  {#if type === MarkerType.Arrow}
+    <polyline
+      stroke={color}
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width={strokeWidth}
+      fill="none"
+      points="-5,-4 0,0 -5,4"
+    />
+  {:else if type === MarkerType.ArrowClosed}
+    <polyline
+      stroke={color}
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width={strokeWidth}
+      fill={color}
+      points="-5,-4 0,0 -5,4 -5,-4"
+    />
+  {/if}
+</marker>

packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/MarkerDefinition.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { useStore } from '$lib/store';
+  import { Marker } from '$lib/container/EdgeRenderer/MarkerDefinition';
+
+  const { markers } = useStore();
+</script>
+
+<defs>
+  {#each $markers as marker(marker.id)}
+    <Marker
+      id={marker.id}
+      type={marker.type}
+      color={marker.color}
+      width={marker.width}
+      height={marker.height}
+      markerUnits={marker.markerUnits}
+      strokeWidth={marker.strokeWidth}
+      orient={marker.orient}
+    />
+  {/each}
+</defs>

packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/index.ts

@@ -0,0 +1,2 @@
+export { default as MarkerDefinition } from './MarkerDefinition.svelte';
+export { default as Marker } from './Marker.svelte';