antvG6多人联动操作及撤销回退解决方案

18 阅读1分钟

websocket 多人联动

其他人的操作也放入history数组中,但是需要在界面上提醒

class 类,重新封装好新增删除编辑等操作逻辑

原理就是,你执行一组操作时,提前写好撤销的操作,虽然麻烦,但感觉没有更好的方法了(threejs的编辑器里,撤销等操作也是这个逻辑)

原理通用

class Operate {
    g6:any;
    history: any[] = [];
    redoHistory: any[] = [];
    constructor(g6:any) {
        this.g6 = g6;
        this.history = [];
    }
    addxxx(data:any) {
        this.g6.add(data);
    }
    delxxx(data:any) {
        this.g6.del(data);
    }
    updatexxx(data:any) {
        this.g6.update(data);
    }
    // 恢复最近一次操作
    Restore(){
        let obj = this.redoHistory.pop();
        this.history.push(obj);
        obj.restore();
    }
    // 撤销最近一次操作
    Revoke(){
        let obj = this.history.pop();
        this.redoHistory.push(obj);
        obj.reverse();
    }
    add(newData:any){
        let obj = {
            reverse:()=>{
                this.delxxx(newData);
            },
            restore:()=>{
                this.addxxx(newData);
            }
        }
        this.history.push(obj);
        this.addxxx(newData);
        this.redoHistory = [];
    }
    del(oldData:any){
        let obj = {
            reverse:()=>{
                this.addxxx(oldData);
            },
            restore:()=>{
                this.delxxx(oldData);
            }
        }
        this.history.push(obj);
        this.delxxx(oldData);
        this.redoHistory = [];
    }
    update(oldData:any,newData:any){
        let obj = {
            reverse:()=>{
                this.updatexxx(oldData);
            },
            restore:()=>{
                this.updatexxx(newData);
            }
        }
        this.history.push(obj);
        this.updatexxx(newData);
        this.redoHistory = [];
    }
}