采用d3开发流程设计器（七）实现撤销、恢复的功能

阳光穿透心脏的1/2处 2023-02-18 08:00 2阅读 0赞

撤销和恢复一开始是不想做的，但后来感觉这个功能还是有点必要的，就只好加上了。  
需求：这里就不介绍了，就是个操作的前进后退功能。

其实原理蛮简单的，就是做一些操作的时候将前进、后退操作指令以及相关参数传递给操作事件监听类。  
注意这里的参数一定是数据层面的，不能有对象层面的传递。

//添加事件操作监听
        this.flowDesCtl.flowStackWatch.push(
          "window.flowDesCtl.removeNode",
          "window.flowDesCtl.flowCircleNode.addEndNode",
          JSON.stringify(nodeData)
        );

FlowStackWatch.prototype.push = function(backFunName, preBackFunName, params) {
      this.statck.push(backFunName);
      this.statckPreName.push(preBackFunName);
      this.paramsObj.push(params);
      this.flowDesCtl.vueMethods["operationClick"] &&
      this.flowDesCtl.vueMethods["operationClick"]({ last:true });
    };

然后点击撤销的时候，就将撤销队列数组进行出栈，然后添加一项恢复队列数组，而点击恢复则从恢复队列出栈。

//向后
    FlowStackWatch.prototype.backToPre = function() {
      if (this.statck.length > 0) {
        let operObj = this.statck.pop();
        if (operObj != null) {
          let params = this.paramsObj.pop();
          eval(operObj + "(" + params + ")");
    
          this.preStateck.push(this.statckPreName.pop());
          this.preParamsObj.push(params);
        }
      }
      this.flowDesCtl.vueMethods["operationClick"] &&
      this.flowDesCtl.vueMethods["operationClick"]({ first: this.statck.length===0 });
    };

//向前
    FlowStackWatch.prototype.preNext = function() {
      let operObj = this.preStateck.pop();
      if (operObj != null) {
        let params = this.preParamsObj.pop();
        eval(operObj + "(" + params + ")");
      }
      this.flowDesCtl.vueMethods["operationClick"] &&
      this.flowDesCtl.vueMethods["operationClick"]({ last: this.preStateck.length===0});
    };

ok 这样就大功告成了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200616125422539.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM=,size_16,color_FFFFFF,t_70