@gradio/imageeditor 0.15.4 → 0.16.0

package/dist/shared/core/layers.js

@@ -515,7 +515,12 @@ export class LayerManager {
                 }
                 return null;
             })),
-            composite: await get_canvas_blob(this.app.renderer, this.image_container)
+            composite: await get_canvas_blob(this.app.renderer, this.image_container, {
+                width,
+                height,
+                x: 0,
+                y: 0
+            })
         };
         return blobs;
     }
@@ -557,13 +562,16 @@ export class LayerManager {
         for (const layer of this.layers) {
             this.delete_layer(layer.id);
         }
+        let i = 0;
         for (const layer of this.layer_options.layers) {
             this.create_layer({
                 width,
                 height,
                 layer_name: layer,
-                user_created: false
+                user_created: false,
+                layer_id: `layer-${i}`
             });
+            i++;
         }
         this.active_layer = this.layers[0].container;
         this.active_layer_id = this.layers[0].id;
@@ -602,7 +610,10 @@ export class AddLayerCommand {
         const current_active = current_layers.find((l) => l.container === this.context.layer_manager.get_active_layer());
         this.previous_active_layer = current_active?.id || null;
     }
-    async execute() {
+    async execute(context) {
+        if (context) {
+            this.context = context;
+        }
         this.context.layer_manager.create_layer({
             width: this.width,
             height: this.height,
@@ -676,7 +687,10 @@ export class RemoveLayerCommand {
             this.texture_copy = null;
         }
     }
-    async execute() {
+    async execute(context) {
+        if (context) {
+            this.context = context;
+        }
         this.context.layer_manager.delete_layer(this.layer_data.id);
     }
     async undo() {
@@ -755,7 +769,10 @@ export class ReorderLayerCommand {
             ];
         }
     }
-    async execute() {
+    async execute(context) {
+        if (context) {
+            this.context = context;
+        }
         this.context.layer_manager.move_layer(this.layer_id, this.direction);
     }
     async undo() {

package/dist/shared/image/image.d.ts

@@ -58,7 +58,7 @@ export declare class AddImageCommand implements BgImageCommand {
     private clone_texture;
     start(): Promise<void>;
     private handle_image;
-    execute(): Promise<void>;
+    execute(context?: ImageEditorContext): Promise<void>;
     undo(): Promise<void>;
 }
 /**

package/dist/shared/image/image.js

@@ -120,7 +120,10 @@ export class AddImageCommand {
         }
         return [this.current_canvas_size.width, this.current_canvas_size.height];
     }
-    async execute() {
+    async execute(context) {
+        if (context) {
+            this.context = context;
+        }
         await this.start();
         if (this.sprite === null) {
             return;

package/dist/shared/resize/resize.d.ts

@@ -27,7 +27,7 @@ export declare class ResizeCommand implements Command {
         x: number;
         y: number;
     }, reset_ui: () => void);
-    execute(): Promise<void>;
+    execute(context?: ImageEditorContext): Promise<void>;
     undo(): Promise<void>;
 }
 /**

package/dist/shared/resize/resize.js

@@ -30,7 +30,10 @@ export class ResizeCommand {
         this.new_y = new_state.y;
         this.reset_ui = reset_ui;
     }
-    async execute() {
+    async execute(context) {
+        if (context) {
+            this.context = context;
+        }
         if (!this.context.background_image)
             return;
         this.context.background_image.width = this.new_width;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/imageeditor",
-  "version": "0.15.4",
+  "version": "0.16.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -11,17 +11,17 @@
     "pixi-filters": "^6.1.0",
     "pixi.js": "^8.7.3",
     "tinycolor2": "^1.6.0",
-    "@gradio/atoms": "^0.16.2",
+    "@gradio/atoms": "^0.16.3",
+    "@gradio/image": "^0.22.12",
     "@gradio/icons": "^0.12.0",
-    "@gradio/image": "^0.22.10",
-    "@gradio/statustracker": "^0.10.13",
-    "@gradio/client": "^1.15.3",
-    "@gradio/upload": "^0.16.8",
-    "@gradio/utils": "^0.10.2",
-    "@gradio/wasm": "^0.18.1"
+    "@gradio/statustracker": "^0.10.14",
+    "@gradio/upload": "^0.16.10",
+    "@gradio/client": "^1.15.5",
+    "@gradio/wasm": "^0.18.1",
+    "@gradio/utils": "^0.10.2"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.13.2"
+    "@gradio/preview": "^0.14.0"
   },
   "main_changeset": true,
   "main": "./Index.svelte",

package/shared/ImageEditor.svelte

@@ -7,6 +7,7 @@
 
 <script lang="ts">
 	import { onMount, createEventDispatcher, tick } from "svelte";
+	import { get } from "svelte/store";
 	import Toolbar, { type Tool as ToolbarTool } from "./Toolbar.svelte";
 	import { CropTool } from "./crop/crop";
 	import { ResizeTool } from "./resize/resize";
@@ -33,14 +34,12 @@
 		clear?: never;
 		save: void;
 		change: void;
-		history: CommandManager["current_history"];
 		upload: void;
 		input: void;
 		download_error: string;
 	}>();
 
 	export const antialias = true;
-	export const full_history: CommandNode | null = null;
 
 	export let changeable = false;
 	export let sources: Source[] = ["upload", "webcam", "clipboard"];
@@ -63,6 +62,7 @@
 	export let webcam_options: WebcamOptions;
 	export let show_download_button = false;
 	export let theme_mode: "dark" | "light";
+	export let full_history: CommandNode | null = null;
 
 	let pixi_target: HTMLDivElement;
 	let pixi_target_crop: HTMLDivElement;
@@ -75,10 +75,42 @@
 	}
 
 	function refresh_tools(): void {
+		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);
+		}
+	}
+
+	/**
+	 * Refreshes tools when layer state changes
+	 */
+	function refresh_tools_for_layer_changes(current_layers: any): void {
+		if (!editor || !ready) return;
+
+		if (current_layers.layers.length > 0 && !current_layers.active_layer) {
+			editor.set_layer(current_layers.layers[0].id);
+		}
+
+		// reapply current tool to ensure it targets the correct layer
+		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(): boolean {
 		return layer_options && editor && ready;
 	}
@@ -127,7 +159,6 @@
 		if (!editor || !source || !check_if_should_init()) return;
 		let url: string;
 
-		// Handle different source types
 		if (typeof source === "string") {
 			url = source;
 		} else if (source?.meta?._type === "gradio.FileData" && source?.url) {
@@ -161,7 +192,6 @@
 	): Promise<void> {
 		if (!editor || !source.length || !check_if_should_init()) return;
 
-		// Handle different source types
 		if (
 			Array.isArray(source) &&
 			source.every((item) => item?.meta?._type === "gradio.FileData")
@@ -203,10 +233,8 @@
 				current_dimensions.width !== last_dimensions.width ||
 				current_dimensions.height !== last_dimensions.height
 			) {
-				// Use set_zoom with "fit" to reset to appropriate zoom level
 				zoom.set_zoom("fit");
 
-				// Update the last known dimensions
 				last_dimensions = {
 					width: current_dimensions.width,
 					height: current_dimensions.height
@@ -218,6 +246,7 @@
 	onMount(() => {
 		let intersection_observer: IntersectionObserver;
 		let resize_observer: ResizeObserver;
+
 		init_image_editor().then(() => {
 			mounted = true;
 			intersection_observer = new IntersectionObserver(() => {
@@ -230,9 +259,21 @@
 
 			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);
 		});
 
-		// Set up mutation observer to detect visibility changes
+		if (typeof window !== "undefined") {
+			(window as any).editor = editor;
+		}
 
 		return () => {
 			if (intersection_observer) {
@@ -247,6 +288,32 @@
 		};
 	});
 
+	/**
+	 * Refreshes tool state after history replay to ensure proper layer targeting
+	 */
+	function refresh_tools_after_history(): void {
+		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: ImageEditor;
 	let crop_zoom: ZoomTool;
 	export let can_undo = false;
@@ -291,10 +358,14 @@
 		});
 
 		editor.dimensions.subscribe((dimensions) => {
-			// Store dimensions for later comparison
 			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;
@@ -308,8 +379,7 @@
 
 		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) {
@@ -324,6 +394,8 @@
 			await add_image_from_url(composite);
 			handle_tool_change({ tool: "draw" });
 		}
+
+		refresh_tools();
 	}
 
 	$: if (
@@ -333,7 +405,7 @@
 		editor &&
 		ready
 	) {
-		editor.reset_canvas();
+		// editor.reset_canvas();
 		handle_tool_change({ tool: "image" });
 		background_image = false;
 		has_drawn = false;
@@ -352,17 +424,17 @@
 	): Promise<void> {
 		if (files == null) 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 });
 		crop.reset();
+
 		background_image = true;
 		handle_tool_change({ tool: "draw" });
 		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");
@@ -586,14 +658,10 @@
 
 	function handle_undo(): void {
 		editor.undo();
-		can_undo = editor.command_manager.history.previous !== null;
-		can_redo = editor.command_manager.history.next !== null;
 	}
 
 	function handle_redo(): void {
 		editor.redo();
-		can_undo = editor.command_manager.history.previous !== null;
-		can_redo = editor.command_manager.history.next !== null;
 	}
 </script>
 

package/shared/brush/BrushOptions.svelte

@@ -47,7 +47,6 @@
 		if (!color) return;
 		selected_color = color;
 
-		// Update opacity if provided
 		if (opacity !== undefined) {
 			selected_opacity = opacity;
 		}
@@ -80,11 +79,9 @@
 	export let preview = false;
 	function handle_preview(): void {
 		if (!preview) {
-			// Show preview immediately when requested
 			preview = true;
 			debounced_close_preview();
 		} else {
-			// Only use debounce when hiding the preview
 			debounced_close_preview();
 		}
 	}

package/shared/brush/ColorPicker.svelte

@@ -28,9 +28,9 @@
 
 	function update_hue_from_mouse(x: number): void {
 		if (!hue_rect) return;
-		const _x = clamp(x - hue_rect.left, 0, hue_rect.width); // Get the x-coordinate relative to the box
+		const _x = clamp(x - hue_rect.left, 0, hue_rect.width); // get the x-coordinate relative to the box
 		hue_marker_pos = _x;
-		const _hue = (_x / hue_rect.width) * 360; // Scale the x position to a hue value (0-360)
+		const _hue = (_x / hue_rect.width) * 360; // scale the x position to a hue value (0-360)
 
 		hue = _hue;