撤销和恢复一开始是不想做的,但后来感觉这个功能还是有点必要的,就只好加上了。
需求:这里就不介绍了,就是个操作的前进后退功能。
其实原理蛮简单的,就是做一些操作的时候将前进、后退操作指令以及相关参数传递给操作事件监听类。
注意这里的参数一定是数据层面的,不能有对象层面的传递。
//添加事件操作监听
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 这样就大功告成了。