撤销重做

大约 2 分钟

撤销重做

撤销/重做功能，支持撤销标记、撤销组和操作描述。

在线示例

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

核心API

基本撤销/重做

const undoMgr = Engine.undoManager;

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

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

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

撤销标记

撤销标记用于记录各类操作，以便撤销时可以回退：

// 添加实体后记录撤销（推荐使用 Engine.addEntities 自动记录）
Engine.addEntities(entity1);

// 或手动记录
Engine.pcanvas.addEntity(entity2);
Engine.undoManager.added_undoMark([entity2]);

// 删除实体（自动记录撤销）
Engine.eraseEntities(entity1);

撤销组

// 开始撤销组（推荐使用 startUndoRecord，支持嵌套）
Engine.startUndoRecord();

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.endUndoRecord();
}

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

操作描述

为撤销组附加描述信息，撤销/重做时可在命令行和UI上显示操作名称。API 接受字符串简写：传入纯字符串等价于 { category: 'edit', resolvedText: str }。

// 带描述的撤销组 — 直接文本
Engine.startUndoRecord('批量修改颜色');
try {
    // ... 修改操作 ...
} finally {
    Engine.endUndoRecord();
}

// 使用i18n key（推荐，支持多语言）
Engine.startUndoRecord({ category: 'edit', i18nKey: 'undo.modify.color' });
try {
    // ... 修改颜色 ...
} finally {
    Engine.endUndoRecord();
}

查询撤销历史

const undoMgr = Engine.undoManager;

// 获取撤销历史列表（最近操作在前）
const undoHistory = undoMgr.getUndoHistory();
undoHistory.forEach(item => {
    const desc = item.description;
    console.log(desc?.resolvedText || desc?.i18nKey || '未知操作');
});

// 获取重做历史列表
const redoHistory = undoMgr.getRedoHistory();

// 获取步数
const undoCount = undoMgr.getUndoCount();
const redoCount = undoMgr.getRedoCount();

最佳实践

命令中的撤销处理

class MyCommand {
    async main() {
        Engine.startUndoRecord('我的命令');
        
        try {
            await this.doWork();
        } catch (e) {
            Engine.undo();
            throw e;
        } finally {
            Engine.endUndoRecord();
        }
    }
}

批量操作的撤销

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

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

Engine.endUndoRecord();

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