feat(svelte): edge marker support

packages/utils/src/graph.ts

@@ -5,7 +5,6 @@ import { boxToRect, clamp, devWarn, getBoundsOfBoxes, getOverlappingArea, rectTo
 import {
   errorMessages,
   type Connection,
-  type EdgeMarkerType,
   type Transform,
   type XYPosition,
   type Rect,
@@ -54,23 +53,6 @@ export const getIncomersBase = <NodeType extends BaseNode = BaseNode, EdgeType e
 const getEdgeId = ({ source, sourceHandle, target, targetHandle }: Connection | BaseEdge): string =>
   `reactflow__edge-${source}${sourceHandle || ''}-${target}${targetHandle || ''}`;
 
-export const getMarkerId = (marker: EdgeMarkerType | undefined, rfId?: string): string => {
-  if (typeof marker === 'undefined') {
-    return '';
-  }
-
-  if (typeof marker === 'string') {
-    return marker;
-  }
-
-  const idPrefix = rfId ? `${rfId}__` : '';
-
-  return `${idPrefix}${Object.keys(marker)
-    .sort()
-    .map((key: string) => `${key}=${(marker as any)[key]}`)
-    .join('&')}`;
-};
-
 const connectionExists = (edge: BaseEdge, edges: BaseEdge[]) => {
   return edges.some(
     (el) =>

packages/utils/src/index.ts

@@ -1,2 +1,3 @@
 export * from './graph';
 export * from './utils';
+export * from './marker';

packages/utils/src/marker.ts

@@ -0,0 +1,40 @@
+import type { BaseEdge, EdgeMarker, EdgeMarkerType, MarkerProps } from '@reactflow/system';
+
+export function getMarkerId(marker: EdgeMarkerType | undefined, id?: string | null): string {
+  if (!marker) {
+    return '';
+  }
+
+  if (typeof marker === 'string') {
+    return marker;
+  }
+
+  const idPrefix = id ? `${id}__` : '';
+
+  return `${idPrefix}${Object.keys(marker)
+    .sort()
+    .map((key) => `${key}=${marker[key as keyof EdgeMarker]}`)
+    .join('&')}`;
+}
+
+export function createMarkerIds(
+  edges: BaseEdge[],
+  { id, defaultColor }: { id?: string | null; defaultColor?: string }
+) {
+  const ids: string[] = [];
+
+  return edges
+    .reduce<MarkerProps[]>((markers, edge) => {
+      [edge.markerStart, edge.markerEnd].forEach((marker) => {
+        if (marker && typeof marker === 'object') {
+          const markerId = getMarkerId(marker, id);
+          if (!ids.includes(markerId)) {
+            markers.push({ id: markerId, color: marker.color || defaultColor, ...marker });
+            ids.push(markerId);
+          }
+        }
+      });
+      return markers;
+    }, [])
+    .sort((a, b) => a.id.localeCompare(b.id));
+}