@gradio/imageeditor 0.3.2 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @gradio/imageeditor
 
+## 0.4.0
+
+### Features
+
+- [#7183](https://github.com/gradio-app/gradio/pull/7183) [`49d9c48`](https://github.com/gradio-app/gradio/commit/49d9c48537aa706bf72628e3640389470138bdc6) - [WIP] Refactor file normalization to be in the backend and remove it from the frontend of each component.  Thanks [@abidlabs](https://github.com/abidlabs)!
+
 ## 0.3.2
 
 ### Fixes

package/ImageEditor.stories.svelte

@@ -50,10 +50,7 @@
 />
 
 <Story
-	name="Image Editor Interactions"
-	parameters={{
-		diffThreshold: 0.1
-	}}
+	name="Image Editor Drawing Interactions"
 	args={{
 		value: {
 			path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
@@ -199,7 +196,56 @@
 
 		userEvent.click(canvas.getByLabelText("Add Layer"));
 
-		await userEvent.click(canvas.getByLabelText("Image button"));
+		await userEvent.click(canvas.getByLabelText("Clear canvas"));
+	}}
+/>
+
+<Story
+	name="Image Editor Undo/Redo Interactions"
+	args={{
+		value: {
+			path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
+			url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
+			orig_name: "cheetah.jpg"
+		},
+		type: "pil",
+		sources: ["upload", "webcam"],
+		interactive: "true",
+		brush: {
+			default_size: "auto",
+			colors: ["#ff0000", "#00ff00", "#0000ff"],
+			default_color: "#ff0000",
+			color_mode: "defaults"
+		},
+		eraser: {
+			default_size: "auto"
+		}
+	}}
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+
+		const drawButton = canvas.getAllByLabelText("Draw button")[0];
+
+		userEvent.click(drawButton);
+
+		const drawCanvas = document.getElementsByTagName("canvas")[0];
+		if (!drawCanvas) {
+			throw new Error("Could not find canvas");
+		}
+
+		await new Promise((r) => setTimeout(r, 1000));
+
+		await userEvent.pointer({
+			keys: "[MouseLeft][MouseRight]",
+			target: drawCanvas,
+			coords: { clientX: 300, clientY: 100 }
+		});
+
+		await userEvent.pointer({
+			keys: "[MouseLeft][MouseRight]",
+			target: drawCanvas,
+			coords: { clientX: 400, clientY: 200 }
+		});
 
 		await userEvent.click(canvas.getByLabelText("Undo"));
 

package/Index.svelte

@@ -13,7 +13,6 @@
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
-	import { normalise_file } from "@gradio/client";
 
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
@@ -42,7 +41,6 @@
 		"clipboard",
 		"webcam"
 	];
-	export let proxy_url: string;
 	export let interactive: boolean;
 
 	export let brush: Brush;
@@ -120,7 +118,7 @@
 			on:select={({ detail }) => gradio.dispatch("select", detail)}
 			on:share={({ detail }) => gradio.dispatch("share", detail)}
 			on:error={({ detail }) => gradio.dispatch("error", detail)}
-			value={normalise_file(value?.composite || null, root, proxy_url)}
+			value={value?.composite || null}
 			{label}
 			{show_label}
 			{show_download_button}
@@ -174,7 +172,6 @@
 			on:error
 			{brush}
 			{eraser}
-			{proxy_url}
 			changeable={attached_events.includes("change")}
 			i18n={gradio.i18n}
 			{transforms}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/imageeditor",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -10,14 +10,14 @@
     "@types/tinycolor2": "^1.4.6",
     "pixi.js": "^7.3.2",
     "tinycolor2": "^1.6.0",
-    "@gradio/atoms": "^0.5.1",
-    "@gradio/client": "^0.11.0",
-    "@gradio/image": "^0.8.0",
+    "@gradio/client": "^0.12.0",
+    "@gradio/image": "^0.9.0",
     "@gradio/icons": "^0.3.2",
-    "@gradio/statustracker": "^0.4.5",
-    "@gradio/upload": "^0.7.1",
+    "@gradio/atoms": "^0.5.1",
+    "@gradio/upload": "^0.7.2",
     "@gradio/utils": "^0.2.2",
-    "@gradio/wasm": "^0.6.0"
+    "@gradio/wasm": "^0.6.0",
+    "@gradio/statustracker": "^0.4.5"
   },
   "main_changeset": true,
   "main": "./Index.svelte",

package/shared/InteractiveImageEditor.svelte

@@ -14,12 +14,7 @@
 
 <script lang="ts">
 	import { type I18nFormatter } from "@gradio/utils";
-	import {
-		prepare_files,
-		upload,
-		normalise_file,
-		type FileData
-	} from "@gradio/client";
+	import { prepare_files, upload, type FileData } from "@gradio/client";
 
 	import ImageEditor from "./ImageEditor.svelte";
 	import Layers from "./layers/Layers.svelte";
@@ -36,7 +31,6 @@
 	export let crop_size: [number, number] | `${string}:${string}` | null = null;
 	export let i18n: I18nFormatter;
 	export let root: string;
-	export let proxy_url: string;
 	export let label: string | undefined = undefined;
 	export let show_label: boolean;
 	export let changeable = false;
@@ -136,11 +130,7 @@
 				{root}
 				{sources}
 				bind:bg
-				background_file={normalise_file(
-					value?.background || null,
-					root,
-					proxy_url
-				)}
+				background_file={value?.background || null}
 			></Sources>
 		{/if}
 		{#if transforms.includes("crop")}
@@ -161,9 +151,7 @@
 		{/if}
 	</Tools>
 
-	<Layers
-		layer_files={normalise_file(value?.layers || null, root, proxy_url)}
-	/>
+	<Layers layer_files={value?.layers || null} />
 
 	{#if !bg && !history}
 		<div class="empty wrap">

package/shared/tools/Sources.svelte

@@ -12,7 +12,7 @@
 	import { type I18nFormatter } from "@gradio/utils";
 
 	import { add_bg_color, add_bg_image } from "./sources";
-	import type { FileData, normalise_file } from "@gradio/client";
+	import type { FileData } from "@gradio/client";
 
 	export let background_file: FileData | null;
 	export let root: string;