From 72d3e014b73cc253daff8405f52111742069c361 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Tue, 17 Dec 2024 16:52:14 +0100
Subject: [PATCH] port more examples

---
 .../examples/drag-n-drop/Sidebar.svelte       |  4 ---
 .../routes/examples/interaction/+page.svelte  | 10 +++----
 .../routes/examples/intersections/Flow.svelte | 27 +++++++++----------
 .../routes/examples/node-resizer/+page.svelte |  9 +++----
 .../node-resizer/CustomResizer.svelte         | 10 ++-----
 .../node-resizer/DefaultResizer.svelte        |  9 +------
 .../node-resizer/HorizontalResizer.svelte     |  8 +-----
 .../node-resizer/VerticalResizer.svelte       |  8 +-----
 .../routes/examples/node-toolbar/+page.svelte | 13 +++++----
 .../examples/node-toolbar/CustomNode.svelte   | 13 ++++++++-
 .../node-toolbar/SelectedNodesToolbar.svelte  |  4 ++-
 ...eNodesEdges.ts => useNodesEdges.svelte.ts} | 16 ++++++++---
 packages/svelte/src/lib/index.ts              |  2 +-
 13 files changed, 61 insertions(+), 72 deletions(-)
 rename packages/svelte/src/lib/hooks/{useNodesEdges.ts => useNodesEdges.svelte.ts} (61%)

diff --git a/examples/svelte/src/routes/examples/drag-n-drop/Sidebar.svelte b/examples/svelte/src/routes/examples/drag-n-drop/Sidebar.svelte
index 30cad2ee..8949851a 100644
--- a/examples/svelte/src/routes/examples/drag-n-drop/Sidebar.svelte
+++ b/examples/svelte/src/routes/examples/drag-n-drop/Sidebar.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { useSvelteFlow } from '@xyflow/svelte';
-
 	const onDragStart = (event: DragEvent, nodeType: string) => {
 		if (!event.dataTransfer) {
 			return null;
@@ -9,8 +7,6 @@
 		event.dataTransfer.setData('application/svelteflow', nodeType);
 		event.dataTransfer.effectAllowed = 'move';
 	};
-
-	// const { zoomIn, zoomOut, fitView, viewport, nodes } = $derived(useSvelteFlow());
 </script>
 
 <aside>
diff --git a/examples/svelte/src/routes/examples/interaction/+page.svelte b/examples/svelte/src/routes/examples/interaction/+page.svelte
index dd7def36..0bb400d5 100644
--- a/examples/svelte/src/routes/examples/interaction/+page.svelte
+++ b/examples/svelte/src/routes/examples/interaction/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
 	import {
 		SvelteFlow,
 		Controls,
@@ -13,7 +12,7 @@
 
 	import '@xyflow/svelte/dist/style.css';
 
-	const nodes = writable([
+	let nodes = $state.raw([
 		{
 			id: '1',
 			type: 'input',
@@ -25,7 +24,7 @@
 		{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } }
 	]);
 
-	const edges = writable([
+	let edges = $state.raw([
 		{ id: 'e1-2', source: '1', target: '2', animated: true },
 		{ id: 'e1-3', source: '1', target: '3' }
 	]);
@@ -54,8 +53,8 @@
 </script>
 
 <SvelteFlow
-	{nodes}
-	{edges}
+	bind:nodes
+	bind:edges
 	elementsSelectable={isSelectable}
 	nodesConnectable={isConnectable}
 	nodesDraggable={isDraggable}
@@ -66,6 +65,7 @@
 	{zoomOnDoubleClick}
 	{panOnDrag}
 	{onMoveEnd}
+	fitView
 >
 	<MiniMap />
 	<Controls />
diff --git a/examples/svelte/src/routes/examples/intersections/Flow.svelte b/examples/svelte/src/routes/examples/intersections/Flow.svelte
index 05d023d0..0146dc6c 100644
--- a/examples/svelte/src/routes/examples/intersections/Flow.svelte
+++ b/examples/svelte/src/routes/examples/intersections/Flow.svelte
@@ -1,31 +1,30 @@
 <script lang="ts">
 	import { SvelteFlow, Background, Controls, useSvelteFlow } from '@xyflow/svelte';
 	import type { Edge, Node } from '@xyflow/svelte';
-	import { writable } from 'svelte/store';
 
 	import '@xyflow/svelte/dist/style.css';
 
 	import { initialNodes, initialEdges } from './nodes-and-edges';
 
-	const nodes = writable<Node[]>(initialNodes);
-	const edges = writable<Edge[]>(initialEdges);
+	let nodes = $state.raw<Node[]>(initialNodes);
+	let edges = $state.raw<Edge[]>(initialEdges);
 
 	const { getIntersectingNodes } = $derived(useSvelteFlow());
 
-	function onNodeDrag({ targetNode }) {
+	const onNodeDrag = ({ targetNode }) => {
 		if (targetNode) {
 			const intersections = getIntersectingNodes(targetNode).map((n) => n.id);
 
-			$nodes.forEach((n) => {
-				n.class = intersections.includes(n.id) ? 'highlight' : '';
-			});
-			$nodes = $nodes;
+			nodes = nodes.map((node) => ({
+				...node,
+				class: intersections.includes(node.id) ? 'highlight' : ''
+			}));
 		}
-	}
+	};
 </script>
 
 <div style="height:100vh;">
-	<SvelteFlow {nodes} {edges} fitView class="intersection-flow" onnodedrag={onNodeDrag}>
+	<SvelteFlow bind:nodes bind:edges fitView class="intersection-flow" onnodedrag={onNodeDrag}>
 		<Background />
 		<Controls />
 	</SvelteFlow>
@@ -48,10 +47,10 @@
 	}
 
 	:global(
-			.intersection-flow .svelte-flow__node.selected,
-			.intersection-flow .svelte-flow__node:hover,
-			.intersection-flow .svelte-flow__node:focus
-		) {
+		.intersection-flow .svelte-flow__node.selected,
+		.intersection-flow .svelte-flow__node:hover,
+		.intersection-flow .svelte-flow__node:focus
+	) {
 		box-shadow: 6px 6px 0 1px rgba(0, 0, 0, 0.7);
 		background-color: #eee;
 	}
diff --git a/examples/svelte/src/routes/examples/node-resizer/+page.svelte b/examples/svelte/src/routes/examples/node-resizer/+page.svelte
index 51432ad4..8a5ec2ae 100644
--- a/examples/svelte/src/routes/examples/node-resizer/+page.svelte
+++ b/examples/svelte/src/routes/examples/node-resizer/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
 	import { SvelteFlow, Controls, Panel, type Edge } from '@xyflow/svelte';
 
 	import DefaultResizer from './DefaultResizer.svelte';
@@ -19,9 +18,9 @@
 
 	const nodeStyle = 'border: 1px solid #222; font-size: 10px; background-color: #ddd;';
 
-	const edges = writable<Edge[]>([]);
+	let edges = $state.raw<Edge[]>([]);
 
-	const nodes = writable<ResizeNode[]>([
+	let nodes = $state.raw<ResizeNode[]>([
 		{
 			id: '1',
 			type: 'defaultResizer',
@@ -132,8 +131,8 @@
 </script>
 
 <SvelteFlow
-	{nodes}
-	{edges}
+	bind:nodes
+	bind:edges
 	{nodeTypes}
 	minZoom={0.2}
 	maxZoom={5}
diff --git a/examples/svelte/src/routes/examples/node-resizer/CustomResizer.svelte b/examples/svelte/src/routes/examples/node-resizer/CustomResizer.svelte
index 9b57b930..464274ec 100644
--- a/examples/svelte/src/routes/examples/node-resizer/CustomResizer.svelte
+++ b/examples/svelte/src/routes/examples/node-resizer/CustomResizer.svelte
@@ -1,14 +1,8 @@
 <script lang="ts">
-	import { Handle, Position, type NodeProps, NodeResizeControl } from '@xyflow/svelte';
+	import { Handle, Position, type NodeProps, NodeResizeControl, type Node } from '@xyflow/svelte';
 	import type { ResizeNode } from './types';
 
-	type $$Props = NodeProps<ResizeNode>;
-
-	interface Props {
-		data: $$Props['data'];
-	}
-
-	let { data }: Props = $props();
+	let { data }: NodeProps<ResizeNode> = $props();
 </script>
 
 <NodeResizeControl
diff --git a/examples/svelte/src/routes/examples/node-resizer/DefaultResizer.svelte b/examples/svelte/src/routes/examples/node-resizer/DefaultResizer.svelte
index b214c761..c1521d2d 100644
--- a/examples/svelte/src/routes/examples/node-resizer/DefaultResizer.svelte
+++ b/examples/svelte/src/routes/examples/node-resizer/DefaultResizer.svelte
@@ -2,14 +2,7 @@
 	import { Handle, NodeResizer, Position, type NodeProps } from '@xyflow/svelte';
 	import type { ResizeNode } from './types';
 
-	type $$Props = NodeProps<ResizeNode>;
-
-	interface Props {
-		data: $$Props['data'];
-		selected?: $$Props['selected'];
-	}
-
-	let { data, selected = undefined }: Props = $props();
+	let { data, selected = undefined }: NodeProps<ResizeNode> = $props();
 </script>
 
 <NodeResizer
diff --git a/examples/svelte/src/routes/examples/node-resizer/HorizontalResizer.svelte b/examples/svelte/src/routes/examples/node-resizer/HorizontalResizer.svelte
index 2c014600..d9ec28ff 100644
--- a/examples/svelte/src/routes/examples/node-resizer/HorizontalResizer.svelte
+++ b/examples/svelte/src/routes/examples/node-resizer/HorizontalResizer.svelte
@@ -2,13 +2,7 @@
 	import { Handle, NodeResizeControl, Position, type NodeProps } from '@xyflow/svelte';
 	import type { ResizeNode } from './types';
 
-	type $$Props = NodeProps<ResizeNode>;
-
-	interface Props {
-		data: $$Props['data'];
-	}
-
-	let { data }: Props = $props();
+	let { data }: NodeProps<ResizeNode> = $props();
 </script>
 
 <NodeResizeControl
diff --git a/examples/svelte/src/routes/examples/node-resizer/VerticalResizer.svelte b/examples/svelte/src/routes/examples/node-resizer/VerticalResizer.svelte
index 92dcc5f4..fedfff50 100644
--- a/examples/svelte/src/routes/examples/node-resizer/VerticalResizer.svelte
+++ b/examples/svelte/src/routes/examples/node-resizer/VerticalResizer.svelte
@@ -2,13 +2,7 @@
 	import { Handle, NodeResizeControl, Position, type NodeProps } from '@xyflow/svelte';
 	import type { ResizeNode } from './types';
 
-	type $$Props = NodeProps<ResizeNode>;
-
-	interface Props {
-		data: $$Props['data'];
-	}
-
-	let { data }: Props = $props();
+	let { data }: NodeProps<ResizeNode> = $props();
 </script>
 
 <NodeResizeControl
diff --git a/examples/svelte/src/routes/examples/node-toolbar/+page.svelte b/examples/svelte/src/routes/examples/node-toolbar/+page.svelte
index 1a4360e5..820a90dd 100644
--- a/examples/svelte/src/routes/examples/node-toolbar/+page.svelte
+++ b/examples/svelte/src/routes/examples/node-toolbar/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
 	import {
 		SvelteFlow,
 		Background,
@@ -11,7 +10,7 @@
 
 	import '@xyflow/svelte/dist/style.css';
 
-	import CustomNode from './CustomNode.svelte';
+	import CustomNode, { type CustomNodeType } from './CustomNode.svelte';
 	import SelectedNodesToolbar from './SelectedNodesToolbar.svelte';
 
 	const nodeTypes: NodeTypes = {
@@ -19,9 +18,9 @@
 	};
 
 	const positions = ['top', 'right', 'bottom', 'left'];
-	const alignments = ['start', 'center', 'end'];
+	const alignments: ('start' | 'center' | 'end')[] = ['start', 'center', 'end'];
 
-	const initialNodes: Node[] = [
+	const initialNodes: CustomNodeType[] = [
 		{
 			id: 'default-node',
 			type: 'custom',
@@ -51,12 +50,12 @@
 
 	const initialEdges: Edge[] = [];
 
-	const nodes = writable<Node[]>(initialNodes);
-	const edges = writable<Edge[]>(initialEdges);
+	let nodes = $state.raw<Node[]>(initialNodes);
+	let edges = $state.raw<Edge[]>(initialEdges);
 </script>
 
 <div style="height: 100vh;">
-	<SvelteFlow {nodes} {edges} {nodeTypes} fitView>
+	<SvelteFlow bind:nodes bind:edges {nodeTypes} fitView>
 		<Background />
 		<SelectedNodesToolbar />
 	</SvelteFlow>
diff --git a/examples/svelte/src/routes/examples/node-toolbar/CustomNode.svelte b/examples/svelte/src/routes/examples/node-toolbar/CustomNode.svelte
index ccbe336c..c5fcb72c 100644
--- a/examples/svelte/src/routes/examples/node-toolbar/CustomNode.svelte
+++ b/examples/svelte/src/routes/examples/node-toolbar/CustomNode.svelte
@@ -1,7 +1,18 @@
+<script lang="ts" module>
+	import { type Node } from '@xyflow/svelte';
+
+	export type CustomNodeType = Node<{
+		toolbarVisible?: boolean;
+		toolbarPosition: Position;
+		toolbarAlign?: 'start' | 'center' | 'end';
+		label: string;
+	}>;
+</script>
+
 <script lang="ts">
 	import { NodeToolbar, type NodeProps, Handle, Position } from '@xyflow/svelte';
 
-	let { data }: NodeProps = $props();
+	let { data }: NodeProps<CustomNodeType> = $props();
 </script>
 
 <NodeToolbar
diff --git a/examples/svelte/src/routes/examples/node-toolbar/SelectedNodesToolbar.svelte b/examples/svelte/src/routes/examples/node-toolbar/SelectedNodesToolbar.svelte
index 069348b2..e75ca6c8 100644
--- a/examples/svelte/src/routes/examples/node-toolbar/SelectedNodesToolbar.svelte
+++ b/examples/svelte/src/routes/examples/node-toolbar/SelectedNodesToolbar.svelte
@@ -3,7 +3,9 @@
 
 	const nodes = useNodes();
 
-	let selectedNodeIds = $derived($nodes.filter((node) => node.selected).map((node) => node.id));
+	let selectedNodeIds = $derived(
+		nodes.current.filter((node) => node.selected).map((node) => node.id)
+	);
 	let isVisible = $derived(selectedNodeIds.length > 1);
 </script>
 
diff --git a/packages/svelte/src/lib/hooks/useNodesEdges.ts b/packages/svelte/src/lib/hooks/useNodesEdges.svelte.ts
similarity index 61%
rename from packages/svelte/src/lib/hooks/useNodesEdges.ts
rename to packages/svelte/src/lib/hooks/useNodesEdges.svelte.ts
index 062f596d..cae79855 100644
--- a/packages/svelte/src/lib/hooks/useNodesEdges.ts
+++ b/packages/svelte/src/lib/hooks/useNodesEdges.svelte.ts
@@ -7,8 +7,12 @@ import { useStore } from '$lib/store';
  * @returns store with an array of nodes
  */
 export function useNodes() {
-  const { nodes } = useStore();
-  return nodes;
+  const { nodes } = $derived(useStore());
+  return {
+    get current() {
+      return nodes;
+    }
+  };
 }
 
 /**
@@ -18,6 +22,10 @@ export function useNodes() {
  * @returns store with an array of edges
  */
 export function useEdges() {
-  const { edges } = useStore();
-  return edges;
+  const { edges } = $derived(useStore());
+  return {
+    get current() {
+      return edges;
+    }
+  };
 }
diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts
index 626df30b..13a08fe6 100644
--- a/packages/svelte/src/lib/index.ts
+++ b/packages/svelte/src/lib/index.ts
@@ -34,7 +34,7 @@ export * from '$lib/utils';
 export * from '$lib/hooks/useSvelteFlow';
 export * from '$lib/hooks/useUpdateNodeInternals';
 export * from '$lib/hooks/useConnection.svelte';
-export * from '$lib/hooks/useNodesEdges';
+export * from '$lib/hooks/useNodesEdges.svelte';
 export * from '$lib/hooks/useHandleConnections.svelte';
 export * from '$lib/hooks/useNodesData';
 export * from '$lib/hooks/useInternalNode';