【vue2+antvx6】节点大小不一致，点击按钮流程图自动布局

需求：

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.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();
    },

 全部代码

<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>