需求:
1、点击优化布局的按钮,自动布局(从左到右),按钮变成撤销布局按钮
2、点击撤销布局的按钮,返回之前的布局
3、在点击优化布局的按钮后,如果移动了节点,则自动将撤销布局的按钮变成优化布局的按钮
第一步:安装插件
npm i @antv/layout
第二步:写方法
// 优化布局(自动布局)
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.si