CaveDraw源码05：Undo、Redo的实现

class History {
    constructor(options) {
        options = options || {};
        this.maxLength = options.maxLength || 30;
        this.callback = options.callback || function callback() {};
        this.stack = [];
        this.cur = -1;
    }

    first() {
        return this.stack[0];
    }

    current() {
        return this.stack[this.cur];
    }

    clear() {
        this.stack = [];
        this.cur = -1;
    }

    save(obj) {
        // undo 过程中，执行保存，则删除后面的，形成新的链
        if (this.cur < this.stack.length - 1) {
            this.stack.splice(this.cur + 1);
        }
        this.stack.push(obj);
        this.cur++;
        if (this.stack.length > this.maxLength) {
            this.stack.shift();
            this.cur--;
        }
        this.callback('save', obj);
    }

    undo() {
        this.cur--;
        this.callback('undo', this.stack[this.cur]);
        return this.stack[this.cur];
    }

    redo() {
        this.cur++;
        this.callback('redo', this.stack[this.cur]);
        return this.stack[this.cur];
    }

    // 最少要有两个历史记录，才能回退
    canUndo = function () {
        return this.cur > 0;
    }

    canRedo = function () {
        return this.cur < this.stack.length - 1;
    }
}

export default History;

this.board.ev.bind('board:history', this.updateUIData());

import Controller from './controller';
import {
    simpleReactive,
    effect
} from '../util/simpleReactive';

class UndoBtn extends Controller {
    constructor(board) {
        super(board);
    }

    init() {
        this.name = this.constructor.name;
        this.btn = this.board.template.undoBtn;
        this.ret = simpleReactive({
            active: false,
        });
        this.btn.addEventListener('click', () => {
            if (!this.ret.active) return;
            // undo() 会触发 'board:history' 事件，回调函数在 Board 类中配置了
            this.board._setImage(this.board.history.undo());
        });
        this.reactiveUI();
        this.board.ev.bind('board:history', this.updateUIData());
    }

    onBoardReset() {
        return () => {
            console.log(`触发 board:reset -> target: ${this.name}`);
            this.updateUIData()();
        }
    }

    updateUIData() {
        return () => {
            if (this.board.history.canUndo()) {
                this.ret.active = true;
            } else {
                this.ret.active = false;
            }
        }
    }

    reactiveUI() {
        effect(() => {
            if (this.ret.active) {
                if (!this.btn.classList.contains('active')) {
                    this.btn.classList.add('active');
                }
            } else {
                if (this.btn.classList.contains('active')) {
                    this.btn.classList.remove('active');
                }
            }
        });
    }
}

export default UndoBtn;