@gradio/imageeditor 0.12.3 → 0.12.4

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @gradio/imageeditor
 
+## 0.12.4
+
+### Features
+
+- [#10370](https://github.com/gradio-app/gradio/pull/10370) [`71c8b8a`](https://github.com/gradio-app/gradio/commit/71c8b8abbfae0e47eb46561b0104bd452e5dffe8) - Clear Image Editor Value with None.  Thanks @freddyaboulton!
+- [#10416](https://github.com/gradio-app/gradio/pull/10416) [`3c2e12b`](https://github.com/gradio-app/gradio/commit/3c2e12b5ba52441f45565ae8e14cea46ea5b5b2c) - Fix ImageEditor Cropping - Cropping now crops the background image instead of the image + canvas.  Thanks @freddyaboulton!
+
 ## 0.12.3
 
 ### Fixes

package/Index.svelte

@@ -225,6 +225,12 @@
 				loading_status.status = "error";
 				gradio.dispatch("error", detail);
 			}}
+			on:receive_null={() =>
+				(value = {
+					background: null,
+					layers: [],
+					composite: null
+				})}
 			on:error
 			{brush}
 			{eraser}

package/dist/Index.svelte

@@ -177,6 +177,12 @@ $:
 				loading_status.status = "error";
 				gradio.dispatch("error", detail);
 			}}
+			on:receive_null={() =>
+				(value = {
+					background: null,
+					layers: [],
+					composite: null
+				})}
 			on:error
 			{brush}
 			{eraser}

package/dist/shared/ImageEditor.svelte

@@ -46,7 +46,7 @@ export let canvas_height = void 0;
 $:
   height = $editor_box.child_height;
 $:
-  canvas_height = $crop[3] * $editor_box.child_height + 1;
+  canvas_height = $editor_box.child_height + 1;
 const crop = writable([0, 0, 1, 1]);
 const position_spring = spring(
   { x: 0, y: 0 },
@@ -171,10 +171,10 @@ function reposition_canvas() {
   if (!$editor_box)
     return;
   const [l, t, w, h] = $crop;
-  const cx = l * $editor_box.child_width;
-  const cy = t * $editor_box.child_height;
-  const cw = w * $editor_box.child_width;
-  const ch = h * $editor_box.child_height;
+  const cx = 0;
+  const cy = 0;
+  const cw = $editor_box.child_width;
+  const ch = $editor_box.child_height;
   const x = 0.5 * $editor_box.child_width - cx - cw / 2;
   const y = 0.5 * $editor_box.child_height - cy - ch / 2;
   position_spring.set({ x, y });
@@ -186,10 +186,10 @@ export async function get_blobs() {
   return $pixi?.get_blobs(
     $pixi.get_layers(),
     new Rectangle(
-      Math.round(l * $dimensions[0]),
-      Math.round(t * $dimensions[1]),
-      Math.round(w * $dimensions[0]),
-      Math.round(h * $dimensions[1])
+      Math.round(0),
+      Math.round(0),
+      Math.round(1 * $dimensions[0]),
+      Math.round(1 * $dimensions[1])
     ),
     $dimensions
   );
@@ -285,14 +285,10 @@ export function set_tool(tool) {
 		<div
 			class="canvas"
 			class:no-border={!bg && $active_tool === "bg" && !history}
-			style:width="{$crop[2] * $editor_box.child_width + 1}px"
-			style:height="{$crop[3] * $editor_box.child_height + 1}px"
-			style:top="{$crop[1] * $editor_box.child_height +
-				($editor_box.child_top - $editor_box.parent_top) -
-				0.5}px"
-			style:left="{$crop[0] * $editor_box.child_width +
-				($editor_box.child_left - $editor_box.parent_left) -
-				0.5}px"
+			style:width="{$editor_box.child_width + 1}px"
+			style:height="{$editor_box.child_height + 1}px"
+			style:top="{$editor_box.child_top - $editor_box.parent_top - 0.5}px"
+			style:left="{$editor_box.child_left - $editor_box.parent_left - 0.5}px"
 		></div>
 	</div>
 </div>

package/dist/shared/InteractiveImageEditor.svelte

@@ -52,7 +52,12 @@ $:
   if (bg)
     dispatch("upload");
 export async function get_data() {
-  const blobs = await editor.get_blobs();
+  let blobs;
+  try {
+    blobs = await editor.get_blobs();
+  } catch (e) {
+    return { background: null, layers: [], composite: null };
+  }
   const bg2 = blobs.background ? upload(
     await prepare_files([new File([blobs.background], "background.png")]),
     root
@@ -80,6 +85,7 @@ function handle_value(value2) {
     return;
   if (value2 == null) {
     editor.handle_remove();
+    dispatch("receive_null");
   }
 }
 $:

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

@@ -49,6 +49,7 @@ declare const __propDef: {
         clear?: CustomEvent<undefined> | undefined;
         upload?: CustomEvent<undefined> | undefined;
         change?: CustomEvent<undefined> | undefined;
+        receive_null?: CustomEvent<undefined> | undefined;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/shared/tools/Crop.svelte

@@ -52,7 +52,7 @@ async function initial_crop() {
   h_p = new_height / $editor_box.child_height;
   l_p = x_offset / $editor_box.child_width;
   t_p = y_offset / $editor_box.child_height;
-  c = crop_canvas($pixi.renderer, $pixi.mask_container, crop, 0.2);
+  c = crop_canvas($pixi.renderer, $pixi.background_container, crop, 0.2);
   c.start(...$dimensions, current_crop, false);
   c.continue(
     [
@@ -83,7 +83,7 @@ function handle_crop(type, {
     }
     cropper = crop_canvas(
       $pixi?.renderer,
-      $pixi.mask_container,
+      $pixi.background_container,
       crop,
       current_opacity
     );

package/dist/shared/tools/crop.d.ts

@@ -6,7 +6,7 @@ export interface CropCommand extends Command {
     stop: () => number;
     continue: (crop_size: [number, number, number, number], preview?: boolean) => void;
 }
-export declare function crop_canvas(renderer: IRenderer, mask_container: Container, crop: Writable<[number, number, number, number]>, current_opacity?: number): CropCommand;
+export declare function crop_canvas(renderer: IRenderer, background_container: Container, crop: Writable<[number, number, number, number]>, current_opacity?: number): CropCommand;
 export declare function resize_and_reposition(original_width: number, original_height: number, anchor: "t" | "r" | "l" | "b" | "tl" | "tr" | "bl" | "br" | "c", aspect_ratio: number, max_width: number, max_height: number): {
     new_width: number;
     new_height: number;

package/dist/shared/tools/crop.js

@@ -1,7 +1,7 @@
 import { Graphics, Sprite, RenderTexture } from "pixi.js";
 import {} from "../utils/commands";
 import { spring } from "svelte/motion";
-export function crop_canvas(renderer, mask_container, crop, current_opacity = 0) {
+export function crop_canvas(renderer, background_container, crop, current_opacity = 0) {
     let text;
     let sprite;
     const mask_graphics = new Graphics();
@@ -45,7 +45,7 @@ export function crop_canvas(renderer, mask_container, crop, current_opacity = 0)
             });
             crop_mask(_width, _height, _previous_crop, _preview);
             sprite = new Sprite(text);
-            mask_container.mask = sprite;
+            background_container.mask = sprite;
             width = _width;
             height = _height;
             if (set_previous)
@@ -87,7 +87,7 @@ export function crop_canvas(renderer, mask_container, crop, current_opacity = 0)
             }
             else {
                 if (!stopped) {
-                    alpha_spring.set(0);
+                    alpha_spring.set(0, { hard: true });
                 }
                 crop.set([
                     final_crop[0] / width,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/imageeditor",
-  "version": "0.12.3",
+  "version": "0.12.4",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -12,12 +12,12 @@
     "tinycolor2": "^1.6.0",
     "@gradio/atoms": "^0.13.1",
     "@gradio/client": "^1.10.0",
-    "@gradio/image": "^0.20.2",
     "@gradio/icons": "^0.10.0",
-    "@gradio/upload": "^0.14.6",
+    "@gradio/image": "^0.20.2",
     "@gradio/statustracker": "^0.10.2",
     "@gradio/utils": "^0.10.0",
-    "@gradio/wasm": "^0.17.0"
+    "@gradio/wasm": "^0.17.0",
+    "@gradio/upload": "^0.14.6"
   },
   "devDependencies": {
     "@gradio/preview": "^0.13.0"

package/shared/ImageEditor.svelte

@@ -103,7 +103,7 @@
 	export let canvas_height = undefined;
 
 	$: height = $editor_box.child_height;
-	$: canvas_height = $crop[3] * $editor_box.child_height + 1;
+	$: canvas_height = $editor_box.child_height + 1;
 
 	const crop = writable<[number, number, number, number]>([0, 0, 1, 1]);
 	const position_spring = spring(
@@ -250,10 +250,10 @@
 		if (!$editor_box) return;
 		const [l, t, w, h] = $crop;
 
-		const cx = l * $editor_box.child_width;
-		const cy = t * $editor_box.child_height;
-		const cw = w * $editor_box.child_width;
-		const ch = h * $editor_box.child_height;
+		const cx = 0;
+		const cy = 0;
+		const cw = $editor_box.child_width;
+		const ch = $editor_box.child_height;
 
 		const x = 0.5 * $editor_box.child_width - cx - cw / 2;
 		const y = 0.5 * $editor_box.child_height - cy - ch / 2;
@@ -269,10 +269,10 @@
 		return $pixi?.get_blobs(
 			$pixi.get_layers(),
 			new Rectangle(
-				Math.round(l * $dimensions[0]),
-				Math.round(t * $dimensions[1]),
-				Math.round(w * $dimensions[0]),
-				Math.round(h * $dimensions[1])
+				Math.round(0),
+				Math.round(0),
+				Math.round(1 * $dimensions[0]),
+				Math.round(1 * $dimensions[1])
 			),
 			$dimensions
 		);
@@ -381,14 +381,10 @@
 		<div
 			class="canvas"
 			class:no-border={!bg && $active_tool === "bg" && !history}
-			style:width="{$crop[2] * $editor_box.child_width + 1}px"
-			style:height="{$crop[3] * $editor_box.child_height + 1}px"
-			style:top="{$crop[1] * $editor_box.child_height +
-				($editor_box.child_top - $editor_box.parent_top) -
-				0.5}px"
-			style:left="{$crop[0] * $editor_box.child_width +
-				($editor_box.child_left - $editor_box.parent_left) -
-				0.5}px"
+			style:width="{$editor_box.child_width + 1}px"
+			style:height="{$editor_box.child_height + 1}px"
+			style:top="{$editor_box.child_top - $editor_box.parent_top - 0.5}px"
+			style:left="{$editor_box.child_left - $editor_box.parent_left - 0.5}px"
 		></div>
 	</div>
 </div>

package/shared/InteractiveImageEditor.svelte

@@ -65,6 +65,7 @@
 		clear?: never;
 		upload?: never;
 		change?: never;
+		receive_null?: never;
 	}>();
 
 	let editor: ImageEditor;
@@ -80,7 +81,12 @@
 	$: if (bg) dispatch("upload");
 
 	export async function get_data(): Promise<ImageBlobs> {
-		const blobs = await editor.get_blobs();
+		let blobs;
+		try {
+			blobs = await editor.get_blobs();
+		} catch (e) {
+			return { background: null, layers: [], composite: null };
+		}
 
 		const bg = blobs.background
 			? upload(
@@ -121,11 +127,11 @@
 		if (!editor) return;
 		if (value == null) {
 			editor.handle_remove();
+			dispatch("receive_null");
 		}
 	}
 
 	$: handle_value(value);
-
 	$: crop_constraint = crop_size;
 	let bg = false;
 	let history = false;

package/shared/tools/Crop.svelte

@@ -67,7 +67,7 @@
 		l_p = x_offset / $editor_box.child_width;
 		t_p = y_offset / $editor_box.child_height;
 
-		c = crop_canvas($pixi!.renderer, $pixi!.mask_container, crop, 0.2);
+		c = crop_canvas($pixi!.renderer, $pixi!.background_container, crop, 0.2);
 		c.start(...$dimensions, current_crop, false);
 
 		c.continue(
@@ -111,7 +111,7 @@
 
 			cropper = crop_canvas(
 				$pixi?.renderer,
-				$pixi.mask_container,
+				$pixi.background_container,
 				crop,
 				current_opacity
 			);

package/shared/tools/crop.ts

@@ -26,7 +26,7 @@ export interface CropCommand extends Command {
 
 export function crop_canvas(
 	renderer: IRenderer,
-	mask_container: Container,
+	background_container: Container,
 	crop: Writable<[number, number, number, number]>,
 	current_opacity = 0
 ): CropCommand {
@@ -89,7 +89,7 @@ export function crop_canvas(
 
 			crop_mask(_width, _height, _previous_crop, _preview);
 			sprite = new Sprite(text);
-			mask_container.mask = sprite;
+			background_container.mask = sprite;
 			width = _width;
 			height = _height;
 			if (set_previous)
@@ -131,16 +131,14 @@ export function crop_canvas(
 				clean = true;
 			} else {
 				if (!stopped) {
-					alpha_spring.set(0);
+					alpha_spring.set(0, { hard: true });
 				}
-
 				crop.set([
 					final_crop[0] / width,
 					final_crop[1] / height,
 					final_crop[2] / width,
 					final_crop[3] / height
 				]);
-
 				clean = true;
 			}
 		}