@gradio/imageeditor 0.14.5 → 0.15.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @gradio/imageeditor
 
+## 0.15.1
+
+### Dependency updates
+
+- @gradio/statustracker@0.10.12
+- @gradio/client@1.15.1
+- @gradio/upload@0.16.6
+- @gradio/image@0.22.7
+
+## 0.15.0
+
+### Features
+
+- [#11192](https://github.com/gradio-app/gradio/pull/11192) [`a03736f`](https://github.com/gradio-app/gradio/commit/a03736f97c642b338aa701166d3a0b299a46d27a) - Add undo and redo to the `ImageEditor` component.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/statustracker@0.10.11
+- @gradio/atoms@0.16.1
+- @gradio/client@1.15.0
+- @gradio/upload@0.16.5
+- @gradio/image@0.22.6
+
 ## 0.14.5
 
 ### Dependency updates

package/InteractiveImageEditor.svelte

@@ -16,18 +16,14 @@
 	import { createEventDispatcher } from "svelte";
 	import { type I18nFormatter } from "@gradio/utils";
 	import { prepare_files, type FileData, type Client } from "@gradio/client";
-	import { type CommandNode } from "./shared/utils/commands";
+	import { type CommandNode } from "./shared/core/commands";
 	import ImageEditor from "./shared/ImageEditor.svelte";
-	// import Layers from "./layers/Layers.svelte";
 	import { type Brush as IBrush, type Eraser } from "./shared/brush/types";
-	// import { type Eraser } from "./tools/Brush.svelte";
 	import { type Tool as ToolbarTool } from "./shared/Toolbar.svelte";
 
-	// import { Tools, Crop, Brush, Sources } from "./tools";
 	import { BlockLabel } from "@gradio/atoms";
 	import { Image as ImageIcon } from "@gradio/icons";
 	import { inject } from "./shared/utils/parse_placeholder";
-	// import Sources from "./shared/image/Sources.svelte";
 	import {
 		type LayerOptions,
 		type Transform,
@@ -138,7 +134,7 @@
 	$: handle_value({ layers, composite, background });
 
 	let background_image = false;
-	let history = false;
+	let can_undo: boolean;
 
 	export let image_id: null | string = null;
 
@@ -243,8 +239,9 @@
 	{webcam_options}
 	{show_download_button}
 	{theme_mode}
+	bind:can_undo
 >
-	{#if !background_image && current_tool === "image" && !has_drawn}
+	{#if current_tool === "image" && !can_undo}
 		<div class="empty wrap">
 			{#if sources && sources.length}
 				{#if heading || paragraph}

package/dist/InteractiveImageEditor.svelte

@@ -3,7 +3,7 @@
 <script>import { createEventDispatcher } from "svelte";
 import {} from "@gradio/utils";
 import { prepare_files } from "@gradio/client";
-import {} from "./shared/utils/commands";
+import {} from "./shared/core/commands";
 import ImageEditor from "./shared/ImageEditor.svelte";
 import {} from "./shared/brush/types";
 import {} from "./shared/Toolbar.svelte";
@@ -89,7 +89,7 @@ function handle_value(value) {
 $:
   handle_value({ layers, composite, background });
 let background_image = false;
-let history = false;
+let can_undo;
 export let image_id = null;
 function nextframe() {
   return new Promise((resolve) => setTimeout(() => resolve(), 30));
@@ -189,8 +189,9 @@ let current_tool;
 	{webcam_options}
 	{show_download_button}
 	{theme_mode}
+	bind:can_undo
 >
-	{#if !background_image && current_tool === "image" && !has_drawn}
+	{#if current_tool === "image" && !can_undo}
 		<div class="empty wrap">
 			{#if sources && sources.length}
 				{#if heading || paragraph}

package/dist/InteractiveImageEditor.svelte.d.ts

@@ -11,7 +11,7 @@ export interface ImageBlobs {
 }
 import { type I18nFormatter } from "@gradio/utils";
 import { type FileData, type Client } from "@gradio/client";
-import { type CommandNode } from "./shared/utils/commands";
+import { type CommandNode } from "./shared/core/commands";
 import { type Brush as IBrush, type Eraser } from "./shared/brush/types";
 import { type LayerOptions, type Transform, type Source, type WebcamOptions } from "./shared/types";
 declare const __propDef: {

package/dist/shared/Controls.svelte

@@ -1,12 +1,23 @@
 <script>import { createEventDispatcher } from "svelte";
 import { IconButton, IconButtonWrapper } from "@gradio/atoms";
-import { Check, Trash, ZoomIn, ZoomOut, Pan, Download } from "@gradio/icons";
+import {
+  Check,
+  Trash,
+  ZoomIn,
+  ZoomOut,
+  Pan,
+  Download,
+  Undo,
+  Redo
+} from "@gradio/icons";
 export let can_save = false;
 export let changeable = false;
 export let current_zoom = 1;
 export let tool;
 export let min_zoom = true;
 export let enable_download = false;
+export let can_undo;
+export let can_redo;
 const dispatch = createEventDispatcher();
 let show_zoom_popup = false;
 function handle_zoom_click(e) {
@@ -97,6 +108,26 @@ $:
 	</div>
 	<div class="separator"></div>
 
+	<IconButton
+		Icon={Undo}
+		label="Undo"
+		on:click={(event) => {
+			dispatch("undo");
+			event.stopPropagation();
+		}}
+		disabled={!can_undo}
+	/>
+
+	<IconButton
+		Icon={Redo}
+		label="Redo"
+		on:click={(event) => {
+			dispatch("redo");
+			event.stopPropagation();
+		}}
+		disabled={!can_redo}
+	/>
+
 	{#if changeable}
 		<IconButton
 			disabled={!can_save}

package/dist/shared/Controls.svelte.d.ts

@@ -7,6 +7,8 @@ declare const __propDef: {
         tool: string;
         min_zoom?: boolean | undefined;
         enable_download?: boolean | undefined;
+        can_undo: boolean;
+        can_redo: boolean;
     };
     events: {
         remove_image: CustomEvent<void>;

package/dist/shared/ImageEditor.svelte

@@ -8,7 +8,7 @@ import { ResizeTool } from "./resize/resize";
 import { Webcam } from "@gradio/image";
 import tinycolor, {} from "tinycolor2";
 import { ZoomTool } from "./zoom/zoom";
-import {} from "./utils/commands";
+import {} from "./core/commands";
 import { ImageEditor } from "./core/editor";
 import {} from "./brush/types";
 import { BrushTool } from "./brush/brush";
@@ -163,6 +163,8 @@ onMount(() => {
 });
 let crop;
 let crop_zoom;
+export let can_undo = false;
+let can_redo = false;
 async function init_image_editor() {
   brush = new BrushTool();
   zoom = new ZoomTool();
@@ -211,6 +213,8 @@ async function init_image_editor() {
   });
   editor.on("change", () => {
     dispatch("change");
+    can_undo = editor.command_manager.history.previous !== null;
+    can_redo = editor.command_manager.history.next !== null;
   });
   if (background || layers.length > 0) {
     if (background) {
@@ -248,7 +252,11 @@ async function handle_files(files) {
   dispatch("upload");
   dispatch("input");
   dispatch("change");
+  can_undo = editor.command_manager.history.previous !== null;
+  can_redo = editor.command_manager.history.next !== null;
 }
+$:
+  background_image = can_undo && editor.command_manager.contains("AddImage");
 function handle_tool_change({ tool }) {
   editor.set_tool(tool);
   current_tool = tool;
@@ -408,6 +416,16 @@ async function handle_download() {
   link.click();
   URL.revokeObjectURL(url);
 }
+function handle_undo() {
+  editor.undo();
+  can_undo = editor.command_manager.history.previous !== null;
+  can_redo = editor.command_manager.history.next !== null;
+}
+function handle_redo() {
+  editor.redo();
+  can_undo = editor.command_manager.history.previous !== null;
+  can_redo = editor.command_manager.history.next !== null;
+}
 </script>
 
 <div
@@ -447,6 +465,10 @@ async function handle_download() {
 				}}
 				enable_download={show_download_button}
 				on:download={() => handle_download()}
+				{can_undo}
+				{can_redo}
+				on:undo={handle_undo}
+				on:redo={handle_redo}
 			/>
 		{/if}
 

package/dist/shared/ImageEditor.svelte.d.ts

@@ -4,7 +4,7 @@ export type context_type = "bg" | "layers" | "crop" | "draw" | "erase";
 import { type Tool as ToolbarTool } from "./Toolbar.svelte";
 import type { I18nFormatter } from "@gradio/utils";
 import type { Client, FileData } from "@gradio/client";
-import { type CommandNode } from "./utils/commands";
+import { type CommandNode } from "./core/commands";
 import { type Brush, type Eraser } from "./brush/types";
 import type { LayerOptions, Source, Transform, WebcamOptions } from "./types";
 import { type ImageBlobs } from "./types";
@@ -43,6 +43,7 @@ declare const __propDef: {
             };
         } | any) => Promise<void>) | undefined;
         add_layers_from_url?: ((source: FileData[] | any) => Promise<void>) | undefined;
+        can_undo?: boolean | undefined;
     };
     events: {
         error: CustomEvent<string>;

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

@@ -10,7 +10,6 @@ export class BrushCursor {
     image_editor_context;
     state;
     scale;
-    // Cursor-related properties
     cursor_graphics = null;
     cursor_container = null;
     brush_preview_container = null;
@@ -19,7 +18,6 @@ export class BrushCursor {
     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) {
@@ -39,18 +37,13 @@ export class BrushCursor {
      * 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));
     }
@@ -58,9 +51,7 @@ export class BrushCursor {
      * 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;
@@ -69,17 +60,14 @@ export class BrushCursor {
             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);
@@ -87,13 +75,10 @@ export class BrushCursor {
             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();
     }
     /**
@@ -102,13 +87,10 @@ export class BrushCursor {
     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({
@@ -116,7 +98,6 @@ export class BrushCursor {
             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
@@ -129,11 +110,8 @@ export class BrushCursor {
     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);
     }
     /**
@@ -141,22 +119,18 @@ export class BrushCursor {
      * @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();
         }
@@ -194,7 +168,6 @@ export class BrushCursor {
                 show && this.is_brush_or_erase_active;
         }
         if (show) {
-            // update preview appearance and position
             this.update_brush_preview();
             this.update_brush_preview_position();
         }
@@ -203,7 +176,6 @@ export class BrushCursor {
      * 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);
@@ -211,13 +183,10 @@ export class BrushCursor {
             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;
     }
     /**
@@ -226,19 +195,15 @@ export class BrushCursor {
     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,
@@ -251,14 +216,11 @@ export class BrushCursor {
     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);
     }
     /**
@@ -289,9 +251,7 @@ export class BrushCursor {
      * 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);
@@ -299,7 +259,6 @@ export class BrushCursor {
             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);
@@ -307,7 +266,6 @@ export class BrushCursor {
             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;

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

@@ -1,5 +1,20 @@
-import { Application } from "pixi.js";
+import { Application, Texture } from "pixi.js";
 import { type ImageEditorContext } from "../core/editor";
+import { type Command } from "../core/commands";
+export declare class BrushCommand implements Command {
+    private context;
+    private layer_id;
+    private original_texture;
+    private final_texture;
+    name: string;
+    constructor(context: ImageEditorContext, layer_id: string, original_texture: Texture, final_texture: Texture);
+    /**
+     * Creates a new texture with the same content as the source texture
+     */
+    private createTextureFrom;
+    execute(): Promise<void>;
+    undo(): Promise<void>;
+}
 /**
  * Class to handle texture operations for the brush tool.
  * Simplified to work directly with layer textures.
@@ -18,6 +33,8 @@ export declare class BrushTextures {
     private is_new_stroke;
     private current_opacity;
     private current_mode;
+    private original_layer_texture;
+    private active_layer_id;
     constructor(image_editor_context: ImageEditorContext, app: Application);
     /**
      * Initializes textures needed for the brush tool.
@@ -40,7 +57,7 @@ export declare class BrushTextures {
      */
     reset_eraser_mask(): void;
     /**
-     * Commits the current stroke to the active layer.
+     * Commits the current stroke to the active layer and returns a command for undo/redo.
      */
     commit_stroke(): void;
     /**