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 (
- +
- 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] };