From b56f5ad9e14c65b543c6f49e98b03b22d55fa947 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 16 Nov 2023 11:55:59 +0100
Subject: [PATCH] chore(examples): cleanup

---
 examples/react/src/examples/DragNDrop/index.tsx       |  4 ++--
 .../src/routes/examples/add-node-on-drop/Flow.svelte  | 11 +++++------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/examples/react/src/examples/DragNDrop/index.tsx b/examples/react/src/examples/DragNDrop/index.tsx
index 83e39d88..d11cd902 100644
--- a/examples/react/src/examples/DragNDrop/index.tsx
+++ b/examples/react/src/examples/DragNDrop/index.tsx
@@ -49,7 +49,7 @@ const DnDFlow = () => {
 
     if (reactFlowInstance) {
       const type = event.dataTransfer.getData('application/reactflow');
-      const position = reactFlowInstance.screenToFlowCoordinate({
+      const position = reactFlowInstance.screenToFlowPosition({
         x: event.clientX,
         y: event.clientY,
       });
@@ -66,7 +66,7 @@ const DnDFlow = () => {
 
   return (
     <div className={styles.dndflow}>
-      <ReactFlowProvider nodes={initialNodes} edges={[]}>
+      <ReactFlowProvider initialNodes={initialNodes} initialEdges={[]}>
         <div className={styles.wrapper}>
           <ReactFlow
             nodes={nodes}
diff --git a/examples/svelte/src/routes/examples/add-node-on-drop/Flow.svelte b/examples/svelte/src/routes/examples/add-node-on-drop/Flow.svelte
index cd12c1a4..5556ca80 100644
--- a/examples/svelte/src/routes/examples/add-node-on-drop/Flow.svelte
+++ b/examples/svelte/src/routes/examples/add-node-on-drop/Flow.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-	import { SvelteFlow, useSvelteFlow } from '@xyflow/svelte';
-	import type { Edge, Node } from '@xyflow/svelte';
 	import { writable } from 'svelte/store';
+	import { SvelteFlow, useSvelteFlow, type Edge, type Node } from '@xyflow/svelte';
 
 	import '@xyflow/svelte/dist/style.css';
 
@@ -22,7 +21,7 @@
 	let id = 1;
 	const getId = () => `${id++}`;
 
-	const { screenToFlowCoordinate, flowToScreenCoordinate } = useSvelteFlow();
+	const { screenToFlowPosition, flowToScreenPosition } = useSvelteFlow();
 
 	function handleConnectEnd({ detail: { event } }: { detail: { event: MouseEvent | TouchEvent } }) {
 		// See of connection landed inside the flow pane
@@ -34,7 +33,7 @@
 				y: event.clientY
 			};
 
-			const doubleTransformedPosition = flowToScreenCoordinate(screenToFlowCoordinate(position));
+			const doubleTransformedPosition = flowToScreenPosition(screenToFlowPosition(position));
 			console.log(
 				'Is transforming in both directions (screen-flow, flow-screen) the same?',
 				position.x === doubleTransformedPosition.x && position.y === doubleTransformedPosition.y
@@ -43,8 +42,8 @@
 			const newNode: Node = {
 				id,
 				data: { label: `Node ${id}` },
-				// project the screen coordinates to pane coordinates
-				position: screenToFlowCoordinate(position),
+				// project the screen position to pane position
+				position: screenToFlowPosition(position),
 				// set the origin of the new node so it is centered
 				origin: [0.5, 0.0]
 			};