@gradio/imageeditor 0.12.14 → 0.13.0

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

@@ -0,0 +1,327 @@
+import { Container, Graphics, Sprite } from "pixi.js";
+import {} from "../core/editor";
+import {} from "./types";
+import tinycolor from "tinycolor2";
+import { clear_timeout } from "./brush-utils";
+/**
+ * Class to handle all cursor preview-related functionality for the brush tool.
+ */
+export class BrushCursor {
+    image_editor_context;
+    state;
+    scale;
+    // Cursor-related properties
+    cursor_graphics = null;
+    cursor_container = null;
+    brush_preview_container = null;
+    brush_preview_graphics = null;
+    is_preview_visible = false;
+    is_cursor_over_image = false;
+    cursor_position_check_timeout = null;
+    is_brush_or_erase_active = false;
+    // Event handlers
+    _bound_update_cursor = null;
+    _bound_check_cursor_over_image = null;
+    constructor(image_editor_context, state, scale) {
+        this.image_editor_context = image_editor_context;
+        this.state = state;
+        this.scale = scale;
+        this.initialize_cursor();
+        this.initialize_brush_preview();
+    }
+    /**
+     * Returns whether the cursor is currently over the image.
+     */
+    is_over_image() {
+        return this.is_cursor_over_image;
+    }
+    /**
+     * Sets up cursor-related event listeners.
+     */
+    setup_event_listeners() {
+        // Clean up any existing listeners
+        this.cleanup_event_listeners();
+        // Create bound event handlers
+        this._bound_update_cursor = this.update_cursor_position.bind(this);
+        this._bound_check_cursor_over_image =
+            this.check_cursor_over_image.bind(this);
+        // Add event listeners using Pixi event system
+        // Use app.stage for global events like pointermove
+        const stage = this.image_editor_context.app.stage;
+        stage.on("pointermove", this._bound_update_cursor);
+        stage.on("pointermove", this._bound_check_cursor_over_image);
+        // Add event listeners to the image container for enter/leave events
+        this.image_editor_context.image_container.on("pointerenter", this.on_image_container_pointer_enter.bind(this));
+        this.image_editor_context.image_container.on("pointerleave", this.on_image_container_pointer_leave.bind(this));
+    }
+    /**
+     * Removes all cursor-related event listeners.
+     */
+    cleanup_event_listeners() {
+        // Use Pixi event system for removal
+        const stage = this.image_editor_context.app.stage;
+        // Remove event listeners if they exist
+        if (this._bound_update_cursor) {
+            stage.off("pointermove", this._bound_update_cursor);
+            this._bound_update_cursor = null;
+        }
+        if (this._bound_check_cursor_over_image) {
+            stage.off("pointermove", this._bound_check_cursor_over_image);
+            this._bound_check_cursor_over_image = null;
+        }
+        // Remove image container event listeners
+        this.image_editor_context.image_container.off("pointerenter");
+        this.image_editor_context.image_container.off("pointerleave");
+        // Clear timeout
+        this.cursor_position_check_timeout = clear_timeout(this.cursor_position_check_timeout);
+    }
+    /**
+     * initializes the cursor for the brush tool.
+     */
+    initialize_cursor() {
+        // clean up existing cursor if it exists
+        if (this.cursor_container) {
+            if (this.cursor_container.parent) {
+                this.cursor_container.parent.removeChild(this.cursor_container);
+            }
+            this.cursor_container.destroy({ children: true });
+            this.cursor_container = null;
+        }
+        // create new cursor container and add to ui container
+        this.cursor_container = new Container();
+        this.image_editor_context.ui_container.addChild(this.cursor_container);
+        // create cursor graphics
+        this.cursor_graphics = new Graphics();
+        this.cursor_container.addChild(this.cursor_graphics);
+        // draw initial cursor
+        this.update_cursor_appearance();
+    }
+    /**
+     * updates the appearance of the cursor.
+     */
+    update_cursor_appearance() {
+        if (!this.cursor_graphics)
+            return;
+        // clear previous graphics
+        this.cursor_graphics.clear();
+        // set color based on mode
+        const cursor_color = this.state.mode === "draw"
+            ? tinycolor(this.state.color).toString()
+            : 0xffffff;
+        // draw circle with current brush size
+        this.cursor_graphics
+            .circle(0, 0, this.state.brush_size * this.scale)
+            .stroke({
+            width: 1.5,
+            color: cursor_color,
+            alpha: 0.8
+        });
+        // add a small dot in the center for precision
+        this.cursor_graphics.circle(0, 0, 1).fill({
+            color: cursor_color,
+            alpha: 0.8
+        });
+    }
+    /**
+     * updates the position of the cursor.
+     * @param {FederatedPointerEvent} event - The pointer event.
+     */
+    update_cursor_position(event) {
+        if (!this.cursor_container)
+            return;
+        // get position in image coordinates
+        const local_pos = this.image_editor_context.image_container.toLocal(event.global);
+        // convert to ui coordinates
+        const ui_pos = this.image_editor_context.ui_container.toLocal(this.image_editor_context.image_container.toGlobal(local_pos));
+        // update cursor position
+        this.cursor_container.position.set(ui_pos.x, ui_pos.y);
+    }
+    /**
+     * checks if the cursor is over the image container.
+     * @param {FederatedPointerEvent} event - The pointer event.
+     */
+    check_cursor_over_image(event) {
+        // cancel any pending timeout
+        if (this.cursor_position_check_timeout !== null) {
+            window.clearTimeout(this.cursor_position_check_timeout);
+            this.cursor_position_check_timeout = null;
+        }
+        // get the image container bounds in global coordinates
+        const image_container = this.image_editor_context.image_container;
+        const bounds = image_container.getBounds();
+        // check if cursor is over image
+        const was_over_image = this.is_cursor_over_image;
+        this.is_cursor_over_image =
+            event.global.x >= bounds.x &&
+                event.global.x <= bounds.x + bounds.width &&
+                event.global.y >= bounds.y &&
+                event.global.y <= bounds.y + bounds.height;
+        // update visibility if state changed
+        if (was_over_image !== this.is_cursor_over_image) {
+            this.update_cursor_and_preview_visibility();
+        }
+    }
+    /**
+     * updates the size of the cursor.
+     */
+    update_cursor_size() {
+        this.update_cursor_appearance();
+    }
+    /**
+     * Updates whether brush or erase tool is active
+     */
+    set_active(is_active) {
+        this.is_brush_or_erase_active = is_active;
+        this.update_cursor_and_preview_visibility();
+    }
+    /**
+     * updates the visibility of the cursor.
+     */
+    update_cursor_visibility() {
+        if (this.cursor_container) {
+            this.cursor_container.visible =
+                this.is_cursor_over_image && this.is_brush_or_erase_active;
+        }
+    }
+    /**
+     * Shows or hides the brush preview.
+     * @param {boolean} show - Whether to show the preview.
+     */
+    preview_brush(show) {
+        this.is_preview_visible = show;
+        if (this.brush_preview_container) {
+            this.brush_preview_container.visible =
+                show && this.is_brush_or_erase_active;
+        }
+        if (show) {
+            // update preview appearance and position
+            this.update_brush_preview();
+            this.update_brush_preview_position();
+        }
+    }
+    /**
+     * initializes the brush preview.
+     */
+    initialize_brush_preview() {
+        // clean up existing preview if it exists
+        if (this.brush_preview_container) {
+            if (this.brush_preview_container.parent) {
+                this.brush_preview_container.parent.removeChild(this.brush_preview_container);
+            }
+            this.brush_preview_container.destroy({ children: true });
+            this.brush_preview_container = null;
+        }
+        // create new preview container and add to ui container
+        this.brush_preview_container = new Container();
+        this.image_editor_context.ui_container.addChild(this.brush_preview_container);
+        // create preview graphics
+        this.brush_preview_graphics = new Graphics();
+        this.brush_preview_container.addChild(this.brush_preview_graphics);
+        // set initial visibility
+        this.brush_preview_container.visible = false;
+    }
+    /**
+     * updates the brush preview appearance.
+     */
+    update_brush_preview() {
+        if (!this.brush_preview_graphics)
+            return;
+        // clear previous graphics
+        this.brush_preview_graphics.clear();
+        // draw brush preview based on current settings
+        const preview_size = this.state.brush_size * this.scale;
+        const preview_color = this.state.mode === "draw"
+            ? tinycolor(this.state.color).setAlpha(this.state.opacity).toString()
+            : 0xffffff;
+        // draw circle with current brush settings
+        this.brush_preview_graphics.circle(0, 0, preview_size).fill({
+            color: preview_color,
+            alpha: this.state.mode === "draw" ? this.state.opacity : 0.3
+        });
+        // add outline
+        this.brush_preview_graphics.circle(0, 0, preview_size + 1).stroke({
+            width: 1,
+            color: 0x000000,
+            alpha: 0.5
+        });
+    }
+    /**
+     * updates the position of the brush preview to center of canvas.
+     */
+    update_brush_preview_position() {
+        if (!this.brush_preview_container)
+            return;
+        // get the center of the image in global coordinates
+        const image_container = this.image_editor_context.image_container;
+        const center_x = image_container.width / 2;
+        const center_y = image_container.height / 2;
+        const global_pos = image_container.toGlobal({ x: center_x, y: center_y });
+        // convert to ui coordinates
+        const ui_pos = this.image_editor_context.ui_container.toLocal(global_pos);
+        // update preview position
+        this.brush_preview_container.position.set(ui_pos.x, ui_pos.y);
+    }
+    /**
+     * Called when the pointer enters the image container.
+     */
+    on_image_container_pointer_enter() {
+        this.is_cursor_over_image = true;
+        this.update_cursor_and_preview_visibility();
+    }
+    /**
+     * Called when the pointer leaves the image container.
+     */
+    on_image_container_pointer_leave() {
+        this.is_cursor_over_image = false;
+        this.update_cursor_and_preview_visibility();
+    }
+    /**
+     * Updates both cursor and preview visibility based on cursor position.
+     */
+    update_cursor_and_preview_visibility() {
+        this.update_cursor_visibility();
+        if (this.brush_preview_container) {
+            this.brush_preview_container.visible =
+                this.is_preview_visible && this.is_brush_or_erase_active;
+        }
+    }
+    /**
+     * Cleans up all cursor resources.
+     */
+    cleanup() {
+        // Reset active state
+        this.is_brush_or_erase_active = false;
+        // clean up cursor
+        if (this.cursor_container) {
+            if (this.cursor_container.parent) {
+                this.cursor_container.parent.removeChild(this.cursor_container);
+            }
+            this.cursor_container.destroy({ children: true });
+            this.cursor_container = null;
+        }
+        // clean up preview
+        if (this.brush_preview_container) {
+            if (this.brush_preview_container.parent) {
+                this.brush_preview_container.parent.removeChild(this.brush_preview_container);
+            }
+            this.brush_preview_container.destroy({ children: true });
+            this.brush_preview_container = null;
+        }
+        // clear timeout
+        if (this.cursor_position_check_timeout !== null) {
+            window.clearTimeout(this.cursor_position_check_timeout);
+            this.cursor_position_check_timeout = null;
+        }
+    }
+    /**
+     * Updates the brush state.
+     */
+    update_state(state, scale) {
+        this.state = state;
+        this.scale = scale;
+        this.update_cursor_appearance();
+        if (this.is_preview_visible) {
+            this.update_brush_preview();
+        }
+    }
+}

package/dist/shared/brush/brush-textures.d.ts

@@ -0,0 +1,71 @@
+import { Application } from "pixi.js";
+import { type ImageEditorContext } from "../core/editor";
+/**
+ * Class to handle texture operations for the brush tool.
+ * Simplified to work directly with layer textures.
+ */
+export declare class BrushTextures {
+    private image_editor_context;
+    private app;
+    private stroke_texture;
+    private erase_texture;
+    private display_container;
+    private stroke_container;
+    private stroke_graphics;
+    private preview_sprite;
+    private erase_graphics;
+    private dimensions;
+    private is_new_stroke;
+    private scale;
+    private current_opacity;
+    private current_mode;
+    private last_from_x;
+    private last_from_y;
+    private last_to_x;
+    private last_to_y;
+    private last_size;
+    constructor(image_editor_context: ImageEditorContext, app: Application);
+    /**
+     * Initializes textures needed for the brush tool.
+     */
+    initialize_textures(): void;
+    /**
+     * Reinitializes textures when needed (e.g., after resizing).
+     */
+    reinitialize(): void;
+    /**
+     * Cleans up texture resources.
+     */
+    cleanup_textures(): void;
+    /**
+     * Preserve the canvas state when starting a new stroke.
+     */
+    preserve_canvas_state(): void;
+    /**
+     * Resets the eraser mask.
+     */
+    reset_eraser_mask(): void;
+    /**
+     * Commits the current stroke to the active layer.
+     */
+    commit_stroke(): void;
+    /**
+     * Calculates the distance between two points.
+     */
+    private calculateDistance;
+    /**
+     * Draws a segment for the current stroke using a simple "stamp" approach.
+     */
+    draw_segment(from_x: number, from_y: number, to_x: number, to_y: number, size: number, color: string, opacity: number, mode: "draw" | "erase"): void;
+    /**
+     * Gets current dimensions of the texture.
+     */
+    get_dimensions(): {
+        width: number;
+        height: number;
+    };
+    /**
+     * Cleanup all resources.
+     */
+    cleanup(): void;
+}