feat(svelte): edge marker support

packages/svelte/src/lib/store/index.ts

@@ -1,5 +1,5 @@
 import { getContext } from 'svelte';
-import { get } from 'svelte/store';
+import { derived, get } from 'svelte/store';
 import { zoomIdentity } from 'd3-zoom';
 import {
   type NodeDragItem,
@@ -11,6 +11,7 @@ import {
   type CoordinateExtent
 } from '@reactflow/system';
 import {
+  createMarkerIds,
   fitView as fitViewUtil,
   getD3Transition,
   getDimensions,
@@ -314,6 +315,12 @@ export function createStore(params: CreateStoreParams): SvelteFlowStore {
     // derived state
     edgesLayouted: getEdgesLayouted(store),
     connectionPath: getConnectionPath(store),
+    markers: derived(
+      [store.edges, store.defaultMarkerColor, store.flowId],
+      ([edges, defaultColor, id]) => {
+        return createMarkerIds(edges, { defaultColor, id });
+      }
+    ),
 
     // actions
     setNodeTypes,

packages/svelte/src/lib/store/initial-store.ts

@@ -7,7 +7,8 @@ import {
   ConnectionLineType,
   type SelectionRect,
   type Transform,
-  type SnapGrid
+  type SnapGrid,
+  type MarkerProps
 } from '@reactflow/system';
 
 import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
@@ -49,7 +50,7 @@ export const initialEdgeTypes = {
 };
 
 export const initialStoreState = {
-  id: writable<string | null>(null),
+  flowId: writable<string | null>(null),
   nodes: writable<Node[]>([]),
   edges: writable<Edge[]>([]),
   edgesLayouted: readable<EdgeLayouted[]>([]),
@@ -80,5 +81,7 @@ export const initialStoreState = {
   connection: writable<ConnectionData>(initConnectionData),
   connectionRadius: writable<number>(25),
   connectionLineType: writable<ConnectionLineType>(ConnectionLineType.Bezier),
-  isValidConnection: writable<IsValidConnection>(() => true)
+  isValidConnection: writable<IsValidConnection>(() => true),
+  markers: readable<MarkerProps[]>([]),
+  defaultMarkerColor: writable<string>('#b1b1b7')
 };