记一次antv-G6操作历史实现思路

需求背景：

实际业务场景中，在对图（antv-G6）操作过程中，希望对操作历史有所记录，实现返回上一级操作的功能

思路：

因为返回上一次操作需要上一级操作的服务名，所以考虑用栈压入每次操作的服务名，点击返回上一级时，取出服务名查询

（特别的，初始化时，返回上一级需要特别处理）

部分实现代码：

      const toolbar = new G6.ToolBar({
        className: 'g6-toolbar-ul',
        getContent: () => {
          const outDiv = document.createElement('div');
          outDiv.style.width = '90px';
          outDiv.innerHTML = `<ul>
              <li code= 'goback'>返回列表</li>
              <li code= 'gobackPre'>返回上一级</li>
            </ul>`
          return outDiv
        },
        handleClick: (code, graph) => {
          if (code === 'goback') {
            this.$router.push({ name: 'severMap'});
          }
          if (code === 'gobackPre') {
            if (this.stack.length == 0) {
              return true;
            }else {
            graph.destroy();
            this.srvName = this.stack.pop();
            this.init(this.srvName);
            this.initSize();
            }
          }
        }
      });

      //节点双击事件
      this.graph.on('node:dblclick', (e) => {
        this.stack.push(this.srvName);
        this.srvName = e.item._cfg.model.srvEnName;
        axios({
          method: 'get',
          url: bcocUrl + '/srvmap/selectCallSrvMapList?srvName=' + this.srvName,
          headers: { 'Content-Type': 'application/json' }
        })
          .then((response) => {
            var data = response.data.obj;
            for (let i = 0; i < data.children.length; i++) {
              data.children[i].srvEnName = fittingString(data.children[i].srvEnName, 300, 12);
              if (data.children[i].children != null) {
                for (let d = 0; d < data.children[i].children.length; d++) {
                  data.children[i].children[d].srvEnName = fittingString(data.children[i].children[d].srvEnName, 320, 12);
                }
              }
            };
            data.srvEnName = fittingString(data.srvEnName, 300, 12);

            for (let i = 0; i < data.children.length; i++) {
              if (data.children[i].srvType === '0') {
                data.children[i].type = 'card-node';
              }else {
                data.children[i].type = 'node-card';
              }
              if (data.children[i].children != null) {
                for (let d = 0; d < data.children[i].children.length; d++) {
                  if (data.children[i].children[d].srvType === '0') {
                    data.children[i].children[d].type = 'card-node';
                  }else {
                    data.children[i].children[d].type = 'node-card';
                  }
                }
              }
            };

            graph.data(data);
            graph.render();
            graph.fitView();
            //获取div parentContent 的宽度和高度
            this.canvasWidth = this.$refs.parentContent.clientWidth
            this.canvasHeight = this.$refs.parentContent.clientHeight
            //修改画布的大小
            this.graph.changeSize(this.canvasWidth, this.canvasHeight)
            //将图移动到画布中心位置
            this.graph.fitCenter()
          })
        .catch((response) => console.log(response));
      })