@gradio/imageeditor 0.12.13 → 0.13.0

package/dist/shared/types.d.ts

@@ -0,0 +1,12 @@
+export interface ImageBlobs {
+    background: Blob | null;
+    layers: (Blob | null)[];
+    composite: Blob | null;
+}
+export interface LayerOptions {
+    allow_additional_layers: boolean;
+    layers: string[];
+    disabled: boolean;
+}
+export type Source = "upload" | "webcam" | "clipboard";
+export type Transform = "crop" | "resize";

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

@@ -1,60 +1,4 @@
-import { Container, Graphics, Rectangle, type IRenderer, type ICanvas } from "pixi.js";
-import { type LayerScene } from "../layers/utils";
-/**
- * interface holding references to pixi app components
- */
-export interface PixiApp {
-    /**
-     * The pixi container for layers
-     */
-    layer_container: Container;
-    /**
-     * The pixi container for background images and colors
-     */
-    background_container: Container;
-    /**
-     * The pixi renderer
-     */
-    renderer: IRenderer;
-    /**
-     * The pixi canvas
-     */
-    view: HTMLCanvasElement & ICanvas;
-    /**
-     * The pixi container for masking
-     */
-    mask_container: Container;
-    destroy(): void;
-    /**
-     * Resizes the pixi app
-     * @param width the new width
-     * @param height the new height
-     */
-    resize(width: number, height: number): void;
-    /**
-     * Gets the blobs for the background, layers, and composite
-     * @param bounds the bounds of the canvas
-     * @returns a promise with the blobs
-     */
-    get_blobs(layers: LayerScene[], bounds: Rectangle, dimensions: [number, number]): Promise<ImageBlobs>;
-    /**
-     * Gets the layers
-     */
-    get_layers?: () => LayerScene[];
-}
-/**
- * Creates a PIXI app and attaches it to a DOM element
- * @param target DOM element to attach PIXI app to
- * @param width Width of the PIXI app
- * @param height Height of the PIXI app
- * @param antialias Whether to use antialiasing
- * @returns object with pixi container and renderer
- */
-export declare function create_pixi_app({ target, dimensions: [width, height], antialias }: {
-    target: HTMLElement;
-    dimensions: [number, number];
-    antialias: boolean;
-}): PixiApp;
+import { Graphics, type Renderer, type Container } from "pixi.js";
 /**
  * Creates a pixi graphics object.
  * @param z_index the z index of the graphics object
@@ -69,6 +13,21 @@ export declare function make_graphics(z_index: number): Graphics;
  * @returns The clamped number.
  */
 export declare function clamp(n: number, min: number, max: number): number;
+/**
+ * Generates a blob from a pixi object.s
+ * @param renderer The pixi renderer.
+ * @param obj The pixi object to generate a blob from.
+ * @param bounds The bounds of the canvas that we wish to extract
+ * @param width The full width of the canvas
+ * @param height The full height of the canvas
+ * @returns A promise with the blob.
+ */
+export declare function get_canvas_blob(renderer: Renderer, obj: Container | null, bounds?: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}): Promise<Blob | null>;
 export interface ImageBlobs {
     background: Blob | null;
     layers: (Blob | null)[];

package/dist/shared/utils/pixi.js

@@ -1,96 +1,4 @@
-import { Application, Container, Graphics, Sprite, Rectangle, RenderTexture } from "pixi.js";
-import {} from "../layers/utils";
-/**
- * Creates a PIXI app and attaches it to a DOM element
- * @param target DOM element to attach PIXI app to
- * @param width Width of the PIXI app
- * @param height Height of the PIXI app
- * @param antialias Whether to use antialiasing
- * @returns object with pixi container and renderer
- */
-export function create_pixi_app({ target, dimensions: [width, height], antialias }) {
-    const ratio = window.devicePixelRatio || 1;
-    const app = new Application({
-        width,
-        height,
-        antialias: antialias,
-        backgroundAlpha: 0,
-        eventMode: "static"
-    });
-    const view = app.view;
-    // ensure that we can sort the background and layer containers
-    app.stage.sortableChildren = true;
-    view.style.maxWidth = `${width / ratio}px`;
-    view.style.maxHeight = `${height / ratio}px`;
-    view.style.width = "100%";
-    view.style.height = "100%";
-    target.appendChild(app.view);
-    // we need a separate container for the background so that we can
-    // clear its content without knowing too much about its children
-    const background_container = new Container();
-    background_container.zIndex = 0;
-    const layer_container = new Container();
-    layer_container.zIndex = 1;
-    // ensure we can reorder  layers via zIndex
-    layer_container.sortableChildren = true;
-    const mask_container = new Container();
-    mask_container.zIndex = 1;
-    const composite_container = new Container();
-    composite_container.zIndex = 0;
-    mask_container.addChild(background_container);
-    mask_container.addChild(layer_container);
-    app.stage.addChild(mask_container);
-    app.stage.addChild(composite_container);
-    const mask = new Graphics();
-    let text = RenderTexture.create({
-        width,
-        height
-    });
-    const sprite = new Sprite(text);
-    mask_container.mask = sprite;
-    app.render();
-    function reset_mask(width, height) {
-        background_container.removeChildren();
-        mask.beginFill(0xffffff, 1);
-        mask.drawRect(0, 0, width, height);
-        mask.endFill();
-        text = RenderTexture.create({
-            width,
-            height
-        });
-        app.renderer.render(mask, {
-            renderTexture: text
-        });
-        const sprite = new Sprite(text);
-        mask_container.mask = sprite;
-    }
-    function resize(width, height) {
-        app.renderer.resize(width, height);
-        view.style.maxWidth = `${width / ratio}px`;
-        view.style.maxHeight = `${height / ratio}px`;
-        reset_mask(width, height);
-    }
-    async function get_blobs(_layers, bounds, [w, h]) {
-        const background = await get_canvas_blob(app.renderer, background_container, bounds, w, h);
-        const layers = await Promise.all(_layers.map((layer) => get_canvas_blob(app.renderer, layer.composite, bounds, w, h)));
-        const composite = await get_canvas_blob(app.renderer, mask_container, bounds, w, h);
-        return {
-            background,
-            layers,
-            composite
-        };
-    }
-    return {
-        layer_container,
-        renderer: app.renderer,
-        destroy: () => app.destroy(true),
-        view: app.view,
-        background_container,
-        mask_container,
-        resize,
-        get_blobs
-    };
-}
+import { Graphics, Rectangle } from "pixi.js";
 /**
  * Creates a pixi graphics object.
  * @param z_index the z index of the graphics object
@@ -113,7 +21,7 @@ export function clamp(n, min, max) {
     return n < min ? min : n > max ? max : n;
 }
 /**
- * Generates a blob from a pixi object.
+ * Generates a blob from a pixi object.s
  * @param renderer The pixi renderer.
  * @param obj The pixi object to generate a blob from.
  * @param bounds The bounds of the canvas that we wish to extract
@@ -121,28 +29,22 @@ export function clamp(n, min, max) {
  * @param height The full height of the canvas
  * @returns A promise with the blob.
  */
-function get_canvas_blob(renderer, obj, bounds, width, height) {
+export function get_canvas_blob(renderer, obj, bounds) {
     return new Promise((resolve) => {
-        // for some reason pixi won't extract a cropped canvas without distorting it
-        // so we have to extract the whole canvas and crop it manually
-        const src_canvas = renderer.extract.canvas(obj, new Rectangle(0, 0, width, height));
-        // Create a new canvas for the cropped area with the appropriate size
-        let dest_canvas = document.createElement("canvas");
-        dest_canvas.width = bounds.width;
-        dest_canvas.height = bounds.height;
-        let dest_ctx = dest_canvas.getContext("2d");
-        if (!dest_ctx) {
+        if (!obj) {
             resolve(null);
-            throw new Error("Could not create canvas context");
+            return;
         }
-        // Draw the cropped area onto the destination canvas
-        dest_ctx.drawImage(src_canvas, 
-        // this is the area of the source that we want to copy (the crop box)
-        bounds.x, bounds.y, bounds.width, bounds.height, 
-        // this is where we want to draw the crop box on the destination canvas
-        0, 0, bounds.width, bounds.height);
-        // we grab a blob here so we can upload it
-        dest_canvas.toBlob?.((blob) => {
+        const image_bounds = obj.getLocalBounds();
+        const frame = bounds
+            ? new Rectangle(bounds.x, bounds.y, bounds.width, bounds.height)
+            : new Rectangle(0, 0, image_bounds.width, image_bounds.height);
+        const src_canvas = renderer.extract.canvas({
+            target: obj,
+            resolution: 1,
+            frame
+        });
+        src_canvas.toBlob?.((blob) => {
             if (!blob) {
                 resolve(null);
             }

package/dist/shared/zoom/zoom.d.ts

@@ -0,0 +1,136 @@
+import { type FederatedWheelEvent, type FederatedPointerEvent } from "pixi.js";
+import { type ImageEditorContext, type Tool } from "../core/editor";
+import { type Tool as ToolbarTool, type Subtool } from "../Toolbar.svelte";
+/**
+ * ZoomTool class for handling zoom and pan functionality in the image editor
+ * Implements the Tool interface
+ */
+export declare class ZoomTool implements Tool {
+    name: string;
+    min_zoom: import("svelte/store").Writable<boolean>;
+    private image_editor_context;
+    private readonly max_zoom;
+    private readonly border_padding;
+    private pad_bottom;
+    private is_pinching;
+    private is_dragging;
+    private is_pointer_dragging;
+    private last_touch_position;
+    private last_pinch_distance;
+    private drag_start;
+    private current_tool;
+    private current_subtool;
+    private local_scale;
+    private local_dimensions;
+    private local_position;
+    /**
+     * Prevents default behavior for events
+     * @param {FederatedWheelEvent | FederatedPointerEvent} event - The event to prevent default behavior for
+     */
+    prevent_default(event: FederatedWheelEvent | FederatedPointerEvent | WheelEvent): void;
+    /**
+     * Sets the current tool and subtool
+     * @param {ToolbarTool} tool - The tool to set
+     * @param {Subtool} subtool - The subtool to set
+     */
+    set_tool(tool: ToolbarTool, subtool: Subtool): void;
+    /**
+     * Sets the zoom level to a specific percentage or fits the image to the screen
+     * @param {number | 'fit'} zoom_level - The zoom level to set (0-1) or 'fit' to use min_zoom
+     * @returns {void}
+     */
+    set_zoom(zoom_level: number | "fit"): void;
+    /**
+     * Sets up the zoom tool with the given context and state
+     * @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>;
+    /**
+     * Sets up event listeners for zoom and pan functionality
+     * @private
+     */
+    private setup_event_listeners;
+    /**
+     * Handles wheel events for zooming
+     * @param {FederatedWheelEvent} event - The wheel event
+     * @private
+     */
+    private handle_wheel;
+    /**
+     * Cleans up resources and event listeners
+     */
+    cleanup(): void;
+    /**
+     * Gets the dimensions of the container
+     * @returns {Promise<{width: number, height: number}>} The container dimensions
+     * @private
+     */
+    private get_container_dimensions;
+    /**
+     * Calculates the minimum zoom level to fit the image in the viewport
+     * @param {number} container_width - The width of the container
+     * @param {number} container_height - The height of the container
+     * @returns {number} The minimum zoom level
+     * @private
+     */
+    private calculate_min_zoom;
+    /**
+     * Handles touch start events
+     * @param {TouchEvent} event - The touch event
+     * @private
+     */
+    private handle_touch_start;
+    /**
+     * Handles touch move events
+     * @param {TouchEvent} event - The touch event
+     * @private
+     */
+    private handle_touch_move;
+    /**
+     * Handles touch end events
+     * @param {TouchEvent} event - The touch event
+     * @private
+     */
+    private handle_touch_end;
+    /**
+     * Gets the bounded position to keep the image within the viewport
+     * @param {Object} position - The position to bound
+     * @param {number} position.x - The x coordinate
+     * @param {number} position.y - The y coordinate
+     * @returns {Object} The bounded position
+     * @private
+     */
+    private get_bounded_position;
+    /**
+     * Zooms to a specific point with a new zoom level
+     * @param {number} new_zoom - The new zoom level
+     * @param {Object} point - The point to zoom to
+     * @param {number} point.x - The x coordinate of the point
+     * @param {number} point.y - The y coordinate of the point
+     * @param {boolean} hard - Whether to apply a hard zoom (no animation)
+     * @param {boolean} is_fit_zoom - Whether this is a fit zoom operation
+     * @private
+     */
+    private zoom_to_point;
+    /**
+     * Handles pointer down events
+     * @param {FederatedPointerEvent} event - The pointer event
+     * @private
+     */
+    private handle_pointer_down;
+    /**
+     * Handles pointer move events
+     * @param {FederatedPointerEvent} event - The pointer event
+     * @private
+     */
+    private handle_pointer_move;
+    /**
+     * Handles pointer up events
+     * @param {FederatedPointerEvent} event - The pointer event
+     * @private
+     */
+    private handle_pointer_up;
+}