reafactor(react/svelte): rename some util functions #3528

examples/react/src/examples/Undirectional/index.tsx

@@ -183,7 +183,7 @@ const getId = () => `${id++}`;
 const UpdateNodeInternalsFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const { project } = useReactFlow();
+  const { screenToFlowPosition } = useReactFlow();
 
   const onConnect = useCallback((params: Edge | Connection) => setEdges((els) => addEdge(params, els)), [setEdges]);
   const onEdgeUpdate = useCallback(
@@ -196,12 +196,12 @@ const UpdateNodeInternalsFlow = () => {
       setNodes((nds) =>
         nds.concat({
           id: getId(),
-          position: project({ x: evt.clientX, y: evt.clientY - 40 }),
+          position: screenToFlowPosition({ x: evt.clientX, y: evt.clientY }),
           type: 'custom',
           data: null,
         })
       ),
-    [project, setNodes]
+    [screenToFlowPosition, setNodes]
   );
 
   return (

examples/react/src/examples/UseReactFlow/index.tsx

@@ -57,7 +57,7 @@ const UseZoomPanHelperFlow = () => {
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
   const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
   const {
-    project,
+    screenToFlowPosition,
     setCenter,
     zoomIn,
     zoomOut,
@@ -72,9 +72,9 @@ const UseZoomPanHelperFlow = () => {
 
   const onPaneClick = useCallback(
     (evt: MouseEvent) => {
-      const projectedPosition = project({
+      const projectedPosition = screenToFlowPosition({
         x: evt.clientX,
-        y: evt.clientY - 40,
+        y: evt.clientY,
       });
 
       setNodes((nds) =>
@@ -87,7 +87,7 @@ const UseZoomPanHelperFlow = () => {
         })
       );
     },
-    [project, setNodes]
+    [screenToFlowPosition, setNodes]
   );
 
   const onNodeClick = useCallback(

examples/react/src/examples/UseUpdateNodeInternals/index.tsx

@@ -36,20 +36,20 @@ const UpdateNodeInternalsFlow = () => {
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
   const onConnect = useCallback((params: Edge | Connection) => setEdges((els) => addEdge(params, els)), [setEdges]);
 
-  const { project } = useReactFlow();
+  const { screenToFlowPosition } = useReactFlow();
 
   const onPaneClick = useCallback(
     (evt: MouseEvent) =>
       setNodes((nds) =>
         nds.concat({
           id: getId(),
-          position: project({ x: evt.clientX, y: evt.clientY - 40 }),
+          position: screenToFlowPosition({ x: evt.clientX, y: evt.clientY }),
           data: { label: 'new node' },
           targetPosition: Position.Left,
           sourcePosition: Position.Right,
         })
       ),
-    [project, setNodes]
+    [screenToFlowPosition, setNodes]
   );
 
   return (

examples/svelte/src/routes/examples/drag-n-drop/Flow.svelte

@@ -69,10 +69,10 @@
 			return null;
 		}
 
-		const type = event.dataTransfer.getData('application/svelteflow');
-		const position = svelteFlow.project({
+		const type = event.dataTransfer.getData('application/svelteflow') || 'default';
+		const position = svelteFlow.screenToFlowPosition({
 			x: event.clientX,
-			y: event.clientY - 40
+			y: event.clientY
 		});
 		const newNode: Node = {
 			id: `${Math.random()}`,
@@ -81,7 +81,7 @@
 			data: { label: `${type} node` }
 		};
 
-		svelteFlow.nodes.update((nds) => nds.concat(newNode));
+		nodes.update((nds) => nds.concat(newNode));
 	};
 
 	$: {