openOutpaint/js/commands.js

/**
 * Command pattern to allow for editing history
 */
const commands = {
    current: -1,
    history: [],
    undo(n = 1) {
        for (var i = 0; i < n && this.current > -1; i++) {
            this.history[this.current--].undo();
        }
    },
    redo(n = 1) {
        for (var i = 0; i < n && this.current + 1 < this.history.length; i++) {
            this.history[++this.current].redo();
        }
    },

    /**
     * These are basic commands that can be done/undone
     *
     * They must contain a 'run' method that performs the action the first time,
     * a 'undo' method that undoes that action and a 'redo' method that does the
     * action again, but without requiring parameters. 'redo' is by default the
     * same as 'run'.
     *
     * The 'run' and 'redo' functions will receive a 'options' parameter which will be
     * forwarded directly to the operation, and a 'state' parameter that
     * can be used to store state for undoing things.
     *
     * The 'state' object will be passed to the 'undo' function as well.
     */
    createCommand(name, run, undo, redo = run) {
        const command = function runWrapper(options) {
            // Create copy of options and state object
            const copy = {};
            Object.assign(copy, options);
            const state = {};

            // Attempt to run command
            try {
                run(copy, state);
            } catch (e) {
                console.warn(
                    `Error while running command '${name}' with options:`
                );
                console.warn(copy);
                console.warn(e);
                return;
            }

            const undoWrapper = () => {
                console.debug(`Undoing ${name}, currently ${commands.current}`);
                undo(state);
            };
            const redoWrapper = () => {
                console.debug(`Redoing ${name}, currently ${commands.current}`);
                redo(copy, state);
            };

            // Add to history
            if (commands.history.length > commands.current + 1)
                commands.history.splice(commands.current + 1);
            commands.history.push({ undo: undoWrapper, redo: redoWrapper });
            commands.current++;
        };

        this.types[name] = command;

        return command;
    },
    runCommand(name, options) {
        this.types[name](options);
    },
    types: {},
};

/**
 * Draw Image Command, used to draw a Image to a context
 */
commands.createCommand(
    "drawImage",
    (options, state) => {
        if (
            !options ||
            options.image === undefined ||
            options.x === undefined ||
            options.y === undefined
        )
            throw "Command drawImage requires options in the format: {image, x, y, ctx?}";

        // Check if we have state
        if (!state.context) {
            const context = options.ctx || imgCtx;
            state.context = context;

            // Saving what was in the canvas before the command
            const imgData = context.getImageData(
                options.x,
                options.y,
                options.image.width,
                options.image.height
            );
            state.box = {
                x: options.x,
                y: options.y,
                w: options.image.width,
                h: options.image.height,
            };
            // Create Image
            const cutout = document.createElement("canvas");
            cutout.width = state.box.w;
            cutout.height = state.box.h;
            cutout.getContext("2d").putImageData(imgData, 0, 0);
            state.original = new Image();
            state.original.src = cutout.toDataURL();
        }

        // Apply command
        state.context.drawImage(options.image, state.box.x, state.box.y);
    },
    (state) => {
        // Clear destination area
        state.context.clearRect(
            state.box.x,
            state.box.y,
            state.box.w,
            state.box.h
        );
        // Undo
        state.context.drawImage(state.original, state.box.x, state.box.y);
    }
);