@gradio/imageeditor 0.16.2 → 0.16.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @gradio/imageeditor
 
+## 0.16.3
+
+### Fixes
+
+- [#11667](https://github.com/gradio-app/gradio/pull/11667) [`07d19f7`](https://github.com/gradio-app/gradio/commit/07d19f7af3b60ff4a931d2c6740c9d61e6685dcb) - Fix the ImageEditor's auto-zoom, canvas resize, and zoom functionality.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/upload@0.16.13
+- @gradio/client@1.16.0
+- @gradio/image@0.22.15
+
 ## 0.16.2
 
 ### Dependency updates

package/dist/shared/ImageEditor.svelte

@@ -118,6 +118,7 @@ export async function add_image_from_url(source) {
     crop.set_tool("image");
     crop.set_subtool("crop");
     background_image = true;
+    zoom.set_zoom("fit");
     dispatch("upload");
     dispatch("input");
   } catch (error) {
@@ -289,6 +290,8 @@ async function init_image_editor() {
 }
 $:
   if (background == null && layers.length == 0 && composite == null && editor && ready) {
+    editor.reset_canvas();
+    zoom.set_zoom("fit");
     handle_tool_change({ tool: "image" });
     background_image = false;
     has_drawn = false;
@@ -306,6 +309,7 @@ async function handle_files(files) {
   await crop.add_image({ image: _file });
   crop.reset();
   background_image = true;
+  zoom.set_zoom("fit");
   handle_tool_change({ tool: "draw" });
   dispatch("upload");
   dispatch("input");

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

@@ -73,6 +73,8 @@ export declare class ImageEditor {
     private target_element;
     private width;
     private height;
+    private original_width;
+    private original_height;
     dimensions: Spring<{
         width: number;
         height: number;

package/dist/shared/core/editor.js

@@ -85,6 +85,8 @@ export class ImageEditor {
     target_element;
     width;
     height;
+    original_width;
+    original_height;
     dimensions;
     scale;
     position;
@@ -119,6 +121,8 @@ export class ImageEditor {
         this.target_element = options.target_element;
         this.width = options.width;
         this.height = options.height;
+        this.original_width = options.width;
+        this.original_height = options.height;
         this.command_manager = new CommandManager();
         this.ready = new Promise((resolve) => {
             this.ready_resolve = resolve;
@@ -438,6 +442,8 @@ export class ImageEditor {
         this.background_image = image;
     }
     async reset_canvas() {
+        this.width = this.original_width;
+        this.height = this.original_height;
         this.layer_manager.reset_layers(this.width, this.height);
         this.background_image = undefined;
         this.background_image_present.set(false);

package/dist/shared/zoom/zoom.js

@@ -369,34 +369,32 @@ export class ZoomTool {
      * @private
      */
     zoom_to_point(new_zoom, point, hard, is_fit_zoom) {
-        const cursor_relative_to_image = {
-            x: (point.x - this.local_position.x) / this.local_scale,
-            y: (point.y - this.local_position.y) / this.local_scale
-        };
-        const image_percentages = {
-            x: cursor_relative_to_image.x / this.local_dimensions.width,
-            y: cursor_relative_to_image.y / this.local_dimensions.height
+        const container = this.image_editor_context.image_container;
+        const current_world_pos = container.getGlobalPosition();
+        const current_scale = container.scale.x;
+        const cursor_image_pixel = {
+            x: (point.x - current_world_pos.x) / current_scale,
+            y: (point.y - current_world_pos.y) / current_scale
         };
         const fit_zoom = this.calculate_min_zoom(this.local_dimensions.width, this.local_dimensions.height);
         const min_zoom = Math.min(fit_zoom, 1);
         new_zoom = Math.min(Math.max(new_zoom, min_zoom), this.max_zoom);
-        const new_scaled_width = this.local_dimensions.width * new_zoom;
-        const new_scaled_height = this.local_dimensions.height * new_zoom;
-        let new_position = {
-            x: point.x - new_scaled_width * image_percentages.x,
-            y: point.y - new_scaled_height * image_percentages.y
+        const new_container_world_pos = {
+            x: point.x - cursor_image_pixel.x * new_zoom,
+            y: point.y - cursor_image_pixel.y * new_zoom
         };
         if (new_zoom === min_zoom || is_fit_zoom) {
             const canvas_width = this.image_editor_context.app.screen.width;
             const canvas_height = this.image_editor_context.app.screen.height;
-            new_position = {
-                x: (canvas_width - new_scaled_width) / 2,
-                y: (canvas_height - this.pad_bottom - new_scaled_height) / 2
-            };
+            const new_scaled_width = this.local_dimensions.width * new_zoom;
+            const new_scaled_height = this.local_dimensions.height * new_zoom;
+            new_container_world_pos.x = (canvas_width - new_scaled_width) / 2;
+            new_container_world_pos.y =
+                (canvas_height - this.pad_bottom - new_scaled_height) / 2;
         }
         this.image_editor_context.set_image_properties({
             scale: new_zoom,
-            position: new_position,
+            position: new_container_world_pos,
             animate: typeof hard === "boolean" ? !hard : new_zoom === min_zoom
         });
         this.min_zoom.set(new_zoom === min_zoom);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/imageeditor",
-  "version": "0.16.2",
+  "version": "0.16.3",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -11,14 +11,14 @@
     "pixi-filters": "^6.1.0",
     "pixi.js": "^8.7.3",
     "tinycolor2": "^1.6.0",
-    "@gradio/client": "^1.15.7",
     "@gradio/atoms": "^0.16.3",
+    "@gradio/client": "^1.16.0",
     "@gradio/icons": "^0.12.0",
-    "@gradio/image": "^0.22.14",
+    "@gradio/image": "^0.22.15",
+    "@gradio/upload": "^0.16.13",
     "@gradio/statustracker": "^0.10.15",
-    "@gradio/upload": "^0.16.12",
-    "@gradio/wasm": "^0.18.1",
-    "@gradio/utils": "^0.10.2"
+    "@gradio/utils": "^0.10.2",
+    "@gradio/wasm": "^0.18.1"
   },
   "devDependencies": {
     "@gradio/preview": "^0.14.0"

package/shared/ImageEditor.svelte

@@ -175,6 +175,7 @@
 			crop.set_tool("image");
 			crop.set_subtool("crop");
 			background_image = true;
+			zoom.set_zoom("fit");
 			dispatch("upload");
 			dispatch("input");
 		} catch (error) {
@@ -405,7 +406,8 @@
 		editor &&
 		ready
 	) {
-		// editor.reset_canvas();
+		editor.reset_canvas();
+		zoom.set_zoom("fit");
 		handle_tool_change({ tool: "image" });
 		background_image = false;
 		has_drawn = false;
@@ -431,6 +433,7 @@
 		crop.reset();
 
 		background_image = true;
+		zoom.set_zoom("fit");
 		handle_tool_change({ tool: "draw" });
 		dispatch("upload");
 		dispatch("input");

package/shared/core/editor.ts

@@ -167,6 +167,8 @@ export class ImageEditor {
 	private target_element: HTMLElement;
 	private width: number;
 	private height: number;
+	private original_width: number;
+	private original_height: number;
 	dimensions: Spring<{ width: number; height: number }>;
 	scale: Spring<number>;
 	private position: Spring<{ x: number; y: number }>;
@@ -209,6 +211,8 @@ export class ImageEditor {
 		this.target_element = options.target_element;
 		this.width = options.width;
 		this.height = options.height;
+		this.original_width = options.width;
+		this.original_height = options.height;
 		this.command_manager = new CommandManager();
 
 		this.ready = new Promise((resolve) => {
@@ -658,6 +662,9 @@ export class ImageEditor {
 	}
 
 	async reset_canvas(): Promise<void> {
+		this.width = this.original_width;
+		this.height = this.original_height;
+
 		this.layer_manager.reset_layers(this.width, this.height);
 		this.background_image = undefined;
 		this.background_image_present.set(false);

package/shared/zoom/zoom.ts

@@ -521,14 +521,13 @@ export class ZoomTool implements Tool {
 		hard?: boolean,
 		is_fit_zoom?: boolean
 	): void {
-		const cursor_relative_to_image = {
-			x: (point.x - this.local_position.x) / this.local_scale,
-			y: (point.y - this.local_position.y) / this.local_scale
-		};
+		const container = this.image_editor_context.image_container;
+		const current_world_pos = container.getGlobalPosition();
+		const current_scale = container.scale.x;
 
-		const image_percentages = {
-			x: cursor_relative_to_image.x / this.local_dimensions.width,
-			y: cursor_relative_to_image.y / this.local_dimensions.height
+		const cursor_image_pixel = {
+			x: (point.x - current_world_pos.x) / current_scale,
+			y: (point.y - current_world_pos.y) / current_scale
 		};
 
 		const fit_zoom = this.calculate_min_zoom(
@@ -538,27 +537,25 @@ export class ZoomTool implements Tool {
 		const min_zoom = Math.min(fit_zoom, 1);
 		new_zoom = Math.min(Math.max(new_zoom, min_zoom), this.max_zoom);
 
-		const new_scaled_width = this.local_dimensions.width * new_zoom;
-		const new_scaled_height = this.local_dimensions.height * new_zoom;
-
-		let new_position = {
-			x: point.x - new_scaled_width * image_percentages.x,
-			y: point.y - new_scaled_height * image_percentages.y
+		const new_container_world_pos = {
+			x: point.x - cursor_image_pixel.x * new_zoom,
+			y: point.y - cursor_image_pixel.y * new_zoom
 		};
 
 		if (new_zoom === min_zoom || is_fit_zoom) {
 			const canvas_width = this.image_editor_context.app.screen.width;
 			const canvas_height = this.image_editor_context.app.screen.height;
+			const new_scaled_width = this.local_dimensions.width * new_zoom;
+			const new_scaled_height = this.local_dimensions.height * new_zoom;
 
-			new_position = {
-				x: (canvas_width - new_scaled_width) / 2,
-				y: (canvas_height - this.pad_bottom - new_scaled_height) / 2
-			};
+			new_container_world_pos.x = (canvas_width - new_scaled_width) / 2;
+			new_container_world_pos.y =
+				(canvas_height - this.pad_bottom - new_scaled_height) / 2;
 		}
 
 		this.image_editor_context.set_image_properties({
 			scale: new_zoom,
-			position: new_position,
+			position: new_container_world_pos,
 			animate: typeof hard === "boolean" ? !hard : new_zoom === min_zoom
 		});
 		this.min_zoom.set(new_zoom === min_zoom);