add only render visible nodes & edges

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

@@ -2,8 +2,7 @@
   import { EdgeWrapper } from '$lib/components/EdgeWrapper';
   import { CallOnMount } from '$lib/components/CallOnMount';
   import { MarkerDefinition } from '$lib/container/EdgeRenderer/MarkerDefinition';
-  import type { EdgeEvents, EdgeLayouted } from '$lib/types';
-  import { getEdgePosition, getElevatedEdgeZIndex } from '@xyflow/system';
+  import type { EdgeEvents } from '$lib/types';
   import type { SvelteFlowStore } from '$lib/store/types';
 
   let {
@@ -13,68 +12,6 @@
     onedgemouseenter,
     onedgemouseleave
   }: { store: SvelteFlowStore } & EdgeEvents = $props();
-
-  let previousLayoutedEdges = new Map<string, EdgeLayouted>();
-  let layoutedEdges = $derived.by(() => {
-    // here for update reference
-    store.nodes;
-
-    const layoutedEdges = new Map<string, EdgeLayouted>();
-
-    for (let edge of store.edges) {
-      const sourceNode = store.nodeLookup.get(edge.source);
-      const targetNode = store.nodeLookup.get(edge.target);
-
-      if (!sourceNode || !targetNode) {
-        continue;
-      }
-
-      // we reuse the previous edge object if
-      // the current and previous edge are the same
-      // and the source and target node are the same
-      // and references to internalNodes are the same
-      const previous = previousLayoutedEdges.get(edge.id);
-      if (
-        previous &&
-        edge === previous.edge &&
-        sourceNode == previous.sourceNode &&
-        targetNode == previous.targetNode
-      ) {
-        layoutedEdges.set(edge.id, previous);
-        continue;
-      }
-
-      const edgePosition = getEdgePosition({
-        id: edge.id,
-        sourceNode,
-        targetNode,
-        sourceHandle: edge.sourceHandle || null,
-        targetHandle: edge.targetHandle || null,
-        connectionMode: store.connectionMode,
-        onError: store.onerror
-      });
-
-      if (edgePosition) {
-        layoutedEdges.set(edge.id, {
-          ...edge,
-          zIndex: getElevatedEdgeZIndex({
-            selected: edge.selected,
-            zIndex: edge.zIndex,
-            sourceNode,
-            targetNode,
-            elevateOnSelect: false
-          }),
-          ...edgePosition,
-          sourceNode,
-          targetNode,
-          edge
-        });
-      }
-    }
-
-    previousLayoutedEdges = layoutedEdges;
-    return layoutedEdges;
-  });
 </script>
 
 <div class="svelte-flow__edges">
@@ -82,7 +19,7 @@
     <MarkerDefinition />
   </svg>
 
-  {#each layoutedEdges.values() as edge (edge.id)}
+  {#each store.visible.edges.values() as edge (edge.id)}
     <EdgeWrapper
       {store}
       {edge}
@@ -93,13 +30,14 @@
     />
   {/each}
 
-  {#if layoutedEdges.size > 0}
+  {#if !store.edgesInitialized && store.visible.edges.size > 0}
     <CallOnMount
       onMount={() => {
         store.edgesInitialized = true;
       }}
       onDestroy={() => {
-        store.edgesInitialized = false;
+        // TODO: this needs to be handled differently
+        // store.edgesInitialized = false;
       }}
     />
   {/if}

packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte

@@ -3,9 +3,8 @@
 
   import { NodeWrapper } from '$lib/components/NodeWrapper';
 
-  import type { Node, NodeEvents } from '$lib/types';
+  import type { NodeEvents } from '$lib/types';
   import type { SvelteFlowStore } from '$lib/store/types';
-  import type { NodeLookup } from '@xyflow/system';
 
   let {
     store,
@@ -42,15 +41,10 @@
   onDestroy(() => {
     resizeObserver?.disconnect();
   });
-
-  // We pass an unused reference to nodes to trigger a re-render
-  function getNodes(nodeLookup: NodeLookup, nodes: Node[]) {
-    return nodeLookup.values();
-  }
 </script>
 
 <div class="svelte-flow__nodes">
-  {#each getNodes(store.nodeLookup, store.nodes) as node (node.id)}
+  {#each store.visible.nodes.values() as node (node.id)}
     <NodeWrapper
       {store}
       {node}

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

@@ -52,7 +52,7 @@ export type SvelteFlowProps = NodeEvents &
     id?: string;
     /** An array of nodes to render in a controlled flow.
      * @example
-     * const nodes = writable([
+     * const nodes = $state.raw([
      *  {
      *    id: 'node-1',
      *    type: 'input',
@@ -64,7 +64,7 @@ export type SvelteFlowProps = NodeEvents &
     nodes: Node[];
     /** An array of edges to render in a controlled flow.
      * @example
-     * const edges = writable([
+     * const edges = $state.raw([
      *  {
      *    id: 'edge-1-2',
      *    source: 'node-1',