feat(svelte): edge marker support

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

@@ -4,14 +4,26 @@
 
   type $$Props = BaseEdgeProps;
 
+  export let id: $$Props['id'] = undefined;
   export let path: $$Props['path'] = '';
   export let label: $$Props['label'] = undefined;
   export let labelX: $$Props['labelX'] = undefined;
   export let labelY: $$Props['labelY'] = undefined;
+  export let markerStart: $$Props['markerStart'] = undefined;
+  export let markerEnd: $$Props['markerEnd'] = undefined;
+  export let style: $$Props['style'] = undefined;
   export let interactionWidth: $$Props['interactionWidth'] = 20;
 </script>
 
-<path d={path} fill="none" class="svelte-flow__edge-path" />
+<path
+  d={path}
+  id={id}
+  fill="none"
+  class="svelte-flow__edge-path"
+  marker-start={markerStart}
+  marker-end={markerEnd}
+  style={style}
+/>
 
 {#if interactionWidth}
   <path

packages/svelte/src/lib/components/BaseEdge/types.ts

@@ -1,7 +1,10 @@
 import type { EdgeProps } from '$lib/types';
 
-export type BaseEdgeProps = Pick<EdgeProps, 'interactionWidth' | 'label'> & {
+export type BaseEdgeProps = Pick<EdgeProps, 'interactionWidth' | 'label' | 'style'> & {
+  id?: string;
   path: string;
   labelX?: number;
   labelY?: number;
+  markerStart?: string;
+  markerEnd?: string;
 };

packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { createEventDispatcher, type SvelteComponentTyped } from 'svelte';
   import { Position } from '@reactflow/system';
+  import { getMarkerId } from '@reactflow/utils';
 
   import { useStore } from '$lib/store';
   import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
@@ -16,20 +17,28 @@
   export let sourceY: $$Props['sourceY'] = 0;
   export let targetX: $$Props['targetX'] = 0;
   export let targetY: $$Props['targetY'] = 0;
-  // @ todo: support edge updates
-  // export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
-  // export let targetHandleId: $$Props['targetHandleId'] = undefined;
+  export let data: $$Props['data'] = {};
+  export let style: $$Props['style'] = undefined;
   export let sourcePosition: $$Props['sourcePosition'] = Position.Bottom;
   export let targetPosition: $$Props['targetPosition'] = Position.Top;
   export let animated: $$Props['animated'] = false;
   export let selected: $$Props['selected'] = false;
   export let label: $$Props['label'] = undefined;
+  export let markerStart: $$Props['markerStart'] = undefined;
+  export let markerEnd: $$Props['markerEnd'] = undefined;
+  export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
+  export let targetHandleId: $$Props['targetHandleId'] = undefined;
 
-  const { edges, edgeTypes } = useStore();
+   // @ todo: support edge updates
+
+  const { edges, edgeTypes, flowId } = useStore();
   const dispatch = createEventDispatcher();
 
   const edgeComponent: typeof SvelteComponentTyped<EdgeProps> = $edgeTypes[type!] || BezierEdge;
 
+  $: markerStartUrl = markerStart ? `url(#${getMarkerId(markerStart, $flowId)})` : undefined;
+  $: markerEndUrl = markerEnd ? `url(#${getMarkerId(markerEnd, $flowId)})` : undefined;
+
   function onClick() {
     const edge = $edges.find(e => e.id === id);
     dispatch('edge:click', edge);
@@ -57,6 +66,12 @@
     {animated}
     {selected}
     {label}
+    {data}
+    {style}
+    {sourceHandleId}
+    {targetHandleId}
+    markerStart={markerStartUrl}
+    markerEnd={markerEndUrl}
   />
 </g>
 

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

@@ -16,4 +16,15 @@
   });
 </script>
 
-<BaseEdge {path} {labelX} {labelY} {...$$props} />
+<BaseEdge
+  {path}
+  {labelX}
+  {labelY}
+  id={$$props.id}
+  label={$$props.label}
+  markerStart={$$props.markerStart}
+  markerEnd={$$props.markerEnd}
+  interactionWidth={$$props.interactionWidth}
+  style={$$props.style}
+/>
+

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

@@ -16,4 +16,14 @@
   });
 </script>
 
-<BaseEdge {path} {labelX} {labelY} {...$$props} />
+<BaseEdge
+  {path}
+  {labelX}
+  {labelY}
+  id={$$props.id}
+  label={$$props.label}
+  markerStart={$$props.markerStart}
+  markerEnd={$$props.markerEnd}
+  interactionWidth={$$props.interactionWidth}
+  style={$$props.style}
+/>

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

@@ -17,4 +17,14 @@
   });
 </script>
 
-<BaseEdge {path} {labelX} {labelY} {...$$props} />
+<BaseEdge
+  {path}
+  {labelX}
+  {labelY}
+  id={$$props.id}
+  label={$$props.label}
+  markerStart={$$props.markerStart}
+  markerEnd={$$props.markerEnd}
+  interactionWidth={$$props.interactionWidth}
+  style={$$props.style}
+/>

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

@@ -14,4 +14,15 @@
   });
 </script>
 
-<BaseEdge {path} {labelX} {labelY} {...$$props} />
+<BaseEdge
+  {path}
+  {labelX}
+  {labelY}
+  id={$$props.id}
+  label={$$props.label}
+  markerStart={$$props.markerStart}
+  markerEnd={$$props.markerEnd}
+  interactionWidth={$$props.interactionWidth}
+  style={$$props.style}
+/>
+