We want to make the migration for v12 as smooth as possible. That’s why we added deprecation warnings for the following util functions:

Rename useReactFlow.project to useReactFlow.screenToFlowPosition

⚠️ changes: no need to subtract react flow bounds anymore!

before:

const reactFlowBounds = reactFlowWrapper.current.getBoundingClientRect();
 
const position = reactFlowInstance.project({
  x: event.clientX - reactFlowBounds.left,
  y: event.clientY - reactFlowBounds.top,
});

after:

const position = reactFlowInstance.screenToFlowPosition({
  x: event.clientX,
  y: event.clientY,
});

Rename getTransformForBounds to getViewportForBounds

⚠️ changes: returns { x: number, y: number, zoom: number } instead of [number, number, number].

before:

const [x, y, zoom] = getTransformForBounds(bounds, width, height, 0.5, 2);

after:

const { x, y, zoom } = getViewportForBounds(bounds, width, height, 0.5, 2);

Rename getRectOfNodes to getNodesBounds

no changes, just a renaming.

New features

• added useReactFlow.flowToScreenPosition for completion

Besides that we fixed some bugs 🐛 You can find all change in the v11.10.0 Github release .