【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.si