@gradio/imageeditor 0.14.5 → 0.15.1

package/dist/shared/{utils → core}/commands.d.ts

@@ -3,6 +3,10 @@ import { type Writable } from "svelte/store";
  * Base command interface that is added to the command_managers history
  */
 export interface Command {
+    /**
+     * The name of the command
+     */
+    name: string;
     /**
      * Optionally called when the command is first executed for multi-step commands
      * @param args arguments to pass to the command
@@ -30,71 +34,28 @@ export interface Command {
     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>;
-    /**
-     * Hydrates the command manager with a full history
-     * @param full_history the full history to hydrate with
-     */
-    hydrate(full_history: CommandNode): void;
-}
-/**
- * Command node interface that is used to create the undo/redo history
+ * Creates a command node
+ * @param command command to add to the node
+ * @returns a command node
  */
-export interface CommandNode {
-    /**
-     * Command that the node holds
-     */
+export declare class CommandNode {
     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
-     */
+    constructor(command?: Command);
     push(command: Command): void;
 }
 /**
  * Creates a command manager
  * @returns a command manager
  */
-export declare function command_manager(): CommandManager;
+export declare class CommandManager {
+    history: CommandNode;
+    current_history: Writable<CommandNode>;
+    undo(): void;
+    redo(): void;
+    execute(command: Command): void;
+    replay(full_history: CommandNode): void;
+    contains(command_name: string): boolean;
+    reset(): void;
+}

package/dist/shared/core/commands.js

@@ -0,0 +1,70 @@
+import { writable } from "svelte/store";
+/**
+ * Creates a command node
+ * @param command command to add to the node
+ * @returns a command node
+ */
+export class CommandNode {
+    command;
+    next;
+    previous;
+    constructor(command) {
+        this.command = command || null;
+        this.next = null;
+        this.previous = null;
+    }
+    push(command) {
+        const node = new CommandNode(command);
+        node.previous = this;
+        this.next = node;
+    }
+}
+/**
+ * Creates a command manager
+ * @returns a command manager
+ */
+export class CommandManager {
+    history = new CommandNode();
+    current_history = writable(this.history);
+    undo() {
+        if (this.history.previous) {
+            this.history.command?.undo();
+            this.history = this.history.previous;
+            this.current_history.set(this.history);
+        }
+    }
+    redo() {
+        if (this.history.next) {
+            this.history = this.history.next;
+            this.history.command?.execute();
+        }
+        this.current_history.set(this.history);
+    }
+    execute(command) {
+        command.execute();
+        this.history.push(command);
+        this.history = this.history.next;
+        this.current_history.set(this.history);
+    }
+    replay(full_history) {
+        setTimeout(() => {
+            while (full_history.next) {
+                this.execute(full_history.next.command);
+                full_history = full_history.next;
+            }
+        }, 1000);
+    }
+    contains(command_name) {
+        let current = this.history;
+        while (current) {
+            if (current.command?.name === command_name)
+                return true;
+            current = current.next;
+        }
+        return false;
+    }
+    reset() {
+        this.history = new CommandNode();
+        this.current_history.set(this.history);
+    }
+}

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

@@ -1,12 +1,10 @@
-import { Application, Container, Sprite, RenderTexture } from "pixi.js";
+import { Application, Container, Sprite } 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>;
-}
+import { CommandManager, type Command } from "./commands";
+import { LayerManager } from "./layers";
 export interface Tool {
     name: string;
     setup(context: ImageEditorContext, tool: ToolbarTool, subtool: Subtool): Promise<void>;
@@ -15,91 +13,6 @@ export interface Tool {
     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;
@@ -152,7 +65,7 @@ export declare class ImageEditor {
     private app;
     private ui_container;
     private image_container;
-    private command_manager;
+    command_manager: CommandManager;
     private layer_manager;
     private tools;
     private current_tool;