20 KiB
@reactflow/core
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
- #2877
b8886514- addisValidConnectionprop for ReactFlow component - #2847
16bf89f2Thanks @bcakmakoglu! - Add option to enable/disable replacing edge id when usingupdateEdge
Patch Changes
- #2895
3d5764ca- add data-testid for controls, minimap and background - #2894
83fc4675- fix(nodes): blur when node gets unselected - #2892
5fabd272Thanks @danielgek - track modifier keys on useKeypress - #2893
8f080bd5- fix: check if handle is connectable
11.5.5
Patch Changes
- #2834
23424ea6Thanks @bcakmakoglu! - Addnodesto fit view options to allow fitting view only around specified set of nodes - #2836
959b1114- Fix: connections for handles with bigger handles than connection radius - #2819
0d259b02Thanks @bcakmakoglu! - Avoid triggering edge update if not using left mouse button - #2832
f3de9335- fitView: return type boolean - #2838
021f5a92- refactor: use key press handle modifier keys + input - #2839
72216ff6- fix PropsWithChildren: pass default generic for v17 types
11.5.4
Patch Changes
383a074aThanks @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
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
connectionRadiusprop. - 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
autoPnaOnNodeDragandautoPanOnConnectto 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
onErrorprop 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
Nodetype. You can not only passNodeDatabut 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 andconnectionRadius - #2773 - Add
onErrorprop 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
11.4.2
Patch Changes
11.4.1
Patch Changes
- #2738
82988485- fix: fitView for subflows, context menu on right mouse pan - #2740
d91e619aThanks @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:
selectionOnDragprop: Selection box without extra button press (need to setpanOnDrag={false}orpanOnDrag={[1, 2]})panOnDrag={[0, 1, 2]}option to configure specific mouse buttons for panningpanActivationKeyCode="Space"key code for activating dragging (useful when usingselectionOnDrag)selectionMode={SelectionMode.Full}: you can chose if the selection box needs to contain a node fully (SelectionMode.Full) or partially (SelectionMode.Partial) to select itonSelectionStartandonSelectionEndeventselevateNodesOnSelect: Defines if z-index should be increased when node is selected- New store function
getNodes. You can now dostore.getState().getNodes()instead ofArray.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, ..)
- Add new props to configure viewport controls (
- #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- AddgetNodesfunction to the store so that you don't need to doArray.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
baa8689eThanks @moklick! - ## New FeaturesNew props for the ReactFlow component to customize the controls of the viewport and the selection box better:
selectionOnDragprop: Selection box without extra button press (need to setpanOnDrag={false} orpanOnDrag="RightClick"`)panOnDrag="RightClick"optionpanActivationKeyCode="Space"key code for activating dragging (useful when usingselectionOnDrag)selectionMode={SelectionMode.Full}: you can chose if the selection box needs to contain a node fully (SelectionMode.Full) or partially (SelectionMode.Partial) to select itonSelectionStartandonSelectionEndevents
Patch Changes
-
#2660
50032c3dThanks @moklick! - AddgetNodesfunction to the store so that you don't need to doArray.from(store.getState().nodeInternals.values())anymore. -
#2659
4244bae2Thanks @moklick! - Use translateExtent correctly -
#2657
23afb3abThanks @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
aa69c207Thanks @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
c828bfdaThanks @chrtze! - Fix and improve the behaviour when using nodeOrigin in combination with subflows - #2602
b0302ce4Thanks @sdegueldre! - Don't use try catch in wrapper for checking if provider is available - #2601
b2c72813Thanks @hoondeveloper! - fix isRectObject function
11.3.0
Minor Changes
- #2563
98116d43Thanks @chrtze! - Export a new component "NodeToolbar" that renders a fixed element attached to a node
Patch Changes
- #2561
92cf497eThanks @moklick! - Fix multi selection and fitView when nodeOrigin is used - #2560
a39224b3Thanks @neo! - Always elevate zIndex when node is selected - #2573
5e8b67ddThanks @moklick! - Fix disappearing connection line for loose flows - #2558
2a1c7db6Thanks @moklick! - EdgeLabelRenderer: handle multiple instances on a page
11.2.0
Minor Changes
- #2535
7902a3ceThanks @moklick! - Feat: Add edge label renderer - #2536
b25d499eThanks @pengfu! - Feat: add deleteElements helper function - #2539
4fc1253eThanks @moklick! - Feat: add intersection helpers - #2530
8ba4dd5dThanks @moklick! - Feat: Add pan and zoom to mini map
Patch Changes
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
c44413dThanks @moklick! - chore(panel): dont break user selection above panel48c402cThanks @moklick! - refactor(aria-descriptions): render when disableKeyboardA11y is true3a1a365Thanks @moklick! - fix(useOnSelectionChange): repair hook closes #24845d35094Thanks @neo! - Add css files as sideEffects
11.1.0
Minor Changes
Patch Changes
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 viaariaLabeloptions- Keyboard controls can be disabled with the new
disableKeyboardA11yprop
- 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
nodeOriginprop lets you control the origin of a node. Useful for layouting. - New background pattern:
BackgroundVariant.Crossvariant useOnViewportChangehook - handle viewport changes within a componentuseOnSelectionChangehook - handle selection changes within a componentuseNodesInitializedhook - 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,onPaneMouseMoveandonPaneMouseLeave - Edge
pathOptionsforsmoothstepanddefaultedges - 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=falseornodesDraggablefalse) <BaseEdge />component that makes it easier to build custom edges- Separately installable packages
- @reactflow/core
- @reactflow/background
- @reactflow/controls
- @reactflow/minimap