WIP: migrated store and useSvelteFlow hook to signals & solved state propagation for provider

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

@@ -1,29 +1,59 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
   import { EdgeWrapper } from '$lib/components/EdgeWrapper';
   import { CallOnMount } from '$lib/components/CallOnMount';
   import { MarkerDefinition } from '$lib/container/EdgeRenderer/MarkerDefinition';
-  import { useStore } from '$lib/store';
-  import type { DefaultEdgeOptions, EdgeEvents } from '$lib/types';
+  import type { EdgeEvents, EdgeLayouted } from '$lib/types';
+  import { getEdgePosition, getElevatedEdgeZIndex } from '@xyflow/system';
+  import type { SvelteFlowStore } from '$lib/store/types';
 
   let {
-    defaultEdgeOptions,
+    store,
     onedgeclick,
     onedgecontextmenu,
     onedgemouseenter,
     onedgemouseleave
-  }: { defaultEdgeOptions?: DefaultEdgeOptions } & EdgeEvents = $props();
+  }: { store: SvelteFlowStore } & EdgeEvents = $props();
 
-  const {
-    visibleEdges,
-    edgesInitialized,
-    edges: { setDefaultOptions },
-    elementsSelectable
-  } = useStore();
+  const { edges, nodes } = store;
 
-  onMount(() => {
-    // TODO: Remove this when we have a better way to set default options
-    if (defaultEdgeOptions) setDefaultOptions(defaultEdgeOptions);
+  let layoutedEdges = $derived.by(() => {
+    $nodes;
+    const layoutedEdges = $edges.reduce<EdgeLayouted[]>((res, edge) => {
+      const sourceNode = store.nodeLookup.get(edge.source);
+      const targetNode = store.nodeLookup.get(edge.target);
+
+      if (!sourceNode || !targetNode) {
+        return res;
+      }
+
+      const edgePosition = getEdgePosition({
+        id: edge.id,
+        sourceNode,
+        targetNode,
+        sourceHandle: edge.sourceHandle || null,
+        targetHandle: edge.targetHandle || null,
+        connectionMode: store.connectionMode,
+        onError: store.onerror
+      });
+
+      if (edgePosition) {
+        res.push({
+          ...edge,
+          zIndex: getElevatedEdgeZIndex({
+            selected: edge.selected,
+            zIndex: edge.zIndex,
+            sourceNode,
+            targetNode,
+            elevateOnSelect: false
+          }),
+          ...edgePosition
+        });
+      }
+
+      return res;
+    }, []);
+
+    return layoutedEdges;
   });
 </script>
 
@@ -32,8 +62,9 @@
     <MarkerDefinition />
   </svg>
 
-  {#each $visibleEdges as edge (edge.id)}
+  {#each layoutedEdges as edge (edge.id)}
     <EdgeWrapper
+      {store}
       id={edge.id}
       source={edge.source}
       target={edge.target}
@@ -41,7 +72,7 @@
       style={edge.style}
       animated={edge.animated}
       selected={edge.selected}
-      selectable={edge.selectable ?? $elementsSelectable}
+      selectable={edge.selectable ?? store.elementsSelectable}
       deletable={edge.deletable}
       hidden={edge.hidden}
       label={edge.label}
@@ -68,13 +99,13 @@
     />
   {/each}
 
-  {#if $visibleEdges.length > 0}
+  {#if layoutedEdges.length > 0}
     <CallOnMount
       onMount={() => {
-        $edgesInitialized = true;
+        store.edgesInitialized = true;
       }}
       onDestroy={() => {
-        $edgesInitialized = false;
+        store.edgesInitialized = false;
       }}
     />
   {/if}

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

@@ -2,11 +2,11 @@
   import { useStore } from '$lib/store';
   import { Marker } from '$lib/container/EdgeRenderer/MarkerDefinition';
 
-  const { markers } = useStore();
+  const store = useStore();
 </script>
 
 <defs>
-  {#each $markers as marker (marker.id)}
+  {#each store.markers as marker (marker.id)}
     <Marker {...marker} />
   {/each}
 </defs>