@gradio/imageeditor 0.3.1 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+- [#7219](https://github.com/gradio-app/gradio/pull/7219) [`faead14`](https://github.com/gradio-app/gradio/commit/faead1403cdba6415912a6ad512291ac63b04173) - Show label in interactive image editor.  Thanks [@hannahblair](https://github.com/hannahblair)!
+
 ## 0.3.1
 
 ### Patch Changes
@@ -151,4 +163,4 @@ Thanks [@pngwn](https://github.com/pngwn)!
 
 - [#6502](https://github.com/gradio-app/gradio/pull/6502) [`070f71c93`](https://github.com/gradio-app/gradio/commit/070f71c933d846ce8e2fe11cdd9bc0f3f897f29f) - Ensure image editor crop and draw cursor works as expected when the scroll position changes. Thanks [@pngwn](https://github.com/pngwn)!
 
-# @gradio/image
+# @gradio/image

package/ImageEditor.stories.svelte

@@ -1,13 +1,25 @@
-<script lang="ts">
-	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+<script context="module">
+	import { Template, Story } from "@storybook/addon-svelte-csf";
 	import ImageEditor from "./Index.svelte";
 	import { format } from "svelte-i18n";
 	import { get } from "svelte/store";
 	import { userEvent, within } from "@storybook/testing-library";
+	import { allModes } from "../storybook/modes";
+
+	export const meta = {
+		title: "Components/Image Editor",
+		component: ImageEditor,
+		parameters: {
+			chromatic: {
+				modes: {
+					desktop: allModes["desktop"],
+					mobile: allModes["mobile"]
+				}
+			}
+		}
+	};
 </script>
 
-<Meta title="Components/Image Editor" component={ImageEditor} />
-
 <Template let:args>
 	<div
 		class="image-container"
@@ -23,6 +35,8 @@
 		sources: ["webcam", "upload"],
 		type: "pil",
 		interactive: "true",
+		label: "Image Editor",
+		show_label: true,
 		brush: {
 			default_size: "auto",
 			colors: ["#ff0000", "#00ff00", "#0000ff"],
@@ -36,7 +50,7 @@
 />
 
 <Story
-	name="Image Editor Interactions"
+	name="Image Editor Drawing Interactions"
 	args={{
 		value: {
 			path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
@@ -182,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}
@@ -156,6 +154,8 @@
 			bind:this={editor_instance}
 			{root}
 			{sources}
+			{label}
+			{show_label}
 			on:save={(e) => handle_save()}
 			on:edit={() => gradio.dispatch("edit")}
 			on:clear={() => gradio.dispatch("clear")}
@@ -172,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.1",
+  "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.0",
-    "@gradio/client": "^0.10.1",
+    "@gradio/client": "^0.12.0",
+    "@gradio/image": "^0.9.0",
     "@gradio/icons": "^0.3.2",
-    "@gradio/image": "^0.7.1",
-    "@gradio/statustracker": "^0.4.4",
-    "@gradio/upload": "^0.7.0",
-    "@gradio/utils": "^0.2.1",
-    "@gradio/wasm": "^0.5.1"
+    "@gradio/atoms": "^0.5.1",
+    "@gradio/upload": "^0.7.2",
+    "@gradio/utils": "^0.2.2",
+    "@gradio/wasm": "^0.6.0",
+    "@gradio/statustracker": "^0.4.5"
   },
   "main_changeset": true,
   "main": "./Index.svelte",

package/shared/Controls.svelte

@@ -97,8 +97,4 @@
 		gap: var(--spacing-sm);
 		z-index: var(--layer-5);
 	}
-
-	.save :global(svg) {
-		transform: translateY(1px);
-	}
 </style>

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";
@@ -29,12 +24,15 @@
 	export let brush: IBrush | null;
 	export let eraser: Eraser | null;
 	import { Tools, Crop, Brush, Sources } from "./tools";
+	import { BlockLabel } from "@gradio/atoms";
+	import { Image as ImageIcon } from "@gradio/icons";
 
 	export let sources: ("clipboard" | "webcam" | "upload")[];
 	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;
 	export let value: EditorData | null = {
 		background: null,
@@ -111,6 +109,11 @@
 			: editor.set_tool("draw"));
 </script>
 
+<BlockLabel
+	{show_label}
+	Icon={ImageIcon}
+	label={label || i18n("image.image")}
+/>
 <ImageEditor
 	bind:this={editor}
 	{changeable}
@@ -127,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")}
@@ -152,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;