A highly customizable Flowchart component for Vue 3. Features seamless zoom & pan 🔎, additional components like a Minimap 🗺 and utilities to interact with state and graph.
MIT License
Published by bcakmakoglu 5 months ago
Full Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.33.6...@vue-flow/[email protected]
Published by bcakmakoglu 5 months ago
#1415 bcb6c38
Thanks @bcakmakoglu! - Add warning when style imports are missing.
#1421 69631f0
Thanks @bcakmakoglu! - Export PanelPositionType
Full Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.33.6...v1.34.0
Published by bcakmakoglu 5 months ago
69631f0
Thanks @bcakmakoglu! - Allow PanelPositionType
as value for positionFull Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.33.6...@vue-flow/[email protected]
Published by bcakmakoglu 5 months ago
69631f0
Thanks @bcakmakoglu! - Allow PanelPositionType
as value for positionFull Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.33.6...@vue-flow/[email protected]
Published by bcakmakoglu 5 months ago
b636853
Thanks @bcakmakoglu! - Prevent auto-pan on connect when it's set to false.Full Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.33.6...v1.33.8
Published by bcakmakoglu 6 months ago
58d1a36
Thanks @bcakmakoglu! - Allow wheel events to bubble up to the user if the event is not caught and used by the viewportFull Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.33.6...v1.33.7
Published by bcakmakoglu 6 months ago
#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
Full Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.33.5...v1.33.6
Published by bcakmakoglu 7 months ago
b5beac2
Thanks @bcakmakoglu! - Store current Storage instance on vue app to avoid hydration errors.Full Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.33.4...v1.33.5
Published by bcakmakoglu 8 months ago
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.Full Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.32.1...v1.33.4
Published by bcakmakoglu 8 months ago
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.Full Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.32.1...v1.33.3
Published by bcakmakoglu 8 months ago
#1338 f3c09ce
Thanks @bcakmakoglu! - Use nullish check to fallback to default center values in getSmoothstepPath
#1339 eb20a0f
Thanks @bcakmakoglu! - Check if node dimensions exist in useNodesInitialized
#1335 ed5d104
Thanks @bcakmakoglu! - Remove ref
prop from BaseEdge
Full Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.32.1...v1.33.2
Published by bcakmakoglu 8 months ago
9b5d496
Thanks @bcakmakoglu! - Correct return type of useNodesData
Full Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.33.0...v1.33.1
Published by bcakmakoglu 8 months ago
#1323 ed4ccf4
Thanks @bcakmakoglu! - Add node id and node type to return of useNodesData
.
⚠️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.
const nodesData = useNodesData(nodeIds);
// Previously
nodesData.forEach((data) => {
// ...
});
// Now
nodesData.forEach(({ id, type, data }) => {
// ...
});
#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
Full Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.32.1...v1.33.0
Published by bcakmakoglu 8 months ago
14c4253
Thanks @bcakmakoglu! - Correct smoothstep edge pathingFull Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.32.0...v1.32.1
Published by bcakmakoglu 8 months ago
Published by bcakmakoglu 8 months ago
#1301 1c8d15e
Thanks @github-actions! - Use data obj in default nodes to get label
#1307 290bca3
Thanks @bcakmakoglu! - Add edgeId
to useHandleConnections
return value
#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
Full Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.31.0...v1.32.0
Published by bcakmakoglu 9 months ago
#1271 1e60944
Thanks @github-actions! - Add useNodeId
composable
const nodeId = useNodeId();
console.log("nodeId", nodeId); // '1'
#1271 299408f
Thanks @github-actions! - Add updateNode
action
const { 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! - Call onNodesInitialized
whenever areNodesInitialized
is true instead of only once
#1271 36ffa3f
Thanks @github-actions! - Omit events
in nodes and edges when returning them from toObject
#1271 85536ed
Thanks @github-actions! - Add useHandleConnections
composable
const 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! - Add connectionLookup
to state
#1271 3b02809
Thanks @github-actions! - Add onInit
hook and deprecate onPaneReady
#1271 299408f
Thanks @github-actions! - Add updateNodeData
action
const { 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! - Add useNodesData
composable
const nodeId = "1";
const data = useNodesData(nodeId);
console.log(data.value); // '[{ /* ... */ }]
const nodeIds = ["1", "2", "3"];
const data = useNodesData(nodeIds);
console.log(data.value); // '[{ /* ... */ }]
import 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! - Call fitViewOnInit
when initial node dimensions are available
#1271 9f8607f
Thanks @github-actions! - Deprecate events
property on nodes and edges
#1278 ecff6f6
Thanks @bcakmakoglu! - Add error args to VueFlowError
#1271 3f60a80
Thanks @github-actions! - Replace Array.forEach
loops with for...of
#1278 ecff6f6
Thanks @bcakmakoglu! - Export isErrorOfType
typeguard to narrow the type of a VueFlowError and infer it's args
#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 for Object.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
Full Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.30.1...v1.31.0
Published by bcakmakoglu 9 months ago
c571dde
Thanks @bcakmakoglu! - Check if values are numeric in isRect
instead of checking for truthiness of valuesFull Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.30.0...v1.30.1
Published by bcakmakoglu 9 months ago
#1261 427bfac
Thanks @bcakmakoglu! - Hide viewport until fitViewOnInitDone
is true
(if fitViewOnInit
is not used, this value will automatically become true
the first time node dimensions are set
#1261 427bfac
Thanks @bcakmakoglu! - Emit paneReady
event after 1ms timeout
Full Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.29.2...v1.30.0
Published by bcakmakoglu 9 months ago
cff86ee
Thanks @bcakmakoglu! - Set full width on control button svgs