@gradio/imageeditor 0.12.14 → 0.14.0

package/dist/shared/brush/brush.js

@@ -0,0 +1,397 @@
+import { Container } from "pixi.js";
+import {} from "../core/editor";
+import {} from "../Toolbar.svelte";
+import tinycolor from "tinycolor2";
+import { BrushCursor } from "./brush-cursor";
+import { BrushTextures } from "./brush-textures";
+import { recurse_set_cursor } from "./brush-utils";
+import {} from "./types";
+/**
+ * BrushTool class implements the Tool interface for drawing and erasing.
+ * @class
+ * @implements {Tool}
+ */
+export class BrushTool {
+    /**
+     * The name of the tool.
+     * @type {string}
+     */
+    name = "brush";
+    /**
+     * The context of the image editor.
+     * @private
+     */
+    image_editor_context;
+    /**
+     * The current tool selected in the toolbar.
+     * @private
+     */
+    current_tool;
+    /**
+     * The current subtool selected in the toolbar.
+     * @private
+     */
+    current_subtool;
+    /**
+     * The state of the brush tool.
+     * @private
+     */
+    state = {
+        opacity: 1,
+        brush_size: 10,
+        color: "#000000",
+        mode: "draw"
+    };
+    /**
+     * Size settings for brush and eraser
+     * @private
+     */
+    brush_size = 10;
+    eraser_size = 20;
+    /**
+     * Drawing state
+     * @private
+     */
+    is_drawing = false;
+    last_x = 0;
+    last_y = 0;
+    scale = 1;
+    /**
+     * Event listeners
+     * @private
+     */
+    _bound_pointer_down = null;
+    _bound_pointer_move = null;
+    _bound_pointer_up = null;
+    event_callbacks = new Map();
+    /**
+     * Utility modules
+     * @private
+     */
+    brush_cursor = null;
+    brush_textures = null;
+    /**
+     * Sets up the brush tool with the given context, tool, and subtool.
+     * @param {ImageEditorContext} context - The image editor context.
+     * @param {ToolbarTool} tool - The tool from the toolbar.
+     * @param {Subtool} subtool - The subtool from the toolbar.
+     * @returns {Promise<void>}
+     */
+    async setup(context, tool, subtool) {
+        // Store context and tool information
+        this.image_editor_context = context;
+        this.current_tool = tool;
+        this.current_subtool = subtool;
+        // Set mode based on tool
+        this.state.mode = tool === "erase" ? "erase" : "draw";
+        // Set size based on mode
+        if (this.state.mode === "draw") {
+            this.state.brush_size = this.brush_size;
+        }
+        else {
+            this.state.brush_size = this.eraser_size;
+        }
+        // Subscribe to scale changes
+        context.scale.subscribe((scale) => {
+            this.scale = scale;
+            if (this.brush_cursor) {
+                this.brush_cursor.update_state(this.state, this.scale);
+            }
+        });
+        // Initialize brush cursor
+        this.brush_cursor = new BrushCursor(this.image_editor_context, this.state, this.scale);
+        // Set initial active state
+        this.brush_cursor.set_active(tool === "draw" || tool === "erase");
+        // Initialize brush textures
+        this.brush_textures = new BrushTextures(this.image_editor_context, context.app);
+        this.brush_textures.initialize_textures();
+        // Set up event listeners
+        this.setup_event_listeners();
+        // Set cursor style for image container
+        this.handle_cursors(tool);
+    }
+    /**
+     * Handles cursor styles for the brush tool.
+     * @param {ToolbarTool} tool - The current tool.
+     * @private
+     */
+    handle_cursors(tool) {
+        // Set cursor style to 'none' for all children of the image container
+        recurse_set_cursor(this.image_editor_context.image_container.children, "none");
+    }
+    /**
+     * Sets the current tool and subtool.
+     * @param {ToolbarTool} tool - The current tool.
+     * @param {Subtool} subtool - The current subtool.
+     */
+    set_tool(tool, subtool) {
+        // Update current tool and subtool
+        this.current_tool = tool;
+        this.current_subtool = subtool;
+        if (this.current_tool !== "erase" && this.current_tool !== "draw") {
+            this.commit_pending_changes();
+        }
+        // Commit any pending changes
+        // Set brush cursor active state
+        if (this.brush_cursor) {
+            this.brush_cursor.set_active(tool === "draw" || tool === "erase");
+        }
+        // Update mode based on tool
+        const new_mode = tool === "erase" ? "erase" : "draw";
+        if (tool === "erase" || tool === "draw") {
+            this.brush_textures?.initialize_textures();
+        }
+        if (this.state.mode !== new_mode) {
+            this.state.mode = new_mode;
+            // Update brush size based on mode
+            if (this.state.mode === "draw") {
+                this.state.brush_size = this.brush_size;
+            }
+            else {
+                this.state.brush_size = this.eraser_size;
+            }
+            // Update cursor
+            if (this.brush_cursor) {
+                this.brush_cursor.update_state(this.state, this.scale);
+            }
+        }
+    }
+    /**
+     * Commits any pending changes to the canvas.
+     * @private
+     */
+    commit_pending_changes() {
+        if (this.is_drawing) {
+            this.on_pointer_up();
+        }
+    }
+    /**
+     * Called when the user presses the mouse button.
+     * @param {FederatedPointerEvent} event - The pointer event.
+     * @private
+     */
+    on_pointer_down(event) {
+        const current_layer = this.image_editor_context.layer_manager.get_active_layer();
+        if (!current_layer?.visible ||
+            (this.current_tool !== "erase" && this.current_tool !== "draw")) {
+            return;
+        }
+        if (this.brush_cursor && !this.brush_cursor.is_over_image())
+            return;
+        // Preserve the current canvas state
+        if (this.brush_textures) {
+            this.brush_textures.preserve_canvas_state();
+        }
+        // Get the local position
+        const local_pos = this.image_editor_context.image_container.toLocal(event.global);
+        // Start drawing
+        this.is_drawing = true;
+        this.last_x = local_pos.x;
+        this.last_y = local_pos.y;
+        // Draw a single point
+        if (this.brush_textures) {
+            this.brush_textures.draw_segment(local_pos.x, local_pos.y, local_pos.x, local_pos.y, this.state.brush_size, this.state.color, this.state.opacity, this.state.mode);
+        }
+    }
+    /**
+     * Called when the user moves the mouse while drawing.
+     * @param {FederatedPointerEvent} event - The pointer event.
+     * @private
+     */
+    on_pointer_move(event) {
+        // Update cursor position
+        if (this.brush_cursor) {
+            this.brush_cursor.update_cursor_position(event);
+        }
+        // If not drawing, exit
+        if (!this.is_drawing)
+            return;
+        // Get the local position
+        const local_pos = this.image_editor_context.image_container.toLocal(event.global);
+        // Draw line from last position to current position
+        if (this.brush_textures) {
+            this.brush_textures.draw_segment(this.last_x, this.last_y, local_pos.x, local_pos.y, this.state.brush_size, this.state.color, this.state.opacity, this.state.mode);
+        }
+        // Update last position
+        this.last_x = local_pos.x;
+        this.last_y = local_pos.y;
+    }
+    /**
+     * Called when the user releases the mouse button.
+     * @private
+     */
+    on_pointer_up() {
+        // If not drawing, exit
+        if (!this.is_drawing)
+            return;
+        // Stop drawing
+        this.is_drawing = false;
+        // Commit the stroke
+        if (this.brush_textures) {
+            this.brush_textures.commit_stroke();
+        }
+        this.notify("change");
+    }
+    /**
+     * Sets up event listeners for drawing.
+     * @private
+     */
+    setup_event_listeners() {
+        // Remove existing listeners if they exist
+        this.cleanup_event_listeners();
+        // Create bound event handlers
+        this._bound_pointer_down = this.on_pointer_down.bind(this);
+        this._bound_pointer_move = this.on_pointer_move.bind(this);
+        this._bound_pointer_up = this.on_pointer_up.bind(this);
+        // Set interactive mode for image container
+        const image_container = this.image_editor_context.image_container;
+        image_container.eventMode = "static";
+        image_container.interactiveChildren = true;
+        // Setup for stage
+        const stage = this.image_editor_context.app.stage;
+        stage.eventMode = "static";
+        // Add pointer events to the stage for global tracking
+        stage.on("pointerdown", this._bound_pointer_down);
+        stage.on("pointermove", this._bound_pointer_move);
+        stage.on("pointerup", this._bound_pointer_up);
+        stage.on("pointerupoutside", this._bound_pointer_up);
+        // Set up cursor event listeners
+        if (this.brush_cursor) {
+            this.brush_cursor.setup_event_listeners();
+        }
+    }
+    /**
+     * Cleans up event listeners.
+     * @private
+     */
+    cleanup_event_listeners() {
+        const stage = this.image_editor_context.app.stage;
+        // Remove event listeners if they exist
+        if (this._bound_pointer_down) {
+            stage.off("pointerdown", this._bound_pointer_down);
+            this._bound_pointer_down = null;
+        }
+        if (this._bound_pointer_move) {
+            stage.off("pointermove", this._bound_pointer_move);
+            this._bound_pointer_move = null;
+        }
+        if (this._bound_pointer_up) {
+            stage.off("pointerup", this._bound_pointer_up);
+            stage.off("pointerupoutside", this._bound_pointer_up);
+            this._bound_pointer_up = null;
+        }
+        // Clean up cursor event listeners
+        if (this.brush_cursor) {
+            this.brush_cursor.cleanup_event_listeners();
+        }
+    }
+    /**
+     * Sets the brush size.
+     * @param {number} size - The new brush size.
+     */
+    set_brush_size(size) {
+        // Set brush size
+        this.brush_size = size;
+        // Update state if in draw mode
+        if (this.state.mode === "draw") {
+            this.state.brush_size = size;
+            // Update cursor
+            if (this.brush_cursor) {
+                this.brush_cursor.update_state(this.state, this.scale);
+            }
+        }
+    }
+    /**
+     * Sets the brush color.
+     * @param {string|ColorInput} color - The new brush color.
+     */
+    set_brush_color(color) {
+        // Convert to hex string
+        const color_string = tinycolor(color).toHexString();
+        // Set color
+        this.state.color = color_string;
+        // Update cursor
+        if (this.brush_cursor) {
+            this.brush_cursor.update_state(this.state, this.scale);
+        }
+    }
+    /**
+     * Sets the brush opacity.
+     * @param {number} opacity - The new brush opacity.
+     */
+    set_brush_opacity(opacity) {
+        // Clamp opacity between 0 and 1
+        const clamped_opacity = Math.max(0, Math.min(1, opacity));
+        // Set opacity
+        this.state.opacity = clamped_opacity;
+        // Update cursor
+        if (this.brush_cursor) {
+            this.brush_cursor.update_state(this.state, this.scale);
+        }
+    }
+    /**
+     * Sets the eraser size.
+     * @param {number} size - The new eraser size.
+     */
+    set_eraser_size(size) {
+        // Store the new eraser size
+        this.eraser_size = size;
+        // Update state if in erase mode
+        if (this.state.mode === "erase") {
+            this.state.brush_size = size;
+            // Update cursor
+            if (this.brush_cursor) {
+                this.brush_cursor.update_state(this.state, this.scale);
+            }
+        }
+    }
+    /**
+     * Gets the current size based on mode (brush or eraser).
+     * @returns {number} The current size.
+     */
+    get_current_size() {
+        return this.state.mode === "draw" ? this.brush_size : this.eraser_size;
+    }
+    /**
+     * Shows or hides the brush preview.
+     * @param {boolean} show - Whether to show the preview.
+     */
+    preview_brush(show) {
+        if (this.brush_cursor) {
+            this.brush_cursor.preview_brush(show);
+        }
+    }
+    /**
+     * Cleans up resources used by the brush tool.
+     */
+    cleanup() {
+        // Commit any pending changes
+        this.commit_pending_changes();
+        // Clean up event listeners
+        this.cleanup_event_listeners();
+        // Clean up brush textures
+        if (this.brush_textures) {
+            this.brush_textures.cleanup();
+            this.brush_textures = null;
+        }
+        // Clean up brush cursor
+        if (this.brush_cursor) {
+            this.brush_cursor.cleanup();
+            this.brush_cursor = null;
+        }
+    }
+    on(event, callback) {
+        this.event_callbacks.set(event, [
+            ...(this.event_callbacks.get(event) || []),
+            callback
+        ]);
+    }
+    off(event, callback) {
+        this.event_callbacks.set(event, this.event_callbacks.get(event)?.filter((cb) => cb !== callback) || []);
+    }
+    notify(event) {
+        for (const callback of this.event_callbacks.get(event) || []) {
+            callback();
+        }
+    }
+}

package/dist/shared/brush/types.d.ts

@@ -0,0 +1,37 @@
+import { type ColorInput } from "tinycolor2";
+/**
+ * Represents the state of the brush tool.
+ * @interface BrushState
+ * @property {number} opacity - The opacity of the brush.
+ * @property {number} brush_size - The size of the brush.
+ * @property {string} color - The color of the brush in hex format.
+ * @property {"draw"|"erase"} mode - The mode of the brush, either draw or erase.
+ */
+export interface BrushState {
+    opacity: number;
+    brush_size: number;
+    color: string;
+    mode: "draw" | "erase";
+}
+export interface Eraser {
+    /**
+     * The default size of the eraser.
+     */
+    default_size: number | "auto";
+}
+export type ColorTuple = [ColorInput, number];
+export interface Brush extends Eraser {
+    /**
+     * The default color of the brush.
+     */
+    default_color: ColorInput;
+    /**
+     * The colors to show in the color swatch.
+     * Can be either simple color strings or [color, opacity] tuples.
+     */
+    colors: (ColorInput | ColorTuple)[];
+    /**
+     * Whether to show _only_ the color swatches specified in `colors`, or to show the color swatches specified in `colors` along with the colorpicker.
+     */
+    color_mode: "fixed" | "defaults";
+}

package/dist/shared/brush/types.js

@@ -0,0 +1 @@
+import {} from "tinycolor2";

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

@@ -0,0 +1,261 @@
+import { Application, Container, Sprite, RenderTexture } from "pixi.js";
+import type { Subtool, Tool as ToolbarTool } from "../Toolbar.svelte";
+import type { Readable, Writable } from "svelte/store";
+import { type Spring } from "svelte/motion";
+import { type ImageBlobs, type LayerOptions } from "../types";
+export interface Command {
+    execute: () => Promise<void>;
+    undo: () => Promise<void>;
+}
+export interface Tool {
+    name: string;
+    setup(context: ImageEditorContext, tool: ToolbarTool, subtool: Subtool): Promise<void>;
+    cleanup(): void;
+    set_tool(tool: ToolbarTool, subtool: Subtool): void;
+    on?: (event: string, callback: () => void) => void;
+    off?: (event: string, callback: () => void) => void;
+}
+export declare class CommandManager {
+    private undo_stack;
+    private redo_stack;
+    execute(command: Command): Promise<void>;
+    undo(): Promise<void>;
+    redo(): Promise<void>;
+}
+export declare class LayerManager {
+    private layers;
+    private active_layer;
+    private active_layer_id;
+    private draw_textures;
+    layer_store: Writable<{
+        active_layer: string;
+        layers: {
+            name: string;
+            id: string;
+            user_created: boolean;
+            visible: boolean;
+        }[];
+    }>;
+    private background_layer;
+    private image_container;
+    private app;
+    private fixed_canvas;
+    private dark;
+    private border_region;
+    private layer_options;
+    constructor(image_container: Container, app: Application, fixed_canvas: boolean, dark: boolean, border_region: number, layer_options: LayerOptions);
+    toggle_layer_visibility(id: string): void;
+    create_background_layer(width: number, height: number): Container;
+    set_layer_options(layer_options: LayerOptions, width: number, height: number): void;
+    /**
+     * 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
+     */
+    create_background_layer_from_url(url: string, width?: number, height?: number): Promise<Container>;
+    create_layer({ width, height, layer_name, user_created, layer_id, make_active }: {
+        width: number;
+        height: number;
+        layer_name?: string;
+        user_created: boolean;
+        layer_id?: string;
+        make_active?: boolean;
+    }): Container;
+    /**
+     * 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
+     */
+    add_layer_from_url(url: string): Promise<string>;
+    get_active_layer(): typeof this.active_layer;
+    set_active_layer(id: string): void;
+    get_layers(): typeof this.layers;
+    get_layer_textures(id: string): {
+        draw: RenderTexture;
+    } | null;
+    delete_layer(id: string): void;
+    private update_layer_order;
+    move_layer(id: string, direction: "up" | "down"): void;
+    /**
+     * 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: number, newHeight: number, scale: boolean, anchor: "top-left" | "top" | "top-right" | "left" | "center" | "right" | "bottom-left" | "bottom" | "bottom-right", oldCanvasWidth: number, oldCanvasHeight: number): void;
+    /**
+     * Helper method to resize the background layer.
+     */
+    private _resize_background_layer;
+    /**
+     * Helper method to resize a single regular layer.
+     */
+    private _resize_single_layer;
+    get_blobs(width: number, height: number): Promise<ImageBlobs>;
+    reset_layers(width: number, height: number, persist?: boolean): void;
+    init_layers(width: number, height: number): void;
+}
+declare const core_tools: readonly ["image", "zoom"];
+interface ImageEditorOptions {
+    target_element: HTMLElement;
+    width: number;
+    height: number;
+    tools: ((typeof core_tools)[number] | Tool)[];
+    fixed_canvas?: boolean;
+    dark?: boolean;
+    border_region?: number;
+    layer_options?: LayerOptions;
+    pad_bottom?: number;
+    theme_mode?: "dark" | "light";
+}
+export interface ImageEditorContext {
+    app: Application;
+    ui_container: Container;
+    image_container: Container;
+    background_image?: Sprite;
+    command_manager: CommandManager;
+    layer_manager: LayerManager;
+    dimensions: Readable<{
+        width: number;
+        height: number;
+    }>;
+    scale: Readable<number>;
+    position: Readable<{
+        x: number;
+        y: number;
+    }>;
+    set_image_properties: (properties: {
+        width?: number;
+        height?: number;
+        scale?: number;
+        position?: {
+            x: number;
+            y: number;
+        };
+        animate?: boolean;
+    }) => Promise<void>;
+    execute_command: (command: Command) => Promise<void> | void;
+    resize_canvas: (width: number, height: number) => void;
+    reset: () => void;
+    set_background_image: (image: Sprite) => void;
+    pad_bottom: number;
+}
+export declare class ImageEditor {
+    ready: Promise<void>;
+    background_image_present: Writable<boolean>;
+    min_zoom: Writable<boolean>;
+    private app;
+    private ui_container;
+    private image_container;
+    private command_manager;
+    private layer_manager;
+    private tools;
+    private current_tool;
+    private current_subtool;
+    private target_element;
+    private width;
+    private height;
+    dimensions: Spring<{
+        width: number;
+        height: number;
+    }>;
+    scale: Spring<number>;
+    private position;
+    private state;
+    private scale_value;
+    private position_value;
+    private dimensions_value;
+    layers: Writable<{
+        active_layer: string;
+        layers: {
+            name: string;
+            id: string;
+            user_created: boolean;
+            visible: boolean;
+        }[];
+    }>;
+    private outline_container;
+    private outline_graphics;
+    private background_image?;
+    private ready_resolve;
+    private event_callbacks;
+    private fixed_canvas;
+    private dark;
+    private border_region;
+    private layer_options;
+    private overlay_container;
+    private overlay_graphics;
+    private pad_bottom;
+    private theme_mode;
+    constructor(options: ImageEditorOptions);
+    private get context();
+    init(): Promise<void>;
+    private setup_containers;
+    resize_canvas(width: number, height: number): void;
+    reset(): void;
+    set_image_properties(properties: {
+        width?: number;
+        height?: number;
+        scale?: number;
+        position?: {
+            x: number;
+            y: number;
+        };
+        animate?: boolean;
+    }): Promise<void>;
+    execute_command(command: Command): Promise<void>;
+    undo(): void;
+    redo(): void;
+    add_image({ image, resize }: {
+        image: Blob | File;
+        resize?: boolean;
+    }): Promise<void>;
+    /**
+     * Adds an image from a URL as the background layer
+     * @param url The URL of the image to add
+     */
+    add_image_from_url(url: string): Promise<void>;
+    set_tool(tool: ToolbarTool): void;
+    set_subtool(subtool: Subtool): void;
+    set_background_image(image: Sprite): void;
+    reset_canvas(): Promise<void>;
+    add_layer(): void;
+    /**
+     * Adds a new layer with an image loaded from a URL
+     * @param layer_urls The URLs of the images to load
+     * @returns A Promise that resolves when all layers are added
+     */
+    add_layers_from_url(layer_urls: string[] | undefined): Promise<void>;
+    set_layer(id: string): void;
+    move_layer(id: string, direction: "up" | "down"): void;
+    delete_layer(id: string): void;
+    modify_canvas_size(width: number, height: number, anchor: "top-left" | "top" | "top-right" | "left" | "center" | "right" | "bottom-left" | "bottom" | "bottom-right", scale: boolean): void;
+    get_blobs(): Promise<ImageBlobs>;
+    on(event: "change" | "input", callback: () => void): void;
+    off(event: "change", callback: () => void): void;
+    private notify;
+    destroy(): void;
+    resize(width: number, height: number): void;
+    get_crop_bounds(): Promise<{
+        image: Blob | null;
+        crop_dimensions: {
+            width: number;
+            height: number;
+        };
+        image_dimensions: {
+            width: number;
+            height: number;
+        };
+        x: number;
+        y: number;
+    }>;
+    get background_image_sprite(): Sprite | undefined;
+    set_layer_options(layer_options: LayerOptions): void;
+    toggle_layer_visibility(id: string): void;
+}
+export {};