25 KiB
reactflow
11.5.5
Patch Changes
-
383a074aThanks @bcakmakoglu! - Check if prevClosestHandle exists in onPointerUp. Fixes connections getting stuck on last handle and connecting, even when out of connectionRadius -
Updated dependencies [
383a074a]:- @reactflow/core@11.5.4
- @reactflow/background@11.1.7
- @reactflow/controls@11.1.7
- @reactflow/minimap@11.3.7
- @reactflow/node-toolbar@1.1.7
11.5.4
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 -
Updated dependencies [
be8097ac,1527795d,3b6348a8]:- @reactflow/core@11.5.3
- @reactflow/background@11.1.6
- @reactflow/controls@11.1.6
- @reactflow/minimap@11.3.6
- @reactflow/node-toolbar@1.1.6
11.5.3
Patch Changes
-
Updated dependencies [
d8c679b4]:- @reactflow/background@11.1.5
- @reactflow/controls@11.1.5
- @reactflow/core@11.5.2
- @reactflow/minimap@11.3.5
- @reactflow/node-toolbar@1.1.5
11.5.2
Patch Changes
-
#2783
71153534- connections: check handle below mouse before using connection radius -
Updated dependencies [
71153534]:- @reactflow/core@11.5.1
- @reactflow/background@11.1.4
- @reactflow/controls@11.1.4
- @reactflow/minimap@11.3.4
- @reactflow/node-toolbar@1.1.4
11.5.1
Minor Changes
- use latest node-toolbar package to prevent dependency issues
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
-
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
-
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
d91e619aThanks @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:
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
-
#2660
50032c3d- AddgetNodesfunction to the store so that you don't need to doArray.from(store.getState().nodeInternals.values())anymore. -
#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
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 -
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
- Updated dependencies [
e6b5d90f,6ee44e07,d29c401d,aa69c207,d29c401d,0df02f35]:- @reactflow/core@11.3.2
- @reactflow/minimap@11.2.3
- @reactflow/node-toolbar@1.0.2
- @reactflow/background@11.0.7
- @reactflow/controls@11.0.7
11.3.2
Patch Changes
-
7ece618dThanks @lounsbrough! - Fix minimap node position -
Updated dependencies [
7ece618d]:- @reactflow/minimap@11.2.2
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 -
#2594
ec94d9ecThanks @chrtze! - Allow multiple node ids to be passed for enabling multi selection toolbars -
Updated dependencies [
c828bfda,b0302ce4,b2c72813,ec94d9ec]:- @reactflow/core@11.3.1
- @reactflow/minimap@11.2.1
- @reactflow/node-toolbar@1.0.1
- @reactflow/background@11.0.6
- @reactflow/controls@11.0.6
11.3.0
Minor Changes
- #2562
d745aa33Thanks @moklick! - Minimap: AddmaskStrokeColorandmaskStrokeWidthprops - #2563
98116d43Thanks @chrtze! - Core: Add<NodeToolbar />component that renders a fixed element attached to a node - #2545
8f63f751Thanks @chrtze! - Minimap: AddariaLabelprop to configure or remove the aria-label
Patch Changes
-
#2561
92cf497eThanks @moklick! - Core: Fix multi selection and fitView when nodeOrigin is used -
#2560
a39224b3Thanks @neo! - Core: Always elevate zIndex when node is selected -
#2573
5e8b67ddThanks @moklick! - Core: Fix disappearing connection line for loose flows -
#2558
2a1c7db6Thanks @moklick! - Core: Handle multiple instances on a page for EdgeLabelRenderer -
Updated dependencies [
d745aa33,92cf497e,98116d43,8f63f751,a39224b3,5e8b67dd,2a1c7db6,c793433c]:- @reactflow/minimap@11.2.0
- @reactflow/core@11.3.0
- @reactflow/node-toolbar@1.0.0
- @reactflow/background@11.0.5
- @reactflow/controls@11.0.5
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
-
#2538
740659c0Thanks @neo! - Refactor: put React Flow in isolated stacking context -
Updated dependencies [
740659c0,7902a3ce,b25d499e,4fc1253e,8ba4dd5d]:- @reactflow/core@11.2.0
- @reactflow/minimap@11.1.0
- @reactflow/background@11.0.4
- @reactflow/controls@11.0.4
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
-
c44413dThanks @moklick! - chore(panel): dont break user selection above panel -
48c402cThanks @moklick! - refactor(aria-descriptions): render when disableKeyboardA11y is true -
3a1a365Thanks @moklick! - fix(useOnSelectionChange): repair hook closes #2484 -
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
-
d00faa6bThanks @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.cssis mandatory - 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
Patch Changes
- Updated dependencies:
- @reactflow/background@11.0.0
- @reactflow/controls@11.0.0
- @reactflow/core@11.0.0
- @reactflow/minimap@11.0.0