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.
#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
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
#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
cff86ee Thanks @bcakmakoglu! - Set full width on control button svgs31817d3 Thanks @bcakmakoglu! - Check if event.key or event.code exists before trying to match keyfilter against keysFull Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.29.1...v1.29.2
734d2ba Thanks @bcakmakoglu! - Watch shouldPanOnDrag & shouldPanOnScroll to determine whether listeners should be bound or notFull Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.29.0...v1.29.1
#1237 16c7d32 Thanks @bcakmakoglu! - Expose handleClick and handlePointerDown from handle components
#1238 dd4cbe0 Thanks @bcakmakoglu! - Add useConnection composable for easy access of current connection params
#1243 b5e77a4 Thanks @bcakmakoglu! - Pass vueflow id to getMarkerId 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 the isPressed 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)
Handle styles have been changed to not use fixed top/left values to position handles. This can be a breaking change if you were repositioning handles via CSS!
Full Changelog: https://github.com/bcakmakoglu/vue-flow/compare/v1.28.0...v1.29.0
845d591 Thanks @bcakmakoglu! - Add source and target handle ids to removal change of edges.#1216 80924fa Thanks @bcakmakoglu! - Add minimap slot types
#1216 2aad7c5 Thanks @bcakmakoglu! - Add MiniMapNodeEmits interface