@gradio/imageeditor 0.10.0 → 0.11.0-beta.1

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

@@ -0,0 +1,62 @@
+import { Container, type ColorSource, type IRenderer } from "pixi.js";
+import type { LayerScene } from "../layers/utils";
+import { type Command } from "../utils/commands";
+export interface DrawCommand extends Command {
+    /**
+     * sets the initial state to begin drawing
+     * @param options the options for drawing
+     * @returns
+     */
+    start: (options: DrawOptions) => void;
+    /**
+     * continues drawing, smoothly interpolating between points where necessary
+     * @param options the options for drawing
+     * @returns
+     */
+    continue: (options: Points) => void;
+    /**
+     * stops drawing
+     * @returns
+     */
+    stop: () => void;
+    /**
+     * Whether or not the user is currently drawing.
+     */
+    drawing: boolean;
+}
+/**
+ * Coordinates for a draw or erase path.
+ */
+interface Points {
+    /**
+     * The x coordinate of the path.
+     */
+    x: number;
+    /**
+     * The y coordinate of the path.
+     */
+    y: number;
+}
+/**
+ * Options for drawing a path.
+ */
+interface DrawOptions extends Points {
+    /**
+     * The size of the brush.
+     */
+    size: number;
+    /**
+     * The color of the brush.
+     */
+    color?: ColorSource;
+    /**
+     * The opacity of the brush.
+     */
+    opacity: number;
+    /**
+     * Whether or not to set the initial texture.
+     */
+    set_initial_texture?: boolean;
+}
+export declare function draw_path(renderer: IRenderer, stage: Container, layer: LayerScene, mode: "draw" | "erase"): DrawCommand;
+export {};

package/dist/shared/tools/brush.js

@@ -0,0 +1,133 @@
+import { Container, Graphics, Color, RenderTexture, Sprite } from "pixi.js";
+import {} from "../utils/commands";
+import { make_graphics } from "../utils/pixi";
+/**
+ * Draws a circle on the given graphics object.
+ * @param graphics the graphics object to draw on
+ * @param x the x coordinate of the circle
+ * @param y the y coordinate of the circle
+ * @param brush_color the color of the circle
+ * @param brush_size the radius of the circle
+ */
+function drawCircle(graphics, x, y, brush_color = new Color("black"), brush_size) {
+    const color = new Color(brush_color);
+    graphics.beginFill(color);
+    graphics.drawCircle(x, y, brush_size);
+    graphics.endFill();
+}
+/**
+ * Interpolates between two points.
+ * @param point1 the first point
+ * @param point2 the second point
+ * @returns an array of points between the two points
+ */
+function interpolate(point1, point2) {
+    let points = [];
+    const dx = point2.x - point1.x;
+    const dy = point2.y - point1.y;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+    const steps = Math.ceil(distance / 2);
+    const stepX = dx / steps;
+    const stepY = dy / steps;
+    for (let j = 0; j < steps; j++) {
+        const x = point1.x + j * stepX;
+        const y = point1.y + j * stepY;
+        points.push({ x, y });
+    }
+    return points;
+}
+export function draw_path(renderer, stage, layer, mode) {
+    const paths = [];
+    let initial_path;
+    let graphics;
+    let InitialTexture;
+    let has_drawn = false;
+    let id = 0;
+    return {
+        drawing: false,
+        start: function ({ x, y, size, color = new Color("black"), opacity, set_initial_texture = true }) {
+            if (set_initial_texture) {
+                InitialTexture = RenderTexture.create({
+                    width: layer.draw_texture.width,
+                    height: layer.draw_texture.height
+                });
+                renderer.render(layer.composite, {
+                    renderTexture: InitialTexture
+                });
+            }
+            initial_path = { x, y, size, color, opacity };
+            paths.push({ x, y });
+            graphics = make_graphics(id++);
+            drawCircle(graphics, x, y, color, size);
+            renderer.render(graphics, {
+                renderTexture: mode === "draw" ? layer.draw_texture : layer.erase_texture,
+                clear: false
+            });
+            this.drawing = true;
+        },
+        continue: function ({ x, y }) {
+            const last_point = paths[paths.length - 1];
+            const new_points = interpolate(last_point, { x, y });
+            for (let i = 0; i < new_points.length; i++) {
+                const { x, y } = new_points[i];
+                drawCircle(graphics, x, y, initial_path.color, initial_path.size);
+                paths.push({ x, y });
+            }
+            renderer.render(graphics, {
+                renderTexture: mode === "draw" ? layer.draw_texture : layer.erase_texture,
+                clear: false
+            });
+            graphics.clear();
+        },
+        stop: function () {
+            const current_sketch = RenderTexture.create({
+                width: layer.draw_texture.width,
+                height: layer.draw_texture.height
+            });
+            renderer.render(layer.composite, {
+                renderTexture: current_sketch
+            });
+            renderer.render(new Sprite(current_sketch), {
+                renderTexture: layer.draw_texture
+            });
+            const clear_graphics = new Graphics()
+                .beginFill(0x000000, 0) // Use a fill color with 0 alpha for transparency
+                .drawRect(0, 0, layer.erase_texture.width, layer.erase_texture.height)
+                .endFill();
+            renderer.render(clear_graphics, {
+                renderTexture: layer.erase_texture,
+                clear: true
+            });
+            has_drawn = true;
+            this.drawing = false;
+        },
+        execute: function () {
+            if (!has_drawn) {
+                for (let i = 1; i < paths.length; i++) {
+                    const { x, y } = paths[i];
+                    drawCircle(graphics, x, y, initial_path.color, initial_path.size);
+                }
+                renderer.render(graphics, {
+                    renderTexture: mode === "draw" ? layer.draw_texture : layer.erase_texture,
+                    clear: false
+                });
+                this.stop();
+            }
+        },
+        undo: function () {
+            const clear_graphics = new Graphics()
+                .beginFill(0x000000, 0)
+                .drawRect(0, 0, layer.erase_texture.width, layer.erase_texture.height)
+                .endFill();
+            renderer.render(new Sprite(InitialTexture), {
+                renderTexture: layer.draw_texture
+            });
+            renderer.render(clear_graphics, {
+                renderTexture: layer.erase_texture,
+                clear: true
+            });
+            this.stop();
+            has_drawn = false;
+        }
+    };
+}

package/dist/shared/tools/crop.d.ts

@@ -0,0 +1,15 @@
+import { type IRenderer, type Container } from "pixi.js";
+import { type Command } from "../utils/commands";
+import type { Writable } from "svelte/store";
+export interface CropCommand extends Command {
+    start: (width: number, height: number, previous_crop: [number, number, number, number], preview?: boolean, set_previous?: boolean) => void;
+    stop: () => number;
+    continue: (crop_size: [number, number, number, number], preview?: boolean) => void;
+}
+export declare function crop_canvas(renderer: IRenderer, mask_container: Container, crop: Writable<[number, number, number, number]>, current_opacity?: number): CropCommand;
+export declare function resize_and_reposition(original_width: number, original_height: number, anchor: "t" | "r" | "l" | "b" | "tl" | "tr" | "bl" | "br" | "c", aspect_ratio: number, max_width: number, max_height: number): {
+    new_width: number;
+    new_height: number;
+    x_offset: number;
+    y_offset: number;
+};

package/dist/shared/tools/crop.js

@@ -0,0 +1,154 @@
+import { Graphics, Sprite, RenderTexture } from "pixi.js";
+import {} from "../utils/commands";
+import { spring } from "svelte/motion";
+export function crop_canvas(renderer, mask_container, crop, current_opacity = 0) {
+    let text;
+    let sprite;
+    const mask_graphics = new Graphics();
+    let previous_crop;
+    let final_crop;
+    let width;
+    let height;
+    let alpha_spring = spring(current_opacity, {
+        stiffness: 0.1,
+        damping: 0.5
+    });
+    let spring_value = current_opacity;
+    alpha_spring.subscribe((value) => {
+        if (!final_crop)
+            return;
+        spring_value = value;
+        crop_mask(width, height, final_crop, true);
+    });
+    function crop_mask(width, height, crop_size, preview) {
+        mask_graphics.clear();
+        if (preview) {
+            mask_graphics.beginFill(0xffffff, spring_value);
+            mask_graphics.drawRect(0, 0, width, height);
+            mask_graphics.endFill();
+        }
+        mask_graphics.beginFill(0xffffff, 1);
+        mask_graphics.drawRect(...crop_size);
+        mask_graphics.endFill();
+        renderer.render(mask_graphics, {
+            renderTexture: text
+        });
+    }
+    let clean = true;
+    let stopped = false;
+    return {
+        start: (_width, _height, _previous_crop, _preview = true, set_previous = true) => {
+            clean = false;
+            text = RenderTexture.create({
+                width: _width,
+                height: _height
+            });
+            crop_mask(_width, _height, _previous_crop, _preview);
+            sprite = new Sprite(text);
+            mask_container.mask = sprite;
+            width = _width;
+            height = _height;
+            if (set_previous)
+                previous_crop = JSON.parse(JSON.stringify(_previous_crop));
+        },
+        continue: (crop_size, preview = true) => {
+            final_crop = JSON.parse(JSON.stringify(crop_size));
+            if (spring_value === 0.2) {
+                crop_mask(width, height, final_crop, preview);
+            }
+            else {
+                alpha_spring.set(0.2);
+            }
+        },
+        undo() {
+            this.start(width, height, previous_crop, false);
+            crop.set([
+                previous_crop[0] / width,
+                previous_crop[1] / height,
+                previous_crop[2] / width,
+                previous_crop[3] / height
+            ]);
+            clean = true;
+        },
+        stop() {
+            stopped = true;
+            return spring_value;
+        },
+        execute() {
+            if (clean) {
+                this.start(width, height, final_crop, false);
+                crop.set([
+                    final_crop[0] / width,
+                    final_crop[1] / height,
+                    final_crop[2] / width,
+                    final_crop[3] / height
+                ]);
+                clean = true;
+            }
+            else {
+                if (!stopped) {
+                    alpha_spring.set(0);
+                }
+                crop.set([
+                    final_crop[0] / width,
+                    final_crop[1] / height,
+                    final_crop[2] / width,
+                    final_crop[3] / height
+                ]);
+                clean = true;
+            }
+        }
+    };
+}
+export function resize_and_reposition(original_width, original_height, anchor, aspect_ratio, max_width, max_height) {
+    let new_width = original_width;
+    let new_height = original_height;
+    // Calculate new dimensions based on aspect ratio
+    if (anchor.includes("t") || anchor.includes("b") || anchor == "c") {
+        new_width = original_height * aspect_ratio;
+    }
+    if (anchor.includes("l") || anchor.includes("r") || anchor == "c") {
+        new_height = original_width / aspect_ratio;
+    }
+    // Ensure aspect ratio is maintained
+    new_height = new_height || new_width / aspect_ratio;
+    new_width = new_width || new_height * aspect_ratio;
+    // Apply max width/height constraints and adjust dimensions
+    if (new_width > max_width) {
+        new_width = max_width;
+        new_height = new_width / aspect_ratio;
+    }
+    if (new_height > max_height) {
+        new_height = max_height;
+        new_width = new_height * aspect_ratio;
+    }
+    // Calculate offsets to ensure anchor position is maintained
+    let x_offset = 0;
+    let y_offset = 0;
+    if (anchor.includes("r")) {
+        x_offset = original_width - new_width;
+    }
+    else if (anchor.includes("l")) {
+        x_offset = 0;
+    }
+    else {
+        // Center or top/bottom center
+        x_offset = (original_width - new_width) / 2;
+    }
+    if (anchor.includes("b")) {
+        y_offset = original_height - new_height;
+    }
+    else if (anchor.includes("t")) {
+        y_offset = 0;
+    }
+    else {
+        // Center or left/right center
+        y_offset = (original_height - new_height) / 2;
+    }
+    return {
+        new_width: new_width,
+        new_height: new_height,
+        x_offset: x_offset,
+        y_offset: y_offset
+    };
+}

package/dist/shared/tools/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Tools } from "./Tools.svelte";
+export { default as Brush } from "./Brush.svelte";
+export { default as Crop } from "./Crop.svelte";
+export { default as Sources } from "./Sources.svelte";
+export * from "./types";

package/dist/shared/tools/index.js

@@ -0,0 +1,5 @@
+export { default as Tools } from "./Tools.svelte";
+export { default as Brush } from "./Brush.svelte";
+export { default as Crop } from "./Crop.svelte";
+export { default as Sources } from "./Sources.svelte";
+export * from "./types";

package/dist/shared/tools/sources.d.ts

@@ -0,0 +1,40 @@
+import { type Container, type IRenderer, type ColorSource } from "pixi.js";
+import { type Command } from "../utils/commands";
+interface BgImageCommand extends Command {
+    /**
+     * Initial setup for the bg command
+     * @returns
+     */
+    start: () => Promise<[number, number]>;
+}
+/**
+ * Adds a background image to the canvas.
+ * @param container The container to add the image to.
+ * @param renderer The renderer to use for the image.
+ * @param background The background image to add.
+ * @param resize The function to resize the canvas.
+ * @returns A command that can be used to undo the action.
+ */
+export declare function add_bg_image(container: Container, renderer: IRenderer, background: Blob | File, resize: (width: number, height: number) => void): BgImageCommand;
+/**
+ * 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: IRenderer, color: ColorSource, width: number, height: number, resize: (width: number, height: number) => void): BgColorCommand;
+export {};

package/dist/shared/tools/sources.js

@@ -0,0 +1,69 @@
+import { Sprite, Texture, DisplayObject, Color, RenderTexture } from "pixi.js";
+import {} from "../utils/commands";
+import { make_graphics } from "../utils/pixi";
+/**
+ * Adds a background image to the canvas.
+ * @param container The container to add the image to.
+ * @param renderer The renderer to use for the image.
+ * @param background The background image to add.
+ * @param resize The function to resize the canvas.
+ * @returns A command that can be used to undo the action.
+ */
+export function add_bg_image(container, renderer, background, resize) {
+    let sprite;
+    return {
+        async start() {
+            container.removeChildren();
+            const img = await createImageBitmap(background);
+            const bitmap_texture = Texture.from(img);
+            sprite = new Sprite(bitmap_texture);
+            return [sprite.width, sprite.height];
+        },
+        async execute() {
+            // renderer.resize(sprite.width, sprite.height);
+            resize(sprite.width, sprite.height);
+            sprite.zIndex = 0;
+            container.addChild(sprite);
+        },
+        undo() {
+            container.removeChildAt(0);
+        }
+    };
+}
+/**
+ * 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
+            });
+            graphics.beginFill(new Color(color));
+            graphics.drawRect(0, 0, width, height);
+            graphics.endFill();
+            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();
+        }
+    };
+}

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

@@ -0,0 +1 @@
+export type tool = "draw" | "erase" | "crop" | "bg";

package/dist/shared/tools/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,96 @@
+import { type Writable } from "svelte/store";
+/**
+ * Base command interface that is added to the command_managers history
+ */
+export interface Command {
+    /**
+     * Optionally called when the command is first executed for multi-step commands
+     * @param args arguments to pass to the command
+     */
+    start?: (...args: any) => any | Promise<any>;
+    /**
+     * Optionally called when the command is continued for multi-step commands
+     * @param args arguments to pass to the command
+     */
+    continue?: (...args: any) => any | Promise<any>;
+    /**
+     * Optionally called when the command is stopped for multi-step commands
+     * @param args arguments to pass to the command
+     */
+    stop?: (...args: any) => any | Promise<any>;
+    /**
+     * 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>;
+    /**
+     * Called by the command manager to undo the command
+     * This function must be able to undo the work done by the execute function
+     */
+    undo(): any | Promise<any>;
+}
+/**
+ * Command manager interface that handles the undo/redo history
+ */
+export interface CommandManager {
+    /**
+     * Undo the last command
+     */
+    undo(): void;
+    /**
+     * Redo the last undone command
+     */
+    redo(): void;
+    /**
+     * Execute a command and add it to the history
+     * @param command command to execute
+     */
+    execute(command: Command): void;
+    /**
+     * Whether or not there are commands that can be undone
+     * Observable store that you can subscribe to for updates
+     */
+    readonly can_undo: Writable<boolean>;
+    /**
+     * Whether or not there are commands that can be redone
+     * Observable store that you can subscribe to for updates
+     */
+    readonly can_redo: Writable<boolean>;
+    /**
+     * Resets the history
+     */
+    reset(): void;
+    /**
+     * The current history node
+     * Observable store that you can subscribe to for updates
+     */
+    readonly current_history: Writable<CommandNode>;
+}
+/**
+ * Command node interface that is used to create the undo/redo history
+ */
+interface CommandNode {
+    /**
+     * Command that the node holds
+     */
+    command: Command | null;
+    /**
+     * Next command in the history
+     */
+    next: CommandNode | null;
+    /**
+     * Previous command in the history
+     */
+    previous: CommandNode | null;
+    /**
+     * Push a command onto the history
+     * @param command command to push onto the history
+     */
+    push(command: Command): void;
+}
+/**
+ * Creates a command manager
+ * @returns a command manager
+ */
+export declare function command_manager(): CommandManager;
+export {};

package/dist/shared/utils/commands.js

@@ -0,0 +1,65 @@
+import { writable } from "svelte/store";
+/**
+ * Creates a command node
+ * @param command command to add to the node
+ * @returns a command node
+ */
+function command_node(command) {
+    return {
+        command: command || null,
+        next: null,
+        previous: null,
+        push: function (command) {
+            const node = command_node(command);
+            node.previous = this;
+            this.next = node;
+        }
+    };
+}
+/**
+ * Creates a command manager
+ * @returns a command manager
+ */
+export function command_manager() {
+    let history = command_node();
+    const can_undo = writable(false);
+    const can_redo = writable(false);
+    const current_history = writable(history);
+    return {
+        undo: function () {
+            if (history.previous) {
+                history.command?.undo();
+                history = history.previous;
+            }
+            can_undo.set(!!history.previous);
+            can_redo.set(!!history.next);
+            current_history.set(history);
+        },
+        redo: function () {
+            if (history.next) {
+                history.next.command?.execute();
+                history = history.next;
+            }
+            can_undo.set(!!history.previous);
+            can_redo.set(!!history.next);
+            current_history.set(history);
+        },
+        execute: function (command) {
+            command.execute();
+            history.push(command);
+            history = history.next;
+            can_undo.set(!!history.previous);
+            can_redo.set(!!history.next);
+            current_history.set(history);
+        },
+        can_undo,
+        can_redo,
+        current_history,
+        reset: function () {
+            history = command_node();
+            can_undo.set(false);
+            can_redo.set(false);
+            current_history.set(history);
+        }
+    };
+}

package/dist/shared/utils/events.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Svelte action to handle clicks outside of a DOM node
+ * @param node DOM node to check the click is outside of
+ * @param callback callback function to call if click is outside
+ * @returns svelte action return object with destroy method to remove event listener
+ */
+export declare function click_outside(node: Node, callback: (arg: MouseEvent) => void): any;

package/dist/shared/utils/events.js

@@ -0,0 +1,22 @@
+import { tick } from "svelte";
+/**
+ * Svelte action to handle clicks outside of a DOM node
+ * @param node DOM node to check the click is outside of
+ * @param callback callback function to call if click is outside
+ * @returns svelte action return object with destroy method to remove event listener
+ */
+export function click_outside(node, callback) {
+    const handle_click = (event) => {
+        if (node &&
+            !node.contains(event.target) &&
+            !event.defaultPrevented) {
+            callback(event);
+        }
+    };
+    document.addEventListener("mousedown", handle_click, true);
+    return {
+        destroy() {
+            document.removeEventListener("mousedown", handle_click, true);
+        }
+    };
+}