@gradio/imageeditor 0.12.13 → 0.13.0

package/dist/shared/tools/Tools.svelte.d.ts

@@ -1,48 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { Subscriber, Invalidator, Unsubscriber, Writable } from "svelte/store";
-import type { tool } from "../tools/";
-export declare const TOOL_KEY: unique symbol;
-type upload_tool = "bg_webcam" | "bg_upload" | "bg_clipboard" | "bg_color";
-type transform_tool = "crop" | "rotate";
-type brush_tool = "brush_color" | "brush_size";
-type eraser_tool = "eraser_size";
-export interface ToolOptions {
-    order: number;
-    label: string;
-    icon: typeof Image;
-    cb: (...args: any[]) => void;
-    id: upload_tool | transform_tool | brush_tool | eraser_tool;
-}
-export interface ToolMeta {
-    default: upload_tool | transform_tool | brush_tool | eraser_tool | null;
-    options: ToolOptions[];
-}
-export interface ToolContext {
-    register_tool: (type: tool, opts?: {
-        cb: () => void;
-    }) => () => void;
-    active_tool: {
-        set: (tool: tool) => void;
-        subscribe(this: void, run: Subscriber<tool | null>, invalidate?: Invalidator<tool | null>): Unsubscriber;
-    };
-    current_color: Writable<string>;
-}
-import { Image } from "@gradio/icons";
-import { type I18nFormatter } from "@gradio/utils";
-declare const __propDef: {
-    props: {
-        i18n: I18nFormatter;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ToolsProps = typeof __propDef.props;
-export type ToolsEvents = typeof __propDef.events;
-export type ToolsSlots = typeof __propDef.slots;
-export default class Tools extends SvelteComponent<ToolsProps, ToolsEvents, ToolsSlots> {
-}
-export {};

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

@@ -1,62 +0,0 @@
-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

@@ -1,133 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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, background_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

@@ -1,154 +0,0 @@
-import { Graphics, Sprite, RenderTexture } from "pixi.js";
-import {} from "../utils/commands";
-import { spring } from "svelte/motion";
-export function crop_canvas(renderer, background_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);
-            background_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, { hard: true });
-                }
-                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

@@ -1,5 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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]>;
-}
-/**
- * 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 declare function add_bg_image(container: Container, renderer: IRenderer, background: Blob | File, resize: (width: number, height: number) => void, canvas_size: [number, number], fixed_canvas: boolean): 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

@@ -1,121 +0,0 @@
-import { Sprite, Texture, DisplayObject, Color, RenderTexture } from "pixi.js";
-import {} from "../utils/commands";
-import { make_graphics } from "../utils/pixi";
-/**
- * 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_width <= canvas_width && image_height <= canvas_height) {
-        new_width = image_width;
-        new_height = image_height;
-    }
-    else {
-        if (image_aspect_ratio > canvas_aspect_ratio) {
-            // Width is the limiting factor
-            new_width = canvas_width;
-            new_height = canvas_width / image_aspect_ratio;
-        }
-        else {
-            // Height is the limiting factor
-            new_height = canvas_height;
-            new_width = canvas_height * image_aspect_ratio;
-        }
-    }
-    // Calculate position to center the 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
-    };
-}
-export function add_bg_image(container, renderer, background, resize, canvas_size, fixed_canvas) {
-    let sprite;
-    return {
-        async start() {
-            container.removeChildren();
-            const img = await createImageBitmap(background);
-            const bitmap_texture = Texture.from(img);
-            sprite = new Sprite(bitmap_texture);
-            if (!fixed_canvas) {
-                canvas_size = [sprite.width, sprite.height];
-            }
-            if (fixed_canvas) {
-                const [canvas_width, canvas_height] = canvas_size;
-                const { width, height, x, y } = fit_image_to_canvas(sprite.width, sprite.height, canvas_width, canvas_height);
-                sprite.width = width;
-                sprite.height = height;
-                sprite.x = x;
-                sprite.y = y;
-                return canvas_size;
-            }
-            // Use existing max_height based scaling if no canvas_size
-            const x = fit_image_to_canvas(sprite.width, sprite.height, canvas_size[0], canvas_size[1]);
-            sprite.width = x.width;
-            sprite.height = x.height;
-            sprite.x = 0;
-            sprite.y = 0;
-            return [x.width, x.height];
-        },
-        async execute() {
-            resize(
-            // @ts-ignore
-            fixed_canvas ? canvas_size[0] : sprite.width, 
-            // @ts-ignore
-            fixed_canvas ? canvas_size[1] : 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

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