採用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 這樣就大功告成了。