撤销重做

大约 1 分钟

撤销重做

撤销/重做功能，支持撤销标记和撤销组。

在线示例

示例	描述	链接
基本撤销	undo 和 redo 用法	在线演示{target="_blank"}
撤销标记	added_undoMark 用法	在线演示{target="_blank"}
撤销组	start_undoMark 和 end_undoMark 用法	在线演示{target="_blank"}

核心 API

基本撤销/重做

// 撤销上一步操作
Engine.undo();

// 重做上一步撤销的操作
Engine.redo();

// 检查是否可撤销/重做
const canUndo = Engine.canUndo();
const canRedo = Engine.canRedo();

撤销标记

撤销标记用于将多个操作合并为一个撤销单元：

// 添加撤销标记
Engine.added_undoMark();

// 执行多个操作
Engine.addEntities(entity1);
Engine.addEntities(entity2);
Engine.addEntities(entity3);

// 这三个添加操作会作为一个整体被撤销
Engine.undo();  // 一次撤销三个实体

撤销组

// 开始撤销组
Engine.start_undoMark();

try {
    // 执行一系列操作
    const line1 = new LineEnt([0, 0], [100, 0]);
    Engine.addEntities(line1);
    
    const line2 = new LineEnt([100, 0], [100, 100]);
    Engine.addEntities(line2);
    
    // 修改属性
    line1.color = 1;
    Engine.regen();
    
} finally {
    // 结束撤销组
    Engine.end_undoMark();
}

// 撤销时，整个组作为一个单元撤销
Engine.undo();

最佳实践

命令中的撤销处理

class MyCommand {
    async main() {
        Engine.start_undoMark();
        
        try {
            // 命令逻辑
            await this.doWork();
        } catch (e) {
            // 发生错误时撤销所有更改
            Engine.undo();
            throw e;
        } finally {
            Engine.end_undoMark();
        }
    }
}

批量操作的撤销

// 批量添加 1000 个实体，作为一个撤销单元
Engine.start_undoMark();

for (let i = 0; i < 1000; i++) {
    const entity = new CircleEnt([i * 10, 0], 5);
    Engine.addEntities(entity);
}

Engine.end_undoMark();

// 一次撤销所有 1000 个实体
Engine.undo();