@gradio/imageeditor 0.15.4 → 0.16.0

package/dist/shared/brush/brush-textures.js

@@ -2,22 +2,22 @@ import { Container, RenderTexture, Sprite, Graphics, Application, Texture } from
 import {} from "../core/editor";
 import {} from "../core/commands";
 export class BrushCommand {
+    stroke_data;
     context;
-    layer_id;
-    original_texture;
-    final_texture;
+    original_texture = null;
     name;
-    constructor(context, layer_id, original_texture, final_texture) {
-        this.context = context;
+    constructor(context, stroke_data, original_texture) {
         this.name = "Draw";
-        this.layer_id = layer_id;
-        this.original_texture = this.createTextureFrom(original_texture);
-        this.final_texture = this.createTextureFrom(final_texture);
+        this.stroke_data = stroke_data;
+        this.context = context;
+        if (original_texture) {
+            this.original_texture = this.create_texture_from(original_texture);
+        }
     }
     /**
      * Creates a new texture with the same content as the source texture
      */
-    createTextureFrom(source) {
+    create_texture_from(source) {
         const texture = RenderTexture.create({
             width: source.width,
             height: source.height,
@@ -32,27 +32,184 @@ export class BrushCommand {
         container.destroy({ children: true });
         return texture;
     }
-    async execute() {
-        const layer_textures = this.context.layer_manager.get_layer_textures(this.layer_id);
+    /**
+     * Recreates the stroke by rendering all segments from the stored parameters
+     * Preserves the exact order of draw/erase operations
+     */
+    render_stroke_from_data(stroke_data, target_texture) {
+        const draw_segments = stroke_data.segments.filter((s) => s.mode === "draw");
+        const erase_segments = stroke_data.segments.filter((s) => s.mode === "erase");
+        if (draw_segments.length > 0) {
+            const graphics = new Graphics();
+            const container = new Container();
+            container.addChild(graphics);
+            let alpha = 1;
+            for (const segment of draw_segments) {
+                if (segment.opacity < alpha) {
+                    alpha = segment.opacity;
+                }
+                let colorValue = 0xffffff;
+                if (segment.color.startsWith("#")) {
+                    colorValue = parseInt(segment.color.replace("#", "0x"), 16);
+                }
+                graphics.setFillStyle({
+                    color: colorValue,
+                    alpha: 1
+                });
+                this.render_segment_to_graphics(graphics, segment);
+            }
+            // we need a sprite in order to set the alpha and for that we need a texture
+            // i'm not entirely sure why other approaches didn't work
+            const alpha_sprite_texture = RenderTexture.create({
+                width: target_texture.width,
+                height: target_texture.height,
+                resolution: window.devicePixelRatio || 1
+            });
+            const alpha_sprite = new Sprite(alpha_sprite_texture);
+            this.context.app.renderer.render({
+                container: container,
+                target: alpha_sprite_texture
+            });
+            alpha_sprite.alpha = alpha;
+            this.context.app.renderer.render({
+                container: alpha_sprite,
+                target: target_texture,
+                clear: false
+            });
+            container.destroy({ children: true });
+            alpha_sprite.destroy();
+            alpha_sprite_texture.destroy();
+        }
+        if (erase_segments.length > 0) {
+            // create a temp texture to work with
+            const temp_content_texture = RenderTexture.create({
+                width: target_texture.width,
+                height: target_texture.height,
+                resolution: window.devicePixelRatio || 1
+            });
+            const copy_sprite = new Sprite(target_texture);
+            const copy_container = new Container();
+            copy_container.addChild(copy_sprite);
+            this.context.app.renderer.render({
+                container: copy_container,
+                target: temp_content_texture,
+                clear: true
+            });
+            // create a graphics object to draw the erase segments
+            const erase_graphics = new Graphics();
+            const erase_container = new Container();
+            erase_container.addChild(erase_graphics);
+            erase_graphics.setFillStyle({
+                color: 0xffffff,
+                alpha: 1.0
+            });
+            for (const segment of erase_segments) {
+                this.render_segment_to_graphics(erase_graphics, segment);
+            }
+            // create a separate texture to hold the mask
+            const mask_texture = RenderTexture.create({
+                width: target_texture.width,
+                height: target_texture.height,
+                resolution: window.devicePixelRatio || 1
+            });
+            this.context.app.renderer.render({
+                container: erase_container,
+                target: mask_texture,
+                clear: true
+            });
+            const content_sprite = new Sprite(temp_content_texture);
+            const mask_sprite = new Sprite(mask_texture);
+            // only now do we create a sprite from the original texture and add the mask
+            const masked_container = new Container();
+            masked_container.addChild(content_sprite);
+            masked_container.setMask({ mask: mask_sprite, inverse: true }); // inverse mask = erase
+            // now we can render the masked content back to the target texture
+            this.context.app.renderer.render({
+                container: masked_container,
+                target: target_texture,
+                clear: true
+            });
+            copy_container.destroy({ children: true });
+            erase_container.destroy({ children: true });
+            masked_container.destroy({ children: true });
+            temp_content_texture.destroy();
+            mask_texture.destroy();
+        }
+    }
+    /**
+     * Renders a segment to a graphics object (extracted from renderSegment)
+     */
+    render_segment_to_graphics(graphics, segment) {
+        const distance = Math.sqrt(Math.pow(segment.to_x - segment.from_x, 2) +
+            Math.pow(segment.to_y - segment.from_y, 2));
+        if (distance < 0.1) {
+            graphics.circle(segment.from_x, segment.from_y, segment.size).fill();
+        }
+        else {
+            const spacing = Math.max(segment.size / 3, 2);
+            const steps = Math.max(Math.ceil(distance / spacing), 2);
+            for (let i = 0; i < steps; i++) {
+                const t = i / (steps - 1);
+                const x = segment.from_x + (segment.to_x - segment.from_x) * t;
+                const y = segment.from_y + (segment.to_y - segment.from_y) * t;
+                graphics.circle(x, y, segment.size).fill();
+            }
+        }
+    }
+    async execute(context) {
+        if (context) {
+            this.context = context;
+        }
+        let layer_textures = this.context.layer_manager.get_layer_textures(this.stroke_data.layer_id);
+        if (!layer_textures) {
+            const all_layers = this.context.layer_manager.get_layers();
+            const top_layer = all_layers[all_layers.length - 1];
+            layer_textures = this.context.layer_manager.get_layer_textures(top_layer.id);
+        }
         if (!layer_textures)
             return;
-        const temp_sprite = new Sprite(this.final_texture);
+        // create a temporary texture to render the stroke
+        const temp_texture = RenderTexture.create({
+            width: layer_textures.draw.width,
+            height: layer_textures.draw.height,
+            resolution: window.devicePixelRatio || 1
+        });
+        // copy current layer content to temp texture
+        const current_sprite = new Sprite(layer_textures.draw);
         const temp_container = new Container();
-        temp_container.addChild(temp_sprite);
-        this.context.app.renderer.render(temp_container, {
-            renderTexture: layer_textures.draw
+        temp_container.addChild(current_sprite);
+        this.context.app.renderer.render({
+            container: temp_container,
+            target: temp_texture,
+            clear: true
         });
         temp_container.destroy({ children: true });
+        this.render_stroke_from_data(this.stroke_data, temp_texture);
+        // copy final result back to layer texture
+        const final_sprite = new Sprite(temp_texture);
+        const final_container = new Container();
+        final_container.addChild(final_sprite);
+        this.context.app.renderer.render({
+            container: final_container,
+            target: layer_textures.draw,
+            clear: true
+        });
+        final_container.destroy({ children: true });
+        temp_texture.destroy();
     }
     async undo() {
-        const layer_textures = this.context.layer_manager.get_layer_textures(this.layer_id);
+        if (!this.original_texture)
+            return;
+        const layer_textures = this.context.layer_manager.get_layer_textures(this.stroke_data.layer_id);
         if (!layer_textures)
             return;
         const temp_sprite = new Sprite(this.original_texture);
         const temp_container = new Container();
         temp_container.addChild(temp_sprite);
-        this.context.app.renderer.render(temp_container, {
-            renderTexture: layer_textures.draw
+        this.context.app.renderer.render({
+            container: temp_container,
+            target: layer_textures.draw,
+            clear: true
         });
         temp_container.destroy({ children: true });
     }
@@ -62,8 +219,6 @@ export class BrushCommand {
  * Simplified to work directly with layer textures.
  */
 export class BrushTextures {
-    image_editor_context;
-    app;
     stroke_texture = null;
     erase_texture = null;
     display_container = null;
@@ -72,11 +227,13 @@ export class BrushTextures {
     preview_sprite = null;
     erase_graphics = null;
     dimensions;
+    image_editor_context;
+    app;
     is_new_stroke = true;
     current_opacity = 1.0;
-    current_mode = "draw";
     original_layer_texture = null;
     active_layer_id = null;
+    current_stroke_segments = [];
     constructor(image_editor_context, app) {
         this.image_editor_context = image_editor_context;
         this.app = app;
@@ -106,13 +263,7 @@ export class BrushTextures {
             resolution: window.devicePixelRatio || 1
         });
         this.display_container = new Container();
-        const active_layer = this.image_editor_context.layer_manager.get_active_layer();
-        if (active_layer) {
-            active_layer.addChild(this.display_container);
-        }
-        else {
-            this.image_editor_context.image_container.addChild(this.display_container);
-        }
+        this.image_editor_context.image_container.addChild(this.display_container);
         this.stroke_container = new Container();
         this.stroke_graphics = new Graphics();
         this.stroke_container.addChild(this.stroke_graphics);
@@ -210,8 +361,10 @@ export class BrushTextures {
         if (!this.erase_graphics || !this.erase_texture)
             return;
         this.erase_graphics.clear();
-        this.erase_graphics.beginFill(0xffffff, 1);
-        this.erase_graphics.drawRect(0, 0, this.dimensions.width, this.dimensions.height);
+        this.erase_graphics.setFillStyle({ color: 0xffffff, alpha: 1.0 });
+        this.erase_graphics
+            .rect(0, 0, this.dimensions.width, this.dimensions.height)
+            .fill();
         this.erase_graphics.endFill();
         this.app.renderer.render(this.erase_graphics, {
             renderTexture: this.erase_texture
@@ -240,45 +393,11 @@ export class BrushTextures {
         const layer_textures = this.image_editor_context.layer_manager.get_layer_textures(layer.id);
         if (!layer_textures)
             return;
-        const currentOpacity = this.current_opacity;
-        if (this.current_mode === "draw") {
-            const temp_container = new Container();
-            const base_sprite = new Sprite(layer_textures.draw);
-            temp_container.addChild(base_sprite);
-            const stroke_sprite = new Sprite(this.stroke_texture);
-            stroke_sprite.alpha = currentOpacity;
-            temp_container.addChild(stroke_sprite);
-            this.app.renderer.render(temp_container, {
-                renderTexture: layer_textures.draw
-            });
-            temp_container.destroy({ children: true });
-        }
-        else {
-            if (!this.stroke_texture)
-                return;
-            const erase_container = new Container();
-            const content_sprite = new Sprite(layer_textures.draw);
-            erase_container.addChild(content_sprite);
-            const mask_sprite = new Sprite(this.stroke_texture);
-            erase_container.setMask({ mask: mask_sprite, inverse: true });
-            this.app.renderer.render(erase_container, {
-                renderTexture: layer_textures.draw
-            });
-            erase_container.destroy({ children: true });
-        }
-        const final_texture = RenderTexture.create({
-            width: this.dimensions.width,
-            height: this.dimensions.height,
-            resolution: window.devicePixelRatio || 1
-        });
-        const final_container = new Container();
-        const final_sprite = new Sprite(layer_textures.draw);
-        final_container.addChild(final_sprite);
-        this.app.renderer.render(final_container, {
-            renderTexture: final_texture
-        });
-        final_container.destroy({ children: true });
-        const brush_command = new BrushCommand(this.image_editor_context, this.active_layer_id, this.original_layer_texture, final_texture);
+        const stroke_data = {
+            segments: [...this.current_stroke_segments],
+            layer_id: this.active_layer_id
+        };
+        const brush_command = new BrushCommand(this.image_editor_context, stroke_data, this.original_layer_texture);
         if (this.stroke_graphics) {
             this.stroke_graphics.clear();
         }
@@ -288,15 +407,15 @@ export class BrushTextures {
         });
         clear_container.destroy();
         this.is_new_stroke = true;
-        final_texture.destroy();
         this.original_layer_texture = null;
         this.active_layer_id = null;
-        this.image_editor_context.command_manager.execute(brush_command);
+        this.current_stroke_segments = [];
+        this.image_editor_context.command_manager.execute(brush_command, this.image_editor_context);
     }
     /**
      * Calculates the distance between two points.
      */
-    calculateDistance(x1, y1, x2, y2) {
+    calculate_distance(x1, y1, x2, y2) {
         return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
     }
     /**
@@ -311,12 +430,12 @@ export class BrushTextures {
         if (this.is_new_stroke && !this.original_layer_texture) {
             this.preserve_canvas_state();
         }
-        this.current_mode = mode;
         this.current_opacity =
             mode === "draw" ? Math.min(Math.max(opacity, 0), 1) : 0.5;
         const scaled_size = size;
         if (this.is_new_stroke) {
             this.stroke_graphics.clear();
+            this.current_stroke_segments = [];
             const clear_container = new Container();
             this.app.renderer.render(clear_container, {
                 renderTexture: this.stroke_texture
@@ -324,6 +443,16 @@ export class BrushTextures {
             clear_container.destroy();
             this.is_new_stroke = false;
         }
+        this.current_stroke_segments.push({
+            from_x,
+            from_y,
+            to_x,
+            to_y,
+            size: scaled_size,
+            color,
+            opacity: this.current_opacity,
+            mode
+        });
         if (mode === "draw") {
             let colorValue = 0xffffff;
             try {
@@ -345,7 +474,7 @@ export class BrushTextures {
                 alpha: 1.0
             });
         }
-        const distance = this.calculateDistance(from_x, from_y, to_x, to_y);
+        const distance = this.calculate_distance(from_x, from_y, to_x, to_y);
         if (distance < 0.1) {
             this.stroke_graphics.circle(from_x, from_y, scaled_size).fill();
         }
@@ -414,6 +543,14 @@ export class BrushTextures {
     get_dimensions() {
         return this.dimensions;
     }
+    /**
+     * Checks if textures are properly initialized.
+     */
+    get textures_initialized() {
+        return !!(this.stroke_texture &&
+            this.display_container &&
+            this.preview_sprite);
+    }
     /**
      * Cleanup all resources.
      */

package/dist/shared/brush/brush.js

@@ -121,10 +121,14 @@ export class BrushTool {
             this.commit_pending_changes();
         }
         if (this.brush_cursor) {
-            this.brush_cursor.set_active(tool === "draw" || tool === "erase");
+            const should_be_active = tool === "draw" || tool === "erase";
+            this.brush_cursor.set_active(should_be_active);
         }
         const new_mode = tool === "erase" ? "erase" : "draw";
-        if (tool === "erase" || tool === "draw") {
+        const mode_changed = this.state.mode !== new_mode;
+        const needs_brush_tool = tool === "erase" || tool === "draw";
+        const textures_initialized = this.brush_textures?.textures_initialized ?? false;
+        if (needs_brush_tool && (mode_changed || !textures_initialized)) {
             this.brush_textures?.initialize_textures();
         }
         if (this.state.mode !== new_mode) {
@@ -160,8 +164,9 @@ export class BrushTool {
             (this.current_tool !== "erase" && this.current_tool !== "draw")) {
             return;
         }
-        if (this.brush_cursor && !this.brush_cursor.is_over_image())
+        if (this.brush_cursor && !this.brush_cursor.is_over_image()) {
             return;
+        }
         if (this.brush_textures) {
             this.brush_textures.preserve_canvas_state();
         }

package/dist/shared/core/commands.d.ts

@@ -1,4 +1,4 @@
-import { type Writable } from "svelte/store";
+import type { ImageEditorContext } from "./editor";
 /**
  * Base command interface that is added to the command_managers history
  */
@@ -26,7 +26,7 @@ export interface Command {
      * Called by the command manager to execute the command, can act as a no-op if the work has already been done
      * This function must be able to recreate the command if the command is undone and redone (`stop`/`start`/`continue` will not be called again)
      */
-    execute(): any | Promise<any>;
+    execute(context?: ImageEditorContext): any | Promise<any>;
     /**
      * Called by the command manager to undo the command
      * This function must be able to undo the work done by the execute function
@@ -51,11 +51,12 @@ export declare class CommandNode {
  */
 export declare class CommandManager {
     history: CommandNode;
-    current_history: Writable<CommandNode>;
+    current_history: import("svelte/store").Writable<CommandNode>;
     undo(): void;
-    redo(): void;
-    execute(command: Command): void;
-    replay(full_history: CommandNode): void;
+    redo(context?: ImageEditorContext): void;
+    execute(command: Command, context: ImageEditorContext): Promise<void>;
+    wait_for_next_frame(): Promise<void>;
+    replay(full_history: CommandNode, context: ImageEditorContext): Promise<void>;
     contains(command_name: string): boolean;
     reset(): void;
 }

package/dist/shared/core/commands.js

@@ -14,6 +14,7 @@ export class CommandNode {
         this.previous = null;
     }
     push(command) {
+        this.next = null;
         const node = new CommandNode(command);
         node.previous = this;
         this.next = node;
@@ -30,29 +31,39 @@ export class CommandManager {
         if (this.history.previous) {
             this.history.command?.undo();
             this.history = this.history.previous;
-            this.current_history.set(this.history);
+            this.current_history.update(() => this.history);
         }
     }
-    redo() {
+    redo(context) {
         if (this.history.next) {
             this.history = this.history.next;
-            this.history.command?.execute();
+            this.history.command?.execute(context);
+            this.current_history.update(() => this.history);
         }
-        this.current_history.set(this.history);
     }
-    execute(command) {
-        command.execute();
+    async execute(command, context) {
+        await command.execute(context);
         this.history.push(command);
         this.history = this.history.next;
-        this.current_history.set(this.history);
+        this.current_history.update(() => this.history);
+    }
+    async wait_for_next_frame() {
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                resolve();
+            });
+        });
     }
-    replay(full_history) {
-        setTimeout(() => {
-            while (full_history.next) {
-                this.execute(full_history.next.command);
-                full_history = full_history.next;
-            }
-        }, 1000);
+    async replay(full_history, context) {
+        while (full_history.previous) {
+            full_history = full_history.previous;
+        }
+        while (full_history.next) {
+            await full_history.next.command.execute(context);
+            full_history = full_history.next;
+        }
+        this.history = full_history;
+        this.current_history.update(() => this.history);
     }
     contains(command_name) {
         let current = this.history;
@@ -65,6 +76,6 @@ export class CommandManager {
     }
     reset() {
         this.history = new CommandNode();
-        this.current_history.set(this.history);
+        this.current_history.update(() => this.history);
     }
 }

package/dist/shared/core/editor.d.ts

@@ -106,7 +106,7 @@ export declare class ImageEditor {
     private pad_bottom;
     private theme_mode;
     constructor(options: ImageEditorOptions);
-    private get context();
+    get context(): ImageEditorContext;
     init(): Promise<void>;
     private setup_containers;
     resize_canvas(width: number, height: number): void;

package/dist/shared/core/editor.js

@@ -185,6 +185,9 @@ export class ImageEditor {
             });
         }).observe(this.target_element);
         this.app = new Application();
+        if (!this.dark) {
+            globalThis.__PIXI_APP__ = this.app;
+        }
         await this.app.init({
             width: container_box.width,
             height: container_box.height,
@@ -197,7 +200,7 @@ export class ImageEditor {
         });
         const canvas = this.app.canvas;
         canvas.style.background = "transparent";
-        await this.setup_containers();
+        this.setup_containers();
         this.layer_manager.create_background_layer(this.width, this.height);
         this.layer_manager.init_layers(this.width, this.height);
         for (const tool of this.tools.values()) {
@@ -279,7 +282,7 @@ export class ImageEditor {
         });
         this.ready_resolve();
     }
-    async setup_containers() {
+    setup_containers() {
         this.image_container = new Container({
             eventMode: "static",
             sortableChildren: true
@@ -384,14 +387,14 @@ export class ImageEditor {
         }
     }
     async execute_command(command) {
-        await this.command_manager.execute(command);
+        await this.command_manager.execute(command, this.context);
     }
     undo() {
         this.command_manager.undo();
         this.notify("change");
     }
     redo() {
-        this.command_manager.redo();
+        this.command_manager.redo(this.context);
         this.notify("change");
     }
     async add_image({ image, resize = true }) {
@@ -407,7 +410,6 @@ 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({
@@ -439,6 +441,7 @@ export class ImageEditor {
         this.layer_manager.reset_layers(this.width, this.height);
         this.background_image = undefined;
         this.background_image_present.set(false);
+        this.command_manager.reset();
         await this.set_image_properties({
             width: this.width,
             height: this.height,
@@ -446,7 +449,6 @@ export class ImageEditor {
             position: { x: 0, y: 0 },
             animate: false
         });
-        this.command_manager = new CommandManager();
         this.layer_manager.create_background_layer(this.width, this.height);
         for (const tool of this.tools.values()) {
             tool.cleanup();
@@ -467,7 +469,7 @@ export class ImageEditor {
             user_created: true,
             make_active: true
         });
-        this.command_manager.execute(add_layer_command);
+        this.execute_command(add_layer_command);
         this.notify("change");
     }
     /**
@@ -488,10 +490,16 @@ export class ImageEditor {
             });
             return;
         }
+        const created_layer_ids = [];
         for await (const url of layer_urls) {
-            await this.layer_manager.add_layer_from_url(url);
+            const layer_id = await this.layer_manager.add_layer_from_url(url);
+            if (layer_id) {
+                created_layer_ids.push(layer_id);
+            }
+        }
+        if (created_layer_ids.length > 0) {
+            this.layer_manager.set_active_layer(created_layer_ids[0]);
         }
-        this.layer_manager.set_active_layer(_layers[0].id);
         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);
@@ -505,12 +513,12 @@ export class ImageEditor {
     }
     move_layer(id, direction) {
         const reorder_layer_command = new ReorderLayerCommand(this.context, id, direction);
-        this.command_manager.execute(reorder_layer_command);
+        this.execute_command(reorder_layer_command);
         this.notify("change");
     }
     delete_layer(id) {
         const remove_layer_command = new RemoveLayerCommand(this.context, id);
-        this.command_manager.execute(remove_layer_command);
+        this.execute_command(remove_layer_command);
         this.notify("change");
     }
     modify_canvas_size(width, height, anchor, scale) {

package/dist/shared/core/layers.d.ts

@@ -102,7 +102,7 @@ export declare class AddLayerCommand implements Command {
         layer_id?: string;
         make_active?: boolean;
     });
-    execute(): Promise<void>;
+    execute(context?: ImageEditorContext): Promise<void>;
     undo(): Promise<void>;
 }
 /**
@@ -119,7 +119,7 @@ export declare class RemoveLayerCommand implements Command {
      * Create a direct copy of the layer's texture
      */
     private captureTextureData;
-    execute(): Promise<void>;
+    execute(context?: ImageEditorContext): Promise<void>;
     undo(): Promise<void>;
     /**
      * Clean up resources when the command is no longer needed
@@ -138,6 +138,6 @@ export declare class ReorderLayerCommand implements Command {
     private direction;
     name: string;
     constructor(context: ImageEditorContext, layer_id: string, direction: "up" | "down");
-    execute(): Promise<void>;
+    execute(context?: ImageEditorContext): Promise<void>;
     undo(): Promise<void>;
 }