xyflow/packages/core/CHANGELOG.md

@reactflow/core

11.4.1

Patch Changes

• #2738 82988485 - fix: fitView for subflows, context menu on right mouse pan
• #2740 d91e619a Thanks @michaelspiss! - EdgeRenderer: check all handles for connection mode loose

11.4.0

New Features

New props for the ReactFlow component to customize the controls of the viewport and the selection box better:

1. selectionOnDrag prop: Selection box without extra button press (need to set panOnDrag={false} or panOnDrag={[1, 2]})
2. panOnDrag={[0, 1, 2]} option to configure specific mouse buttons for panning
3. panActivationKeyCode="Space" key code for activating dragging (useful when using selectionOnDrag)
4. selectionMode={SelectionMode.Full}: you can chose if the selection box needs to contain a node fully (SelectionMode.Full) or partially (SelectionMode.Partial) to select it
5. onSelectionStart and onSelectionEnd events
6. elevateNodesOnSelect: Defines if z-index should be increased when node is selected
7. New store function getNodes. You can now do store.getState().getNodes() instead of Array.from(store.getNodes().nodeInternals.values()).

Thanks to @jackfishwick who helped a lot with the new panning and selection options.

Minor Changes

• #2678 baa8689e
  • Add new props to configure viewport controls (selectionOnDrag, panActivationKeyCode, ..)
• #2661 7ef29108
  • panOnDrag: Use numbers for prop ([1,2] = drag via middle or right mouse button)
  • selection: do not include hidden nodes
  • minimap: fix onNodeClick for nodes outside the viewport
  • keys: allow multi select when input is focused

Patch Changes

• #2695 ab2ff374 - Add elevateNodesOnSelect prop
• #2660 50032c3d - Add getNodes function to the store so that you don't need to do Array.from(store.getState().nodeInternals.values()) anymore.
• #2659 4244bae2 - Use translateExtent correctly
• #2657 23afb3ab - Only trigger drag event when change happened

11.4.0-next.1

Minor Changes

• panOnDrag: Use numbers for prop ([1,2] = drag via middle or right mouse button)
• selection: do not include hidden nodes
• minimap: fix onNodeClick for nodes outside the viewport
• keys: allow multi select when input is focused

11.4.0-next.0

Minor Changes

• #2678 baa8689e Thanks @moklick! - ## New Features

  New props for the ReactFlow component to customize the controls of the viewport and the selection box better:

  1. selectionOnDrag prop: Selection box without extra button press (need to set panOnDrag={false} or panOnDrag="RightClick"`)
  2. panOnDrag="RightClick" option
  3. panActivationKeyCode="Space" key code for activating dragging (useful when using selectionOnDrag)
  4. selectionMode={SelectionMode.Full}: you can chose if the selection box needs to contain a node fully (SelectionMode.Full) or partially (SelectionMode.Partial) to select it
  5. onSelectionStart and onSelectionEnd events

Patch Changes

• #2660 50032c3d Thanks @moklick! - Add getNodes function to the store so that you don't need to do Array.from(store.getState().nodeInternals.values()) anymore.

• #2659 4244bae2 Thanks @moklick! - Use translateExtent correctly

• #2657 23afb3ab Thanks @moklick! - Only trigger drag event when change happened

11.3.2

In this update we did some changes so that we could implement the new <NodeResizer /> component more smoothly.

Patch Changes

• #2646 e6b5d90f - Fix getRectOfNodes
• #2648 6ee44e07 - Allow middle mouse pan over edges
• #2647 aa69c207 Thanks @neo! - Invalidate node trying to connect itself with the same handle
• #2626 d29c401d - Export the useNodeId hook, refactor how changes are applied and create a helper function
• #2642 0df02f35 - Ignore key events for nodes when input is focused

11.3.1

Patch Changes

• #2595 c828bfda Thanks @chrtze! - Fix and improve the behaviour when using nodeOrigin in combination with subflows
• #2602 b0302ce4 Thanks @sdegueldre! - Don't use try catch in wrapper for checking if provider is available
• #2601 b2c72813 Thanks @hoondeveloper! - fix isRectObject function

11.3.0

Minor Changes

• #2563 98116d43 Thanks @chrtze! - Export a new component "NodeToolbar" that renders a fixed element attached to a node

Patch Changes

• #2561 92cf497e Thanks @moklick! - Fix multi selection and fitView when nodeOrigin is used
• #2560 a39224b3 Thanks @neo! - Always elevate zIndex when node is selected
• #2573 5e8b67dd Thanks @moklick! - Fix disappearing connection line for loose flows
• #2558 2a1c7db6 Thanks @moklick! - EdgeLabelRenderer: handle multiple instances on a page

11.2.0

Minor Changes

• #2535 7902a3ce Thanks @moklick! - Feat: Add edge label renderer
• #2536 b25d499e Thanks @pengfu! - Feat: add deleteElements helper function
• #2539 4fc1253e Thanks @moklick! - Feat: add intersection helpers
• #2530 8ba4dd5d Thanks @moklick! - Feat: Add pan and zoom to mini map

Patch Changes

• #2538 740659c0 Thanks @neo! - Refactor: put React Flow in isolated stacking context

11.1.2

Patch Changes

• make pro options acc type optional
• cleanup types
• fix rf id handling
• always render nodes when dragging=true
• don't apply animations to helper edge

11.1.1

Patch Changes

• c44413d Thanks @moklick! - chore(panel): dont break user selection above panel
• 48c402c Thanks @moklick! - refactor(aria-descriptions): render when disableKeyboardA11y is true
• 3a1a365 Thanks @moklick! - fix(useOnSelectionChange): repair hook closes #2484
• 5d35094 Thanks @neo! - Add css files as sideEffects

11.1.0

Minor Changes

• def11008 Thanks @moklick! - New props: nodesFocusable and edgesFocusable

Patch Changes

• d00faa6b Thanks @moklick! - Make nopan class name overwritable with class name option

11.0.0

Major Changes

• Better Accessibility
  • Nodes and edges are focusable, selectable, moveable and deleteable with the keyboard.
  • aria- default attributes for all elements and controllable via ariaLabel options
  • Keyboard controls can be disabled with the new disableKeyboardA11y prop
• Better selectable edges via new edge option: interactionWidth - renders invisible edge that makes it easier to interact
• Better routing for smoothstep and step edges: https://twitter.com/reactflowdev/status/1567535405284614145
• Nicer edge updating behaviour: https://twitter.com/reactflowdev/status/1564966917517021184
• Node origin: The new nodeOrigin prop lets you control the origin of a node. Useful for layouting.
• New background pattern: BackgroundVariant.Cross variant
• useOnViewportChange hook - handle viewport changes within a component
• useOnSelectionChange hook - handle selection changes within a component
• useNodesInitialized hook - returns true if all nodes are initialized and if there is more than one node
• Deletable option for Nodes and edges
• New Event handlers: onPaneMouseEnter, onPaneMouseMove and onPaneMouseLeave
• Edge pathOptions for smoothstep and default edges
• Nicer cursor defaults: Cursor is grabbing, while dragging a node or panning
• Pane moveable with middle mouse button
• Pan over nodes when they are not draggable (draggable=false or nodesDraggable false)
• <BaseEdge /> component that makes it easier to build custom edges
• Separately installable packages
  • @reactflow/core
  • @reactflow/background
  • @reactflow/controls
  • @reactflow/minimap