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

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

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

    //添加事件操作监听
    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 这样就大功告成了。