@gradio/imageeditor 0.14.5 → 0.15.1

package/dist/shared/core/editor.js

@@ -1,672 +1,12 @@
-import { Application, Container, Graphics, Sprite, Filter, RenderTexture, GlProgram, defaultFilterVert, SCALE_MODES, Texture, Assets } from "pixi.js";
+import { Application, Container, Graphics, Sprite, Assets } from "pixi.js";
 import { DropShadowFilter as BlurFilter } from "pixi-filters/drop-shadow";
 import { ImageTool } from "../image/image";
-import { AddImageCommand } from "../image/image";
 import { ZoomTool } from "../zoom/zoom";
 import { spring } from "svelte/motion";
-import { writable, get } from "svelte/store";
-import { Rectangle } from "pixi.js";
+import { writable } from "svelte/store";
 import {} from "../types";
-import { get_canvas_blob } from "../utils/pixi";
-export class CommandManager {
-    undo_stack = [];
-    redo_stack = [];
-    async execute(command) {
-        await command.execute();
-        this.undo_stack.push(command);
-        this.redo_stack = []; // Clear redo stack when new command is executed
-    }
-    async undo() {
-        const command = this.undo_stack.pop();
-        if (command) {
-            await command.undo();
-            this.redo_stack.push(command);
-        }
-    }
-    async redo() {
-        const command = this.redo_stack.pop();
-        if (command) {
-            await command.execute();
-            this.undo_stack.push(command);
-        }
-    }
-}
-export class LayerManager {
-    layers = [];
-    active_layer = null;
-    active_layer_id = null;
-    draw_textures = new Map();
-    layer_store = writable({
-        active_layer: "",
-        layers: []
-    });
-    background_layer = null;
-    image_container;
-    app;
-    fixed_canvas;
-    dark;
-    border_region;
-    layer_options;
-    constructor(image_container, app, fixed_canvas, dark, border_region, layer_options) {
-        this.image_container = image_container;
-        this.app = app;
-        this.fixed_canvas = fixed_canvas;
-        this.dark = dark;
-        this.border_region = border_region;
-        this.layer_options = layer_options;
-    }
-    toggle_layer_visibility(id) {
-        const layer = this.layers.find((l) => l.id === id);
-        if (layer) {
-            layer.container.visible = !layer.container.visible;
-            layer.visible = layer.container.visible;
-            this.layer_store.update((state) => ({
-                active_layer: state.active_layer,
-                layers: this.layers
-            }));
-        }
-    }
-    create_background_layer(width, height) {
-        if (this.background_layer) {
-            this.background_layer.destroy();
-        }
-        // Create new background layer
-        const layer = new Container();
-        this.background_layer = layer;
-        // Create a render texture for the background with transparency
-        const bg_texture = RenderTexture.create({
-            width,
-            height,
-            resolution: window.devicePixelRatio,
-            antialias: true,
-            scaleMode: SCALE_MODES.NEAREST
-        });
-        // Create sprite to display the texture with transparency
-        const bg_sprite = new Sprite(bg_texture);
-        layer.addChild(bg_sprite);
-        // Clear the texture with transparency
-        const clear_graphics = new Graphics();
-        clear_graphics.clear();
-        clear_graphics
-            .rect(0, 0, width, height)
-            .fill({ color: this.dark ? 0x333333 : 0xffffff, alpha: 1 });
-        // Render with transparency
-        this.app.renderer.render({
-            container: clear_graphics,
-            target: bg_texture,
-            clear: true
-        });
-        this.image_container.addChild(layer);
-        layer.zIndex = -1;
-        this.update_layer_order();
-        return layer;
-    }
-    set_layer_options(layer_options, width, height) {
-        this.layer_options = layer_options;
-        this.reset_layers(width, height);
-    }
-    /**
-     * Creates a background layer from an image URL
-     * @param url The URL of the image to use as background
-     * @param width The width of the layer (if fixed_canvas is true)
-     * @param height The height of the layer (if fixed_canvas is true)
-     * @param borderRegion Minimum border region to add around the image for outpainting (in pixels)
-     * @returns A Promise that resolves to the background Container when the image is loaded
-     */
-    async create_background_layer_from_url(url, width, height) {
-        const layer = this.create_background_layer(width || this.image_container.width, height || this.image_container.height);
-        try {
-            const texture = await Texture.from(url);
-            const sprite = new Sprite(texture);
-            const imageWidth = sprite.texture.width;
-            const imageHeight = sprite.texture.height;
-            // Calculate dimensions based on whether canvas size is fixed
-            const containerWidth = width || this.image_container.width;
-            const containerHeight = height || this.image_container.height;
-            if (this.fixed_canvas) {
-                // If fixed canvas, fit the image within the specified dimensions minus border region
-                // Calculate aspect-preserving dimensions
-                const effectiveContainerWidth = Math.max(containerWidth - this.border_region * 2, 10);
-                const effectiveContainerHeight = Math.max(containerHeight - this.border_region * 2, 10);
-                const imageAspectRatio = imageWidth / imageHeight;
-                const containerAspectRatio = effectiveContainerWidth / effectiveContainerHeight;
-                let finalWidth, finalHeight;
-                let posX = this.border_region, // Start with border offset
-                posY = this.border_region;
-                if (imageWidth <= effectiveContainerWidth &&
-                    imageHeight <= effectiveContainerHeight) {
-                    // Image fits within container without scaling
-                    finalWidth = imageWidth;
-                    finalHeight = imageHeight;
-                }
-                else {
-                    if (imageAspectRatio > containerAspectRatio) {
-                        // Width is the limiting factor
-                        finalWidth = effectiveContainerWidth;
-                        finalHeight = effectiveContainerWidth / imageAspectRatio;
-                    }
-                    else {
-                        // Height is the limiting factor
-                        finalHeight = effectiveContainerHeight;
-                        finalWidth = effectiveContainerHeight * imageAspectRatio;
-                    }
-                }
-                // Center image within the effective container area (which already accounts for border)
-                posX += Math.round((effectiveContainerWidth - finalWidth) / 2);
-                posY += Math.round((effectiveContainerHeight - finalHeight) / 2);
-                sprite.width = finalWidth;
-                sprite.height = finalHeight;
-                sprite.position.set(posX, posY);
-            }
-            else {
-                // If not fixed canvas, use the natural dimensions of the image plus border
-                // Position starts at the border offset
-                sprite.position.set(this.border_region, this.border_region);
-                // We need to re-create the background layer with the actual image dimensions plus border
-                if (this.background_layer) {
-                    this.background_layer.destroy();
-                }
-                // Create new layer with image dimensions plus border on all sides
-                const totalWidth = imageWidth + this.border_region * 2;
-                const totalHeight = imageHeight + this.border_region * 2;
-                const newLayer = this.create_background_layer(totalWidth, totalHeight);
-                sprite.width = imageWidth;
-                sprite.height = imageHeight;
-                newLayer.addChild(sprite);
-                return newLayer;
-            }
-            layer.addChild(sprite);
-            return layer;
-        }
-        catch (error) {
-            console.error("Error loading image from URL:", error);
-            return layer;
-        }
-    }
-    create_layer({ width, height, layer_name, user_created, layer_id = undefined, make_active = false }) {
-        const layer = new Container();
-        const _layer_id = layer_id || Math.random().toString(36).substring(2, 15);
-        const _layer_name = layer_name || `Layer ${this.layers.length + 1}`;
-        this.layers.push({
-            name: _layer_name,
-            id: _layer_id,
-            container: layer,
-            user_created,
-            visible: true
-        });
-        this.image_container.addChild(layer);
-        // Create a single render texture for drawing with transparency
-        const draw_texture = RenderTexture.create({
-            width,
-            height,
-            resolution: window.devicePixelRatio,
-            antialias: true,
-            scaleMode: SCALE_MODES.NEAREST
-        });
-        const canvas_sprite = new Sprite(draw_texture);
-        layer.addChild(canvas_sprite);
-        const clear_graphics = new Graphics();
-        clear_graphics.clear();
-        clear_graphics.beginFill(0, 0);
-        clear_graphics.drawRect(0, 0, width, height);
-        clear_graphics.endFill();
-        this.app.renderer.render({
-            container: clear_graphics,
-            target: draw_texture,
-            clear: true
-        });
-        // Store texture for drawing
-        this.draw_textures.set(layer, draw_texture);
-        this.update_layer_order();
-        if (make_active) {
-            this.set_active_layer(_layer_id);
-        }
-        this.layer_store.set({
-            active_layer: this.active_layer_id || "",
-            layers: this.layers
-        });
-        return layer;
-    }
-    /**
-     * Creates a new layer with an image loaded from a URL
-     * @param url The URL of the image to load
-     * @param borderRegion Minimum border region to add around the image for outpainting (in pixels)
-     * @returns A Promise that resolves to the layer ID
-     */
-    async add_layer_from_url(url) {
-        const { width, height } = this.image_container.getLocalBounds();
-        const layer = this.create_layer({
-            width,
-            height,
-            layer_name: "Layer 1",
-            user_created: true
-        });
-        const layerIndex = this.layers.findIndex((l) => l.container === layer);
-        if (layerIndex === -1) {
-            console.error("Could not find newly created layer");
-            return "";
-        }
-        const layerId = this.layers[layerIndex].id;
-        try {
-            const texture = await Assets.load(url);
-            const drawTexture = this.draw_textures.get(layer);
-            if (!drawTexture) {
-                console.error("No draw texture found for layer");
-                return layerId;
-            }
-            const sprite = new Sprite(texture);
-            const imageWidth = sprite.width;
-            const imageHeight = sprite.height;
-            let posX = this.border_region;
-            let posY = this.border_region;
-            // Calculate effective dimensions (accounting for border)
-            const effectiveWidth = this.fixed_canvas
-                ? width - this.border_region * 2
-                : width;
-            const effectiveHeight = this.fixed_canvas
-                ? height - this.border_region * 2
-                : height;
-            // If the image is smaller than the effective layer area, center it within that area
-            if (imageWidth < effectiveWidth || imageHeight < effectiveHeight) {
-                posX = Math.floor((effectiveWidth - imageWidth) / 2);
-                posY = Math.floor((effectiveHeight - imageHeight) / 2);
-            }
-            sprite.position.set(posX, posY);
-            // If the image is larger than the effective layer area, scale it down to fit
-            if (imageWidth > effectiveWidth || imageHeight > effectiveHeight) {
-                const imageAspectRatio = imageWidth / imageHeight;
-                const areaAspectRatio = effectiveWidth / effectiveHeight;
-                let finalWidth, finalHeight;
-                if (imageAspectRatio > areaAspectRatio) {
-                    // Width is the limiting factor
-                    finalWidth = effectiveWidth;
-                    finalHeight = effectiveWidth / imageAspectRatio;
-                }
-                else {
-                    // Height is the limiting factor
-                    finalHeight = effectiveHeight;
-                    finalWidth = effectiveHeight * imageAspectRatio;
-                }
-                sprite.width = finalWidth;
-                sprite.height = finalHeight;
-                // Recalculate position to center within effective area
-                posX =
-                    this.border_region + Math.floor((effectiveWidth - finalWidth) / 2);
-                posY =
-                    this.border_region + Math.floor((effectiveHeight - finalHeight) / 2);
-                sprite.position.set(posX, posY);
-            }
-            this.app.renderer.render(sprite, { renderTexture: drawTexture });
-            this.set_active_layer(layerId);
-            return layerId;
-        }
-        catch (error) {
-            console.error("Error loading image from URL:", error);
-            return layerId;
-        }
-    }
-    get_active_layer() {
-        return this.active_layer;
-    }
-    set_active_layer(id) {
-        if (this.layers.some((l) => l.id === id)) {
-            this.active_layer =
-                this.layers.find((l) => l.id === id)?.container ||
-                    this.layers[0]?.container ||
-                    null;
-            this.active_layer_id = id;
-            this.layer_store.set({
-                active_layer: id,
-                layers: this.layers
-            });
-        }
-    }
-    get_layers() {
-        return this.layers;
-    }
-    get_layer_textures(id) {
-        const layer = this.layers.find((l) => l.id === id);
-        if (layer) {
-            const draw = this.draw_textures.get(layer.container);
-            if (draw) {
-                return { draw };
-            }
-        }
-        return null;
-    }
-    delete_layer(id) {
-        const index = this.layers.findIndex((l) => l.id === id);
-        if (index > -1) {
-            // Clean up texture
-            const draw_texture = this.draw_textures.get(this.layers[index].container);
-            if (draw_texture) {
-                draw_texture.destroy();
-                this.draw_textures.delete(this.layers[index].container);
-            }
-            this.layers[index].container.destroy();
-            if (this.active_layer === this.layers[index].container) {
-                const new_active_layer = this.layers[Math.max(0, index - 1)] || null;
-                this.active_layer = new_active_layer?.container || null;
-                this.active_layer_id = new_active_layer?.id || null;
-            }
-            this.layers = this.layers.filter((l) => l.id !== id);
-            this.layer_store.update((_layers) => ({
-                active_layer: _layers.active_layer === id
-                    ? this.layers[this.layers.length - 1]?.id
-                    : _layers.active_layer,
-                layers: this.layers
-            }));
-            this.update_layer_order();
-        }
-    }
-    update_layer_order() {
-        // Ensure background layer always has lowest z-index
-        if (this.background_layer) {
-            this.background_layer.zIndex = -1;
-        }
-        // Update other layers starting from 0
-        this.layers.forEach((layer, index) => {
-            layer.container.zIndex = index;
-        });
-    }
-    move_layer(id, direction) {
-        const index = this.layers.findIndex((l) => l.id === id);
-        if (index > -1) {
-            const new_index = direction === "up" ? index - 1 : index + 1;
-            this.layers = this.layers.map((l, i) => {
-                if (i === index) {
-                    return this.layers[new_index];
-                }
-                if (i === new_index) {
-                    return this.layers[index];
-                }
-                return l;
-            });
-            this.update_layer_order();
-            this.layer_store.update((_layers) => ({
-                active_layer: id,
-                layers: this.layers
-            }));
-        }
-    }
-    /**
-     * Resizes all layers to a new width and height
-     * @param newWidth The new width of the layers
-     * @param newHeight The new height of the layers
-     * @param scale If true, scales the layer content to fit the new dimensions. If false, keeps the content size unchanged.
-     * @param anchor The anchor point to position the content relative to the new size
-     */
-    resize_all_layers(newWidth, newHeight, scale, anchor, 
-    // Add old canvas dimensions for anchor calculations when not scaling
-    oldCanvasWidth, oldCanvasHeight) {
-        // Create a map of the old layers by ID for reference
-        const oldLayersById = new Map(this.layers.map((l) => [l.id, l]));
-        const oldBackgroundLayer = this.background_layer;
-        // Calculate offset for non-scaling resize based on anchor and dimension change
-        const calculateOffset = () => {
-            let offsetX = 0;
-            let offsetY = 0;
-            const deltaWidth = newWidth - oldCanvasWidth;
-            const deltaHeight = newHeight - oldCanvasHeight;
-            // Determine X offset based on anchor point
-            if (anchor.includes("left")) {
-                offsetX = 0;
-            }
-            else if (anchor.includes("right")) {
-                offsetX = deltaWidth;
-            }
-            else {
-                // center
-                offsetX = Math.floor(deltaWidth / 2);
-            }
-            // Determine Y offset based on anchor point
-            if (anchor.includes("top")) {
-                offsetY = 0;
-            }
-            else if (anchor.includes("bottom")) {
-                offsetY = deltaHeight;
-            }
-            else {
-                // center
-                offsetY = Math.floor(deltaHeight / 2);
-            }
-            return { offsetX, offsetY };
-        };
-        // First, handle the background layer using the helper method
-        // Note: create_background_layer called inside the helper might destroy the old one
-        this.background_layer = this._resize_background_layer(oldBackgroundLayer, // Pass the potentially null old layer
-        newWidth, newHeight, scale, calculateOffset);
-        // Now process regular layers
-        const processedLayers = [];
-        // Store old layer data before clearing the main arrays
-        const oldLayerData = this.layers.map((oldLayer) => ({
-            id: oldLayer.id,
-            name: oldLayer.name,
-            user_created: oldLayer.user_created,
-            texture: this.draw_textures.get(oldLayer.container),
-            container: oldLayer.container
-        }));
-        // Clear the current layers array and textures map. New layers will be added by the helper.
-        this.layers = [];
-        this.draw_textures.clear(); // Ensure map is cleared before helpers add to it
-        // Rebuild layers in the original order using the helper method
-        for (const oldData of oldLayerData) {
-            // The helper _resize_single_layer handles creating the new layer,
-            // drawing content, cleanup, and adding the new layer to this.layers.
-            // It returns null if resizing failed for that layer.
-            const newLayer = this._resize_single_layer(oldData, newWidth, newHeight, scale, calculateOffset);
-            if (newLayer) {
-                processedLayers.push(newLayer);
-            }
-        }
-        // Ensure the active layer still exists, otherwise select the top one
-        const currentActiveId = get(this.layer_store).active_layer;
-        const activeLayerExists = processedLayers.some((l) => l.id === currentActiveId);
-        if (!activeLayerExists && processedLayers.length > 0) {
-            this.set_active_layer(processedLayers[0].id); // Set to top layer (index 0 is bottom visually)
-        }
-        else if (processedLayers.length === 0) {
-            this.layer_store.update((s) => ({ ...s, active_layer: "" })); // No layers left
-        }
-        else {
-            // If the active layer still exists, just trigger an update to ensure consistency
-            this.layer_store.update((s) => ({ ...s }));
-        }
-        // Update Z-indices
-        this.update_layer_order();
-        // Final cleanup attempt - textures might need explicit destroy calls
-        // Using setTimeout allows the current execution stack to clear
-        setTimeout(() => {
-            // Attempt to force GC or resource cleanup if needed, though Pixi often handles this
-            Assets.cache.reset(); // Be careful with this, might clear too much
-            this.app.renderer.textureGC.run(); // Force texture garbage collection
-        }, 100);
-    }
-    /**
-     * Helper method to resize the background layer.
-     */
-    _resize_background_layer(oldBackgroundLayer, newWidth, newHeight, scale, calculateOffset) {
-        if (!oldBackgroundLayer) {
-            // If no old background layer existed, create a new one
-            return this.create_background_layer(newWidth, newHeight);
-        }
-        // Identify the actual image sprite within the background container
-        let backgroundImage = oldBackgroundLayer.children.find((child) => child instanceof Sprite &&
-            child.texture !== oldBackgroundLayer.children[0]?.texture);
-        // Create the new background layer first (this also destroys the old one implicitly if it exists)
-        const newBackgroundLayer = this.create_background_layer(newWidth, newHeight);
-        if (backgroundImage) {
-            const newBgImage = new Sprite(backgroundImage.texture);
-            newBgImage.width = backgroundImage.width; // Preserve original size unless scaling
-            newBgImage.height = backgroundImage.height;
-            if (scale) {
-                newBgImage.width = newWidth;
-                newBgImage.height = newHeight;
-                newBgImage.position.set(0, 0);
-            }
-            else {
-                const { offsetX, offsetY } = calculateOffset();
-                newBgImage.position.set(backgroundImage.x + offsetX, backgroundImage.y + offsetY);
-            }
-            newBackgroundLayer.addChild(newBgImage);
-        }
-        // If no background image, the new layer created above is already blank and correctly sized.
-        return newBackgroundLayer;
-    }
-    /**
-     * Helper method to resize a single regular layer.
-     */
-    _resize_single_layer(oldData, newWidth, newHeight, scale, calculateOffset) {
-        if (!oldData.texture) {
-            console.warn(`No texture found for layer ${oldData.id}, skipping cleanup.`);
-            // Destroy the old container if it exists and is not destroyed
-            if (oldData.container && !oldData.container.destroyed) {
-                if (this.image_container.children.includes(oldData.container)) {
-                    this.image_container.removeChild(oldData.container);
-                }
-                oldData.container.destroy({ children: true });
-            }
-            return null;
-        }
-        // Create a new layer container and associated render texture
-        const newContainer = this.create_layer({
-            // This adds the layer to this.layers and draw_textures
-            width: newWidth,
-            height: newHeight,
-            layer_name: oldData.name,
-            user_created: oldData.user_created
-        });
-        // Retrieve the newly created layer data (it's the last one added by create_layer)
-        const newLayer = this.layers[this.layers.length - 1];
-        newLayer.id = oldData.id; // Restore the original ID
-        // Get the render texture for the new layer
-        const newTexture = this.draw_textures.get(newContainer);
-        if (!newTexture) {
-            console.error(`Failed to get texture for newly created layer ${newLayer.id}. Cleaning up.`);
-            // Clean up the partially created new layer resources
-            if (newContainer && !newContainer.destroyed) {
-                if (this.image_container.children.includes(newContainer)) {
-                    this.image_container.removeChild(newContainer);
-                }
-                newContainer.destroy({ children: true });
-                const idx = this.layers.findIndex((l) => l.container === newContainer);
-                if (idx > -1)
-                    this.layers.splice(idx, 1);
-                this.draw_textures.delete(newContainer);
-            }
-            // Clean up old resources
-            if (oldData.texture && !oldData.texture.destroyed)
-                oldData.texture.destroy(true);
-            if (oldData.container && !oldData.container.destroyed)
-                oldData.container.destroy({ children: true });
-            return null;
-        }
-        // Explicitly clear the new render texture (create_layer might already do this, but explicit is safer)
-        this.app.renderer.clear({ target: newTexture, clearColor: [0, 0, 0, 0] });
-        // Create a sprite with the old texture content
-        const sprite = new Sprite(oldData.texture);
-        if (scale) {
-            sprite.width = newWidth;
-            sprite.height = newHeight;
-            sprite.position.set(0, 0);
-        }
-        else {
-            const { offsetX, offsetY } = calculateOffset();
-            sprite.position.set(offsetX, offsetY);
-        }
-        // Render the sprite onto the new texture
-        this.app.renderer.render(sprite, { renderTexture: newTexture });
-        // Clean up temporary sprite and old resources
-        sprite.destroy();
-        if (oldData.texture && !oldData.texture.destroyed) {
-            oldData.texture.destroy(true);
-        }
-        if (oldData.container && !oldData.container.destroyed) {
-            if (this.image_container.children.includes(oldData.container)) {
-                this.image_container.removeChild(oldData.container);
-            }
-            oldData.container.destroy({ children: true });
-        }
-        // Return the data for the successfully resized layer
-        return newLayer;
-    }
-    async get_blobs(width, height) {
-        const blobs = {
-            background: await get_canvas_blob(this.app.renderer, this.background_layer, {
-                width,
-                height,
-                x: 0,
-                y: 0
-            }),
-            layers: await Promise.all(this.layers.map(async (layer) => {
-                const blob = await get_canvas_blob(this.app.renderer, layer.container, {
-                    width,
-                    height,
-                    x: 0,
-                    y: 0
-                });
-                if (blob) {
-                    return blob;
-                }
-                return null;
-            })),
-            composite: await get_canvas_blob(this.app.renderer, this.image_container)
-        };
-        return blobs;
-    }
-    reset_layers(width, height, persist = false) {
-        const _layers_to_recreate = persist
-            ? this.layers.map((layer) => [layer.name, layer.id])
-            : this.layer_options.layers.map((layer) => [layer, undefined]);
-        this.layers.forEach((layer) => {
-            this.delete_layer(layer.id);
-        });
-        for (const [layer_name, layer_id] of _layers_to_recreate) {
-            this.create_layer({
-                width,
-                height,
-                layer_name: layer_name,
-                user_created: this.layer_options.layers.find((l) => l === layer_name)
-                    ? false
-                    : true,
-                layer_id: layer_id
-            });
-        }
-        if (!persist) {
-            this.active_layer = this.layers[0].container;
-            this.active_layer_id = this.layers[0].id;
-        }
-        else {
-            // the id is the same but the layer is new, we need to find the new layer
-            this.active_layer =
-                this.layers.find((l) => l.id === this.active_layer_id)?.container ||
-                    this.layers[0].container;
-        }
-        this.layer_store.update((state) => ({
-            active_layer: this.active_layer_id || this.layers[0].id,
-            layers: this.layers
-        }));
-    }
-    init_layers(width, height) {
-        for (const layer of this.layers) {
-            this.delete_layer(layer.id);
-        }
-        for (const layer of this.layer_options.layers) {
-            this.create_layer({
-                width,
-                height,
-                layer_name: layer,
-                user_created: false
-            });
-        }
-        this.active_layer = this.layers[0].container;
-        this.active_layer_id = this.layers[0].id;
-        this.layer_store.update((_layers) => ({
-            active_layer: this.layers[0].id,
-            layers: this.layers
-        }));
-    }
-}
+import { CommandManager } from "./commands";
+import { LayerManager, AddLayerCommand, RemoveLayerCommand, ReorderLayerCommand } from "./layers";
 const core_tools = ["image", "zoom"];
 const core_tool_map = {
     image: () => new ImageTool(),
@@ -685,7 +25,6 @@ class EditorState {
         if (!(editor instanceof ImageEditor)) {
             throw new Error("EditorState must be created by ImageEditor");
         }
-        // Store private data
         this.scale = 1.0;
         this.position = { x: 0, y: 0 };
         this.subscribers = new Set();
@@ -706,7 +45,6 @@ class EditorState {
             subscribe: this.subscribe.bind(this)
         });
     }
-    // Internal methods - only accessible to EditorState class
     _set_position(x, y) {
         const oldPosition = { ...this.position };
         this.position = { x, y };
@@ -727,7 +65,6 @@ class EditorState {
             });
         });
     }
-    // Public method but only affects notifications
     subscribe(callback) {
         this.subscribers.add(callback);
         return () => this.subscribers.delete(callback);
@@ -858,13 +195,10 @@ export class ImageEditor {
             antialias: true,
             powerPreference: "high-performance"
         });
-        // Set canvas properties
         const canvas = this.app.canvas;
         canvas.style.background = "transparent";
         await this.setup_containers();
-        //create background layer
         this.layer_manager.create_background_layer(this.width, this.height);
-        // Create initial layer
         this.layer_manager.init_layers(this.width, this.height);
         for (const tool of this.tools.values()) {
             await tool.setup(this.context, this.current_tool, this.current_subtool);
@@ -876,7 +210,6 @@ export class ImageEditor {
             });
         }
         this.target_element.appendChild(canvas);
-        // Ensure parent element is transparent
         this.target_element.style.background = "transparent";
         this.dimensions.subscribe((dimensions) => {
             this.dimensions_value = dimensions;
@@ -894,10 +227,8 @@ export class ImageEditor {
             this.image_container.position.set(this.position_value.x, this.position_value.y);
             const effective_width = this.dimensions_value.width * this.scale_value;
             const effective_height = this.dimensions_value.height * this.scale_value;
-            // Convert image_container's position (in stage space) to outline_container local coordinates.
             const local_x = Math.round(this.image_container.position.x - this.outline_container.position.x);
             const local_y = Math.round(this.image_container.position.y - this.outline_container.position.y);
-            // Make sure overlay container follows the same position as outline container
             this.overlay_container.position.set(this.outline_container.position.x, this.outline_container.position.y);
             this.outline_graphics.clear();
             this.outline_graphics
@@ -906,16 +237,13 @@ export class ImageEditor {
                 color: this.dark ? 0x333333 : 0xffffff,
                 alpha: 1
             });
-            // Draw border region indicator if border_region > 0
             if (this.border_region > 0) {
                 const scaled_border = this.border_region * this.scale_value;
                 const border_x = local_x + scaled_border - 1;
                 const border_y = local_y + scaled_border - 1;
                 const border_width = effective_width - scaled_border * 2 + 1;
                 const border_height = effective_height - scaled_border * 2 + 1;
-                // Clear previous overlay graphics
                 this.overlay_graphics.clear();
-                // Draw border rectangle using pixelLine for crisp 1px outline
                 this.overlay_graphics
                     .rect(border_x, border_y, border_width, border_height)
                     .stroke({
@@ -924,36 +252,28 @@ export class ImageEditor {
                     alpha: 0,
                     pixelLine: true
                 });
-                // Create dashed line effect by drawing small rects along the border
                 const dashLength = 5;
                 const gapLength = 5;
                 const totalLength = dashLength + gapLength;
                 const lineColor = 0x999999;
-                // Draw dashed horizontal lines (top and bottom)
                 for (let x = border_x; x < border_x + border_width; x += totalLength) {
-                    // Top dash
                     this.overlay_graphics
                         .rect(x, border_y, Math.min(dashLength, border_x + border_width - x), 1)
                         .fill({ color: lineColor, alpha: 0.7 });
-                    // Bottom dash
                     this.overlay_graphics
                         .rect(x, border_y + border_height, Math.min(dashLength, border_x + border_width - x), 1)
                         .fill({ color: lineColor, alpha: 0.7 });
                 }
-                // Draw dashed vertical lines (left and right)
                 for (let y = border_y; y < border_y + border_height; y += totalLength) {
-                    // Left dash
                     this.overlay_graphics
                         .rect(border_x, y, 1, Math.min(dashLength, border_y + border_height - y))
                         .fill({ color: lineColor, alpha: 0.7 });
-                    // Right dash
                     this.overlay_graphics
                         .rect(border_x + border_width, y, 1, Math.min(dashLength, border_y + border_height - y))
                         .fill({ color: lineColor, alpha: 0.7 });
                 }
             }
             else {
-                // Clear overlay graphics if no border region
                 this.overlay_graphics.clear();
             }
         });
@@ -1020,7 +340,6 @@ export class ImageEditor {
         if (this.app.renderer) {
             this.app.renderer.resize(width, height);
         }
-        // Instead, update the container position to stay centered
         const app_center_x = width / 2;
         const app_center_y = height / 2;
         if (this.image_container) {
@@ -1036,6 +355,10 @@ export class ImageEditor {
             zoom.cleanup();
             zoom.setup(this.context, this.current_tool, this.current_subtool);
         }
+        const brush = this.tools.get("brush");
+        if (brush) {
+            this.set_tool("draw");
+        }
     }
     async set_image_properties(properties) {
         let hard = typeof properties.animate !== "undefined" ? !properties.animate : true;
@@ -1084,6 +407,7 @@ export class ImageEditor {
      * @param url The URL of the image to add
      */
     async add_image_from_url(url) {
+        this.command_manager.reset();
         const image_tool = this.tools.get("image");
         const texture = await Assets.load(url);
         await image_tool.add_image({
@@ -1091,13 +415,10 @@ export class ImageEditor {
             fixed_canvas: this.fixed_canvas,
             border_region: this.border_region
         });
-        // Update resize tool if present
         const resize_tool = this.tools.get("resize");
         if (resize_tool && typeof resize_tool.set_border_region === "function") {
             resize_tool.set_border_region(this.border_region);
         }
-        this.notify("change");
-        this.notify("input");
     }
     set_tool(tool) {
         this.current_tool = tool;
@@ -1116,10 +437,8 @@ export class ImageEditor {
     }
     async reset_canvas() {
         this.layer_manager.reset_layers(this.width, this.height);
-        // Clear background image
         this.background_image = undefined;
         this.background_image_present.set(false);
-        // Reset position, scale and dimensions to default values
         await this.set_image_properties({
             width: this.width,
             height: this.height,
@@ -1127,11 +446,8 @@ export class ImageEditor {
             position: { x: 0, y: 0 },
             animate: false
         });
-        // Reset command stacks
         this.command_manager = new CommandManager();
-        //create background layer
         this.layer_manager.create_background_layer(this.width, this.height);
-        // Reset tools
         for (const tool of this.tools.values()) {
             tool.cleanup();
             tool.setup(this.context, this.current_tool, this.current_subtool);
@@ -1145,14 +461,13 @@ export class ImageEditor {
         this.notify("change");
     }
     add_layer() {
-        this.layer_manager.create_layer({
+        const add_layer_command = new AddLayerCommand(this.context, {
             width: this.width,
             height: this.height,
-            layer_name: undefined,
             user_created: true,
-            layer_id: undefined,
             make_active: true
         });
+        this.command_manager.execute(add_layer_command);
         this.notify("change");
     }
     /**
@@ -1161,6 +476,7 @@ export class ImageEditor {
      * @returns A Promise that resolves when all layers are added
      */
     async add_layers_from_url(layer_urls) {
+        this.command_manager.reset();
         const _layers = this.layer_manager.get_layers();
         _layers.forEach((l) => this.layer_manager.delete_layer(l.id));
         if (layer_urls === undefined || layer_urls.length === 0) {
@@ -1176,7 +492,6 @@ export class ImageEditor {
             await this.layer_manager.add_layer_from_url(url);
         }
         this.layer_manager.set_active_layer(_layers[0].id);
-        // Update resize tool if present with border region
         const resize_tool = this.tools.get("resize");
         if (resize_tool && typeof resize_tool.set_border_region === "function") {
             resize_tool.set_border_region(this.border_region);
@@ -1189,28 +504,26 @@ export class ImageEditor {
         this.notify("change");
     }
     move_layer(id, direction) {
-        this.layer_manager.move_layer(id, direction);
+        const reorder_layer_command = new ReorderLayerCommand(this.context, id, direction);
+        this.command_manager.execute(reorder_layer_command);
         this.notify("change");
     }
     delete_layer(id) {
-        this.layer_manager.delete_layer(id);
+        const remove_layer_command = new RemoveLayerCommand(this.context, id);
+        this.command_manager.execute(remove_layer_command);
         this.notify("change");
     }
     modify_canvas_size(width, height, anchor, scale) {
-        // Store old dimensions before updating
         const oldWidth = this.width;
         const oldHeight = this.height;
-        // Resize layers first, passing old dimensions for anchor calculation
         this.layer_manager.resize_all_layers(width, height, scale, anchor, oldWidth, oldHeight);
-        // Update the editor's main dimension tracking *after* resizing layers
         this.width = width;
         this.height = height;
-        // Update the dimensions store and reset view scale/position
         this.set_image_properties({
             width,
             height,
-            scale: 1, // Reset scale
-            position: { x: 0, y: 0 }, // Reset pan/position of the image_container
+            scale: 1,
+            position: { x: 0, y: 0 },
             animate: false
         });
         this.notify("change");
@@ -1236,9 +549,6 @@ export class ImageEditor {
     destroy() {
         if (!this.app)
             return;
-        // for (const tool of this.tools) {
-        // 	tool[1]?.cleanup();
-        // }
         this.app?.destroy();
     }
     resize(width, height) {