@vue-flow/core β
1.40.0 β
Minor Changes β
- #1575
7aa49f4
Thanks @bcakmakoglu! - Removenull
as possible return type of data inuseNodesData
Patch Changes β
#1586
f2ed6a3
Thanks @bcakmakoglu! - Only display grab cursor when panOnDrag is on left mouse button#1585
d7a51f8
Thanks @bcakmakoglu! - Simplify event emits definitions to avoid hitting complexity limit of TS.
1.39.3 β
Patch Changes β
- #1569
f6b394f
Thanks @bcakmakoglu! - Push into dimensions changes array instead of using index access.
1.39.2 β
Patch Changes β
- #1565
90f573a
Thanks @bcakmakoglu! - Only capture pointer when a valid selection has started
1.39.1 β
Patch Changes β
#1562
e83b1ef
Thanks @bcakmakoglu! - Check if injected vue flow state matches options id, otherwise create new state#1562
e83b1ef
Thanks @bcakmakoglu! - Prefer options id over scope id when finding vue flow internal state by id
1.39.0 β
Minor Changes β
#1542
de75620
Thanks @bcakmakoglu! - AddpaneClickDistance
option. Allows specifying the distance between mousedown and mouseup in which a click would still be registered (by default0
)#1535
1a812f3
Thanks @bcakmakoglu! - AddautoPanSpeed
prop. Allows specifying at what speed the pane moves when auto-panning via node-drag, selection-drag or connection-drag
Patch Changes β
#1536
235d564
Thanks @github-actions! - Dispatch click if drag move was attempted and threshold was not crossed, ignoring any movement that's too small to be considered a drag at all#1545
2910992
Thanks @bcakmakoglu! - Prevent callingonSelectionEnd
when clicking a selection#1543
85c8d2d
Thanks @bcakmakoglu! - Handle pointer capture for selection on drag
1.38.5 β
Patch Changes β
- #1530
e7bcca5
Thanks @bcakmakoglu! - ignore minor mouse movements when marking a node drag as aborted
1.38.4 β
Patch Changes β
- #1525
e8427cf
Thanks @bcakmakoglu! - Prevent duplicate node click event by checking if drag was actually aborted before emitting node-click
1.38.3 β
Patch Changes β
- #1522
ccca803
Thanks @bcakmakoglu! - EmitnodeClick
event when a node is dragged without exceeding the node drag threshold (i.e. no visible movement has happened)
1.38.2 β
Patch Changes β
#1517
d2ec752
Thanks @bcakmakoglu! - Usepost
flush timing to re-observe node size when toggling node visibility#1514
6a0813e
Thanks @bcakmakoglu! - Avoid re-snapping to the same handle
1.38.1 β
Patch Changes β
- #1510
4643676
Thanks @bcakmakoglu! - Correct calculation of nodes inside selection rect
1.38.0 β
Minor Changes β
#1492
f85ea42
Thanks @bcakmakoglu! - Allow passing event target touseKeyPress
#1492
f85ea42
Thanks @bcakmakoglu! - Use pointer events to capture interactions onPane
cmp and prevent selections from being cancelled when moving outside of thePane
while holding selection key#1508
005b25b
Thanks @bcakmakoglu! - Use correct end handle position in connection line component and store handle positions during connections.#1502
30c81dc
Thanks @bcakmakoglu! - Allow passing a Record<string, any> as class to node/edge objects#1502
30c81dc
Thanks @bcakmakoglu! - Allow passing an array of strings as class to node/edge objects#1492
2dff0dd
Thanks @bcakmakoglu! - MakeuseKeyPress
public and export it
Patch Changes β
#1506
45e9d03
Thanks @bcakmakoglu! - Removev-memo
from EdgeRenderer so that edges get their correct z-index applied#1494
09c32c5
Thanks @bcakmakoglu! - Calculate correct handle position in handle lookup
1.37.1 β
Patch Changes β
- #1483
6d4d2be
Thanks @bcakmakoglu! - Correct access of options id inuseVueFlow
1.37.0 β
Minor Changes β
#1481
192b154
Thanks @bcakmakoglu! - Add overloads touseVueFlow
. Allows callinguseVueFlow
with anid
string only while emitting a deprecation warning for using the options obj.#1476
1b38c3f
Thanks @bcakmakoglu! - Use empty array when determing whether to update all node internals#1479
659ca6a
Thanks @bcakmakoglu! - AddEdgePathParams
type and export it
1.36.0 β
Minor Changes β
#1401
ebf387e
Thanks @bcakmakoglu! - Removeinitialized
property fromGraphNode
type#1401
c94e175
Thanks @bcakmakoglu! - Remove node intersections from drag event args#1401
231673e
Thanks @bcakmakoglu! - AddupdateEdgeData
action#1401
bb6abed
Thanks @bcakmakoglu! - Reduce nodegetBoundingClientRect
calls by passing node-bounds directly togetHandleBounds
#1401
30e999a
Thanks @bcakmakoglu! - RemoveconnectedEdges
as arg from NodeMouseEvents#1401
ba6e250
Thanks @bcakmakoglu! - AdduseEdgesData
composable
Patch Changes β
- #1401
408dfea
Thanks @bcakmakoglu! - Hide viewport until initial fit view is finished
1.35.0 β
Minor Changes β
#1447
acd6069
Thanks @bcakmakoglu! - Return non-nullable edge fromuseEdge
#1447
acd6069
Thanks @bcakmakoglu! - Use node/edge id as the only dependency to render nodes/edges.#1446
d8bdac1
Thanks @bcakmakoglu! - Remove visibility (hidden) check fromgetNodes
&getEdges
#1440
a02b9a4
Thanks @bcakmakoglu! - Remove auto-generated hanle-ids and usenull
as the default handle id. If you were relying on handle-ids in your code but weren't assigning them explicitly, you'll might need to update your code to handle this change. By default, if you don't provide a handle-id, it will benull
and the first handle of the corresponding type will be used.#1446
d8bdac1
Thanks @bcakmakoglu! - Rendernull
if edge is hidden#1433
7547ade
Thanks @bcakmakoglu! - AddedgeId
to handle connection objects returned byuseHandleConnections
#1450
d64efc6
Thanks @bcakmakoglu! - Replace internally nodeIds/edgeIds array with nodeLookup/edgeLookup map#1445
64a5162
Thanks @bcakmakoglu! - Rendernull
if node is hidden but render whole list of nodes regardless of visibility
Patch Changes β
#1449
27ec132
Thanks @bcakmakoglu! - Disable pinch zoom on mobile ifzoomToPinch
isfalse
#1448
fe58110
Thanks @bcakmakoglu! - Disable dragging when using multi-touch
1.34.1 β
Patch Changes β
#1426
c997a80
Thanks @bcakmakoglu! - Replace array fns with for-loops#1425
220c290
Thanks @bcakmakoglu! - Use separate prevConnections map inuseHandleConnections
composable to ensure comparison check is correct and callbacks are executed.
1.34.0 β
Minor Changes β
#1415
bcb6c38
Thanks @bcakmakoglu! - Add warning when style imports are missing.#1421
69631f0
Thanks @bcakmakoglu! - ExportPanelPositionType
1.33.8 β
Patch Changes β
- #1404
b636853
Thanks @bcakmakoglu! - Prevent auto-pan on connect when it's set to false.
1.33.7 β
Patch Changes β
- #1378
58d1a36
Thanks @bcakmakoglu! - Allow wheel events to bubble up to the user if the event is not caught and used by the viewport
1.33.6 β
Patch Changes β
#1375
0754e79
Thanks @bcakmakoglu! - Pass pathOptions to edges#1389
f62f2ca
Thanks @bcakmakoglu! - Prevent delete key action inside input field even if modifier is pressed.#1373
a88cd9e
Thanks @bcakmakoglu! - Set ltr on vue flow wrapper#1374
2821c32
Thanks @bcakmakoglu! - Allow pinch-zoom if preventScrolling is disabled
1.33.5 β
Patch Changes β
- #1356
b5beac2
Thanks @bcakmakoglu! - Store current Storage instance on vue app to avoid hydration errors.
1.33.4 β
Patch Changes β
- #1346
376d0ac
Thanks @bcakmakoglu! - Revert extending FlowEmits from separate interfaces for nodes and edges as it breaks event definitions for the actual component, causing warnings that the event was emitted by isn't defined.
1.33.3 β
Patch Changes β
- #1343
89b76a1
Thanks @bcakmakoglu! - Use separate interfaces for Edge- and NodeEvents and extend FlowEmit interface from them. Fixes edge events overwriting node event definitions when types are created.
1.33.2 β
Patch Changes β
#1338
f3c09ce
Thanks @bcakmakoglu! - Use nullish check to fallback to default center values ingetSmoothstepPath
#1339
eb20a0f
Thanks @bcakmakoglu! - Check if node dimensions exist inuseNodesInitialized
#1335
ed5d104
Thanks @bcakmakoglu! - Removeref
prop fromBaseEdge
1.33.1 β
Patch Changes β
- #1329
9b5d496
Thanks @bcakmakoglu! - Correct return type ofuseNodesData
1.33.0 β
Minor Changes β
#1323
ed4ccf4
Thanks @bcakmakoglu! - Add node id and node type to return ofuseNodesData
.β οΈThis is a small breaking change from the previous implementation!
Previously you would only receive the data object back, now you will receive an object with the data and the node id and type.
tsconst nodesData = useNodesData(nodeIds); // Previously nodesData.forEach((data) => { // ... }); // Now nodesData.forEach(({ id, type, data }) => { // ... });
Patch Changes β
#1326
78a604c
Thanks @bcakmakoglu! - Use default cursor for nodes and use grab cursor if node is draggable#1324
c964220
Thanks @bcakmakoglu! - Prevent esc keypress triggers when keyboard a11y is disabled
1.32.1 β
Patch Changes β
- #1314
14c4253
Thanks @bcakmakoglu! - Correct smoothstep edge pathing
1.32.0 β
Minor Changes β
#1301
1c8d15e
Thanks @github-actions! - Use data obj in default nodes to get label#1307
290bca3
Thanks @bcakmakoglu! - AddedgeId
touseHandleConnections
return value
Patch Changes β
#1301
1c8d15e
Thanks @github-actions! - Update composables jsdocs#1313
ce98113
Thanks @bcakmakoglu! - Wrap edge marker urls with single quotes to allow for css vars as color
1.31.0 β
Minor Changes β
#1271
1e60944
Thanks @github-actions! - AdduseNodeId
composableπ§ Example β
tsconst nodeId = useNodeId(); console.log("nodeId", nodeId); // '1'
#1271
299408f
Thanks @github-actions! - AddupdateNode
actionπ§ Example β
tsconst { updateNode } = useVueFlow(); updateNode("1", { position: { x: 100, y: 100 } }); // or using a function to update the node updateNode("1", (node) => ({ ...node, position: { x: 100, y: 100 } })); // passing options - `replace` will replace the node instead of merging it updateNode( "1", { id: "1", label: "Node 1", position: { x: 100, y: 100 } }, { replace: true } );
#1271
eae2118
Thanks @github-actions! - CallonNodesInitialized
wheneverareNodesInitialized
is true instead of only once#1271
36ffa3f
Thanks @github-actions! - Omitevents
in nodes and edges when returning them fromtoObject
#1271
85536ed
Thanks @github-actions! - AdduseHandleConnections
composableπ§ Example β
tsconst connections = useHandleConnections({ // type of the handle you are looking for - accepts a `MaybeRefOrGetter<string>` type: "source", // the id of the handle you are looking for - accepts a `MaybeRefOrGetter<string | undefined> | undefined` [OPTIONAL] id: "a", // if not provided, the node id from the NodeIdContext is used - accepts a `MaybeRefOrGetter<string | undefined> | undefined` nodeId: "1", // a cb that is called when a new connection is added onConnect: (params) => { console.log("onConnect", params); }, // a cb that is called when a connection is removed onDisconnect: (params) => { console.log("onDisconnect", params); }, }); watch( connections, (next) => { console.log("connections", next); }, { immediate: true } );
#1271
4bce8c9
Thanks @github-actions! - Find handle by id regardless of number of handles that exist#1271
85536ed
Thanks @github-actions! - AddconnectionLookup
to state#1271
3b02809
Thanks @github-actions! - AddonInit
hook and deprecateonPaneReady
#1271
299408f
Thanks @github-actions! - AddupdateNodeData
actionπ§ Example β
tsconst { updateNodeData } = useVueFlow(); updateNodeData("1", { foo: "bar" }); // or using a function to update the data updateNodeData("1", (data) => ({ ...data, foo: "bar" })); // passing options - `replace` will replace the data instead of merging it updateNodeData("1", { foo: "bar" }, { replace: true });
#1271
823956e
Thanks @github-actions! - AdduseNodesData
composableπ§ Example β
Single node id β
tsconst nodeId = "1"; const data = useNodesData(nodeId); console.log(data.value); // '[{ /* ... */ }]
Array of node ids β
tsconst nodeIds = ["1", "2", "3"]; const data = useNodesData(nodeIds); console.log(data.value); // '[{ /* ... */ }]
Asserting data type β
tsimport type { Node } from "@vue-flow/core"; interface Data { foo: string; bar: string; } type MyNode = Node<CustomNodeData>; const nodeId = "1"; const data = useNodesData([nodeId], (node): node is MyNode => { return "foo" in node.data && "bar" in node.data; }); console.log(data.value); // '[{ /* foo: string; bar: string */ }]
#1271
99fa4fd
Thanks @github-actions! - CallfitViewOnInit
when initial node dimensions are available#1271
9f8607f
Thanks @github-actions! - Deprecateevents
property on nodes and edges#1278
ecff6f6
Thanks @bcakmakoglu! - Add error args toVueFlowError
#1271
3f60a80
Thanks @github-actions! - ReplaceArray.forEach
loops withfor...of
#1278
ecff6f6
Thanks @bcakmakoglu! - ExportisErrorOfType
typeguard to narrow the type of a VueFlowError and infer it's args
Patch Changes β
#1295
4a5aa14
Thanks @bcakmakoglu! - When updating nodes or edges by overwriting the original array, update the nodes and edges in the state by using them as the target forObject.assign
. This keeps reference in-tact and ensures reactivity when these objects are changed/updated#1271
bbee266
Thanks @github-actions! - Update node dimensions on next tick
1.30.1 β
Patch Changes β
- #1266
c571dde
Thanks @bcakmakoglu! - Check if values are numeric inisRect
instead of checking for truthiness of values
1.30.0 β
Minor Changes β
#1261
427bfac
Thanks @bcakmakoglu! - Hide viewport untilfitViewOnInitDone
istrue
(iffitViewOnInit
is not used, this value will automatically becometrue
the first time node dimensions are set#1261
427bfac
Thanks @bcakmakoglu! - EmitpaneReady
event after 1ms timeout
1.29.2 β
Patch Changes β
- #1257
31817d3
Thanks @bcakmakoglu! - Check ifevent.key
orevent.code
exists before trying to match keyfilter against keys
1.29.1 β
Patch Changes β
- #1252
734d2ba
Thanks @bcakmakoglu! - WatchshouldPanOnDrag
&shouldPanOnScroll
to determine whether listeners should be bound or not
1.29.0 β
Minor Changes β
#1237
16c7d32
Thanks @bcakmakoglu! - Expose handleClick and handlePointerDown from handle components#1238
dd4cbe0
Thanks @bcakmakoglu! - AdduseConnection
composable for easy access of current connection params
Patch Changes β
#1243
b5e77a4
Thanks @bcakmakoglu! - Pass vueflow id togetMarkerId
in connection line component#1236
be15b5a
Thanks @github-actions! - Add default event handler when no handlers for a given event exist anymore#1250
f3c786f
Thanks @bcakmakoglu! - Allow panning on scroll when selection is active#1236
d46ac3a
Thanks @github-actions! - Merge connection line styles with options#1250
b71754f
Thanks @bcakmakoglu! - Return false for boolean key filter and set theisPressed
ref to whatever the keyFilter would be (true/false)#1250
4109cf1
Thanks @bcakmakoglu! - Await fitView before emitting pane-ready#1236
d46ac3a
Thanks @github-actions! - Add fallback for connection line type (bezier as default)
1.28.0 β
Minor Changes β
- #1216
845d591
Thanks @bcakmakoglu! - Add source and target handle ids to removal change of edges.
1.27.1 β
Patch Changes β
- #1220
2b4ed51
Thanks @bcakmakoglu! - Use relative paths for imports.
1.27.0 β
Minor Changes β
#1203
161f4808
Thanks @bcakmakoglu! - Set default node drag threshold to 1#1212
39cd3027
Thanks @bcakmakoglu! - Return promise fromfromObject
action. Promise is resolved when transition ofsetViewport
ends
Patch Changes β
- #1214
cda531f5
Thanks @bcakmakoglu! - Add nullish check when looking up the edge label renderer el
1.26.0 β
Minor Changes β
- #1193
bc793ab9
Thanks @bcakmakoglu! - Keep connection lines snapped while hovering over handles
Patch Changes β
- #1196
1aa69c59
Thanks @bcakmakoglu! - Use correct prop value when prop watcher is executed instead of using prop key as value
1.25.3 β
Patch Changes β
#1184
6639551b
Thanks @bcakmakoglu! - Respect zoom activation key code when hovering an element withnopan
on it#1183
d43852b0
Thanks @bcakmakoglu! - Use nodeRect to check for intersections
1.25.2 β
Patch Changes β
- #1178
29c01f42
Thanks @bcakmakoglu! - Revert importing types from vue instead of vueuse/core as it causes handle position to be messed up
1.25.1 β
Patch Changes β
#1177
c9787c2b
Thanks @bcakmakoglu! - Wait for d3zoom to exist before setting options#1174
4cefa322
Thanks @bcakmakoglu! - ImporttoValue
from vueuse/core to avoid amiguous export with vue
1.25.0 β
Minor Changes β
#1170
cce71c9c
Thanks @bcakmakoglu! - Add currently stored nodes to isValidConnection args#1166
993c058b
Thanks @bcakmakoglu! - Add slots and emits type definitions
1.24.2 β
Patch Changes β
#1164
e3edb6dd
Thanks @bcakmakoglu! - Properly cleanup drag handlers when drag is disabled#1163
56469e95
Thanks @bcakmakoglu! - Use existing node, if one was passed, for intersection checks#1159
8013c9cf
Thanks @bcakmakoglu! - Add immediate flag to prop watchers. Fixes default viewport values not being available when viewport is mounted#1159
8013c9cf
Thanks @bcakmakoglu! - Do not wait for d3zoom to be available when setting min/max zoom
1.24.1 β
Patch Changes β
- #1151
c2a74f57
Thanks @bcakmakoglu! - Allow pan on drag when pan activation key is pressed and panOnDrag is set to false
1.24.0 β
Minor Changes β
#1149
d11e59f1
Thanks @bcakmakoglu! - Allow adding edges with missing source or target node to state but don't render them unless source and target exist#1146
6f93bbbb
Thanks @bcakmakoglu! - Use viewport and vueflow refs directly from store instead of assigning valuesafter mount#1128
0ff65bf2
Thanks @github-actions! - Use nodes from state as the default third arg forgetIntersectingNodes
Patch Changes β
#1128
7d153860
Thanks @github-actions! - Use correct filter for pan on scroll class name#1147
6bc391c6
Thanks @bcakmakoglu! - Release apply default handlers when scope is disposed#1146
6f93bbbb
Thanks @bcakmakoglu! - Allow panning while pan key is pressed#1139
eee9bd87
Thanks @bcakmakoglu! - Create a key predicate for string key filters and check if we need to useevent.key
orevent.code
to match the key#1128
f5138157
Thanks @github-actions! - select nodes on click when nodeDragThreshold > 0#1149
a7fe412a
Thanks @bcakmakoglu! - Push component emit handlers into the emit fns set instead of using theon
helper which overwrites any existing default handlers#1128
84e98305
Thanks @github-actions! - Update to use vue 3.3
1.23.0 β
Minor Changes β
#1121
5b9340bd
Thanks @bcakmakoglu! - Allow usingexpandParent
together withparent
extent#1117
7c6daff7
Thanks @bcakmakoglu! - AddgetIncomers
,getOutgoers
andgetConnectedEdges
as store actions#1115
2bc9317c
Thanks @bcakmakoglu! - Cleanup node handlebounds when a handle is unmounted#1112
e526139f
Thanks @bcakmakoglu! - AddnodeDragThreshold
option#1118
5802acc9
Thanks @bcakmakoglu! - AddareNodesInitialized
gettet to store#1106
5c1df240
Thanks @bcakmakoglu! - Add source and target node ids to edge removal changes#1119
78cf8bb0
Thanks @bcakmakoglu! - addflowToScreenCoordinate
&screenToFlowCoordinate
to viewport actions#1116
8a29faa8
Thanks @bcakmakoglu! - Allow passing a number as connectable prop to allow a specific number of connections per handle
Patch Changes β
#1120
4015e358
Thanks @bcakmakoglu! - Respect pan on scroll class name#1122
59171593
Thanks @bcakmakoglu! - disable panning whenpanOnDrag
isfalse
#1110
03247e00
Thanks @bcakmakoglu! - unselect edge if selected and multi-selection is active#1123
2f7a0fe1
Thanks @bcakmakoglu! - Queue node dimensions update to next tick
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#1085
03715134
Thanks @bcakmakoglu! - Clear pressed key on keyup event, so that key combinations only work while simulteanously pressing keys#1084
806f2632
Thanks @bcakmakoglu! - Allow passing key combinations as a simple string instead of wrapping in an array#1086
641b4d75
Thanks @bcakmakoglu! - Reset isPressed value when switching from a boolean keyFilter to another type of keyFilter
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 writingprocess.env
into umd build#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'