Merge branch 'v11' into next-v11

xyflow · Jan 17, 2024 · 5920faa · 5920faa
2 parents 61c3197 + 22e0db7
commit 5920faa
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 14 deletions.
diff --git a/examples/vite-app/src/examples/DragNDrop/index.tsx b/examples/vite-app/src/examples/DragNDrop/index.tsx
@@ -48,9 +48,9 @@ const DnDFlow = () => {
 
     if (reactFlowInstance) {
       const type = event.dataTransfer.getData('application/reactflow');
-      const position = reactFlowInstance.project({
+      const position = reactFlowInstance.screenToFlowPosition({
         x: event.clientX,
-        y: event.clientY - 40,
+        y: event.clientY,
       });
       const newNode: Node = {
         id: getId(),

diff --git a/examples/vite-app/src/examples/Undirectional/index.tsx b/examples/vite-app/src/examples/Undirectional/index.tsx
@@ -182,7 +182,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(
@@ -195,12 +195,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 (

diff --git a/examples/vite-app/src/examples/UseReactFlow/index.tsx b/examples/vite-app/src/examples/UseReactFlow/index.tsx
@@ -56,7 +56,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,
@@ -71,9 +71,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) =>
@@ -86,7 +86,7 @@ const UseZoomPanHelperFlow = () => {
         })
       );
     },
-    [project, setNodes]
+    [screenToFlowPosition, setNodes]
   );
 
   const onNodeClick = useCallback(

diff --git a/examples/vite-app/src/examples/UseUpdateNodeInternals/index.tsx b/examples/vite-app/src/examples/UseUpdateNodeInternals/index.tsx
@@ -35,20 +35,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 - 40 }),
           data: { label: 'new node' },
           targetPosition: Position.Left,
           sourcePosition: Position.Right,
         })
       ),
-    [project, setNodes]
+    [screenToFlowPosition, setNodes]
   );
 
   return (

diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
@@ -25,7 +25,7 @@ We want to make the migration for v12 as smooth as possible. That's why we added
 
 ### Minor Changes
 
-- [#3597](https://github.com/xyflow/xyflow/pull/3597) [`a114c75b`](https://github.com/xyflow/xyflow/commit/a114c75b79d1d7bd24937318119a824879fe0b54) Thanks - chore(utils): add renamed functions and deprecations, add `useReactFlow.flowToScreenPosition`
+- [#3597](https://github.com/xyflow/xyflow/pull/3597) [`a114c75b`](https://github.com/xyflow/xyflow/commit/a114c75b79d1d7bd24937318119a824879fe0b54) - chore(utils): add renamed functions and deprecations, add `useReactFlow.flowToScreenPosition`
 
 ### Patch Changes
 

diff --git a/packages/core/src/hooks/useViewportHelper.ts b/packages/core/src/hooks/useViewportHelper.ts
@@ -21,6 +21,8 @@ const initialViewportHelper: ViewportHelperFunctions = {
   setCenter: noop,
   fitBounds: noop,
   project: (position: XYPosition) => position,
+  screenToFlowPosition: (position: XYPosition) => position,
+  flowToScreenPosition: (position: XYPosition) => position,
   viewportInitialized: false,
 };
 

diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts
@@ -136,6 +136,8 @@ export type ViewportHelperFunctions = {
   setCenter: SetCenter;
   fitBounds: FitBounds;
   project: Project;
+  screenToFlowPosition: (position: XYPosition) => XYPosition;
+  flowToScreenPosition: (position: XYPosition) => XYPosition;
   viewportInitialized: boolean;
 };
 

diff --git a/packages/reactflow/CHANGELOG.md b/packages/reactflow/CHANGELOG.md
@@ -33,7 +33,7 @@ We want to make the migration for v12 as smooth as possible. That's why we added
 
 ### Minor Changes
 
-- [#3597](https://github.com/xyflow/xyflow/pull/3597) [`a114c75b`](https://github.com/xyflow/xyflow/commit/a114c75b79d1d7bd24937318119a824879fe0b54) Thanks - chore(utils): add renamed functions and deprecations, add `useReactFlow.flowToScreenPosition`
+- [#3597](https://github.com/xyflow/xyflow/pull/3597) [`a114c75b`](https://github.com/xyflow/xyflow/commit/a114c75b79d1d7bd24937318119a824879fe0b54) - chore(utils): add renamed functions and deprecations, add `useReactFlow.flowToScreenPosition`
 
 ### Patch Changes