Files
xyflow/packages/reactflow/CHANGELOG.md
2023-01-26 11:42:15 +01:00

22 KiB

reactflow

11.5.0

Lot's of improvements are coming with this release!

  • Connecting radius: No need to drop a connection line on top of handle anymore. You only need to be close to the handle. That radius can be configured with the connectionRadius prop.
  • Auto pan: When you drag a node, a selection or the connection line to the border of the pane, it will pan into that direction. That makes it easier to connect far away nodes for example. If you don't like it you can set autoPnaOnNodeDrag and autoPanOnConnect to false.
  • Touch devices: It's finally possibleto connect nodes with the connection line on touch devices. In combination with the new auto pan and connection radius the overall UX is way better.
  • Errors: We added an onError prop to get notified when an error like "couldn't find source handle" happens. This is useful if you want to log errors for example.
  • Node type: We added a second param to the generic Node type. You can not only pass NodeData but also the type as a second param:
type MyCustomNode = Node<MyCustomNodeData, 'custom-node-type'>

This makes it easier to work with different custom nodes and data types.

Minor Changes

  • #2754 e96309b6 - Add auto pan for connecting and node dragging and connectionRadius
  • #2773 - Add onError prop to get notified when an error happens

Patch Changes

  • #2763 85003b01 - Connecting nodes: Enable connections on touch devices

  • #2620 - Thanks RichSchulz! - Types: improve typing for node type

  • Updated dependencies [e96309b6, 85003b01, 4c516882]:

    • @reactflow/core@11.5.0
    • @reactflow/background@11.1.3
    • @reactflow/controls@11.1.3
    • @reactflow/minimap@11.3.3

11.4.2

Patch Changes

  • #2741 e2aff6c1 - chore(dependencies): update and cleanup

  • Updated dependencies [e34a3072, e2aff6c1]:

    • @reactflow/background@11.1.2
    • @reactflow/core@11.4.2
    • @reactflow/minimap@11.3.2
    • @reactflow/node-toolbar@1.1.2
    • @reactflow/controls@11.1.2

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

  • Updated dependencies [82988485, d91e619a]:

    • @reactflow/core@11.4.1
    • @reactflow/background@11.1.1
    • @reactflow/controls@11.1.1
    • @reactflow/minimap@11.3.1
    • @reactflow/node-toolbar@1.1.1

11.4.0

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

  • Updated dependencies [ab2ff374, 50032c3d, baa8689e, 4244bae2, 7ef29108, 23afb3ab]:

    • @reactflow/core@11.4.0
    • @reactflow/minimap@11.3.0
    • @reactflow/node-toolbar@1.1.0
    • @reactflow/background@11.1.0
    • @reactflow/controls@11.1.0

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

Patch Changes

  • Updated dependencies []:
    • @reactflow/background@11.1.0-next.1
    • @reactflow/controls@11.1.0-next.1
    • @reactflow/core@11.4.0-next.1
    • @reactflow/minimap@11.3.0-next.1
    • @reactflow/node-toolbar@1.1.0-next.1

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

  • Updated dependencies [50032c3d, baa8689e, 4244bae2, 23afb3ab]:

    • @reactflow/core@11.4.0-next.0
    • @reactflow/minimap@11.3.0-next.0
    • @reactflow/node-toolbar@1.1.0-next.0
    • @reactflow/background@11.0.8-next.0
    • @reactflow/controls@11.0.8-next.0

11.3.3

In this update we did some changes so that we could implement the new <NodeResizer /> component (not part of the reactflow package!) more smoothly.

Patch Changes

11.3.2

Patch Changes

11.3.1

Patch Changes

11.3.0

Minor Changes

  • #2562 d745aa33 Thanks @moklick! - Minimap: Add maskStrokeColor and maskStrokeWidth props
  • #2563 98116d43 Thanks @chrtze! - Core: Add <NodeToolbar /> component that renders a fixed element attached to a node
  • #2545 8f63f751 Thanks @chrtze! - Minimap: Add ariaLabel prop to configure or remove the aria-label

Patch Changes

11.2.0

Minor Changes

Patch Changes

11.1.2

Housekeeping release with some fixes and some cleanups for the types.

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
  • Updated dependencies:
    • @reactflow/core@11.1.2
    • @reactflow/background@11.0.3
    • @reactflow/controls@11.0.3
    • @reactflow/minimap@11.0.3

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

  • Updated dependencies:

    • @reactflow/background@11.0.2
    • @reactflow/core@11.1.1
    • @reactflow/controls@11.0.2
    • @reactflow/minimap@11.0.2

11.1.0

Minor Changes

Patch Changes

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

  • Updated dependencies [def11008, def11008, d00faa6b]:

    • @reactflow/background@11.0.1
    • @reactflow/core@11.1.0
    • @reactflow/controls@11.0.1
    • @reactflow/minimap@11.0.1

11.0.0

Finally it's here! A new version that comes with lots of improvements and the new package name reactflow. From now on you can install it via npm install reactflow.

Major Changes

  • Importing CSS via reactflow/dist/style.css is mandatory
  • 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

Patch Changes

  • Updated dependencies:
    • @reactflow/background@11.0.0
    • @reactflow/controls@11.0.0
    • @reactflow/core@11.0.0
    • @reactflow/minimap@11.0.0