From 13fdd15f59868778f9b1e17481115f8bd67cf39a Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Wed, 16 Apr 2025 16:41:02 +0200
Subject: [PATCH] fix examples

---
 .../components/ToolbarNode.svelte             | 21 ++++++++------
 .../nodes/components/DragHandleNode.svelte    |  2 +-
 .../examples/drag-n-drop/Sidebar.svelte       |  1 +
 .../src/routes/examples/edges/+page.svelte    |  2 +-
 .../src/routes/examples/figma/+page.svelte    | 12 ++++----
 .../routes/examples/interaction/+page.svelte  | 18 ++++++------
 .../routes/examples/intersections/Flow.svelte | 28 +++++++++++--------
 .../node-resizer/DefaultResizer.svelte        |  2 +-
 .../routes/examples/usenodesdata/+page.svelte |  2 +-
 .../examples/usenodesdata/ResultNode.svelte   |  3 +-
 .../generic/[topic]/[example]/Flow.svelte     | 13 +++++++--
 .../EdgeLabelRenderer.svelte                  | 10 -------
 .../lib/components/EdgeLabelRenderer/index.ts |  1 -
 .../lib/container/SvelteFlow/Wrapper.svelte   |  4 +--
 .../src/lib/container/SvelteFlow/types.ts     |  2 +-
 packages/svelte/src/lib/index.ts              |  1 -
 .../src/lib/store/initial-store.svelte.ts     |  2 +-
 17 files changed, 65 insertions(+), 59 deletions(-)
 delete mode 100644 packages/svelte/src/lib/components/EdgeLabelRenderer/EdgeLabelRenderer.svelte
 delete mode 100644 packages/svelte/src/lib/components/EdgeLabelRenderer/index.ts

diff --git a/examples/svelte/src/generic-tests/node-toolbar/components/ToolbarNode.svelte b/examples/svelte/src/generic-tests/node-toolbar/components/ToolbarNode.svelte
index 6b11ddb9..d6fb5b0d 100644
--- a/examples/svelte/src/generic-tests/node-toolbar/components/ToolbarNode.svelte
+++ b/examples/svelte/src/generic-tests/node-toolbar/components/ToolbarNode.svelte
@@ -1,13 +1,18 @@
 <script lang="ts">
-	import { NodeToolbar, type NodeProps, Handle, Position } from '@xyflow/svelte';
+	import {
+		NodeToolbar,
+		type NodeProps,
+		type Node,
+		Handle,
+		Position,
+		type Align
+	} from '@xyflow/svelte';
 
-	type $$Props = NodeProps;
-
-	interface Props {
-		data: $$Props['data'];
-	}
-
-	let { data }: Props = $props();
+	let {
+		data
+	}: NodeProps<
+		Node<{ label: string; toolbarPosition: Position; toolbarAlign: Align; toolbarVisible: boolean }>
+	> = $props();
 </script>
 
 <NodeToolbar
diff --git a/examples/svelte/src/generic-tests/nodes/components/DragHandleNode.svelte b/examples/svelte/src/generic-tests/nodes/components/DragHandleNode.svelte
index 74c0379c..93cc983f 100644
--- a/examples/svelte/src/generic-tests/nodes/components/DragHandleNode.svelte
+++ b/examples/svelte/src/generic-tests/nodes/components/DragHandleNode.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { NodeProps } from '@xyflow/svelte';
 
-	type $$Props = NodeProps;
+	let {}: NodeProps = $props();
 </script>
 
 <div class="container">
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 8949851a..e1b82dbf 100644
--- a/examples/svelte/src/routes/examples/drag-n-drop/Sidebar.svelte
+++ b/examples/svelte/src/routes/examples/drag-n-drop/Sidebar.svelte
@@ -9,6 +9,7 @@
 	};
 </script>
 
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <aside>
 	<div class="label">You can drag these nodes to the pane on the left.</div>
 	<div
diff --git a/examples/svelte/src/routes/examples/edges/+page.svelte b/examples/svelte/src/routes/examples/edges/+page.svelte
index e5f08442..18c21a14 100644
--- a/examples/svelte/src/routes/examples/edges/+page.svelte
+++ b/examples/svelte/src/routes/examples/edges/+page.svelte
@@ -150,7 +150,7 @@
 	{edgeTypes}
 	fitView
 	nodeDragThreshold={2}
-	onedgecreate={(connection) => {
+	onbeforeconnect={(connection) => {
 		console.log('on edge create', connection);
 
 		return {
diff --git a/examples/svelte/src/routes/examples/figma/+page.svelte b/examples/svelte/src/routes/examples/figma/+page.svelte
index 31a1877e..35a694ac 100644
--- a/examples/svelte/src/routes/examples/figma/+page.svelte
+++ b/examples/svelte/src/routes/examples/figma/+page.svelte
@@ -16,9 +16,9 @@
 
 	const panOnDrag = [1, 2];
 
-	const onMoveStart = (e: any) => console.log('move start', e);
-	const onMove = (e: any) => console.log('move', e);
-	const onMoveEnd = (e: any) => console.log('move end', e);
+	const onmovestart = (e: any) => console.log('move start', e);
+	const onmove = (e: any) => console.log('move', e);
+	const onmoveend = (e: any) => console.log('move end', e);
 
 	let nodes = $state.raw([
 		{
@@ -47,9 +47,9 @@
 	selectionOnDrag
 	panOnScroll
 	{panOnDrag}
-	{onMoveStart}
-	{onMove}
-	{onMoveEnd}
+	{onmovestart}
+	{onmove}
+	{onmoveend}
 >
 	<Controls />
 	<Background variant={BackgroundVariant.Dots} />
diff --git a/examples/svelte/src/routes/examples/interaction/+page.svelte b/examples/svelte/src/routes/examples/interaction/+page.svelte
index 0bb400d5..a12fb826 100644
--- a/examples/svelte/src/routes/examples/interaction/+page.svelte
+++ b/examples/svelte/src/routes/examples/interaction/+page.svelte
@@ -29,14 +29,14 @@
 		{ id: 'e1-3', source: '1', target: '3' }
 	]);
 
-	const onNodeDragStart = (_: MouseEvent, node: Node) => console.log('drag start', node);
-	const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
-	const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
-	const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
-	const onPaneClick = (event: MouseEvent) => console.log('onPaneClick', event);
-	const onPaneScroll = (event?: WheelEvent) => console.log('onPaneScroll', event);
-	const onPaneContextMenu = (event: MouseEvent) => console.log('onPaneContextMenu', event);
-	const onMoveEnd: OnMoveEnd = (_, viewport) => console.log('onMoveEnd', viewport);
+	const onnodedragstart = (_: MouseEvent, node: Node) => console.log('drag start', node);
+	const onnodedragstop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
+	const onnodeclick = (_: MouseEvent, node: Node) => console.log('click', node);
+	const onedgeclick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
+	const onpaneclick = (event: MouseEvent) => console.log('onPaneClick', event);
+	const onpanescroll = (event?: WheelEvent) => console.log('onPaneScroll', event);
+	const onpanecontextmenu = (event: MouseEvent) => console.log('onPaneContextMenu', event);
+	const onmoveend: OnMoveEnd = (_, viewport) => console.log('onMoveEnd', viewport);
 
 	let isSelectable = $state(false);
 	let isDraggable = $state(false);
@@ -64,7 +64,7 @@
 	{panOnScrollMode}
 	{zoomOnDoubleClick}
 	{panOnDrag}
-	{onMoveEnd}
+	{onmoveend}
 	fitView
 >
 	<MiniMap />
diff --git a/examples/svelte/src/routes/examples/intersections/Flow.svelte b/examples/svelte/src/routes/examples/intersections/Flow.svelte
index 0146dc6c..f436b8d7 100644
--- a/examples/svelte/src/routes/examples/intersections/Flow.svelte
+++ b/examples/svelte/src/routes/examples/intersections/Flow.svelte
@@ -10,21 +10,25 @@
 	let edges = $state.raw<Edge[]>(initialEdges);
 
 	const { getIntersectingNodes } = $derived(useSvelteFlow());
-
-	const onNodeDrag = ({ targetNode }) => {
-		if (targetNode) {
-			const intersections = getIntersectingNodes(targetNode).map((n) => n.id);
-
-			nodes = nodes.map((node) => ({
-				...node,
-				class: intersections.includes(node.id) ? 'highlight' : ''
-			}));
-		}
-	};
 </script>
 
 <div style="height:100vh;">
-	<SvelteFlow bind:nodes bind:edges fitView class="intersection-flow" onnodedrag={onNodeDrag}>
+	<SvelteFlow
+		bind:nodes
+		bind:edges
+		fitView
+		class="intersection-flow"
+		onnodedrag={({ targetNode }) => {
+			if (targetNode) {
+				const intersections = getIntersectingNodes(targetNode).map((n) => n.id);
+
+				nodes = nodes.map((node) => ({
+					...node,
+					class: intersections.includes(node.id) ? 'highlight' : ''
+				}));
+			}
+		}}
+	>
 		<Background />
 		<Controls />
 	</SvelteFlow>
diff --git a/examples/svelte/src/routes/examples/node-resizer/DefaultResizer.svelte b/examples/svelte/src/routes/examples/node-resizer/DefaultResizer.svelte
index c1521d2d..8912f965 100644
--- a/examples/svelte/src/routes/examples/node-resizer/DefaultResizer.svelte
+++ b/examples/svelte/src/routes/examples/node-resizer/DefaultResizer.svelte
@@ -2,7 +2,7 @@
 	import { Handle, NodeResizer, Position, type NodeProps } from '@xyflow/svelte';
 	import type { ResizeNode } from './types';
 
-	let { data, selected = undefined }: NodeProps<ResizeNode> = $props();
+	let { data, selected }: NodeProps<ResizeNode> = $props();
 </script>
 
 <NodeResizer
diff --git a/examples/svelte/src/routes/examples/usenodesdata/+page.svelte b/examples/svelte/src/routes/examples/usenodesdata/+page.svelte
index b1773582..ed258370 100644
--- a/examples/svelte/src/routes/examples/usenodesdata/+page.svelte
+++ b/examples/svelte/src/routes/examples/usenodesdata/+page.svelte
@@ -5,7 +5,7 @@
 	type UppercaseNodeType = Node<{ text: string }, 'uppercase'>;
 	type ResultNodeType = Node<{}, 'result'>;
 
-	export function isTextNode(node: any): node is TextNodeType | UppercaseNode {
+	export function isTextNode(node: any): node is TextNodeType | UppercaseNodeType {
 		return !node || !node.type ? false : node.type === 'text' || node.type === 'uppercase';
 	}
 
diff --git a/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte b/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte
index 6c57c089..a9f14360 100644
--- a/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte
+++ b/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte
@@ -4,7 +4,8 @@
 		Position,
 		useNodeConnections,
 		useNodesData,
-		type NodeProps
+		type NodeProps,
+		type Node
 	} from '@xyflow/svelte';
 	import { isTextNode, type MyNode } from './+page.svelte';
 
diff --git a/examples/svelte/src/routes/tests/generic/[topic]/[example]/Flow.svelte b/examples/svelte/src/routes/tests/generic/[topic]/[example]/Flow.svelte
index 19e3f180..389804d6 100644
--- a/examples/svelte/src/routes/tests/generic/[topic]/[example]/Flow.svelte
+++ b/examples/svelte/src/routes/tests/generic/[topic]/[example]/Flow.svelte
@@ -1,5 +1,12 @@
 <script lang="ts">
-	import { Background, Controls, MiniMap, Panel, SvelteFlow } from '@xyflow/svelte';
+	import {
+		Background,
+		Controls,
+		MiniMap,
+		Panel,
+		SvelteFlow,
+		type SvelteFlowProps
+	} from '@xyflow/svelte';
 
 	import '@xyflow/svelte/dist/style.css';
 
@@ -9,10 +16,10 @@
 	let nodes = $state.raw(flowConfig.flowProps?.nodes ?? []);
 	let edges = $state.raw(flowConfig.flowProps?.edges ?? []);
 
-	const flowProps = { ...flowConfig.flowProps };
+	const flowProps: SvelteFlowProps = { ...flowConfig.flowProps };
 </script>
 
-<SvelteFlow bind:nodes bind:edges {...flowProps}>
+<SvelteFlow {...flowProps} bind:nodes bind:edges>
 	{#if flowConfig.panelProps}
 		<Panel {...flowConfig.panelProps} />
 	{/if}
diff --git a/packages/svelte/src/lib/components/EdgeLabelRenderer/EdgeLabelRenderer.svelte b/packages/svelte/src/lib/components/EdgeLabelRenderer/EdgeLabelRenderer.svelte
deleted file mode 100644
index 682d8545..00000000
--- a/packages/svelte/src/lib/components/EdgeLabelRenderer/EdgeLabelRenderer.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { portal } from '$lib/actions/portal';
-
-  let { children }: { children?: Snippet } = $props();
-</script>
-
-<div use:portal={'edgelabel'}>
-  {@render children?.()}
-</div>
diff --git a/packages/svelte/src/lib/components/EdgeLabelRenderer/index.ts b/packages/svelte/src/lib/components/EdgeLabelRenderer/index.ts
deleted file mode 100644
index 02f40786..00000000
--- a/packages/svelte/src/lib/components/EdgeLabelRenderer/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as EdgeLabelRenderer } from './EdgeLabelRenderer.svelte';
diff --git a/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte b/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte
index a5c310fe..cdb30fc6 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte
@@ -36,7 +36,7 @@
     onmove,
     onmovestart,
     onmoveend,
-    onerror,
+    onflowerror,
     ondelete,
     onbeforedelete,
     onbeforeconnect,
@@ -49,8 +49,8 @@
     onreconnectend,
     onclickconnectstart,
     onclickconnectend,
-    clickConnect,
     oninit,
+    clickConnect,
     fitView,
     fitViewOptions,
     nodeOrigin,
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index 16d7e205..117b2d9c 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -379,7 +379,7 @@ export type SvelteFlowProps = NodeEvents &
      * Instead of exploding your application, we log a message to the console and then call this event handler.
      * You might use it for additional logging or to show a message to the user.
      */
-    onerror?: OnError;
+    onflowerror?: OnError;
     /** This handler gets called when the user deletes nodes or edges.
      * @example
      * onDelete={({nodes, edges}) => {
diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts
index 7462661f..54853c97 100644
--- a/packages/svelte/src/lib/index.ts
+++ b/packages/svelte/src/lib/index.ts
@@ -5,7 +5,6 @@ export * from '$lib/container/SvelteFlow/types';
 // components
 export * from '$lib/container/Panel';
 export * from '$lib/components/SvelteFlowProvider';
-export * from '$lib/components/EdgeLabelRenderer';
 export * from '$lib/components/ViewportPortal';
 export {
   BezierEdge,
diff --git a/packages/svelte/src/lib/store/initial-store.svelte.ts b/packages/svelte/src/lib/store/initial-store.svelte.ts
index fdf5a56c..e885b142 100644
--- a/packages/svelte/src/lib/store/initial-store.svelte.ts
+++ b/packages/svelte/src/lib/store/initial-store.svelte.ts
@@ -285,7 +285,7 @@ export const getInitialStore = (signals: StoreSignals) => {
       });
     });
     onlyRenderVisibleElements: boolean = $derived(signals.props.onlyRenderVisibleElements ?? false);
-    onerror: OnError = $derived(signals.props.onerror ?? devWarn);
+    onerror: OnError = $derived(signals.props.onflowerror ?? devWarn);
 
     ondelete?: OnDelete = $derived(signals.props.ondelete);
     onbeforedelete?: OnBeforeDelete = $derived(signals.props.onbeforedelete);