konva.js? ?? ??? ???? ?? ?? redo ?? ??

? ????? ?? ??? ???? UNDO (Ctrl Z) ? redo (Ctrl y) ??? Konva.js ??? ?? ?????? ???? ??? ?????. ??? ??? ?? ??? ????? ?? ??? ???? ??? ??? ???? ??? ??? ?? ? ?? ??? ?????.

?? ?? Command ???? ??????.

 ??? ?? {
  ??? () {
    this.states = []; // ?? ?? ?? ???? ? ??}

  ????() {
    ? ??? ????? ( '?? ??? ????? ?');
  }

  undo () {
    ? ??? ????? ( '?? ?? ??? ???? ?');
  }

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

  Restorestate () {
    this.states.pop () ||? ?????? ?; // ?? ?? ?? NULL? ?????
  }
}

????, ???? ??? ??? ?? ?? ?? ???? ????.

 Class DrawRectAngleCommand ?? ?? {
  ??? (????, ???, ??) {
    ???();
    this.stage = ??;
    this.layer = ???;
    this.rect = rect;
  }

  ????() {
    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 (); // ???? ????? .layer = konva.node.create (prevstate, this.stage); // ?? ??? ?? this.stage.add (this.layer);
      this.layer.draw ();
    }
  }
}

?? ?? ?? ???? ??????.

 ??? CommandManager {
  ??? () {
    this.undostack = [];
    this.redostack = [];
  }

  executeCommand (??) {
    command.execute ();
    this.undostack.push (??);
    this.redostack = []; // ? ??? ?? ? ? Redo Stack? ?????}

  undo () {
    if (this.undostack.length === 0) ??;
    const command = this.undostack.pop ();
    command.undo ();
    this.redostack.push (??);
  }

  redo () {
    if (this.redostack.length === 0) ??;
    const command = this.redostack.pop ();
    command.execute ();
    this.undostack.push (??);
  }
}

????? Konva.js ?? ?????? ??????.

 Const Stage = New Konva.Stage ({{
  ???? : '????',
  ?? : Window.InnerWidth,
  ?? : Window.innerHeight
});

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

const CommandManager = new CommandManager ();

stage.on ( 'click', (e) => {
  const rect = new konva.rect ({
    X : e.evt.layerx,
    Y : e.evt.layery,
    ?? : 50,
    ?? : 50,
    ??? : '???',
    Draggable : True
  });

  const command = new DrawRectAngleCommand (Stage, Layer, rect);
  CommandManager.ExecuteCommand (??);
});

document.addeventListener ( 'keydown', (e) => {
  if (e.ctrlkey && e.key === 'z') {
    CommandManager.undo ();
  } else if (e.ctrlkey && e.key === 'y') {
    CommandManager.redo ();
  }
});

? ??? ??? ??? ??? ?? ??? ?????. ??, ????, ?? ?? ?? ?? ??? ??? ???? ?? Command ???? ?? ? ? ????. ? ??? execute ???? ?? ??? ???? undo ???? ?? ??? ???????. ????? ?? ?? ?? ??? ???? ?????.

? ??? UNDO ? REDO ??? ???? ?? Konva.js?? ?? ??? ?? ???? ???? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!