Reworked edge rerendering

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -4,9 +4,10 @@
   import { errorMessages, nodeHasDimensions, Position } from '@xyflow/system';
 
   import drag from '$lib/actions/drag';
-  import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
-  import type { ConnectableContext, NodeWrapperProps } from './types';
   import { getNodeInlineStyleDimensions } from './utils';
+  import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
+
+  import type { ConnectableContext, NodeWrapperProps } from './types';
   import type { Node, NodeEvents } from '$lib/types';
 
   let {
@@ -25,7 +26,6 @@
   }: NodeWrapperProps & NodeEvents = $props();
 
   let {
-    id,
     data = {},
     selected = false,
     draggable: _draggable,
@@ -48,18 +48,16 @@
     dragHandle
   } = $derived(node);
 
+  let { id } = node;
+
   let draggable = $derived(_draggable ?? store.nodesDraggable);
   let selectable = $derived(_selectable ?? store.elementsSelectable);
   let connectable = $derived(_connectable ?? store.nodesConnectable);
   let initialized = $derived(nodeHasDimensions(node));
 
-  // TODO: does this make sense
-  let flipFlop = false;
-  let shouldRerenderSignal = $derived.by(() =>
-    store.adoptNodes.has(id) ? (flipFlop = !flipFlop) : flipFlop
-  );
-
-  function getInternalNode(node: Node, shouldRerender: boolean = false) {
+  // we also pass store.nodes to this function to rerender when a node changes
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  function getInternalNode(node: Node, nodes: Node[]) {
     return { ...store.nodeLookup.get(node.id)! };
   }
 
@@ -68,7 +66,7 @@
       z: zIndex = 0,
       positionAbsolute: { x: positionX, y: positionY }
     }
-  } = $derived(getInternalNode(node, shouldRerenderSignal));
+  } = $derived(getInternalNode(node, store.nodes));
 
   function isInParentLookup(id: string) {
     return store.parentLookup.has(id);

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

@@ -1,45 +1,13 @@
 import type { SvelteFlowStore } from '$lib/store/types';
-import type { InternalNode, Node } from '$lib/types';
+import type { Node } from '$lib/types';
 
 export type ConnectableContext = {
   value: boolean;
 };
 
 export type NodeWrapperProps = {
-  // Pick<
-  //   Node,
-  //   | 'id'
-  //   | 'class'
-  //   | 'connectable'
-  //   | 'data'
-  //   | 'draggable'
-  //   | 'dragging'
-  //   | 'selected'
-  //   | 'selectable'
-  //   | 'deletable'
-  //   | 'style'
-  //   | 'type'
-  //   | 'sourcePosition'
-  //   | 'targetPosition'
-  //   | 'dragHandle'
-  //   | 'hidden'
-  //   | 'width'
-  //   | 'height'
-  //   | 'initialWidth'
-  //   | 'initialHeight'
-  //   | 'parentId'
-  // > & {
-  //   measuredWidth?: number;
-  //   measuredHeight?: number;
-  //   type: string;
-  //   positionX: number;
-  //   positionY: number;
-  //   'on:nodeclick'?: (event: MouseEvent) => void;
-  //   isParent?: boolean;
-  //   zIndex: number;
-  // initialized: boolean;
   node: Node;
+  store: SvelteFlowStore;
   nodeClickDistance?: number;
   resizeObserver?: ResizeObserver | null;
-  store: SvelteFlowStore;
 };