aico-image-editor/src/history/history.js

Combine multiple image into and create single combined image

//import Alpine from "alpinejs";

//main history class implementation
const MAX_HISTORY_LENGTH = 5;
class CommandHistory {
    commands = [];
    index = 0;

    getIndex() {
      return this.index;
    }

    back() {
      if (this.index > 0) {
        let command = this.commands[--this.index];
        command.undo();
      }
      Alpine.store('canvas').disableUndoRedoButtons();
      return this;
    }

    forward() {
      if (this.index < this.commands.length) {
        let command = this.commands[this.index++];
        command.execute();
      }
      Alpine.store('canvas').disableUndoRedoButtons();
      return this;
    }

    add(command) {
      if (this.commands.length) {
        this.commands.splice(this.index, this.commands.length - this.index);
      }
      if(this.commands.length === MAX_HISTORY_LENGTH) {
        this.commands.shift();
        this.index--;
      }
      this.commands.push(command);
      this.index++;
      Alpine.store('canvas').disableUndoRedoButtons();
      return this;
    }

    clear() {
      this.commands.length = 0;
      this.index = 0;
      Alpine.store('canvas').disableUndoRedoButtons();
      return this;
    }
    
}


export const canvasHistory =  new CommandHistory();




  
//individual command classes for each operation