如何在Konva.js中实现命令类Command类以支持撤销和重做功能？

class Command {
  constructor() {
    this.states = []; // 用于存储状态快照
  }

  execute() {
    throw new Error('execute method must be implemented');
  }

  undo() {
    throw new Error('undo method must be implemented');
  }

  saveState(state) {
    this.states.push(state);
  }

  restoreState() {
    return this.states.pop() || null; // 返回上一个状态，或null
  }
}

class DrawRectangleCommand extends Command {
  constructor(stage, layer, rect) {
    super();
    this.stage = stage;
    this.layer = layer;
    this.rect = rect;
  }

  execute() {
    this.saveState(this.layer.toJSON()); // 保存当前图层状态
    this.layer.add(this.rect);
    this.layer.draw();
  }

  undo() {
    this.rect.destroy();
    const prevState = this.restoreState();
    if (prevState) {
      this.layer.destroyChildren(); // 清空图层
      this.layer = Konva.Node.create(prevState, this.stage); // 恢复上一个状态
      this.stage.add(this.layer);
      this.layer.draw();
    }
  }
}

class CommandManager {
  constructor() {
    this.undoStack = [];
    this.redoStack = [];
  }

  executeCommand(command) {
    command.execute();
    this.undoStack.push(command);
    this.redoStack = []; // 执行新命令后，清空重做栈
  }

  undo() {
    if (this.undoStack.length === 0) return;
    const command = this.undoStack.pop();
    command.undo();
    this.redoStack.push(command);
  }

  redo() {
    if (this.redoStack.length === 0) return;
    const command = this.redoStack.pop();
    command.execute();
    this.undoStack.push(command);
  }
}

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight
});

const layer = new Konva.Layer();
stage.add(layer);

const commandManager = new CommandManager();

stage.on('click', (e) => {
  const rect = new Konva.Rect({
    x: e.evt.layerX,
    y: e.evt.layerY,
    width: 50,
    height: 50,
    fill: 'red',
    draggable: true
  });

  const command = new DrawRectangleCommand(stage, layer, rect);
  commandManager.executeCommand(command);
});

document.addEventListener('keydown', (e) => {
  if (e.ctrlKey && e.key === 'z') {
    commandManager.undo();
  } else if (e.ctrlKey && e.key === 'y') {
    commandManager.redo();
  }
});