Skip to content
Compare
Choose a tag to compare

Release 10.0.0

@moklick moklick released this
· 208 commits to main since this release
Compare
Choose a tag to compare

v10 馃帀

React Flow v10 comes with many new features and improvements. Besides a complete rewrite of the internal state management, the separation of the graph elements into nodes and edges, several bug fixes and refactorings, these are the most important new features:

  • Sub Flows: Support for sub flows, nested flows and grouping of nodes
  • Touch Device Support: The UX for connecting nodes on touch devices has been improved
  • Key Handling: Multiple keys and key combinations are now supported
  • Several new hooks: useReactFlow, useNodes, useEdges, useViewport, useKeypress have been refactored to provide a better dev experience
  • Fit View Property: Fit all nodes and edges initially without writing custom logic
  • Edge Marker: More options to configure the start and end markers of the edges

If you want to migrate from v9 to v10, you can check out the migration guide.

  • chore(bezier-edge): less curvy by default (bfe06a5)
  • Improve UE-style Bezier Edge calculation (6f51af2)
  • refactor(bezier-edge): only do calculations when necessary (9fff0e5)
  • refactor(cypress): cleanup (3b87563)
  • chore(deps): update (2d714dc)
  • Merge pull request #1968 from wbkd/v10-ue-edge (bf2f9e5)
  • refactor(edges): add BaseEdge (bc5d1df)
  • refactor(edges): use new edge as default, add simplebezier (b362c11)
  • chore(readme): wording (dfc91d7)
  • Rename to "unreal" edge, fix for both horizontal and vertical handles (3c96b07)
  • Add Unreal Engine style bezier edge (726bc2e)
  • chore(attribution): update options (64a3c2d)
  • chore(version): bump (466a0af)
  • chore(version): bump (1424cf8)
  • Merge pull request #1947 from Himself65/v10-fix (5cc3502)
  • fix: type error (a48276e)
  • refactor(useReactFlow): pass generic nodedata and edgedata closes #1944 (414d7ec)
  • Merge branch 'main' into v10 (7fc7dc3)
  • refactor(rollup): treeshakable (ebf10fa)
  • fix(nocss): use correct entry points (67428d8)
  • refactor(builds): drop cjs bundle, add type=module (9156a22)
  • chore(version): bump (36fdf20)
  • refactor(rollup): define all deps as external (2d9f04c)
  • chore(readme): add useUndoable (ca30793)
  • chore(readme): add useUndoable (ce2aa46)
  • refactor(keys): accept null as key #1463 (fe5337d)
  • refactor(nodeTypes/edgeTypes): show warning when not memoized closes #1620 (6630935)
  • refactor(handle): only listen to left click events closes #1852 (a45af5f)
  • fix(selection-change): only trigger once (67b71a9)
  • fix(selection): deselect nodes when select edge and vice versa closes #1899 (007bdab)
  • refactor(onmove-handler): pass source event #1676 (a514c0e)
  • fix(types): onEdgesDelete (8e41c0d)
  • chore(version): bump (c599a45)
  • fix: export type OnNodesDelete and OnEdgesDelete (76ff491)
  • feat(props): add onNodesDelete and onEdgesDelete handler (e011375)
  • chore(version): bump (f7dd26b)
  • fix(ts): dont make viewport optional for move callbacks (522780e)
  • Delete dependabot.yml (3f2d606)
  • fix: enhance type (d250a7d)
  • chore(version): bump (6de04df)
  • refactor(hooks): export key press hook (3067b72)
  • refactor(props): rename paneMoveable to panOnDrag (b3b8ac9)
  • update deps (7d9a0ac)
  • refactor(useViewport): use shallow for selector (b1791ea)
  • chore(version): bump (24593f7)
  • refactor(rf): cleanup (4e97472)
  • feat(nodes): add group type (8dcb875)
  • removed wrong type (4ad17d8)
  • refactor(wrapnode): create mouse handler util hook (578c278)
  • refactor(wrapnode): pass shallow clones to handlers (588b590)
  • refactor(wrapnode): get node from store in event handlers (c40a36f)
  • refactor(nodes): re-init when sourcePos, targetPos or type changes (7e915ad)
  • chore(version): bump (8d5231b)
  • chore(examples): cleanup (1e8d578)
  • refactor(changes): handle expand parent on dimension update (ee1a393)
  • fix(fitview): only fit view once (1b45a3f)
  • refactor(fitView): use same fitView function for viewport helper and initial prop (af52bab)
  • chore(version): bump (0244c93)
  • refactor(types): add NodePositionChange type (067d681)
  • refactor(defaultNode/Edges): always trigger onNodesChange and onEdgesChange (0cfcf65)
  • chore(version): bump (2736492)
  • fix(exports): add hooks (bfea566)
  • feat(hooks): add useViewport (a182458)
  • chore(version): bump (2f4d1e6)
  • refactor(types): drop NodeInternalsItem type (e52c5ed)
  • feat(hooks): add useNodes and useEdges (08b2696)
  • chore(nodes): prevent crashing when data is not set on nodes object (f95f390)
  • feat(hooks): add useReactFlow hook, refactor types and properties (c2bae79)
  • refactor(controls): add titles for buttons (97b5327)
  • feat(general): add defaultNodes, defaultEdges and defaultEdgeOptions (634b592)
  • refactor(store): cleanup (660ec00)
  • chore(version): bump (3f1d186)
  • Merge branch 'main' into v10 (f96391f)
  • feat(attribution): add react flow attribution (0b241d2)
  • chore(version): bump (d285318)
  • feat(subflow): add extendParent option (eaeebdd)
  • refactor(useKeyPress): check if key code is string (f01e239)
  • Merge branch 'main' into v10 (7a7ddbe)
  • chore(examples): use new api (a969c63)
  • chore(examples): add examples (7a85bb9)
  • chore(version): bump (c1e5f90)
  • test(examples): use new api for test examples (8014fb0)
  • fix(edges): draw connection line when there are no edges closes #1785 (ca77d0e)
  • fix(selection): use start x and y when direction changes (6bbd06a)
  • chore(rollup): bump (0e3ddc2)
  • chore(version): bump (016d35c)
  • feat(props): add connectOnClick (d8b054c)
  • chore(examples): add overview, cleanup (3206d49)
  • feat(nodes): connect on touch device (3b25086)
  • refactor(bundle): remove d3-color via rollup alias (639aa1e)
  • refactor(examples): use @types/react from lib (efbdd70)
  • refactor(deps): remove unused deps (d5cffa7)
  • refactor(store): use store.setState directly instead of actions (895e0bc)
  • refactor(storeupdater): cleanup (1a2ac5a)
  • chore(package.json): bump next version (774db77)
  • chore(zoompane): remove unused code (747097f)
  • refactor(general): cleanup (81585db)
  • refactor(store): remove unused tree generation code (3830878)
  • refactor(general): fit view in store to prevent flickering, rename onLoad => onPaneReady (88582a8)
  • chore(version): bump (3a52efb)
  • feat(rf): add fitViewOnInit option (266007b)
  • chore(version): bump (91256c1)
  • refactor(hooks): rename useNodeDimensions to useNodeBounds (427c933)
  • refactor(onLoad): add new zoom pan helpers (d9c99a8)
  • refactor(nodeInternals): widht and height types optional (c2644f1)
  • refactor(useZoomPanHelper): add getTransform, getZoom, rename transform to getTransform closes #1746 (b5bba7d)
  • feat(hooks): add useNodeDimensions (731918d)
  • chore(version): bump (79a32ae)
  • refactor(types): add useZoomPanHelperFunc types (5fbf3d8)
  • refactor(node): mutate select value before user changes (8710130)
  • chore(version): bump (2d4d31b)
  • refactor(wrapNode): simplify mouse handler (14b9ec4)
  • fix(child-nodes): dragging when parent is selected (2cd047b)
  • fix(subflows): handle selections correctly (801d8f2)
  • refactor(selection): only fire selection changes that changed (330eefe)
  • refactor(actions): addSelectedElements => addSelectedNodes, addSelectedEdges (d260abe)
  • feat(hooks): add useNodesState and useEdgesState (a032306)
  • refactor(examples): on connect use connection type (713e7e1)
  • fix(edges): updatable edge (62f1e90)
  • refactor(edge-renderer): cleanup (3325563)
  • refactor(edge): pass onEdgeUpdate instead of creating onConnect function (b2ac219)
  • refactor(edges): cleanup edge renderer (22f7dd6)
  • fix(zIndex): allow zIndex to be set to 0 explicitly (cffefe7)
  • chore(markers): cleanup marker api (0f48044)
  • chore(version): bump (3011efd)
  • refactor(node): disconnect resize observer on unmount (5124b6b)
  • chore(version): bump (ea76e55)
  • refactor(store): reset on unmount (2962897)
  • chore(version): bump (f775cf2)
  • refactor(nodes): only observe node when not hidden (8a095df)
  • chore(types): enforce defaultProps inside react flow component (9d159c1)
  • refactor(subgraphs): calculate z for child nodes (7ffad77)
  • feat(selection): disable pane movement when selection is dragged (004dcc6)
  • feat(flow): add properties for configuring no-interaction classes (e1f864f)
  • refactor(nodes-edges): rename isHidden to hidden (fe9c1f0)
  • refactor(nodes): only use node internals (0974aa5)
  • feat(stacking): disable auto layering, instead configure via zIndex prop (c29deca)
  • refactor(nodes-z): groups start with z=2 (f0e79c6)
  • refactor(types): cleanup (8a2ac1e)
  • refactor(boolean-props): omit is prefix (a79e953)
  • refactor(z-level): implement new stacking logic (050bb31)
  • refactor(nodes): stacking order (df25cb3)
  • chore(example): add debug node (b0bfefe)
  • chore(release): bump next version (9057d3a)
  • fix(nested): add nested nodes example, always show nodes on top while dragging or selected (1425a43)
  • feat(nodes): add extent option (fdf2571)
  • chore(package): bump version (fefcc44)
  • refactor(store): rename nodeLookup to nodeInternals (996b1b5)
  • refactor(utils): cleanup (cc7debf)
  • refactor(graphView): add useOnLoadHandler (b4b1561)
  • refactor(connectionline): use abs pos (50250e5)
  • refactor(stlyes): use react-flow__container helper (72f1d8b)
  • refactor(nodelookup): use ref for node renderer (31ad12e)
  • fix(minimap): use abs pos (a3a9249)
  • chore(package): bump version (1db53e8)
  • Merge branch 'refactor/nested-relative' of github.com:wbkd/react-flow into refactor/nested-relative (8e97232)
  • refactor(nodelookup): use as normale store item (5547b0d)
  • bump next version (2bcb099)
  • feat(stacking): simplify zIndex and treeLevel behaviour (1b390e1)
  • wip: multiple edge renderers (79e46d9)
  • refactor(nodelookup): add treelevel (7333873)
  • refactor(nodes): use relative positions for children (248b563)
  • refactor(wrapNode): call update dim when node is not initialized (8cd969d)
  • chore(examples): add layouting with new api (65991de)
  • refactor(wrapNode): call updateNodeDim when target or source pos changes (6e3ff4e)
  • refactor(node): pass width and height dep to style memo (74e8605)
  • chore(package.json): release 10.0.0-next.6 (3f992db)
  • feat(nested-nodes): simplify nested node rendering (241f604)
  • Merge branch 'nested-nodes-flat' of github.com:wbkd/react-flow into nested-nodes-flat (3e0b673)
  • feat(noderenderer): convert from flat to nested format internally (5f9bc2e)
  • refactor(node-renderer): do not mutate node styles (e8d2600)
  • fix(hooks/keypress): check if document is defined (c42ba1f)
  • feat(nested-nodes): callback for parent node size change (dc36ebf)
  • feat(noderenderer): render nodes recursively (8b95cd7)
  • feat(nested-nodes): recursively get children of moved node (c1d5c35)
  • feat(nested-nodes): change data structure to flat array of nodes (2252ea1)
  • refactor(edgerenderer): cleanup edge utils (64239fb)
  • fix(nested-nodes): fix getSourceTargetNode for childNodes (b15d301)
  • chore(graph-utils): rename elements to edges (b008c7b)
  • Merge branch 'nested-nodes' of github.com:wbkd/react-flow into nested-nodes (8d840b5)
  • feat(nodes): add helper functions to iterate over child nodes (9ad894d)
  • refactor(hooks): add useVisibleNodes and useVisibleEdges (8f23321)
  • refactor(nested-nodes): zIndex (450cb90)
  • fix(perf): improve flattenNodes (9350884)
  • feat(noderenderer): render child nodes (767fbd4)
  • Merge branch 'v10' into refactor/nodes-edges-state (a0b8aa6)
  • chore(examples): add old api examples (f957462)
  • Merge pull request #1587 from wbkd/feat-markers (11ff5ec)
  • refactor(elements): render only visible elements (1525af3)
  • refactor(state): separate nodes and edges (410b129)
  • feat(markers): bump next version (dc5172e)
  • feat(markers): add option to control orientation of markers (b08809d)
  • feat(markers): add more properties for custom markers (1b73c8f)
  • feat(markers): implement more generic api for markerEnd and markerStart handling (d3b1148)
  • Merge branch 'main' into v10 (eed5717)
  • refactor(store): cleanup (3dc7927)
  • refactor(zustand): use shallow when needed (1f41cc0)
  • refactor(graphview): use one hook (3f8c252)
  • refactor(state): replace redux with zustand (ee0d290)
  • refactor(examples): hide old api examples (e01249a)
  • refactor(elements): split into nodes and edges (32ee964)
  • Refactor: add possibility to use different keys or combinations as a key code (#1554) (be3b451)