• #4230 0dbbe545 - pinch zoom on windows #3759
• Updated dependencies [0dbbe545]:
  • @reactflow/core@11.11.3
  • @reactflow/background@11.3.13
  • @reactflow/controls@11.2.13
  • @reactflow/minimap@11.7.13
  • @reactflow/node-resizer@2.2.13
  • @reactflow/node-toolbar@1.3.13

• #4189 b0b2d001 - re-observe when ref changes
• #4192 f452cf0c - fix redux readonly error
• #4188 ac2e11d1 - cover entire area
• Updated dependencies [ac2e11d1, b0b2d001, f452cf0c]:
  • @reactflow/minimap@11.7.12
  • @reactflow/core@11.11.2
  • @reactflow/background@11.3.12
  • @reactflow/controls@11.2.12
  • @reactflow/node-resizer@2.2.12
  • @reactflow/node-toolbar@1.3.12

• #4137 d39d4269 - allow pinch zoom if preventScrolling=false
• #4139 685825c5 - set direction="ltr" for wrapper div
• Updated dependencies [d39d4269, 685825c5]:
  • @reactflow/core@11.11.1
  • @reactflow/background@11.3.11
  • @reactflow/controls@11.2.11
  • @reactflow/minimap@11.7.11
  • @reactflow/node-resizer@2.2.11
  • @reactflow/node-toolbar@1.3.11

This is hopefully the last release for React Flow 11. It fixes some bugs and adds a deprecation warning for node.parentNode which is now called node.parentId. There are two reasons for this: parentNode poses a name collision with the DOM API and it actually is an id not a node.

• #4110 d80b9e7b - deprecate node.parentNode, rename to node.parentId

• #3957 c7a140bd - fixed smoothstep edge if center = 0

• #4082 ba3809b1 - fix: re-observe nodes when hidden is toggled

• #3935 6228d499 - disableKeyboardA11y now correctly prevents enter and escape key presses

• Updated dependencies [c7a140bd, ba3809b1, 6228d499]:

  • @reactflow/core@11.10.5
  • @reactflow/background@11.3.10
  • @reactflow/controls@11.2.10
  • @reactflow/minimap@11.7.10
  • @reactflow/node-resizer@2.2.10
  • @reactflow/node-toolbar@1.3.10

Patch Changes

• #3918 7c8c8574 - fix(edge-marker): use quotes for marker urls to support css vars
• #3897 7722305c - fix(nodes): re-measure/ re-init correctly

Patch Changes

• #3829 b367173a - fix(subflow): show correct selection box
• Updated dependencies [b367173a]:
  • @reactflow/core@11.10.3
  • @reactflow/background@11.3.8
  • @reactflow/controls@11.2.8
  • @reactflow/minimap@11.7.8
  • @reactflow/node-resizer@2.2.8
  • @reactflow/node-toolbar@1.3.8

Patch Changes

• #3807 59c44df5 Thanks @rhys-okane-instil! - fix internally used getNodeRect function
• #3810 814ae219 - fix getNodesBounds: use position instead of positionAbsolute for subflows

Patch Changes

Just a tiny fix for Typescript users who want to use the new screenToFlowPosition and flowToScreenPosition function of useReactFlow.

• #3605 e71dec26 - fix(react-flow-instance): add screenToFlow and flowToScreen types
• Updated dependencies [e71dec26]:
  • @reactflow/core@11.10.1
  • @reactflow/background@11.3.6
  • @reactflow/controls@11.2.6
  • @reactflow/minimap@11.7.6
  • @reactflow/node-resizer@2.2.6
  • @reactflow/node-toolbar@1.3.6

Upcoming v12

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

Deprecations / Renamings

⚠️ useReactFlow.project => 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,
});

⚠️ getTransformForBounds => 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)

getRectOfNodes => getNodesBounds (changes: none, just a renaming)

New features

• added useReactFlow.flowToScreenPosition

Minor Changes

• #3597 a114c75b Thanks - chore(utils): add renamed functions and deprecations, add useReactFlow.flowToScreenPosition

Patch Changes

• #3586 746fa4a0 Thanks @Nick-Lucas! - fix(intersection-helpers): use nodeRect instead of nodeOrRect
• #3584 291db12f - fix(panOnScroll): respect zoomActivationKeyPressed when hovering a node
• #3593 e1d3d594 Thanks @juspy! - fix(useOnSelectionChange): multiple handlers
• #3595 ddc40528 Thanks @bcakmakoglu! - refactor(pan-activation): allow panning by scroll when pan activation key is pressed
• #3596 e4c25caf - refactor(handles): snap to handle center when above handle
• Updated dependencies [a114c75b, 746fa4a0, 291db12f, e1d3d594, ddc40528, e4c25caf]:
  • @reactflow/core@11.10.0
  • @reactflow/background@11.3.5
  • @reactflow/controls@11.2.5
  • @reactflow/minimap@11.7.5
  • @reactflow/node-resizer@2.2.5
  • @reactflow/node-toolbar@1.3.5

Patch Changes

• fix(panOnScroll): use correct filter so that connections work

• Updated dependencies [e0cef7f1]:

  • @reactflow/core@11.9.4
  • @reactflow/background@11.3.4
  • @reactflow/controls@11.2.4
  • @reactflow/minimap@11.7.4
  • @reactflow/node-resizer@2.2.4
  • @reactflow/node-toolbar@1.3.4