@xyflow/system@0.0.35

Patch Changes

• #4432 d2da5765 Thanks @moklick! - refactor(ConnectionState): use internal node, add node generic

@xyflow/svelte@0.1.11

Patch Changes

• #4434 1bda2451 Thanks @moklick! - fix(selection): handle pointer capture for selectionOnDrag

• Updated dependencies [d2da5765]:

  • @xyflow/system@0.0.35

@xyflow/react@12.0.1

Patch Changes

• #4434 1bda2451 Thanks @moklick! - fix(selection): handle pointer capture for selectionOnDrag

• #4432 d2da5765 Thanks @moklick! - refactor(useConnection): return internal node, add node generic

• Updated dependencies [d2da5765]:

  • @xyflow/system@0.0.35

@xyflow/react@12.0.0

React Flow 12 is finally out! With a new package name @xyflow/react!

Main features

• SSR / SSG: you can define width, height and handles for the nodes. This makes it possible to render a flow on the server and hydrate on the client: SSR guide
  • Details: In v11, width and height were set by the library as soon as the nodes got measured. This still happens, but we are now using measured.width and measured.height to store this information. In the previous versions there was always a lot of confusion about width and height. It’s hard to understand, that you can’t use it for passing an actual width or height. It’s also not obvious that those attributes get added by the library. We think that the new implementation solves both of the problems: width and height are optional attributes that can be used to define dimensions and the measured dimensions are stored in measured.
• Reactive Flows: The new hooks useHandleConnections and useNodesData and the new updateNode and updateNodeData functions can be used for managing the data flow between your nodes: computing flows guide
  • Details: Working with reactive flows is super common. You update node A and want to react on those changes in the connected node B. Until now everyone had to come up with a custom solution. With this version we want to change this and give you performant helpers to handle this. If you are excited about this, you can check out this example:
• Dark mode and css variables: React Flow now comes with a built-in dark mode, that can be toggled by using the new colorMode prop (”light”, “dark” or “system”): dark mode example
  • Details: With this version we want to make it easier to switch between dark and light modes and give you a better starting point for dark flows. If you pass colorMode=”dark”, we add the class name “dark” to the wrapper and use it to adjust the styling. To make the implementation for this new feature easier on our ends, we switched to CSS variables for most of the styles. These variables can also be used in user land to customize a flow.

More features and updates

There is more! Besides the new main features, we added some minor things that were on our list for a long time. We also started to use TS docs for better docs. We already started to add some docs for some types and hooks which should improve the developer experience.

• useConnection hook: With this hook you can access the ongoing connection. For example, you can use it for colorizing handles styling a custom connection line based on the current start / end handles.
• Controlled viewport: This is an advanced feature. Possible use cases are to animate the viewport or round the transform for lower res screens for example. This features brings two new props: viewport and onViewportChange.
• ViewportPortal component: This makes it possible to render elements in the viewport without the need to implement a custom node.
• onDelete handler: We added a combined handler for onDeleteNodes and onDeleteEdges to make it easier to react to deletions.
• onBeforeDelete handler: With this handler you can prevent/ manage deletions.
• isValidConnection prop: This makes it possible to implement one validation function for all connections. It also gets called for programmatically added edges.
• autoPanSpeed prop: For controlling the speed while auto panning.
• Background component: add patternClassName prop to be able to style the background pattern by using a class name. This is useful if you want to style the background pattern with Tailwind for example.
• onMove callback gets triggered for library-invoked viewport updates (like fitView or zoom-in)
• deleteElements now returns deleted nodes and deleted edges
• add origin attribute for nodes
• add selectable attribute for edges
• Node Resizer: child nodes don't move when the group is resized, extent and expand is recognized correctly
• Correct types for BezierEdge, StepEdge, SmoothStepEdge and StraightEdge components
• New edges created by the library only have sourceHandle and targetHandle attributes when those attributes are set. (We used to pass sourceHandle: null and targetHandle: null)
• Edges do not mount/unmount when their z-index change
• connection line knows about the target handle position so that the path is drawn correctly
• nodeDragThreshold is 1 by default instead of 0
• a better selection box usability (capture while dragging out of the flow)
• add selectable, deletable, draggable and parentId to NodeProps
• add a warning when styles not loaded

Release 11.11.4

This release adds some deprecation warnings and introduces new function and attribute names for "edge update" which is now called "edge reconnect":

updateEdge => reconnectEdge
onEdgeUpdateStart => onReconnectStart
onEdgeUpdate => onReconnect
onEdgeUpdateEnd => onReconnectEnd
edgeUpdaterRadius => reconnectRadius
edge.updatable => edge.reconnectable

We changed the term, because we think it's more clear what it does and is better to distinguish from the new updateEdge and updateEdgeData helpers in React Flow 12.

Patch Changes

• #4389 092b2ecb - rename updateEdge to reconectEdge
• #4387 280a64ee - abort drag when multiple touches are detected
• Updated dependencies [092b2ecb, 280a64ee]:
  • @reactflow/core@11.11.4
  • @reactflow/background@11.3.14
  • @reactflow/controls@11.2.14
  • @reactflow/minimap@11.7.14
  • @reactflow/node-resizer@2.2.14
  • @reactflow/node-toolbar@1.3.14

Release 11.11.3

• #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

Release 11.11.2

Patch Changes

• #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

Release 11.11.1

Patch Changes

• #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

Release 11.11.0

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.

Minor Changes

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

Patch Changes

• #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

Release 11.10.4

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