@gradio/imageeditor 0.12.13 → 0.13.0

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

@@ -0,0 +1,89 @@
+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";
+/**
+ * Handles adding images to the editor
+ * Only a single image can be added at a time
+ * Adding an image removes the current image is one exists
+ */
+export declare class ImageTool implements Tool {
+    name: string;
+    context: ImageEditorContext;
+    current_tool: ToolbarTool;
+    current_subtool: Subtool;
+    setup(context: ImageEditorContext, tool: ToolbarTool, subtool: Subtool): Promise<void>;
+    cleanup(): void;
+    add_image({ image, fixed_canvas, border_region }: {
+        image: Blob | File | Texture;
+        fixed_canvas: boolean;
+        border_region?: number;
+    }): Promise<void>;
+    set_tool(tool: ToolbarTool, subtool: Subtool): void;
+}
+interface BgImageCommand extends Command {
+    /**
+     * Initial setup for the bg command
+     * @returns
+     */
+    start: () => Promise<[number, number]>;
+}
+export declare class AddImageCommand implements BgImageCommand {
+    sprite: Sprite;
+    fixed_canvas: boolean;
+    context: ImageEditorContext;
+    background: Blob | File | Texture;
+    current_canvas_size: {
+        width: number;
+        height: number;
+    };
+    current_scale: number;
+    current_position: {
+        x: number;
+        y: number;
+    };
+    border_region: number;
+    scaled_width: number;
+    scaled_height: number;
+    constructor(context: ImageEditorContext, background: Blob | File | Texture, fixed_canvas: boolean, border_region?: number);
+    start(): Promise<[number, number]>;
+    private handle_image;
+    execute(): Promise<void>;
+    undo(): Promise<void>;
+}
+/**
+ * Command that sets a background
+ */
+interface BgColorCommand extends Command {
+    /**
+     * Initial setup for the bg command
+     * @returns
+     */
+    start: () => [number, number];
+}
+/**
+ * Adds a background color to the canvas.
+ * @param container The container to add the image to.
+ * @param renderer The renderer to use for the image.
+ * @param color The background color to add.
+ * @param width The width of the background.
+ * @param height The height of the background.
+ * @param resize The function to resize the canvas.
+ * @returns A command that can be used to undo the action.
+ */
+export declare function add_bg_color(container: Container, renderer: Renderer, color: ColorSource, width: number, height: number, resize: (width: number, height: number) => void): BgColorCommand;
+/**
+ * Calculates new dimensions and position for an image to fit within a canvas while maintaining aspect ratio
+ * @param image_width Original width of the image
+ * @param image_height Original height of the image
+ * @param canvas_width Width of the canvas
+ * @param canvas_height Height of the canvas
+ * @returns Object containing new dimensions and position
+ */
+export declare function fit_image_to_canvas(image_width: number, image_height: number, canvas_width: number, canvas_height: number): {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+};
+export {};

package/dist/shared/image/image.js

@@ -0,0 +1,185 @@
+import { Container, Graphics, Color, RenderTexture, Sprite, Texture } from "pixi.js";
+import {} from "../core/editor";
+import {} from "../Toolbar.svelte";
+import {} from "../utils/commands";
+import { make_graphics } from "../utils/pixi";
+import { get } from "svelte/store";
+/**
+ * Handles adding images to the editor
+ * Only a single image can be added at a time
+ * Adding an image removes the current image is one exists
+ */
+export class ImageTool {
+    name = "image";
+    context;
+    current_tool;
+    current_subtool;
+    async setup(context, tool, subtool) {
+        this.context = context;
+        this.current_tool = tool;
+        this.current_subtool = subtool;
+    }
+    cleanup() { }
+    async add_image({ image, fixed_canvas, border_region = 0 }) {
+        const image_command = new AddImageCommand(this.context, image, fixed_canvas, border_region);
+        await image_command.start();
+        this.context.execute_command(image_command);
+    }
+    set_tool(tool, subtool) {
+        this.current_tool = tool;
+        this.current_subtool = subtool;
+    }
+}
+export class AddImageCommand {
+    sprite;
+    fixed_canvas;
+    context;
+    background;
+    current_canvas_size;
+    current_scale;
+    current_position;
+    border_region;
+    scaled_width;
+    scaled_height;
+    constructor(context, background, fixed_canvas, border_region = 0) {
+        this.context = context;
+        this.background = background;
+        this.fixed_canvas = fixed_canvas;
+        this.border_region = border_region;
+        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();
+    }
+    async start() {
+        // Create the sprite from the blob
+        let image_texture;
+        if (this.background instanceof Texture) {
+            image_texture = this.background;
+        }
+        else {
+            const img = await createImageBitmap(this.background);
+            image_texture = Texture.from(img);
+        }
+        this.sprite = new Sprite(image_texture);
+        return this.handle_image();
+    }
+    handle_image() {
+        // Handle fixed canvas differently when border region is present
+        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];
+        }
+        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
+        this.context.set_image_properties({
+            scale: 1, // Start at 1:1 scale
+            position: {
+                x: this.context.app.screen.width / 2,
+                y: this.context.app.screen.height / 2
+            },
+            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);
+        this.context.set_background_image(this.sprite);
+        this.context.reset();
+    }
+    async undo() {
+        if (this.sprite) {
+            this.sprite.destroy();
+        }
+        // The background layer will be automatically cleaned up when a new image is added
+    }
+}
+/**
+ * Adds a background color to the canvas.
+ * @param container The container to add the image to.
+ * @param renderer The renderer to use for the image.
+ * @param color The background color to add.
+ * @param width The width of the background.
+ * @param height The height of the background.
+ * @param resize The function to resize the canvas.
+ * @returns A command that can be used to undo the action.
+ */
+export function add_bg_color(container, renderer, color, width, height, resize) {
+    let sprite;
+    return {
+        start() {
+            container.removeChildren();
+            const graphics = make_graphics(1);
+            const texture = RenderTexture.create({
+                width,
+                height
+            });
+            renderer.render(graphics, { renderTexture: texture });
+            sprite = new Sprite(texture);
+            return [sprite.width, sprite.height];
+        },
+        async execute() {
+            resize(sprite.width, sprite.height);
+            sprite.zIndex = 1;
+            container.addChild(sprite);
+        },
+        undo() {
+            container.removeChildren();
+        }
+    };
+}
+/**
+ * Calculates new dimensions and position for an image to fit within a canvas while maintaining aspect ratio
+ * @param image_width Original width of the image
+ * @param image_height Original height of the image
+ * @param canvas_width Width of the canvas
+ * @param canvas_height Height of the canvas
+ * @returns Object containing new dimensions and position
+ */
+export function fit_image_to_canvas(image_width, image_height, canvas_width, canvas_height) {
+    const image_aspect_ratio = image_width / image_height;
+    const canvas_aspect_ratio = canvas_width / canvas_height;
+    let new_width;
+    let new_height;
+    if (image_aspect_ratio > canvas_aspect_ratio) {
+        new_width = canvas_width;
+        new_height = canvas_width / image_aspect_ratio;
+    }
+    else {
+        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 {
+        width: Math.round(new_width),
+        height: Math.round(new_height),
+        x,
+        y
+    };
+}

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

@@ -0,0 +1,270 @@
+import { type ImageEditorContext, type Tool } from "../core/editor";
+import { type Tool as ToolbarTool, type Subtool } from "../Toolbar.svelte";
+/**
+ * @class ResizeTool
+ * @implements {Tool}
+ * @description Implements the resize tool functionality for the image editor
+ */
+export declare class ResizeTool implements Tool {
+    name: "resize";
+    private image_editor_context;
+    current_tool: ToolbarTool;
+    current_subtool: Subtool;
+    private current_cursor;
+    private readonly CORNER_SIZE;
+    private readonly LINE_THICKNESS;
+    private readonly HANDLE_COLOR;
+    private readonly HIT_AREA_SIZE;
+    private borderRegion;
+    private is_dragging;
+    private selected_handle;
+    private active_corner_index;
+    private active_edge_index;
+    private last_pointer_position;
+    private resize_ui_container;
+    private dimensions;
+    private position;
+    private scale;
+    private is_moving;
+    private dom_mousedown_handler;
+    private dom_mousemove_handler;
+    private dom_mouseup_handler;
+    private event_callbacks;
+    private last_scale;
+    /**
+     * @method setup
+     * @async
+     * @description Sets up the resize tool with the given context and tool/subtool
+     * @param {ImageEditorContext} context - The image editor context
+     * @param {ToolbarTool} tool - The current tool
+     * @param {Subtool} subtool - The current subtool
+     * @returns {Promise<void>}
+     */
+    setup(context: ImageEditorContext, tool: ToolbarTool, subtool: Subtool): Promise<void>;
+    /**
+     * @method cleanup
+     * @description Cleans up the resize tool resources and removes event listeners
+     * @returns {void}
+     */
+    cleanup(): void;
+    /**
+     * @method set_tool
+     * @description Sets the current tool and subtool, updating UI visibility
+     * @param {ToolbarTool} tool - The tool to set
+     * @param {Subtool} subtool - The subtool to set
+     * @returns {void}
+     */
+    set_tool(tool: ToolbarTool, subtool: Subtool): void;
+    /**
+     * @method init_resize_ui
+     * @private
+     * @async
+     * @description Initializes the resize UI elements and sets up the update loop
+     * @returns {Promise<void>}
+     */
+    private init_resize_ui;
+    /**
+     * @method make_resize_ui
+     * @private
+     * @description Creates the resize UI with the specified dimensions
+     * @param {number} width - Width of the resize area
+     * @param {number} height - Height of the resize area
+     * @returns {Container} The created resize UI container
+     */
+    private make_resize_ui;
+    /**
+     * @method create_handle
+     * @private
+     * @description Creates a handle for the resize UI
+     * @param {boolean} [is_edge=false] - Whether the handle is an edge handle
+     * @returns {Container} The created handle container
+     */
+    private create_handle;
+    /**
+     * @method create_edge_handles
+     * @private
+     * @description Creates edge handles for the resize UI
+     * @param {Container} container - The container to add handles to
+     * @param {number} width - Width of the resize area
+     * @param {number} height - Height of the resize area
+     * @returns {void}
+     */
+    private create_edge_handles;
+    /**
+     * @method create_corner_handles
+     * @private
+     * @description Creates corner handles for the resize UI
+     * @param {Container} container - The container to add handles to
+     * @param {number} width - Width of the resize area
+     * @param {number} height - Height of the resize area
+     * @returns {void}
+     */
+    private create_corner_handles;
+    /**
+     * @method handle_pointer_down
+     * @private
+     * @description Handles pointer down events on handles
+     * @param {FederatedPointerEvent} event - The pointer event
+     * @param {Container} handle - The handle that was clicked
+     * @param {number} corner_index - Index of the corner (-1 if not a corner)
+     * @param {number} edge_index - Index of the edge (-1 if not an edge)
+     * @returns {void}
+     */
+    private handle_pointer_down;
+    /**
+     * Maintains aspect ratio during resizing
+     * @param new_width - The new width
+     * @param new_height - The new height
+     * @param original_aspect_ratio - The original aspect ratio
+     * @param delta - The delta to apply
+     * @returns The adjusted dimensions
+     */
+    private maintain_aspect_ratio;
+    /**
+     * Limits dimensions based on constraints
+     * @param width - The width to limit
+     * @param height - The height to limit
+     * @param maintain_aspect_ratio - Whether to maintain aspect ratio
+     * @returns The limited dimensions
+     */
+    private limit_dimensions;
+    /**
+     * Calculates position deltas based on dimension changes
+     * @param old_width - The original width
+     * @param old_height - The original height
+     * @param new_width - The new width
+     * @param new_height - The new height
+     * @returns Object containing x and y position deltas
+     */
+    private calculate_position_deltas;
+    /**
+     * Applies boundary constraints to keep the image within the container
+     * @private
+     */
+    private apply_boundary_constraints;
+    /**
+     * Updates the resize bounds based on the delta
+     * @param delta - The delta to apply
+     * @param maintain_aspect_ratio - Whether to maintain the aspect ratio
+     */
+    private update_resize_bounds;
+    /**
+     * updates the resize ui position and dimensions
+     */
+    private update_resize_ui;
+    /**
+     * updates the positions of all handles
+     * @param width - width of the resize area
+     * @param height - height of the resize area
+     */
+    private update_handle_positions;
+    /**
+     * sets up event listeners for the resize tool
+     */
+    private setup_event_listeners;
+    /**
+     * Sets up direct DOM event listeners for dragging the background image
+     */
+    private setup_dom_event_listeners;
+    /**
+     * Cleans up DOM event listeners
+     */
+    private cleanup_dom_event_listeners;
+    /**
+     * removes event listeners for the resize tool
+     */
+    private cleanup_event_listeners;
+    /**
+     * Handles pointer move events
+     */
+    private handle_pointer_move;
+    /**
+     * handles pointer up events
+     */
+    private handle_pointer_up;
+    /**
+     * Handles dragging of the background image
+     * @param current_position - The current pointer position
+     * @private
+     */
+    private handle_image_dragging;
+    /**
+     * Handles corner resizing
+     * @param current_position - The current mouse position
+     * @param original_width - The original width
+     * @param original_height - The original height
+     * @param original_x - The original x position
+     * @param original_y - The original y position
+     * @param original_aspect_ratio - The original aspect ratio
+     * @param maintain_aspect_ratio - Whether to maintain aspect ratio
+     * @returns The new dimensions and position
+     * @private
+     */
+    private handle_direct_corner_resize;
+    /**
+     * Handles edge resizing
+     * @param current_position - The current mouse position
+     * @param original_width - The original width
+     * @param original_height - The original height
+     * @param original_x - The original x position
+     * @param original_y - The original y position
+     * @returns The new dimensions and position
+     * @private
+     */
+    private handle_direct_edge_resize;
+    /**
+     * Limits dimensions to container size
+     * @param dimensions - The dimensions to limit
+     * @param original_x - The original x position
+     * @param original_y - The original y position
+     * @param original_width - The original width
+     * @param original_height - The original height
+     * @param maintain_aspect_ratio - Whether to maintain aspect ratio
+     * @returns The limited dimensions and position
+     * @private
+     */
+    private limit_dimensions_to_container;
+    /**
+     * Apply size limits to ensure dimensions don't exceed container
+     * @private
+     */
+    private apply_size_limits;
+    /**
+     * Adjust position based on which handles are being dragged
+     * @private
+     */
+    private adjust_position_for_resizing;
+    /**
+     * Apply border region constraints to prevent image from intruding on border
+     * @private
+     */
+    private apply_border_constraints;
+    /**
+     * Apply top and left border constraints
+     * @private
+     */
+    private apply_top_left_constraints;
+    /**
+     * Apply bottom and right border constraints
+     * @private
+     */
+    private apply_bottom_right_constraints;
+    /**
+     * Shows the resize UI
+     * @private
+     */
+    private show_resize_ui;
+    /**
+     * Hides the resize UI
+     * @private
+     */
+    private hide_resize_ui;
+    on<T extends string>(event: T, callback: () => void): void;
+    off<T extends string>(event: T, callback: () => void): void;
+    private notify;
+    /**
+     * Sets the border region explicitly
+     * @param borderRegion The border region size in pixels
+     */
+    set_border_region(borderRegion: number): void;
+}