2025-11-23-Undo/Redo机制具体实现

1
export class SnapshotCommand implements Command {
2
  private prevState: any;
3
  private nextState: any;
4
  private commandId: number;
5
  private type: string;
6

7
  constructor(prevState: any, nextState: any, type: any) {
8
    // 使用 structuredClone 进行深拷贝，确保状态隔离
9
    this.prevState = structuredClone(prevState);
10
    this.nextState = structuredClone(nextState);
11
    this.type = type;
12
    // 生成唯一的命令ID用于调试
13
    this.commandId = Date.now() % 1000000;
14
  }
15

16
  execute(): void {
17
    // execute在添加到命令栈之前已经执行了
18
  }
19

20
  undo(): void {
21
    // 恢复到之前的状态
22
    useStore.setState(this.prevState);
23
  }
24

25
  redo(): void {
26
    // 恢复到之后的状态
27
    useStore.setState(this.nextState);
28
  }
29
}

1
interface UpdateOperation {
2
  id: string;
3
  initialAttrs: Partial<CanvasElement>; // 修改前的属性
4
  finalAttrs: Partial<CanvasElement>; // 修改后的属性
5
}
6

7
export class UpdateElementCommand implements Command {
8
  private commandId: string;
9

10
  constructor(
11
    private operations: UpdateOperation[],
12
    private operationType: string = "更新元素"
13
  ) {
14
    // 生成唯一命令ID
15
    this.commandId = `UpdateElementCommand-${Math.random()
16
      .toString(36)
17
      .slice(2, 11)}`;
18
  }
19

20
  execute(): void {
21
    // 应用最终状态
22
    const updates: Record<string, Partial<CanvasElement>> = {};
23
    this.operations.forEach((op) => {
24
      updates[op.id] = op.finalAttrs;
25
    });
26

27
    useStore.setState((state) => {
28
      const newElements = { ...state.elements };
29
      Object.entries(updates).forEach(([id, attrs]) => {
30
        if (newElements[id]) newElements[id] = { ...newElements[id], ...attrs };
31
      });
32
      return { elements: newElements };
33
    });
34
  }
35

36
  undo(): void {
37
    // 撤销：恢复到 initialAttrs
38
    const updates: Record<string, Partial<CanvasElement>> = {};
39
    this.operations.forEach((op) => {
40
      updates[op.id] = op.initialAttrs;
41
    });
42

43
    useStore.setState((state) => {
44
      const newElements = { ...state.elements };
45
      Object.entries(updates).forEach(([id, attrs]) => {
46
        if (newElements[id]) newElements[id] = { ...newElements[id], ...attrs };
47
      });
48
      return { elements: newElements };
49
    });
50
  }
51

52
  redo(): void {
53
    // 重做：恢复到 finalAttrs
54
    const updates: Record<string, Partial<CanvasElement>> = {};
55
    this.operations.forEach((op) => {
56
      updates[op.id] = op.finalAttrs;
57
    });
58

59
    useStore.setState((state) => {
60
      const newElements = { ...state.elements };
61
      Object.entries(updates).forEach(([id, attrs]) => {
62
        if (newElements[id]) newElements[id] = { ...newElements[id], ...attrs };
63
      });
64
      return { elements: newElements };
65
    });
66
  }
67
}

1
executeCommand(command: Command) {
2
  if (this.locked) {
3
    // 如果管理器被锁定，忽略命令
4
    return
5
  }
6

7
  // 执行命令
8
  command.execute()
9

10
  // 将命令添加到撤销栈
11
  this.undoStack.push(command)
12

13
  // 清空重做栈
14
  this.redoStack = []
15
}