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';

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -17,7 +17,7 @@
 
   type $$Props = SvelteFlowProps;
 
-  export let id: $$Props['id'] = '1';
+  export let id = '1';
   export let fitView: $$Props['fitView'] = undefined;
   export let minZoom: $$Props['minZoom'] = undefined;
   export let maxZoom: $$Props['maxZoom'] = undefined;
@@ -31,13 +31,14 @@
   export let connectionRadius: $$Props['connectionRadius'] = undefined;
   export let connectionLineType: $$Props['connectionLineType'] = undefined;
   export let isValidConnection: $$Props['isValidConnection'] = undefined;
+  export let defaultMarkerColor = '#b1b1b7';
 
   export let style: $$Props['style'] = undefined;
   let className: $$Props['class'] = undefined;
   export { className as class };
-
   let domNode: HTMLDivElement;
-
+  
+  $: flowId = id;
   const store = useStore();
 
   onMount(() => {
@@ -53,12 +54,13 @@
 
   $: {
     const updatableProps = {
-      id,
+      flowId,
       connectionLineType,
       connectionRadius,
       selectionMode,
       snapGrid,
-      isValidConnection
+      isValidConnection,
+      defaultMarkerColor
     };
 
     Object.keys(updatableProps).forEach(prop => {

packages/svelte/src/lib/container/SvelteFlow/types.ts

@@ -32,6 +32,7 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   connectionRadius?: number;
   selectionMode?: SelectionMode;
   snapGrid?: SnapGrid;
+  defaultMarkerColor?: string;
 
   class?: string;
   style?: string;