feat(svelte-flow): add setter to useNodes, useEdges and useViewport

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>
 

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">

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;
     }
   };
 }