From 3cbb117cf062ffa0670872434ad6ef4a93978855 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 9 Jan 2025 12:42:23 +0100
Subject: [PATCH] feat(svelte-flow): add setter to useNodes, useEdges and
 useViewport

---
 .../examples/overview/CustomEdge.svelte       | 31 +++++++++----------
 .../examples/overview/CustomNode.svelte       |  2 +-
 .../lib/hooks/useNodesEdgesViewport.svelte.ts | 21 +++++++++----
 3 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/examples/svelte/src/routes/examples/overview/CustomEdge.svelte b/examples/svelte/src/routes/examples/overview/CustomEdge.svelte
index 9c00449f..51201726 100644
--- a/examples/svelte/src/routes/examples/overview/CustomEdge.svelte
+++ b/examples/svelte/src/routes/examples/overview/CustomEdge.svelte
@@ -3,30 +3,27 @@
 		BaseEdge,
 		EdgeLabelRenderer,
 		useEdges,
-		type EdgeProps,
-		getBezierPath
+		getBezierPath,
+		type EdgeProps
 	} from '@xyflow/svelte';
-	interface Props {
-		[key: string]: any
-	}
 
-	let { ...props }: Props = $props();
+	let { ...props }: EdgeProps = $props();
 
-	type $$Props = EdgeProps;
-
-	let [path, labelX, labelY] = $derived(getBezierPath({
-		sourceX: props.sourceX,
-		sourceY: props.sourceY,
-		targetX: props.targetX,
-		targetY: props.targetY,
-		sourcePosition: props.sourcePosition,
-		targetPosition: props.targetPosition
-	}));
+	let [path, labelX, labelY] = $derived(
+		getBezierPath({
+			sourceX: props.sourceX,
+			sourceY: props.sourceY,
+			targetX: props.targetX,
+			targetY: props.targetY,
+			sourcePosition: props.sourcePosition,
+			targetPosition: props.targetPosition
+		})
+	);
 
 	const edges = useEdges();
 
 	function onClick() {
-		edges.update((eds) => eds.filter((e) => e.id !== props.id));
+		edges.current = edges.current.filter((e) => e.id !== props.id);
 	}
 </script>
 
diff --git a/examples/svelte/src/routes/examples/overview/CustomNode.svelte b/examples/svelte/src/routes/examples/overview/CustomNode.svelte
index 2f687bdd..6eebee96 100644
--- a/examples/svelte/src/routes/examples/overview/CustomNode.svelte
+++ b/examples/svelte/src/routes/examples/overview/CustomNode.svelte
@@ -5,7 +5,7 @@
 		data = { label: 'Node' },
 		positionAbsoluteX = 0,
 		positionAbsoluteY = 0
-	}: NodeProps = $props();
+	}: NodeProps<BuiltInNode> = $props();
 </script>
 
 <div class="custom">
diff --git a/packages/svelte/src/lib/hooks/useNodesEdgesViewport.svelte.ts b/packages/svelte/src/lib/hooks/useNodesEdgesViewport.svelte.ts
index 210ac5f4..a521ebab 100644
--- a/packages/svelte/src/lib/hooks/useNodesEdgesViewport.svelte.ts
+++ b/packages/svelte/src/lib/hooks/useNodesEdgesViewport.svelte.ts
@@ -7,10 +7,13 @@ import { useStore } from '$lib/store';
  * @returns reactive signal of the current edges
  */
 export function useNodes() {
-  const { nodes } = $derived(useStore());
+  const store = $derived(useStore());
   return {
     get current() {
-      return nodes;
+      return store.nodes;
+    },
+    set current(val) {
+      store.nodes = val;
     }
   };
 }
@@ -22,10 +25,13 @@ export function useNodes() {
  * @returns reactive signal of the current edges
  */
 export function useEdges() {
-  const { edges } = $derived(useStore());
+  const store = $derived(useStore());
   return {
     get current() {
-      return edges;
+      return store.edges;
+    },
+    set current(val) {
+      store.edges = val;
     }
   };
 }
@@ -37,10 +43,13 @@ export function useEdges() {
  * @returns reactive signal of the current viewport
  */
 export function useViewport() {
-  const { viewport } = $derived(useStore());
+  const store = $derived(useStore());
   return {
     get current() {
-      return viewport;
+      return store.viewport;
+    },
+    set current(val) {
+      store.viewport = val;
     }
   };
 }