需求：
1、点击优化布局的按钮，自动布局（从左到右），按钮变成撤销布局按钮
2、点击撤销布局的按钮，返回之前的布局
3、在点击优化布局的按钮后，如果移动了节点，则自动将撤销布局的按钮变成优化布局的按钮
第一步：安装插件
npm i @antv/layout第二步：写方法文章来源：https://www.toymoban.com/news/detail-860759.html
// 优化布局（自动布局）
layout() {
this.isRevoke = true;
const gridLayout = new DagreLayout({
type: "dagre",
rankdir: "LR",
// align: "UL",
ranksep: 30,
nodesep: 15,
controlPoints: true,
});
//布局所需的格式
const originData = {
nodes: [],
edges: [],
};
//获取所有节点
const nodes = graph.getNodes();
//获取当前数据
const jso = (document.querySelector("#container").value = JSON.stringify(
graph.toJSON({ diff: true })
));
//保存原先布局
localStorage.setItem("layoutAntv", jso);
//原先布局中的数据放置到所需格式中
JSON.parse(jso).cells.forEach((i) => {
if (i.shape === "edge") {
originData.edges.push(i);
} else {
originData.nodes.push(i);
}
});
//我设置的vue自定义节点，所以节点在添加的时候，会根据实际盒子的大小进行设置（利用node.resize()进行改变）
//所以我的节点大小是不一致的，需要替换一下改变后的节点大小
nodes.forEach((node) => {
const size = node.size();
originData.nodes.forEach((j) => {
if (node.id === j.id) {
j.size.width = size.width;
j.size.height = size.height;
}
});
});
const newModel = gridLayout.layout(originData);
// 以中心线对齐
newModel.nodes.forEach((node) => {
node.x -= node.size.width / 2;
node.y -= node.size.height / 2;
});
graph.fromJSON(newModel);
this.resetFn();
},// 撤销布局
layoutFn() {
this.isRevoke = false;
graph.fromJSON(JSON.parse(localStorage.getItem("layoutAntv")));
this.resetFn();
},全部代码文章来源地址https://www.toymoban.com/news/detail-860759.html
<template>
<div class="antv-wrapper">
<div style="display: flex; height: calc(100% - 80px)">
<div style="width: calc(100% - 330px); height: 100%; position: relative">
<div
ref="container"
id="container"
class="wrapper-canvas"
@drop="drop($event)"
@dragover.prevent
></div>
<div class="icon_oper">
<el-tooltip
class="item"
effect="dark"
content="优化布局"
placement="bottom"
v-if="!isRevoke"
>
<img
src="@/assets/buju.png"
style="width: 20px; height: 20px; margin: 0px 5px 0 10px"
@click="layout()"
/>
</el-tooltip>
<el-tooltip
class="item"
effect="dark"
content="撤销布局"
placement="bottom"
v-if="isRevoke"
>
<img
src="@/assets/chexiao.png"
style="width: 20px; height: 20px; margin: 0px 5px 0 10px"
@click="layoutFn()"
/>
</el-tooltip>
</div>
</div>
</div>
</div>
</template>
<script>
import { Graph, Shape } from "@antv/x6";
import { DagreLayout } from "@antv/layout";
// 布局方向
const dir = "LR"; // LR RL TB BT
let graph = null;
export default {
data() {
return {
isRevoke: false, //是否显示撤销布局按钮
};
},
mounted() {
this.initGraph();
},
beforeDestroy() {
graph.dispose();
},
methods: {
// 初始化画布
initGraph(options) {
// 渲染画布
graph = new Graph({
container: document.getElementById("container"),
width: container.offsetWidth, // 画布宽
height: container.offsetHeight, // 画布高
...
});
// 监听节点拖动事件
graph.on("node:moved", ({ node }) => {
// 恢复优化布局的按钮
this.isRevoke = false;
});
graph.centerContent();
// // 返现方法
// if (resData.length) {
// const jsonTemp = resData.map((item) => {
// item.ports = configNodePorts();
// return item;
// });
// graph.fromJSON(jsonTemp);
// }
},
// 自适应视图
resetFn() {
const nodes = graph.getNodes();
if (nodes.length > 2) {
graph.zoomToFit({
padding: 60,
allowMoving: true, // 允许移动节点以保证完全可见
allowResizing: true, // 允许调整大小以保证完全可见
duration: 500, // 动画持续时间（毫秒）
});
}
graph.centerContent();
},
// 优化布局（自动布局）
layout() {
this.isRevoke = true;
const gridLayout = new DagreLayout({
type: "dagre",
rankdir: "LR",
// align: "UL",
ranksep: 30,
nodesep: 15,
controlPoints: true,
});
const originData = {
nodes: [],
edges: [],
};
const nodes = graph.getNodes();
const edges = graph.getEdges();
const jso = (document.querySelector("#container").value = JSON.stringify(
graph.toJSON({ diff: true })
));
localStorage.setItem("layoutAntv", jso);
JSON.parse(jso).cells.forEach((i) => {
if (i.shape === "edge") {
originData.edges.push(i);
} else {
originData.nodes.push(i);
}
});
nodes.forEach((node) => {
const size = node.size();
originData.nodes.forEach((j) => {
if (node.id === j.id) {
j.size.width = size.width;
j.size.height = size.height;
}
});
});
const newModel = gridLayout.layout(originData);
// 以中心线对齐
newModel.nodes.forEach((node) => {
node.x -= node.size.width / 2;
node.y -= node.size.height / 2;
});
graph.fromJSON(newModel);
this.resetFn();
},
// 撤销布局
layoutFn() {
this.isRevoke = false;
graph.fromJSON(JSON.parse(localStorage.getItem("layoutAntv")));
this.resetFn();
},
},
};
</script>
<style lang="scss" scoped="scoped">
.icon_oper {
font-size: 18px;
cursor: pointer;
margin: 0 5px;
background-color: #fff;
border-radius: 10px;
z-index: 999;
width: 150px;
display: flex;
align-items: center;
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3), 0 4px 14px 0 rgba(0, 0, 0, 0.1);
position: absolute;
top: 10px;
i {
margin: 10px;
}
}
</style>
到了这里，关于【vue2+antvx6】节点大小不一致，点击按钮流程图自动布局的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
