<template>
<q-page style="height: 80vh">
<VueFlow class="vue-flow-basic-example">
<MiniMap />
<Controls />
<Background color="#aaa" :gap="8" />
<div style="position: absolute; right: 10px; top: 10px; z-index: 4">
<button class="button" @click="resetTransform">reset transform</button>
<button class="button" @click="updatePos">change pos</button>
<button class="button" @click="toggleClassnames">
toggle classnames
</button>
<button class="button" @click="logToObject">toObject</button>
</div>
</VueFlow>
</q-page>
</template>
<script setup>
// script setup
import {
VueFlow,
MiniMap,
Controls,
Background,
useVueFlow,
} from "@braks/vue-flow";
const initialNodes = [
// input node
{ id: "1", type: "input", label: "Node 1", position: { x: 250, y: 5 } },
// default node(s)
{ id: "2", label: "Node 2", position: { x: 100, y: 100 } },
{ id: "3", label: "Node 3", position: { x: 400, y: 100 } },
{ id: "4", label: "Node 4", position: { x: 400, y: 200 } },
];
const initialEdges = [
// animated edge
{ id: "e1-2", source: "1", target: "2", animated: true },
// default edge
{ id: "e1-3", source: "1", target: "3" },
];
/**
* Initialize your graph with the useVueFlow composable.
* The composable accepts the same options as the VueFlow component.
* It returns event hooks, a store instance and convenience functions like addEdges or addNodes for easy
* access to the internal state of VueFlow.
* As an added bonus everything is typed, so your TypeScript experience should be a lot smoother than it is
* using the options-API where a lot has to be type-casted.
**/
const {
instance,
nodes,
addEdges,
onPaneReady,
onConnect,
onNodesChange,
onNodeDragStop,
onNodeClick,
} = useVueFlow({
nodes: initialNodes,
edges: initialEdges,
defaultZoom: 1.5,
minZoom: 0.2,
maxZoom: 4,
zoomOnScroll: false,
});
onNodeDragStop(({ node }) => console.log("drag stop", node));
onNodeClick(({ node }) => console.log("click", node));
onNodesChange((changes) => changes.forEach((change) => console.log(change)));
onConnect((params) => addEdges([params]));
onPaneReady(({ fitView }) => fitView({ padding: 0.75 }));
/**
* You can manipulate the position of a nodes directly by changing it's values when accessed from the composable.
* This can be done for any property in a node or edge.
* See the "toggleClassnames" function below for another example on changing properties of nodes.
**/
const updatePos = () => {
nodes.value.forEach((el) => {
el.position = {
x: Math.random() * 400,
y: Math.random() * 400,
};
});
};
const logToObject = () => console.log(instance.value?.toObject());
const resetTransform = () =>
instance.value?.setTransform({ x: 0, y: 0, zoom: 1 });
const toggleClassnames = () =>
nodes.value.forEach(
(el) => (el.class = el.class === "dark" ? "light" : "dark")
);
</script>