@gradio/imageeditor 0.3.0 → 0.3.2

package/CHANGELOG.md

@@ -1,16 +1,34 @@
 # @gradio/imageeditor
 
+## 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
+
+- Updated dependencies [[`5727b92`](https://github.com/gradio-app/gradio/commit/5727b92abc8a00a675bfc0a921b38de771af947b), [`bc2cdc1`](https://github.com/gradio-app/gradio/commit/bc2cdc1df95b38025486cf76df4a494b66d98585), [`c60ad4d`](https://github.com/gradio-app/gradio/commit/c60ad4d34ab5b56a89bf6796822977e51e7a4a32), [`be56c76`](https://github.com/gradio-app/gradio/commit/be56c76c7b5d2814ea8239c7dbeddc4b1d3701c4), [`8c355a4`](https://github.com/gradio-app/gradio/commit/8c355a47844296e3aab250fe61e2ecc706122e78)]:
+  - @gradio/utils@0.2.1
+  - @gradio/upload@0.7.0
+  - @gradio/atoms@0.5.0
+  - @gradio/wasm@0.5.1
+  - @gradio/image@0.7.1
+  - @gradio/statustracker@0.4.4
+
 ## 0.3.0
 
 ### Fixes
 
-- [#6933](https://github.com/gradio-app/gradio/pull/6933) [`9cefd2e`](https://github.com/gradio-app/gradio/commit/9cefd2e90a1d0cc4d3e4e953fc5b9b1a7afb68dd) - Refactor examples so they accept data in the same format as is returned by function, rename `.as_example()` to `.process_example()`.  Thanks [@abidlabs](https://github.com/abidlabs)!
+- [#6933](https://github.com/gradio-app/gradio/pull/6933) [`9cefd2e`](https://github.com/gradio-app/gradio/commit/9cefd2e90a1d0cc4d3e4e953fc5b9b1a7afb68dd) - Refactor examples so they accept data in the same format as is returned by function, rename `.as_example()` to `.process_example()`. Thanks [@abidlabs](https://github.com/abidlabs)!
 
 ## 0.2.3
 
 ### Fixes
 
-- [#6885](https://github.com/gradio-app/gradio/pull/6885) [`640b7fe`](https://github.com/gradio-app/gradio/commit/640b7fe05276e11720b4341cadf088491395e53d) - Fix issue with Webcam Recording.  Thanks [@dawoodkhan82](https://github.com/dawoodkhan82)!
+- [#6885](https://github.com/gradio-app/gradio/pull/6885) [`640b7fe`](https://github.com/gradio-app/gradio/commit/640b7fe05276e11720b4341cadf088491395e53d) - Fix issue with Webcam Recording. Thanks [@dawoodkhan82](https://github.com/dawoodkhan82)!
 
 ## 0.2.2
 

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"],
@@ -37,6 +51,9 @@
 
 <Story
 	name="Image Editor Interactions"
+	parameters={{
+		diffThreshold: 0.1
+	}}
 	args={{
 		value: {
 			path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",

package/Index.svelte

@@ -156,6 +156,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")}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/imageeditor",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "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.4.1",
-    "@gradio/statustracker": "^0.4.3",
-    "@gradio/client": "^0.10.1",
-    "@gradio/image": "^0.7.0",
+    "@gradio/atoms": "^0.5.1",
+    "@gradio/client": "^0.11.0",
+    "@gradio/image": "^0.8.0",
     "@gradio/icons": "^0.3.2",
-    "@gradio/utils": "^0.2.0",
-    "@gradio/upload": "^0.6.1",
-    "@gradio/wasm": "^0.5.0"
+    "@gradio/statustracker": "^0.4.5",
+    "@gradio/upload": "^0.7.1",
+    "@gradio/utils": "^0.2.2",
+    "@gradio/wasm": "^0.6.0"
   },
   "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

@@ -29,12 +29,16 @@
 	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 +115,11 @@
 			: editor.set_tool("draw"));
 </script>
 
+<BlockLabel
+	{show_label}
+	Icon={ImageIcon}
+	label={label || i18n("image.image")}
+/>
 <ImageEditor
 	bind:this={editor}
 	{changeable}