@gradio/imageeditor 0.14.4 → 0.15.0

package/dist/shared/image/image.d.ts

@@ -1,7 +1,7 @@
 import { Container, type ColorSource, Sprite, type Renderer, Texture } from "pixi.js";
 import { type ImageEditorContext, type Tool } from "../core/editor";
 import { type Tool as ToolbarTool, type Subtool } from "../Toolbar.svelte";
-import { type Command } from "../utils/commands";
+import { type Command } from "../core/commands";
 /**
  * Handles adding images to the editor
  * Only a single image can be added at a time
@@ -26,10 +26,10 @@ interface BgImageCommand extends Command {
      * Initial setup for the bg command
      * @returns
      */
-    start: () => Promise<[number, number]>;
+    start: () => Promise<void>;
 }
 export declare class AddImageCommand implements BgImageCommand {
-    sprite: Sprite;
+    sprite: Sprite | null;
     fixed_canvas: boolean;
     context: ImageEditorContext;
     background: Blob | File | Texture;
@@ -37,6 +37,10 @@ export declare class AddImageCommand implements BgImageCommand {
         width: number;
         height: number;
     };
+    computed_dimensions: {
+        width: number;
+        height: number;
+    };
     current_scale: number;
     current_position: {
         x: number;
@@ -45,8 +49,14 @@ export declare class AddImageCommand implements BgImageCommand {
     border_region: number;
     scaled_width: number;
     scaled_height: number;
+    private previous_image;
+    name: string;
     constructor(context: ImageEditorContext, background: Blob | File | Texture, fixed_canvas: boolean, border_region?: number);
-    start(): Promise<[number, number]>;
+    /**
+     * Creates a copy of a texture to avoid reference issues
+     */
+    private clone_texture;
+    start(): Promise<void>;
     private handle_image;
     execute(): Promise<void>;
     undo(): Promise<void>;

package/dist/shared/image/image.js

@@ -1,7 +1,7 @@
 import { Container, Graphics, Color, RenderTexture, Sprite, Texture } from "pixi.js";
 import {} from "../core/editor";
 import {} from "../Toolbar.svelte";
-import {} from "../utils/commands";
+import {} from "../core/commands";
 import { make_graphics } from "../utils/pixi";
 import { get } from "svelte/store";
 /**
@@ -30,17 +30,21 @@ export class ImageTool {
     }
 }
 export class AddImageCommand {
-    sprite;
+    sprite = null;
     fixed_canvas;
     context;
     background;
     current_canvas_size;
+    computed_dimensions;
     current_scale;
     current_position;
     border_region;
     scaled_width;
     scaled_height;
+    previous_image = null;
+    name;
     constructor(context, background, fixed_canvas, border_region = 0) {
+        this.name = "AddImage";
         this.context = context;
         this.background = background;
         this.fixed_canvas = fixed_canvas;
@@ -48,10 +52,40 @@ export class AddImageCommand {
         this.current_canvas_size = get(this.context.dimensions);
         this.current_scale = get(this.context.scale);
         this.current_position = get(this.context.position);
-        this.sprite = new Sprite();
+        this.computed_dimensions = { width: 0, height: 0 };
+        if (this.context.background_image &&
+            this.context.background_image.texture) {
+            const bg = this.context.background_image;
+            const stored_border_region = bg.borderRegion || 0;
+            this.previous_image = {
+                texture: this.clone_texture(bg.texture),
+                width: bg.width,
+                height: bg.height,
+                x: bg.position.x,
+                y: bg.position.y,
+                border_region: stored_border_region
+            };
+        }
+    }
+    /**
+     * Creates a copy of a texture to avoid reference issues
+     */
+    clone_texture(texture) {
+        const render_texture = RenderTexture.create({
+            width: texture.width,
+            height: texture.height,
+            resolution: window.devicePixelRatio || 1
+        });
+        const sprite = new Sprite(texture);
+        const container = new Container();
+        container.addChild(sprite);
+        this.context.app.renderer.render(container, {
+            renderTexture: render_texture
+        });
+        container.destroy({ children: true });
+        return render_texture;
     }
     async start() {
-        // Create the sprite from the blob
         let image_texture;
         if (this.background instanceof Texture) {
             image_texture = this.background;
@@ -61,27 +95,25 @@ export class AddImageCommand {
             image_texture = Texture.from(img);
         }
         this.sprite = new Sprite(image_texture);
-        return this.handle_image();
+        const [width, height] = this.handle_image();
+        this.computed_dimensions = { width, height };
     }
     handle_image() {
-        // Handle fixed canvas differently when border region is present
+        if (this.sprite === null) {
+            return [0, 0];
+        }
         if (this.fixed_canvas) {
-            // Calculate the effective canvas size accounting for border region
             const effectiveCanvasWidth = Math.max(this.current_canvas_size.width - this.border_region * 2, 10);
             const effectiveCanvasHeight = Math.max(this.current_canvas_size.height - this.border_region * 2, 10);
-            // Fit the image to the canvas while maintaining aspect ratio
             const { width, height, x, y } = fit_image_to_canvas(this.sprite.width, this.sprite.height, effectiveCanvasWidth, effectiveCanvasHeight);
             this.sprite.width = width;
             this.sprite.height = height;
-            // Center the image in the canvas
             this.sprite.x = x + this.border_region;
             this.sprite.y = y + this.border_region;
         }
         else {
-            // For non-fixed canvas, use natural dimensions plus border
             const width = this.sprite.width;
             const height = this.sprite.height;
-            // Position at the border's offset from origin
             this.sprite.x = this.border_region;
             this.sprite.y = this.border_region;
             return [width + this.border_region * 2, height + this.border_region * 2];
@@ -89,11 +121,13 @@ export class AddImageCommand {
         return [this.current_canvas_size.width, this.current_canvas_size.height];
     }
     async execute() {
-        // First ensure we have run start() to create the sprite and get dimensions
-        const [width, height] = await this.start();
-        // Update image properties with the original dimensions and center in viewport
+        await this.start();
+        if (this.sprite === null) {
+            return;
+        }
+        const { width, height } = this.computed_dimensions;
         await this.context.set_image_properties({
-            scale: 1, // Start at 1:1 scale
+            scale: 1,
             position: {
                 x: this.context.app.screen.width / 2,
                 y: this.context.app.screen.height / 2
@@ -101,18 +135,57 @@ export class AddImageCommand {
             width: this.fixed_canvas ? this.current_canvas_size.width : width,
             height: this.fixed_canvas ? this.current_canvas_size.height : height
         });
-        // Create new background layer and add the sprite
         const background_layer = this.context.layer_manager.create_background_layer(this.fixed_canvas ? this.current_canvas_size.width : width, this.fixed_canvas ? this.current_canvas_size.height : height);
         this.sprite.zIndex = 0;
         background_layer.addChild(this.sprite);
-        // Resize and preserve content of existing layers
         this.context.layer_manager.reset_layers(this.fixed_canvas ? this.current_canvas_size.width : width, this.fixed_canvas ? this.current_canvas_size.height : height, true);
+        if (this.border_region > 0) {
+            this.sprite.borderRegion = this.border_region;
+        }
         this.context.set_background_image(this.sprite);
         this.context.reset();
     }
     async undo() {
         if (this.sprite) {
             this.sprite.destroy();
+            if (this.previous_image) {
+                const previous_sprite = new Sprite(this.previous_image.texture);
+                previous_sprite.width = this.previous_image.width;
+                previous_sprite.height = this.previous_image.height;
+                previous_sprite.position.set(this.previous_image.x, this.previous_image.y);
+                if (this.previous_image.border_region > 0) {
+                    previous_sprite.borderRegion =
+                        this.previous_image.border_region;
+                }
+                await this.context.set_image_properties({
+                    scale: 1,
+                    position: {
+                        x: this.context.app.screen.width / 2,
+                        y: this.context.app.screen.height / 2
+                    },
+                    width: this.previous_image.width,
+                    height: this.previous_image.height
+                });
+                const background_layer = this.context.layer_manager.create_background_layer(this.previous_image.width, this.previous_image.height);
+                previous_sprite.zIndex = 0;
+                background_layer.addChild(previous_sprite);
+                this.context.layer_manager.reset_layers(this.previous_image.width, this.previous_image.height, true);
+                this.context.set_background_image(previous_sprite);
+            }
+            else {
+                await this.context.set_image_properties({
+                    scale: 1,
+                    position: {
+                        x: this.context.app.screen.width / 2,
+                        y: this.context.app.screen.height / 2
+                    },
+                    width: this.current_canvas_size.width,
+                    height: this.current_canvas_size.height
+                });
+                this.context.layer_manager.create_background_layer(this.current_canvas_size.width, this.current_canvas_size.height);
+                this.context.layer_manager.reset_layers(this.current_canvas_size.width, this.current_canvas_size.height);
+            }
+            this.context.reset();
         }
     }
 }
@@ -129,6 +202,7 @@ export class AddImageCommand {
 export function add_bg_color(container, renderer, color, width, height, resize) {
     let sprite;
     return {
+        name: "AddBgColor",
         start() {
             container.removeChildren();
             const graphics = make_graphics(1);
@@ -171,7 +245,6 @@ export function fit_image_to_canvas(image_width, image_height, canvas_width, can
         new_height = canvas_height;
         new_width = canvas_height * image_aspect_ratio;
     }
-    // center image
     const x = Math.round((canvas_width - new_width) / 2);
     const y = Math.round((canvas_height - new_height) / 2);
     return {

package/dist/shared/resize/resize.d.ts

@@ -1,5 +1,35 @@
 import { type ImageEditorContext, type Tool } from "../core/editor";
 import { type Tool as ToolbarTool, type Subtool } from "../Toolbar.svelte";
+import { type Command } from "../core/commands";
+/**
+ * Command that handles resizing the image and supports undo/redo
+ */
+export declare class ResizeCommand implements Command {
+    private context;
+    private original_width;
+    private original_height;
+    private original_x;
+    private original_y;
+    private new_width;
+    private new_height;
+    private new_x;
+    private new_y;
+    private reset_ui;
+    name: string;
+    constructor(context: ImageEditorContext, original_state: {
+        width: number;
+        height: number;
+        x: number;
+        y: number;
+    }, new_state: {
+        width: number;
+        height: number;
+        x: number;
+        y: number;
+    }, reset_ui: () => void);
+    execute(): Promise<void>;
+    undo(): Promise<void>;
+}
 /**
  * @class ResizeTool
  * @implements {Tool}
@@ -31,6 +61,7 @@ export declare class ResizeTool implements Tool {
     private dom_mouseup_handler;
     private event_callbacks;
     private last_scale;
+    private original_state;
     /**
      * @method setup
      * @async