@vue-flow/core
1.22.3
Patch Changes
#1064
07387ebe
Thanks @bcakmakoglu! - fix smooth step edge horizontally or vertically aligned nodes#1082
e3cc6ddf
Thanks @bcakmakoglu! - Fix scroll speed when using Control btn on windows#1081
0d36d4cd
Thanks @bcakmakoglu! - Use os specific key defaults (Windows -> Control, Mac -> Meta)#1065
05821407
Thanks @bcakmakoglu! - Add roleimg
to edges if not focusable#1083
13d2e2cb
Thanks @bcakmakoglu! - Improve smoothstep edge label positioning#1082
e3cc6ddf
Thanks @bcakmakoglu! - Fix horizontal scroll on windows
1.22.2
Patch Changes
- #1055
50059483
Thanks @bcakmakoglu! - Check if viewport transform is defined before setting infromObj
action
1.22.1
Patch Changes
#1048
b230e2ab
Thanks @bcakmakoglu! - Deprecateposition
andzoom
props onFlowExportObj
and replace withviewport
#1054
543423c2
Thanks @bcakmakoglu! - ESC key press causing browser error when blur on nodeEl is called#1048
b230e2ab
Thanks @bcakmakoglu! - Wait for viewport helper when callingfromObject
action
1.22.0
Minor Changes
#1034
080d8f41
Thanks @bcakmakoglu! - DeprecategetTransform
andsetTransform
and addgetViewport
andsetViewport
instead#1034
763ea593
Thanks @bcakmakoglu! - AddhasListener
to event hook objects to check if any listeners are bound#1034
4c191dfe
Thanks @bcakmakoglu! - Return promises from viewport actions that are resolved when the transition of the action has ended#1034
5d08d68a
Thanks @bcakmakoglu! - Add flag toremoveNodes
which allows recursively removing all child nodes of a parent#1034
5d08d68a
Thanks @bcakmakoglu! - Allow passing string or{ id }
type object togetIncomers
andgetOutgoers
Patch Changes
#1034
080d8f41
Thanks @bcakmakoglu! - Do not wait for the nodes initialized hook to trigger for viewport helper to become ready#1034
5e1802ca
Thanks @bcakmakoglu! - Destroy state when the creating scope is disposed.#1034
afd1d235
Thanks @bcakmakoglu! - WatchapplyDefault
state inuseVueFlow
scope instead of component scope otherwise adding nodes/edges to the state is impossible until theVueFlow
component has mounted unless the changes handlers are explicitly bound by the user.
1.21.3
Patch Changes
#1033
8585dd53
Thanks @bcakmakoglu! - Use correct handle position as source x,y position of connection lines#1041
373a345c
Thanks @bcakmakoglu! - Abort fit view when there are no nodes to fit around#1033
8585dd53
Thanks @bcakmakoglu! - Correct source handle type to be possibly null when passing as prop to custom connection line components
1.21.2
Patch Changes
#1024
df1c5322
Thanks @bcakmakoglu! - Use flush timing when calculating node positions#1028
3e11c6f0
Thanks @bcakmakoglu! - Use noop functions instead of waiting for promise to be resolved when triggering viewport actions like fitView, setCenter etc.#1031
7fcf9c1f
Thanks @bcakmakoglu! - Pass missing handle dom node to valid handle result obj#1025
ec6765c2
Thanks @bcakmakoglu! - Fix connection line status prop type. Can be string or null.
1.21.1
Patch Changes
- #1018
c14941a1
Thanks @bcakmakoglu! - Correct nested nodes position calculation
1.21.0
Minor Changes
#988
cfd33294
Thanks @bcakmakoglu! - Expose template refs from base edge component#1013
159bc763
Thanks @bcakmakoglu! - Resolve slot templates before falling back to default node/edge components
Patch Changes
#1013
159bc763
Thanks @bcakmakoglu! - Deprecate template prop for nodes#1014
02d2dd58
Thanks @bcakmakoglu! - Clamp node extent by node dimensions to avoid node overflowing the extent by its size#988
d6d4d5c7
Thanks @bcakmakoglu! - Priotize handle below during handle lookup#988
f5cfab61
Thanks @bcakmakoglu! - Add style and ref to base edge props to avoid volar ts error
1.20.2
Patch Changes
#993
98875dd5
Thanks @bcakmakoglu! - Correct handle position calculation during lookup#994
89972a90
Thanks @bcakmakoglu! - Consider handle dimensions when calculating distance#993
3585c473
Thanks @bcakmakoglu! - Trigger connect if connection end handle is stored in state#981
e68c1700
Thanks @bcakmakoglu! - Set interaction edge (invisible overlay path) to no animation to avoid breaking pointer on hover#993
9ca41aa0
Thanks @bcakmakoglu! - Use isValidHandle with null as closest handle when none can be found#992
4539f698
Thanks @bcakmakoglu! - Fix connection line path calculation#993
9ca41aa0
Thanks @bcakmakoglu! - Reset connection end handle state on connection end#976
0686bb5e
Thanks @bcakmakoglu! - Wrap each edge element in a separate svg container to allow changing z-index of edges without causing a re-render on all of them.
1.20.1
Patch Changes
#943
22b53569
Thanks @bcakmakoglu! - Fetch current node in drag handler, fixes drag handler using outdated node obj when it has been overwritten#961
2f75b31c
Thanks @bcakmakoglu! - Avoid inserting invalid nodes into state and throw error msg if invalid node is passed#956
90e4cf99
Thanks @bcakmakoglu! - Allow passing a MaybeComputedRef type asisValidConnection
arg foruseHandle
composable#954
402da363
Thanks @bcakmakoglu! - Use all handles in connection radius and select closest one that is valid#951
b81069e5
Thanks @bcakmakoglu! - Set default viewport type as partial
1.20.0
Minor Changes
#931
ecb9b540
Thanks @github-actions! - Addparent
class name to parent nodes#931
2e0484b7
Thanks @github-actions! - Allow passing a single element toremoveNodes
andremoveEdges
actions#931
11210b4c
Thanks @github-actions! - Add id prop to BaseEdge component and pass id to the edge path#939
fc68db2d
Thanks @bcakmakoglu! - AddfromObject
function to load a graph from a flow export obj#931
0a090681
Thanks @github-actions! - Allow passing a single element toaddNodes
oraddEdges
actions#931
aef0ec51
Thanks @github-actions! - When handles are on top of each other, try to pick the one closest to center and/or one that is of type target
Patch Changes
- #941
a840e73b
Thanks @bcakmakoglu! - Do not render edges that are connected to a hidden node
1.19.4
Patch Changes
#924
f292bfd6
Thanks @bcakmakoglu! - Check if transform has changed in panBy before applying the new transform#923
caafee4e
Thanks @bcakmakoglu! - Properly reset the store state when using$reset
and retain reactivity of store state
1.19.3
Patch Changes
#916
2dec266
Thanks @bcakmakoglu! - Check if node exists during drag#910
cbb587f
Thanks @bcakmakoglu! - Emit pane mouse move event if no active selection exists#909
e823aea
Thanks @bcakmakoglu! - Return bool from panBy and use the val to check if auto-pan should be triggered#917
6c32065
Thanks @bcakmakoglu! - Prevent orphaned edge warning for edges withdeletable: false
when calculating max z-index of edges#915
2cd746a
Thanks @bcakmakoglu! - Pass selectionKeyCode ref to useKeyPress
1.19.2
Patch Changes
#899
24370a0
Thanks @bcakmakoglu! - Fix focus,focus-visible and selected styles not using proper border colors#889
56d7873
Thanks @bcakmakoglu! - Set vue flow version as regular string instead of a ref
1.19.1
Patch Changes
#883
ae7bd5a
Thanks @bcakmakoglu! - Remove defining css var in node type and use the default color of nodes as fallback for css var value#876
e3de507
Thanks @bcakmakoglu! - Set default edge options prior to setting elements so the options are applied on initial render of edges as well.
1.19.0
Minor Changes
#859
7faf36ac
Thanks @bcakmakoglu! - Allow CoordinateExtent as range for extended node extent#864
ae41b298
Thanks @bcakmakoglu! - Allow passing node ids as string array togetConnectedEdges
#856
f9b17f2a
Thanks @bcakmakoglu! - AddgetConnectedNodes
utility function#856
a937af66
Thanks @bcakmakoglu! - Allow passing undefined as id tofindNode
&findEdge
#859
4abd2919
Thanks @bcakmakoglu! - Allow passing plain number as padding for extent range#862
dbcbe782
Thanks @bcakmakoglu! - AddToGraphNode
andToGraphEdge
utility types
Patch Changes
#863
c3991c75
Thanks @bcakmakoglu! - Allow passing regular edge type togetConnectedEdges
#862
dbcbe782
Thanks @bcakmakoglu! - Add missingType
generic to node types#860
cc158716
Thanks @bcakmakoglu! - Limit auto-pan when dragging a node by translate extent, so nodes cannot be dragged infinitely into the background.#862
dbcbe782
Thanks @bcakmakoglu! - Deprecate class and style funcs for node/edge types#862
dbcbe782
Thanks @bcakmakoglu! - Add missingType
generic to edge types#865
9ce7bdc4
Thanks @bcakmakoglu! - Addexports
field to package.json
1.18.2
Patch Changes
- #852
8f537196
Thanks @bcakmakoglu! - Set handle connectable prop toundefined
as it's default value
1.18.1
Patch Changes
#847
eee41ece
Thanks @bcakmakoglu! - Use connectionClickStartHandle for click connect#847
25145030
Thanks @bcakmakoglu! - Remove duplicate event bindings from handle#843
6320e5e7
Thanks @bcakmakoglu! - Add noPanClassName to handles#844
6978468d
Thanks @bcakmakoglu! - Allow null values to be set for key codes#843
6320e5e7
Thanks @bcakmakoglu! - Use fallback for connectableStart and connectableEnd
1.18.0
Minor Changes
#801
74c64ff3
Thanks @github-actions! - AddclickConnectStart
andclickConnectEnd
events#801
fb888b5f
Thanks @github-actions! - Add type to edge updater anchor class#801
3cc8827c
Thanks @github-actions! - AddconnectableStart
andconnectableEnd
handle props. Can be used to enable/disable starting or ending a connection on a specific handle.#840
34b5b7d2
Thanks @bcakmakoglu! - Add connection start and end handles to store state#801
ae41dfac
Thanks @github-actions! - Do not remove orphaned edges from state. They will not be rendered but stay in the state, so a user can potentially fix the edge.
1.17.6
Patch Changes
#833
02125c1
Thanks @bcakmakoglu! - Prevent flickering of graph by hiding transformation pane until next frame#835
58d75b0
Thanks @bcakmakoglu! - Reset node and edge state before the rest of the state when calling$reset
to avoid throwing error
1.17.5
Patch Changes
#825
50f1dff
Thanks @bcakmakoglu! - Prevent handles with connectablefalse
from being considered valid handles#826
95dd1ae
Thanks @bcakmakoglu! - UnwrapnodesConnectable
ref in onClick handler of handles#828
184c273
Thanks @bcakmakoglu! - Fix edges and connection line paths not matching up
1.17.4
Patch Changes
ffc2d17
Thanks @bcakmakoglu! - Fix incorrect type export paths
1.17.3
Patch Changes
- #815
15cc769
Thanks @bcakmakoglu! - Fix object assign order when parsing node and edge obj
1.17.2
Patch Changes
- #810
3c06fdfb
Thanks @bcakmakoglu! - Make wheel and touchstart event listeners passive to avoid warnings
1.17.1
Patch Changes
#799
b1e92195
Thanks @bcakmakoglu! - Add missing emit definition forerror
#796
54ea8a0d
Thanks @bcakmakoglu! - Fix return type ofgetIncomers
&getOutgoers
#793
c67e9391
Thanks @bcakmakoglu! - Check if node handle bounds exist ingetNodesInitialized
#793
ef1c48ce
Thanks @bcakmakoglu! - Use visible nodes to check ifonNodesInitialized
should be triggered
1.17.0
Minor Changes
#785
7667aa60
Thanks @bcakmakoglu! - Allow passing objects with onlyid
togetConnectedEdges
nodes arg#781
ad8c7897
Thanks @bcakmakoglu! - AddonError
hook which allows handling vue flow errors by users. Will default to console.warn if no handler is passed
Patch Changes
- #783
b864c436
Thanks @bcakmakoglu! - Removestop
fromEdgeRenderer
as watcher has been removed and stop refers towindow.stop
which causes requests to be cancelled when VueFlow is unmounted
1.16.5
Patch Changes
#780
cdaf1e99
Thanks @bcakmakoglu! - UseObject.assign
when parsing node to avoid mutating the original object.#770
f88faac7
Thanks @bcakmakoglu! - Fix non-passive wheel event listener violation
1.16.4
Patch Changes
#765
12c84a80
Thanks @bcakmakoglu! - Unwrap refs in node wrapper#765
12c84a80
Thanks @bcakmakoglu! - RenameparentNode
prop for custom nodes toparent
to avoid TypeError which occurs asdiv
already hasparentNode
defined which cannot be overwritten
1.16.3
Patch Changes
#756
47b03e75
Thanks @bcakmakoglu! - Add missing source and target position values onGraphEdge
type objects if available#759
35b0a0ac
Thanks @bcakmakoglu! - Use render fn for node wrapper. Fixes props being hyphanated instead of camelcase when passed to custom components.
1.16.2
Patch Changes
#751
060202db
Thanks @bcakmakoglu! - Use computed properties for edge class and style props#750
e799cf6e
Thanks @bcakmakoglu! - Correct check if valid connection func was passed
1.16.1
Patch Changes
- #746
73a2b168
Thanks @bcakmakoglu! - Downgrade unplugin-auto-import to fix vue types issue
1.16.0
Minor Changes
#745
01e91b68
Thanks @bcakmakoglu! - Add handle validation result into store state#744
1bc50add
Thanks @bcakmakoglu! - Pass targetNode and targetHandle as props to custom connection lines#740
a3ded51f
Thanks @bcakmakoglu! - Exportclamp
utility#745
01e91b68
Thanks @bcakmakoglu! - AddisValidConnection
prop to allow for validating edge updates or use a global validator for all handles
Patch Changes
- #740
a3ded51f
Thanks @bcakmakoglu! - Force update node dimensions when ResizeObserver callback is triggered
1.15.5
Patch Changes
#734
123ad512
Thanks @bcakmakoglu! - Check if handle is connectable before trying to validate#737
f2b3cd87
Thanks @bcakmakoglu! - Blur node element after unselecting
1.15.4
Patch Changes
- #728
6b149ca6
Thanks @bcakmakoglu! - Compare internal node dimensions against calculated ones when trying to update node dimensions
1.15.3
Patch Changes
#720
bac0d735
Thanks @bcakmakoglu! - Remove duplicate connectStart and connectEnd emits#719
18b934eb
Thanks @bcakmakoglu! - prevent selecting nodes when node selectable is false#719
a4b0b6b7
Thanks @bcakmakoglu! - Make shouldReplaceId arg in updateEdge optional#719
7a2f1c3b
Thanks @bcakmakoglu! - Add noPanClassName when node is draggable#719
16bd9152
Thanks @bcakmakoglu! - Wait until all nodes are initialized before triggering viewport actions
1.15.2
Patch Changes
#716
1685827d
Thanks @bcakmakoglu! - Fix umd pkg names and use the correct vue flow core umd pkg name in plugins#713
95b51a0e
Thanks @bcakmakoglu! - Prevent undefined being passed to updateNodeInternals#712
76256439
Thanks @bcakmakoglu! - Fix resize-observer throwing when node el doesn't exist but effect is run#707
e8c383ff
Thanks @bcakmakoglu! - Fix nodes not using zIndex option#716
1685827d
Thanks @bcakmakoglu! - Prevent writingp
into umd buildrocess.env #714
1fa4ee1b
Thanks @bcakmakoglu! - Wait until viewport helper is initialized before triggering viewport functions and pane ready event
1.15.1
Patch Changes
#704
b3462f2
Thanks @bcakmakoglu! - Remove export ofSelectionPane
as the component doesn't exist anymore#703
0838d2c
Thanks @bcakmakoglu! - Downgrade auto imports. Fixes broken type imports.
1.15.0
Minor Changes
#684
a788cc0
Thanks @bcakmakoglu! - Add option to enable/disable replacing edge id whenupdateEdge
action is used#699
c1a7995
Thanks @bcakmakoglu! - Omit internal properties when usingtoObject
Patch Changes
#667
231271a
Thanks @bcakmakoglu! - Prevent layout shift on initial render by hiding viewport until initial nodes have width/height#667
89198bd
Thanks @bcakmakoglu! - Remove Promises from viewport helper functions, will not await viewport anymore but instead return no-op functions if called too early#695
616e795
Thanks @bcakmakoglu! - Use snapGrid values to clamp initial node positions
1.14.3
Patch Changes
#671
c47bc5ce
Thanks @bcakmakoglu! - Fit view on init is now triggered as soon as node dimensions are updated for the first time#682
b08cb4d4
Thanks @bcakmakoglu! - Add compat mode to components to avoid breaking when used with @vue/compat03edd46c
Thanks @bcakmakoglu! - Allow depr. connectionLineType to be null03edd46c
Thanks @bcakmakoglu! - Add missing straight type to connection line options#680
70ae3410
Thanks @bcakmakoglu! - Fix connections for handles that are bigger than the specified connection radius#680
70ae3410
Thanks @bcakmakoglu! - Always emit edge update event03edd46c
Thanks @bcakmakoglu! - Fix connection line not rendering properly when destructuring slot props#681
d73995aa
Thanks @bcakmakoglu! - Setuser-select: none
for edge labels#668
d39c63e5
Thanks @bcakmakoglu! - Avoid re-rendering edges that have been deleted
1.14.2
Patch Changes
#663
05a3e26e
Thanks @bcakmakoglu! - Avoid triggering edge update when mouse button is not left#658
b8ad4458
Thanks @bcakmakoglu! - WhenincludeHiddenNodes
is false, exclude hidden nodes when using fitView#660
0dbabfc5
Thanks @bcakmakoglu! - Use default values when defaultViewport vals are missing
1.14.1
Patch Changes
#655
3d958dfe
Thanks @bcakmakoglu! - Check if prev closest handle exists in pointer up handler#656
b3796a66
Thanks @bcakmakoglu! - Store connectionStatus when using connection actions
1.14.0
Minor Changes
#654
99909f16
Thanks @bcakmakoglu! - AddVueFlowError
class which is used when throwing#649
47bc8280
Thanks @bcakmakoglu! - AddconnectionStatus
to connection lines, which can be used to check if the connection line is used on a valid handle.
Patch Changes
#650
aaf46dc2
Thanks @bcakmakoglu! - Addvalid
andconnecting
class names instead ofvue-flow__handle-valid
andvue-flow__handle-connecting
(old class names kept for backwards compatibility but will be removed in the future)#653
64e9dc3c
Thanks @bcakmakoglu! - Draw connection lines to opposite position#651
c0d172be
Thanks @bcakmakoglu! - When a node is not draggable, avoid dragging it when using a selection box#650
aaf46dc2
Thanks @bcakmakoglu! - Fix ios connection error
1.13.2
Patch Changes
- #643
210b702b
Thanks @bcakmakoglu! - Properly access default edge options ref when passing options to theconnect
event
1.13.1
Patch Changes
- #641
f5eaa4cc
Thanks @bcakmakoglu! - Pass missing valid connection function params
1.13.0
Minor Changes
#639
ad2b09f1
Thanks @bcakmakoglu! - Allow settingGraphNode
orGraphEdge
type with a generic type#629
c7cfcec7
Thanks @bcakmakoglu! - AddconnectionRadius
option to global options and handle props. You can use this option to set the radius at which a connection line will snap to the closest available handle.#613
7abd0bfd
Thanks @bcakmakoglu! - Export edge center utilsgetSimpleEdgeCenter
&getBezierEdgeCenter
from core#634
b59dd6a7
Thanks @bcakmakoglu! - Add autopan options. Pans viewport on node drag and/or when drawing a connection line.Usage
tsuseVueFlow({ autoPanOnNodeDrag: true, autoPanOnConnect: true, });
vue<VueFlow v-model="elements" :autoPanOnNodeDrag="true" :autoPanOnConnect="true" />
#636
e1628ec6
Thanks @bcakmakoglu! - ExportisGraphNode
andisGraphEdge
typeguards
Patch Changes
- #634
b59dd6a7
Thanks @bcakmakoglu! - Throw warning if viewport dimensions are 0
1.12.7
Patch Changes
- #627
19360c52
Thanks @bcakmakoglu! - Hide node selection box when no selected nodes exist
1.12.6
Patch Changes
#624
0bddb524
Thanks @bcakmakoglu! - Add warning when trying to duplicate an element or remove an element that does not exist#626
449a3f2a
Thanks @bcakmakoglu! - Removeextent
option fromsetNodes
&addNodes
action. Extent should be passed to a node or set with the global option.#626
449a3f2a
Thanks @bcakmakoglu! - Use computed var to get current node inuseDrag
. Fixes issue where overwriting a node breaks drag handler.
1.12.5
Patch Changes
#622
512eb176
Thanks @bcakmakoglu! - If node extent is set to parent, wait until node is initialized to clamp position#622
512eb176
Thanks @bcakmakoglu! - Regroup edges when nodes change and elevate edges on select is active#622
d79e2a42
Thanks @bcakmakoglu! - Wait for parent node to be initialized before applying an initial expansion of the parent node#622
73de601f
Thanks @bcakmakoglu! - Pass initialized nodes in theonNodesInitialized
hook
1.12.4
Patch Changes
#619
3d482b77
Thanks @bcakmakoglu! - Use timeout when clamping positions after nodes' extent has changed#618
f1975ea7
Thanks @bcakmakoglu! - Do not trigger ctx menu event on viewport when dragging with right mouse button
1.12.3
Patch Changes
#616
b16e3564
Thanks @bcakmakoglu! - Upgrade to vite 4 & update deps#615
d8fe5432
Thanks @bcakmakoglu! - Support key combinations for keycodes. Combinations can be passed using an array of keycodes and concatenated with a plus sign. For example:['A+B']
will trigger when A and B are pressed at the same time.#614
580de340
Thanks @bcakmakoglu! - Keep user selection on right click
1.12.2
Patch Changes
#610
01040099
Thanks @bcakmakoglu! - Always handle keyup events, instead of cancelling when focusing an input dom node#611
8dbdcae2
Thanks @bcakmakoglu! - Check if position is a number when updating, instead of checking if the value is truthy. Fixes 0 values not being used when updating.
1.12.1
Patch Changes
#607
45851080
Thanks @bcakmakoglu! - Place default slot content outside of viewport element#605
e670f465
Thanks @bcakmakoglu! - Let keydown event bubble up from node wrapper instead of preventing default
1.12.0
Minor Changes
- #600
072fd911
Thanks @bcakmakoglu! - AddzIndex
option to nodes and edges. Allows defining stacking order of elements.
1.11.1
Patch Changes
- #597
749175b9
Thanks @bcakmakoglu! - Addfocus
andfocus-visible
styles to avoid browser specific styles on default nodes
1.11.0
Minor Changes
- #595
0c784a2
Thanks @bcakmakoglu! - Adddeletable
option to nodes and edges. If set to false it will prevent nodes and edges to be removed whenremoveNodes
orremoveEdges
is triggered
Patch Changes
#593
da65c54
Thanks @bcakmakoglu! - Prevent elements that have selectable disabled from being selected#590
89d2415
Thanks @bcakmakoglu! - Skip updating positions whenupdateNodeInternals
is triggered - it will only update node dimensions (which can trigger a position update)#590
72f9f1a
Thanks @bcakmakoglu! - Use flush timingpre
for NodeWrapper watchers
1.10.3
Patch Changes
- #586
c0f31a2
Thanks @bcakmakoglu! - Check if element is still in state before attempting removal when applying removal changes
1.10.2
Patch Changes
#584
17cd5bc
Thanks @bcakmakoglu! - Set initial node position correctly after applying node extent#583
0c25796
Thanks @bcakmakoglu! - Fix type exports using path alias instead of relative paths, which causes types to not be inferred on user-side
1.10.1
Patch Changes
- #581
ea5c35e
Thanks @bcakmakoglu! - Re-calculate position when node extent changes
1.10.0
Minor Changes
#579
b8d3241
Thanks @bcakmakoglu! - Allow settingpadding
option fornode.extent: 'parent'
Padding can be a
number[]
containing a maximum of 4 values. The values are applied in the same order as CSS padding: top, right, bottom, left. You can omit values at the end of the array, so[10, 20]
is equivalent to[10, 20, 10, 20]
etc.Usage
jsconst nodes = ref([ { id: "4", label: "Node 4", position: { x: 320, y: 200 }, style: { backgroundColor: "rgba(255, 0, 0, 0.7)", width: "300px", height: "300px", }, }, { id: "4a", label: "Node 4a", position: { x: 15, y: 65 }, class: "light", extent: { range: "parent", // apply 10 px padding to all four sides padding: [10], }, parentNode: "4", }, ]);
Patch Changes
- #578
c0d9018
Thanks @bcakmakoglu! - Allow omitting width and height style properties for parent nodes when usingexpandParent
on child nodes
1.9.4
Patch Changes
#574
1160d3d
Thanks @bcakmakoglu! - Fix props being undefined on first render of custom node and edge components#574
1160d3d
Thanks @bcakmakoglu! - Removenodes
property fromConnectionLineProps
- usegetNodes
inside the component instead ⚠️
1.9.3
Patch Changes
5402c0e
Thanks @bcakmakoglu! - Use correct aria live class names for vue-flow
1.9.2
Patch Changes
- #566
b324a06
Thanks @bcakmakoglu! - Fix edge component prop types
1.9.1
Patch Changes
- #561
2979feb
Thanks @bcakmakoglu! - Fix slots type regression
1.9.0
Minor Changes
#557
c7897a1
Thanks @bcakmakoglu! - Allow customizing the controls of the viewport and the selection box.Props
selectionKeyCode
: You can now set this toMaybeRef<boolean>
to enable a selection box without extra button press (need to set:pan-on-drag="false"
or:pan-on-drag="[2]"
[RightClick]).panOnDrag
: Can now be a boolean or a number[], this allows you to configure every mouse button as a drag button. [1, 2] would mean that you can drag via middle and right mouse button.panActivationKeyCode
: Key code (or KeyFilter) for activating dragging (useful when using selectionOnDrag).selectionMode
: You can choose if the selection box needs to contain a node fully (SelectionMode.Full
) or partially (SelectionMode.Partial
) to select.
Events
onSelectionStart
: Emitted when the selection box is started.onSelectionEnd
: Emitted when the selection box is ended.onViewportChangeStart
: Emitted when viewport change has started.onViewportChange
: Emitted when viewport is changed.onViewportChangeEnd
: Emitted when viewport change has ended.
Patch Changes
#558
bac9893
Thanks @bcakmakoglu! - ⚠️ Deprecate options API utilsaddEdge
andupdateEdge
. These utils will be removed soon!Resolve deprecation warnings
Instead of using these utils, use
addEdges
andupdateEdge
found on the VueFlow store instance. You receive a store instance by using either a template-ref or listening to theonPaneReady
event.Example
vue<script> import { VueFlow } from "@vue-flow/core"; export default defineComponent({ name: "OptionsAPIExample", components: { VueFlow }, data() { return { vueFlow: null, instance: null, elements: [ { id: "1", type: "input", label: "Node 1", position: { x: 250, y: 5 }, class: "light", }, { id: "2", label: "Node 2", position: { x: 100, y: 100 }, class: "light", }, { id: "3", label: "Node 3", position: { x: 400, y: 100 }, class: "light", }, { id: "4", label: "Node 4", position: { x: 400, y: 200 }, class: "light", }, { id: "e1-2", source: "1", target: "2", animated: true }, { id: "e1-3", source: "1", target: "3" }, ], }; }, methods: { // You can listen to `onPaneReady` to get the instance onPaneReady(instance) { instance.fitView(); this.instance = instance; }, onConnect(params) { // either use the instance you have saved in `onPaneReady` this.instance?.addEdges([params]); // or use the template-ref this.$refs.vueFlow?.addEdges([params]); }, }, }); </script> <template> <VueFlow v-model="elements" ref="vueFlow" class="vue-flow-basic-example" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4" :zoom-on-scroll="false" @connect="onConnect" @pane-ready="onPaneReady" /> </template>
#557
c7897a1
Thanks @bcakmakoglu! - Add a11y support to selection box
1.8.0
Minor Changes
#544
cf46cc8
Thanks @bcakmakoglu! - Add keyboard controls to node wrapper (a11y)#554
9e7f65a
Thanks @bcakmakoglu! - MergedefaultZoom
&defaultPosition
intodefaultViewport
object#544
2341b9b
Thanks @bcakmakoglu! - AdddisableKeyboardA11y
option to VueFlow props and store options#544
2341b9b
Thanks @bcakmakoglu! - Addfocusable
option to edge types#544
2341b9b
Thanks @bcakmakoglu! - AddariaLabel
option to edge type#544
2341b9b
Thanks @bcakmakoglu! - AddedgesFocusable
option to store#544
cf46cc8
Thanks @bcakmakoglu! - AddnodesFocusable
option to VueFlow props and store options#544
2341b9b
Thanks @bcakmakoglu! - AddpathOptions
to Bezier and Smoothstep edge types
Patch Changes
#544
cf46cc8
Thanks @bcakmakoglu! - AddariaLabel
option to node type#554
545ab07
Thanks @bcakmakoglu! - Clamp invalid zoom values#556
699d786
Thanks @bcakmakoglu! - PreventexpandParent
option from changing parent nodes position while expanding#553
cd4e056
Thanks @bcakmakoglu! - Renameviewpane
toviewport
->ViewpaneTransform
nowViewportTransform
#544
cf46cc8
Thanks @bcakmakoglu! - Addfocusable
option to node type#544
2341b9b
Thanks @bcakmakoglu! - AddvueFlowId
togetMarkerId
to uniquely identify markers across multiple vue flow instances#544
2341b9b
Thanks @bcakmakoglu! - UpdateEdgeRef
injection type toSVGElement
A11y
This release brings A11y support to Vue Flow. All nodes and edges can now receive a focusable
and ariaLabel
prop, which can be used to enhance A11y experience. You can also enable focusable globally by using nodesFocusable
or edgesFocusable
. Additionally, nodes can be moved using keyboard controls (Arrow-Keys).
Props
disableKeyboardA11y
: Use this prop to disable Keyboard controls on the graph.defaultViewport
: The olddefaultZoom
anddefaultPosition
props have been merged into a single object calleddefaultViewport
.nodesFocusable
: Globally enable that nodes can be focused.edgesFocusable
: Globally enable that edges can be focused.
Elements
focusable
: Enable focusing for a single node/edge by setting this option.ariaLabel
: Specify an aria label for a node/edge
1.7.2
Patch Changes
#547
ccf10ff
Thanks @bcakmakoglu! - Make label coords (x,y) optional in BaseEdge#551
2f187a0
Thanks @bcakmakoglu! - Fix input field focus inside nodes preventing selection rect to be created#550
b734d08
Thanks @bcakmakoglu! - AddelevateNodesOnSelect
option to enable/disable increasing z-index of selected nodes#548
011f0ed
Thanks @bcakmakoglu! - Re-group edges by z-index on edge selection changes
1.7.1
Patch Changes
#545
54c93b9
Thanks @bcakmakoglu! - Remove immediate watch of VueFlow props and set prop values via state initalizer#545
54c93b9
Thanks @bcakmakoglu! - Only trigger store watcher immediate when elements were set, otherwise wait for changes in store to overwrite model-value
1.7.0
Minor Changes
- #539
85d5a64d
Thanks @bcakmakoglu! - AddgetNodesInitialized
getter to store
Patch Changes
#539
85d5a64d
Thanks @bcakmakoglu! - MakesourceHandle
andtargetHandle
optional properties forConnection
type#542
530f286c
Thanks @bcakmakoglu! - Move watcher timing topre
and sync immediately
1.6.4
Patch Changes
#536
fc231bec
Thanks @bcakmakoglu! - Fix watcher not triggered when passing an empty array#537
4ec39fb0
Thanks @bcakmakoglu! - Fix node resizer resizing not updating handle bounds
1.6.3
Patch Changes
#534
f0f7e7e4
Thanks @bcakmakoglu! - Add missing edge class to edge wrapper#534
02c945e8
Thanks @bcakmakoglu! - Pass attributes to edge components (i.e. style and class forwarded to BaseEdge)#532
cd778715
Thanks @bcakmakoglu! - Usevue-flow__handle
in handle bounds selector to avoid selecting elements with thesource
ortarget
class names that aren't handles
1.6.2
Patch Changes
#529
92fe1022
Thanks @bcakmakoglu! - Fix store watcher not being triggered whenaddNodes
oraddEdges
is called#530
262bc42b
Thanks @bcakmakoglu! - Remove forced update on resize observer trigger of updateNodeDimensions
1.6.1
Patch Changes
#525
eae81603
Thanks @bcakmakoglu! - Addinitialized
prop toGraphNode
#525
eae81603
Thanks @bcakmakoglu! - Fix Handle component adding duplicate handlebounds when node is not properly initialized#526
00a9795a
Thanks @bcakmakoglu! - Remove console log
1.6.0
Minor Changes
#498
1739797c
Thanks @bcakmakoglu! - AdduseGetPointerPosition
composable#519
306cd3da
Thanks @bcakmakoglu! - Move Panel component to core package
Patch Changes
#498
1739797c
Thanks @bcakmakoglu! - Makedragging
flag optional in position change type#498
1739797c
Thanks @bcakmakoglu! - Make dimensions optional in dimensions change type#521
f50644ff
Thanks @bcakmakoglu! - Remove Controls component styles from default theme#498
1739797c
Thanks @bcakmakoglu! - Adddragging
,selected
andresizing
flags toGraphNode
type#498
1739797c
Thanks @bcakmakoglu! - Allow multiple changes to be applied to element at once#519
e5829e8d
Thanks @bcakmakoglu! - Remove minimap styles from core package default-theme
1.5.11
Patch Changes
#517
440186d2
Thanks @bcakmakoglu! - Add missingdragging
prop toGraphNode
type#515
639245b1
Thanks @bcakmakoglu! - Remove console log from watcher
1.5.10
Patch Changes
1a4a2a62
Thanks @bcakmakoglu! - Add missing dragging flag (release failed)
1.5.9
Patch Changes
ac8c2573
Thanks @bcakmakoglu! - Add missing dragging flag to nodes
1.5.8
Patch Changes
#509
5b748a66
Thanks @bcakmakoglu! - Fix handle prop connectable always falling back to true, even when explicitly set to false#511
88b0e34c
Thanks @bcakmakoglu! - Prevent store watcher from being stopped on cleanup of model watcher
1.5.7
Patch Changes
#501
ccff5b8b
Thanks @bcakmakoglu! - Fix watcher not triggering with theonMounted
hook#506
7abc3956
Thanks @bcakmakoglu! - Child nodes not properly using parent dimensions when extent is set toparent
1.5.6
Patch Changes
#497
50e59604
Thanks @bcakmakoglu! - Separate store and model watchers from each other and allow them to be triggered after init#496
1ca8c2a9
Thanks @bcakmakoglu! - Make nodes and edges deeply reactive objects, so that data changes can trigger v-model changes as well
1.5.5
Patch Changes
#494
50a24e4
Thanks @bcakmakoglu! - Apply translateExtent on pan#492
715a070
Thanks @bcakmakoglu! - Properly calculate node extent on drag#491
47ad11d
Thanks @bcakmakoglu! - Set dragging flag only if a position change happened
1.5.4
Patch Changes
#486
912da4d
Thanks @bcakmakoglu! - Prevent valid connections on same node and same handle#485
7ba6215
Thanks @bcakmakoglu! - Allow middle mouse pan over edges#481
aed0845
Thanks @bcakmakoglu! - AddHandleConnectableFunc
type#483
9326c58
Thanks @bcakmakoglu! - Remove barrel files and use auto-imports instead (internal change)#479
c673b04
Thanks @bcakmakoglu! - TypemarkerEnd
andmarkerStart
inEdgeProps
1.5.3
Patch Changes
- #474
9568794
Thanks @bcakmakoglu! - Fix untyped connection line, node and edge slots props by patching type definition after build
1.5.2
Patch Changes
#466
051dcc4
Thanks @bcakmakoglu! - usereactive
instead ofshallowReactive
for nested node/edge properties#462
7dfceb2
Thanks @bcakmakoglu! - Fix model watcher overwriting empty state when setting elementonMounted
hook#465
c56ee5a
Thanks @bcakmakoglu! - Allownull
as key-code
1.5.1
Patch Changes
#459
649bdb9
Thanks @bcakmakoglu! - Add nullish check for node/edge events object to prevent err if undefined#454
fc15fa3
Thanks @bcakmakoglu! - Update model-value regardless of element arr length
1.5.0
Minor Changes
#435
1cca3d0
Thanks @bcakmakoglu! - Addconnecting
class toSelectionPane
when connecting#451
6047b90
Thanks @bcakmakoglu! - Support touch for creating connections#449
686b351
Thanks @bcakmakoglu! - Add experimental support for nested Vue Flow components; Align edges by adding parent flow zoom scale. Connections not supported.
Patch Changes
#452
5303f10
Thanks @bcakmakoglu! - Fix parent expand not working for top/left drag#449
686b351
Thanks @bcakmakoglu! - AddexperimentalFeatures
flag to store
1.4.2
Patch Changes
#439
817884e
Thanks @bcakmakoglu! - Elevate selected nodes zIndex by 1000 instead to 1000#448
3a09339
Thanks @bcakmakoglu! - Elevate child nodes by zIndex +1#447
06fc9f2
Thanks @bcakmakoglu! - Fix initial node extent not applied
1.4.1
Patch Changes
#425
da0a294
Thanks @bcakmakoglu! - Update deps#434
b24b9ef
Thanks @bcakmakoglu! - Fix improper if clause when checking for selection key code as bool#429
1fc60bf
Thanks @bcakmakoglu! - When Connection Mode isLoose
, use all handles as possible source handles for connection lines#433
d82cb67
Thanks @bcakmakoglu! - Add missingconnectionExists
utility export
1.4.0
Minor Changes
- #360
a11edae
Thanks @bcakmakoglu! - AddinteractionWidth
prop to edges. Sets radius of pointer interactivity for edges
1.3.3
Patch Changes
- #412
630434d
Thanks @bcakmakoglu! - Use node name as class name
1.3.2
Patch Changes
#407
2874cd9
Thanks @bcakmakoglu! - Prevent default edge options overwriting actual edge values#407
7908e02
Thanks @bcakmakoglu! - Fall back to default edge or node type if custom type cannot be resolved#389
6e0dd5b
Thanks @bcakmakoglu! - Place Vue Flow Container in it's own stacking context
1.3.1
Patch Changes
#402
d7ade98
Thanks @bcakmakoglu! - Useevent.composedPath
as event target when checking for input dom nodes#403
8930d2e
Thanks @bcakmakoglu! - Stop reset of user-selection rect on mouse leave event#398
43953c9
Thanks @bcakmakoglu! - Upgrade to vite 3
1.3.0
Minor Changes
#394
1403b65
Thanks @bcakmakoglu! - AddnodesInitialized
event hook#387
9530290
Thanks @bcakmakoglu! - Pass node intersections to node drag events (on single node drag)#387
a19b458
Thanks @bcakmakoglu! - Add intersection utils to help with checking if a node intersects with either other nodes or a given areaUsage
- You can either use the action
getIntersectingNodes
to find all nodes that intersect with a given node
jsconst { onNodeDrag, getIntersectingNodes, getNodes } = useVueFlow(); onNodeDrag(({ node }) => { const intersections = getIntersectingNodes(node).map((n) => n.id); getNodes.value.forEach((n) => { // highlight nodes that are intersecting with the dragged node n.class = intersections.includes(n.id) ? "highlight" : ""; }); });
- Node drag events will provide you with the intersecting nodes without having to call the action explicitly.
jsonNodeDrag(({ intersections }) => { getNodes.value.forEach((n) => { n.class = intersections?.some((i) => i.id === n.id) ? "highlight" : ""; }); });
- Or you can use the
isIntersecting
util to check if a node intersects with a given area
jsconst { onNodeDrag, isNodeIntersecting } = useVueFlow(); onNodeDrag(({ node }) => { // highlight the node if it is intersecting with the given area node.class = isNodeIntersecting(node, { x: 0, y: 0, width: 100, height: 100, }) ? "highlight" : ""; });
- You can either use the action
#396
03412ac
Thanks @bcakmakoglu! - Add zoomable and pannable to MiniMapUsage
- Set
zoomable
andpannable
totrue
inMiniMap
component to enable interactions with the MiniMap
vue<template> <VueFlow v-model="elements"> <MiniMap :zoomable="true" :pannable="true" /> </VueFlow> </template>
- Set
Patch Changes
#361
43ff2a4
Thanks @bcakmakoglu! - AddEdgeLabelRenderer
component exportUsage
- You can use the
EdgeLabelRenderer
component to render the label of an edge outside the SVG context of edges. - The
EdgeLabelRenderer
component is a component that handles teleporting your edge label into a HTML context - This is useful if you want to use HTML elements in your edge label, like buttons
vue<script lang="ts" setup> import type { EdgeProps, Position } from "@vue-flow/core"; import { EdgeLabelRenderer, getBezierPath, useVueFlow } from "@vue-flow/core"; import type { CSSProperties } from "vue"; interface CustomEdgeProps<T = any> extends EdgeProps<T> { id: string; sourceX: number; sourceY: number; targetX: number; targetY: number; sourcePosition: Position; targetPosition: Position; data: T; markerEnd: string; style: CSSProperties; } const props = defineProps<CustomEdgeProps>(); const { removeEdges } = useVueFlow(); const path = $computed(() => getBezierPath(props)); </script> <script lang="ts"> export default { inheritAttrs: false, }; </script> <template> <path :id="id" :style="style" class="vue-flow__edge-path" :d="path[0]" :marker-end="markerEnd" /> <EdgeLabelRenderer> <div :style="{ pointerEvents: 'all', position: 'absolute', transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`, }" class="nodrag nopan" > <button class="edgebutton" @click="removeEdges([id])">×</button> </div> </EdgeLabelRenderer> </template> <style> .edgebutton { border-radius: 999px; cursor: pointer; } .edgebutton:hover { box-shadow: 0 0 0 2px pink, 0 0 0 4px #f05f75; } </style>
- You can use the
1.2.2
Patch Changes
#388
76ad5838
Thanks @bcakmakoglu! - Always set handle ids (using auto-generated id if none is passed)#388
ffe65636
Thanks @bcakmakoglu! - skip connectable for handles unrelated to connected edges#392
fcffd492
Thanks @bcakmakoglu! - Use all handles, regardless of type, when ConnectionMode isLoose
1.2.1
Patch Changes
#378
9089861c
Thanks @bcakmakoglu! - Disable user selection ifelementsSelectable
is false#378
9089861c
Thanks @bcakmakoglu! - Prevent node selection box from appearing before mouseup#380
2c3ea836
Thanks @bcakmakoglu! - Use shallowRef for node/edge data and event objects so they trigger a re-render on custom nodes/edges
1.2.0
Minor Changes
- #123
3105bd0
Thanks @bcakmakoglu! - Disable console warnings for production node-envs
1.1.4
Patch Changes
#353
8f95187
Thanks @bcakmakoglu! - Allow undefined as custom theme var value#349
61d2b88
Thanks @bcakmakoglu! - Node and Edge data and events to be definitely typed when passed as NodeProps or EdgeProps#352
bff576b
Thanks @bcakmakoglu! - Addoverflow: visible
to control btn svgs (fixes safari bug where svgs aren't showing up)#349
61d2b88
Thanks @bcakmakoglu! - Extend Elements/FlowElements generics to differentiate between Node and Edge data and custom events#349
61d2b88
Thanks @bcakmakoglu! - Add Generic to isNode and isEdge helpers#350
92a69a6
Thanks @bcakmakoglu! - Set nodes' dragging prop on drag start and end (fixes grabbing hand not showing on mousedown / not disappearing on mouseup)
1.1.3
Patch Changes
- #342
72c203e
Thanks @bcakmakoglu! - Fix edge text not calculating dimensions properly
1.1.2
Patch Changes
#337
12d9f79
Thanks @bcakmakoglu! - Add dragging class to nodes ondrag
instead ofdragStart
#341
d2ed19e
Thanks @bcakmakoglu! - Pass edge styles to edge path element949d19f
Thanks @bcakmakoglu! - Fix edge texts not properly aligning to center#333
8583e13
Thanks @bcakmakoglu! - Add missing dragging class to pane#336
1aaac25
Thanks @bcakmakoglu! - Elements not properly unselected when clicking node and edge afterwards
1.1.1
Patch Changes
#328
1e5a77d6
Thanks @bcakmakoglu! - Preventmouseup
handler from resettingstartHandle
before connections can be made when usingconnectOnClick
#328
18a812db
Thanks @bcakmakoglu! - Passingsingle
option breaksconnectable
check when no handle ids are set- Pass
connectable
to correct handle prop in default node types
- Pass
#328
a415353b
Thanks @bcakmakoglu! - Adddragging
class name to pane on drag
1.1.0
Minor Changes
#311
78f9ee1c
Thanks @bcakmakoglu! - # What's changed?- Add
HandleConnectable
type - Update
connectable
prop ofHandle
toHandleConnectable
type - Allow to specify if Handles are connectable
- any number of connections
- none
- single connection
- or a cb to determine whether the Handle is connectable
Example:
vue<script lang="ts" setup> import { Handle, HandleConnectable } from "@vue-flow/core"; const handleConnectable: HandleConnectable = (node, connectedEdges) => { console.log(node, connectedEdges); return true; }; </script> <template> <!-- single connection --> <Handle type="target" position="left" connectable="single" /> <div>Custom Node</div> <!-- cb --> <Handle id="a" position="right" :connectable="handleConnectable" /> </template>
- Update
node.connectable
prop toHandleConnectable
For Example:
jsconst nodes = ref([ { id: "1", position: { x: 0, y: 0 }, connectable: "single", // each handle is only connectable once (default node for example) }, { id: "2", position: { x: 200, y: 0 }, connectable: (node, connectedEdges) => { return true; // will allow any number of connections }, }, { id: "3", position: { x: 400, y: 0 }, connectable: true, // will allow any number of connections }, { id: "4", position: { x: 200, y: 0 }, connectable: false, // will disable handles }, ]);
- Add
Patch Changes
#311
e175cf81
Thanks @bcakmakoglu! - # What's changed?- Add
vueflow
pkg that exports all features
vue<script setup> // `vueflow` pkg exports all features, i.e. core + additional components import { VueFlow, Background, MiniMap, Controls } from "vueflow"; </script> <template> <VueFlow> <Background /> <MiniMap /> <Controls /> </VueFlow> </template>
Chores
- Rename
core
pkg directory tocore
fromvue-flow
- Rename bundle outputs
- Add
#311
e1c28a26
Thanks @bcakmakoglu! - # What's changed?- Simplify
useHandle
usage - Pass props to the composable as possible refs
- Still returns onClick & onMouseDown handlers but only expects mouse event now
Before:
vue<script lang="ts" setup> import { useHandle, NodeId } from "@vue-flow/core"; const nodeId = inject(NodeId); const handleId = "my-handle"; const type = "source"; const isValidConnection = () => true; const { onMouseDown } = useHandle(); const onMouseDownHandler = (event: MouseEvent) => { onMouseDown( event, handleId, nodeId, type === "target", isValidConnection, undefined ); }; </script> <template> <div @mousedown="onMouseDownHandler" /> </template>
After:
vue<script lang="ts" setup> import { useHandle, useNode } from "@vue-flow/core"; const { nodeId } = useNode(); const handleId = "my-handle"; const type = "source"; const isValidConnection = () => true; const { onMouseDown } = useHandle({ nodeId, handleId, isValidConnection, type, }); </script> <template> <div @mousedown="onMouseDown" /> </template>
- Simplify
#311
08ad1735
Thanks @bcakmakoglu! - # Bugfixes- Edges not returned by getter when
paneReady
event is triggered
- Edges not returned by getter when
1.0.0
Major Changes
#305
939bff50
Thanks @bcakmakoglu! - # What's changed?- Simplify edge path calculations
- remove
getEdgeCenter
andgetSimpleEdgeCenter
- remove
Breaking Changes
getEdgeCenter
has been removed- Edge center positions can now be accessed from
getBezierPath
orgetSmoothStepPath
functions
- Edge center positions can now be accessed from
Before:
jsimport { getBezierPath, getEdgeCenter } from "@braks/vue-flow"; // used to return the path string only const edgePath = computed(() => getBezierPath(pathParams)); // was necessary to get the centerX, centerY of an edge const centered = computed(() => getEdgeCenter(centerParams));
After:
jsimport { getBezierPath } from "@vue-flow/core"; // returns the path string and the center positions const [path, centerX, centerY] = computed(() => getBezierPath(pathParams));
- Simplify edge path calculations
#305
47d837aa
Thanks @bcakmakoglu! - # What's changed?- Change pkg scope from 'braks' to 'vue-flow'
- Add
@vue-flow/core
package - Add
@vue-flow/additional-components
package - Add
@vue-flow/pathfinding-edge
package - Add
@vue-flow/resize-rotate-node
package
- Add
Features
useNode
anduseEdge
composables- can be used to access current node/edge (or by id) and their respective element refs (if used inside the elements' context, i.e. a custom node/edge)
selectionKeyCode
astrue
- allows for figma style selection (i.e. create a selection rect without holding shift or any other key)
- Handles to trigger handle bounds calculation on mount
- if no handle bounds are found, a Handle will try to calculate its bounds on mount
- should remove the need for
updateNodeInternals
on dynamic handles
- Testing for various features using Cypress 10
Bugfixes
- Fix
removeSelectedEdges
andremoveSelectedNodes
actions not properly removing elements from store
Breaking Changes
@vue-flow/core
package is now required to use vue-flow@vue-flow/additional-components
package containsBackground
,MiniMap
andControls
components and related types- When switching to the new pkg scope, you need to change the import path.
Before:
jsimport { VueFlow, Background, MiniMap, Controls } from "@braks/vue-flow";
After
jsimport { VueFlow } from "@vue-flow/core"; import { Background, MiniMap, Controls, } from "@vue-flow/additional-components";
- Change pkg scope from 'braks' to 'vue-flow'