@gradio/imageeditor 0.15.5 → 0.16.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @gradio/imageeditor
 
+## 0.16.0
+
+### Features
+
+- [#11427](https://github.com/gradio-app/gradio/pull/11427) [`6b2bcd0`](https://github.com/gradio-app/gradio/commit/6b2bcd097ae5ef999a7fb273ecf7c7e4c0eab305) - Improve load times of the Gradio front-end.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/atoms@0.16.3
+- @gradio/statustracker@0.10.14
+- @gradio/upload@0.16.10
+- @gradio/client@1.15.5
+- @gradio/image@0.22.12
+
 ## 0.15.5
 
 ### Dependency updates

package/ImageEditor.stories.svelte

@@ -3,7 +3,6 @@
 	import ImageEditor from "./Index.svelte";
 	import { format } from "svelte-i18n";
 	import { get } from "svelte/store";
-	import { userEvent, within } from "@storybook/test";
 	import { allModes } from "../storybook/modes";
 
 	export const meta = {

package/Index.svelte

@@ -19,6 +19,7 @@
 		Source,
 		WebcamOptions
 	} from "./shared/types";
+	import type { CommandNode } from "./shared/core/commands";
 
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
@@ -57,7 +58,7 @@
 	export let canvas_size: [number, number];
 	export let fixed_canvas = false;
 	export let show_fullscreen_button = true;
-	export let full_history: any = null;
+	export let full_history: CommandNode | null = null;
 	export let gradio: Gradio<{
 		change: never;
 		error: string;
@@ -199,7 +200,6 @@
 
 		<InteractiveImageEditor
 			{border_region}
-			on:history={(e) => (full_history = e.detail)}
 			bind:is_dragging
 			{canvas_size}
 			on:change={() => handle_history_change()}
@@ -242,7 +242,7 @@
 			layer_options={layers}
 			upload={(...args) => gradio.client.upload(...args)}
 			{placeholder}
-			{full_history}
+			bind:full_history
 			{webcam_options}
 			{show_download_button}
 			{theme_mode}

package/InteractiveImageEditor.svelte

@@ -223,7 +223,6 @@
 	on:clear={() => dispatch("clear")}
 	on:download_error
 	{sources}
-	{full_history}
 	bind:background_image
 	bind:current_tool
 	brush_options={brush}
@@ -240,6 +239,7 @@
 	{show_download_button}
 	{theme_mode}
 	bind:can_undo
+	bind:full_history
 >
 	{#if current_tool === "image" && !can_undo}
 		<div class="empty wrap">

package/dist/Index.svelte

@@ -152,7 +152,6 @@ $:
 
 		<InteractiveImageEditor
 			{border_region}
-			on:history={(e) => (full_history = e.detail)}
 			bind:is_dragging
 			{canvas_size}
 			on:change={() => handle_history_change()}
@@ -195,7 +194,7 @@ $:
 			layer_options={layers}
 			upload={(...args) => gradio.client.upload(...args)}
 			{placeholder}
-			{full_history}
+			bind:full_history
 			{webcam_options}
 			{show_download_button}
 			{theme_mode}

package/dist/Index.svelte.d.ts

@@ -4,6 +4,7 @@ import type { EditorData, ImageBlobs } from "./InteractiveImageEditor.svelte";
 import type { Gradio, SelectData } from "@gradio/utils";
 import type { LoadingStatus } from "@gradio/statustracker";
 import type { LayerOptions, Transform, Source, WebcamOptions } from "./shared/types";
+import type { CommandNode } from "./shared/core/commands";
 declare const __propDef: {
     props: {
         elem_id?: string | undefined;
@@ -37,7 +38,7 @@ declare const __propDef: {
         canvas_size: [number, number];
         fixed_canvas?: boolean | undefined;
         show_fullscreen_button?: boolean | undefined;
-        full_history?: any;
+        full_history?: (CommandNode | null) | undefined;
         gradio: Gradio<{
             change: never;
             error: string;
@@ -163,9 +164,9 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
     get show_fullscreen_button(): boolean | undefined;
     /**accessor*/
     set show_fullscreen_button(_: boolean | undefined);
-    get full_history(): any;
+    get full_history(): CommandNode | null | undefined;
     /**accessor*/
-    set full_history(_: any);
+    set full_history(_: CommandNode | null | undefined);
     get gradio(): Gradio<{
         change: never;
         error: string;

package/dist/InteractiveImageEditor.svelte

@@ -173,7 +173,6 @@ let current_tool;
 	on:clear={() => dispatch("clear")}
 	on:download_error
 	{sources}
-	{full_history}
 	bind:background_image
 	bind:current_tool
 	brush_options={brush}
@@ -190,6 +189,7 @@ let current_tool;
 	{show_download_button}
 	{theme_mode}
 	bind:can_undo
+	bind:full_history
 >
 	{#if current_tool === "image" && !can_undo}
 		<div class="empty wrap">

package/dist/InteractiveImageEditor.svelte.d.ts

@@ -45,7 +45,7 @@ declare const __propDef: {
         image_id?: (null | string) | undefined;
     };
     events: {
-        history: CustomEvent<import("svelte/store").Writable<CommandNode>>;
+        history: CustomEvent<any>;
         save: CustomEvent<void>;
         download_error: CustomEvent<string>;
         clear?: CustomEvent<undefined> | undefined;

package/dist/shared/ImageEditor.svelte

@@ -2,6 +2,7 @@
 </script>
 
 <script>import { onMount, createEventDispatcher, tick } from "svelte";
+import { get } from "svelte/store";
 import Toolbar, {} from "./Toolbar.svelte";
 import { CropTool } from "./crop/crop";
 import { ResizeTool } from "./resize/resize";
@@ -21,7 +22,6 @@ import IconButton from "./IconButton.svelte";
 const { drag, open_file_upload } = create_drag();
 const dispatch = createEventDispatcher();
 export const antialias = true;
-export const full_history = null;
 export let changeable = false;
 export let sources = ["upload", "webcam", "clipboard"];
 export let transforms = ["crop", "resize"];
@@ -43,6 +43,7 @@ export let current_tool;
 export let webcam_options;
 export let show_download_button = false;
 export let theme_mode;
+export let full_history = null;
 let pixi_target;
 let pixi_target_crop;
 $:
@@ -53,9 +54,34 @@ $:
     }
   }
 function refresh_tools() {
+  if (!editor || !ready)
+    return;
   editor.set_tool(current_tool);
   editor.set_subtool(current_subtool);
 }
+$:
+  if (editor && ready && editor.layers) {
+    const current_layers = get(editor.layers);
+    if (current_layers.layers.length > 0 && !current_layers.active_layer) {
+      refresh_tools_for_layer_changes(current_layers);
+    }
+  }
+function refresh_tools_for_layer_changes(current_layers) {
+  if (!editor || !ready)
+    return;
+  if (current_layers.layers.length > 0 && !current_layers.active_layer) {
+    editor.set_layer(current_layers.layers[0].id);
+  }
+  if (current_tool) {
+    editor.set_tool(current_tool);
+    if (current_subtool) {
+      editor.set_subtool(current_subtool);
+    }
+  }
+  if (brush && (current_tool === "draw" || current_tool === "erase")) {
+    brush.set_tool(current_tool, current_subtool);
+  }
+}
 function check_if_should_init() {
   return layer_options && editor && ready;
 }
@@ -148,7 +174,17 @@ onMount(() => {
     });
     intersection_observer.observe(pixi_target);
     resize_observer.observe(pixi_target);
+    setTimeout(() => {
+      if (full_history && editor) {
+        editor.command_manager.replay(full_history, editor.context).then(() => {
+          refresh_tools_after_history();
+        });
+      }
+    }, 0);
   });
+  if (typeof window !== "undefined") {
+    window.editor = editor;
+  }
   return () => {
     if (intersection_observer) {
       intersection_observer.disconnect();
@@ -161,6 +197,24 @@ onMount(() => {
     }
   };
 });
+function refresh_tools_after_history() {
+  if (!editor || !ready)
+    return;
+  const current_layers = get(editor.layers);
+  if (current_layers.layers.length > 0 && !current_layers.active_layer) {
+    editor.set_layer(current_layers.layers[0].id);
+  }
+  if (current_tool) {
+    editor.set_tool(current_tool);
+    if (current_subtool) {
+      editor.set_subtool(current_subtool);
+    }
+  }
+  if (brush && (current_tool === "draw" || current_tool === "erase")) {
+    brush.set_tool(current_tool, current_subtool);
+  }
+  full_history = editor.command_manager.history;
+}
 let crop;
 let crop_zoom;
 export let can_undo = false;
@@ -201,6 +255,10 @@ async function init_image_editor() {
   editor.dimensions.subscribe((dimensions) => {
     last_dimensions = { ...dimensions };
   });
+  editor.command_manager.current_history.subscribe((history) => {
+    can_undo = history.previous !== null;
+    can_redo = history.next !== null;
+  });
   await Promise.all([editor.ready, crop.ready]).then(() => {
     handle_tool_change({ tool: "image" });
     ready = true;
@@ -213,8 +271,7 @@ 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;
+    full_history = editor.command_manager.history;
   });
   if (background || layers.length > 0) {
     if (background) {
@@ -228,10 +285,10 @@ async function init_image_editor() {
     await add_image_from_url(composite);
     handle_tool_change({ tool: "draw" });
   }
+  refresh_tools();
 }
 $:
   if (background == null && layers.length == 0 && composite == null && editor && ready) {
-    editor.reset_canvas();
     handle_tool_change({ tool: "image" });
     background_image = false;
     has_drawn = false;
@@ -243,6 +300,7 @@ async function handle_files(files) {
     return;
   if (!sources.includes("upload"))
     return;
+  editor.reset_canvas();
   const _file = Array.isArray(files) ? files[0] : files;
   await editor.add_image({ image: _file });
   await crop.add_image({ image: _file });
@@ -252,8 +310,6 @@ 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");
@@ -418,13 +474,9 @@ async function handle_download() {
 }
 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>
 

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

@@ -11,7 +11,6 @@ import { type ImageBlobs } from "./types";
 declare const __propDef: {
     props: {
         antialias?: true | undefined;
-        full_history?: (CommandNode | null) | undefined;
         changeable?: boolean | undefined;
         sources?: Source[] | undefined;
         transforms?: Transform[] | undefined;
@@ -33,6 +32,7 @@ declare const __propDef: {
         webcam_options: WebcamOptions;
         show_download_button?: boolean | undefined;
         theme_mode: "dark" | "light";
+        full_history?: (CommandNode | null) | undefined;
         has_drawn?: boolean | undefined;
         get_blobs?: (() => Promise<ImageBlobs>) | undefined;
         add_image?: ((image: Blob | File) => void) | undefined;
@@ -51,7 +51,6 @@ declare const __propDef: {
         clear?: CustomEvent<undefined> | undefined;
         save: CustomEvent<void>;
         change: CustomEvent<void>;
-        history: CustomEvent<import("svelte/store").Writable<CommandNode>>;
         upload: CustomEvent<void>;
         input: CustomEvent<void>;
         download_error: CustomEvent<string>;
@@ -67,7 +66,6 @@ export type ImageEditorEvents = typeof __propDef.events;
 export type ImageEditorSlots = typeof __propDef.slots;
 export default class ImageEditor extends SvelteComponent<ImageEditorProps, ImageEditorEvents, ImageEditorSlots> {
     get antialias(): true;
-    get full_history(): CommandNode;
     get get_blobs(): () => Promise<ImageBlobs>;
     get add_image(): (image: Blob | File) => void;
     get add_image_from_url(): (source: string | {

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

@@ -1,18 +1,46 @@
 import { Application, Texture } from "pixi.js";
 import { type ImageEditorContext } from "../core/editor";
 import { type Command } from "../core/commands";
+/**
+ * Represents a single drawing segment with all its parameters
+ */
+interface BrushSegment {
+    from_x: number;
+    from_y: number;
+    to_x: number;
+    to_y: number;
+    size: number;
+    color: string;
+    opacity: number;
+    mode: "draw" | "erase";
+}
+/**
+ * Represents a complete brush stroke containing multiple segments
+ */
+interface BrushStroke {
+    segments: BrushSegment[];
+    layer_id: string;
+}
 export declare class BrushCommand implements Command {
+    private stroke_data;
     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);
+    constructor(context: ImageEditorContext, stroke_data: BrushStroke, original_texture?: Texture);
     /**
      * Creates a new texture with the same content as the source texture
      */
-    private createTextureFrom;
-    execute(): Promise<void>;
+    private create_texture_from;
+    /**
+     * Recreates the stroke by rendering all segments from the stored parameters
+     * Preserves the exact order of draw/erase operations
+     */
+    private render_stroke_from_data;
+    /**
+     * Renders a segment to a graphics object (extracted from renderSegment)
+     */
+    private render_segment_to_graphics;
+    execute(context: ImageEditorContext): Promise<void>;
     undo(): Promise<void>;
 }
 /**
@@ -20,8 +48,6 @@ export declare class BrushCommand implements Command {
  * Simplified to work directly with layer textures.
  */
 export declare class BrushTextures {
-    private image_editor_context;
-    private app;
     private stroke_texture;
     private erase_texture;
     private display_container;
@@ -30,11 +56,13 @@ export declare class BrushTextures {
     private preview_sprite;
     private erase_graphics;
     private dimensions;
+    private image_editor_context;
+    private app;
     private is_new_stroke;
     private current_opacity;
-    private current_mode;
     private original_layer_texture;
     private active_layer_id;
+    private current_stroke_segments;
     constructor(image_editor_context: ImageEditorContext, app: Application);
     /**
      * Initializes textures needed for the brush tool.
@@ -63,7 +91,7 @@ export declare class BrushTextures {
     /**
      * Calculates the distance between two points.
      */
-    private calculateDistance;
+    private calculate_distance;
     /**
      * Draws a segment for the current stroke using a simple "stamp" approach.
      */
@@ -75,8 +103,13 @@ export declare class BrushTextures {
         width: number;
         height: number;
     };
+    /**
+     * Checks if textures are properly initialized.
+     */
+    get textures_initialized(): boolean;
     /**
      * Cleanup all resources.
      */
     cleanup(): void;
 }
+export {};