Files
xyflow/packages/react/CHANGELOG.md
2023-06-05 15:40:18 +02:00

23 KiB

@reactflow/core

11.7.2

Patch Changes

  • #3060 70ec97f7 - fix useNodes and useEdges bug with infinite re-renderings
  • #3064 d2d1aebc - refactor(useUpdateNodeInternals): only call updateNodeDimensions once
  • #3059 4374459e - fix useUpdateNodeInternals type

11.7.1

Patch Changes

11.7.0

Most notable updates:

  • Handles: isConnectableStart and isConnectableEnd props to configure if you can start or end a connection at a certain handle
  • Edges: updatable option to enable updates for specific edges
  • useNodesInitialized: options to configure if hidden nodes should be included (false by default)

Minor Changes

  • #2960 Thanks @bcakmakoglu! - edges: add updatable option
  • #2958 4d97a0ed - handles: add isConnectableStart and isConnectableEnd props
  • #2956 923a54c4 - add options for useNodesInitialized, ignore hidden nodes by default

Patch Changes

11.6.1

Patch Changes

  • Always create new edge object (fixes an issue with Redux toolkit and other immutable helper libs)

11.6.0

Minor Changes

Patch Changes

11.5.5

Patch Changes

11.5.4

Patch Changes

  • 383a074a Thanks @bcakmakoglu! - Check if prevClosestHandle exists in onPointerUp. Fixes connections getting stuck on last handle and connecting, even when out of connectionRadius

11.5.3

This release fixes some issues with the newly introduced connection radius feature. We are now not only checking the radius but the handle itself too (like in the old version). That means that you can connect to a handle that is bigger than the connection radius. We are also not snapping connections anymore when they are not valid and pass a status class to the connection line that says if the current connection is valid or not. More over we fixed a connection issue with iOS.

Patch Changes

  • #2800 be8097ac - When node is not draggable, you can't move it with a selection either
  • #2803 1527795d - connection: add status class (valid or invalid) while in connection radius
  • #2801 3b6348a8 - fix(ios): connection error + dont snap invalid connection lines, check handle and connection radius

11.5.2

Patch Changes

11.5.1

Patch Changes

  • #2783 71153534 - connections: check handle below mouse before using connection radius

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

11.4.2

Patch Changes

11.4.1

Patch Changes

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

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

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

11.2.0

Minor Changes

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

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