From 86211fa7531afb7fd772c811b284cbd34c6e02a3 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Tue, 29 Apr 2025 18:46:45 +0200
Subject: [PATCH] fix changing handle sides

---
 .../src/routes/examples/overview/Flow.svelte     | 12 +++++++++++-
 .../components/NodeWrapper/NodeWrapper.svelte    | 16 +++++++++-------
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/examples/svelte/src/routes/examples/overview/Flow.svelte b/examples/svelte/src/routes/examples/overview/Flow.svelte
index 24a80d0b..ae642925 100644
--- a/examples/svelte/src/routes/examples/overview/Flow.svelte
+++ b/examples/svelte/src/routes/examples/overview/Flow.svelte
@@ -14,7 +14,8 @@
 		ConnectionMode,
 		ControlButton,
 		type FitViewOptions,
-		useSvelteFlow
+		useSvelteFlow,
+		Position
 	} from '@xyflow/svelte';
 
 	import CustomNode from './CustomNode.svelte';
@@ -229,6 +230,15 @@
 		<button onclick={moveNode}>update node pos</button>
 		<button onclick={changeEdgeType}>update edge type</button>
 		<button onclick={hideUnhide}>hide/unhide</button>
+		<button
+			onclick={() => {
+				nodes = nodes.map((node) => ({
+					...node,
+					sourcePosition: Position.Right,
+					targetPosition: Position.Left
+				}));
+			}}>left-right</button
+		>
 	</Panel>
 
 	<InitTracker />
diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
index 1da86ce4..f05edf00 100644
--- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
@@ -78,9 +78,12 @@
   let nodeRef: HTMLDivElement | null = $state(null);
   let prevNodeRef: HTMLDivElement | null = null;
 
-  let prevType: string | undefined;
-  let prevSourcePosition: Position | undefined;
-  let prevTargetPosition: Position | undefined;
+  // svelte-ignore state_referenced_locally
+  let prevType: string | undefined = type;
+  // svelte-ignore state_referenced_locally
+  let prevSourcePosition: Position | undefined = sourcePosition;
+  // svelte-ignore state_referenced_locally
+  let prevTargetPosition: Position | undefined = targetPosition;
 
   let NodeComponent = $derived(store.nodeTypes[type] ?? DefaultNode);
 
@@ -116,9 +119,9 @@
     // if type, sourcePosition or targetPosition changes,
     // we need to re-calculate the handle positions
     const doUpdate =
-      (prevType && type !== prevType) ||
-      (prevSourcePosition && sourcePosition !== prevSourcePosition) ||
-      (prevTargetPosition && targetPosition !== prevTargetPosition);
+      type !== prevType ||
+      sourcePosition !== prevSourcePosition ||
+      targetPosition !== prevTargetPosition;
 
     if (doUpdate && nodeRef !== null) {
       requestAnimationFrame(() => {
@@ -144,7 +147,6 @@
     prevTargetPosition = targetPosition;
   });
 
-  // TODO: extract this part!
   $effect(() => {
     /* eslint-disable @typescript-eslint/no-unused-expressions */
     if (resizeObserver && (!initialized || nodeRef !== prevNodeRef)) {