@gradio/imageeditor 0.7.13 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @gradio/imageeditor
 
+## 0.8.0
+
+### Features
+
+- [#8803](https://github.com/gradio-app/gradio/pull/8803) [`e1a4040`](https://github.com/gradio-app/gradio/commit/e1a404093cfaf9d8f2a92bc1d28fb6aa254848d1) - Ensure all upload components have consistent upload regions.  Thanks @pngwn!
+
+### Fixes
+
+- [#8802](https://github.com/gradio-app/gradio/pull/8802) [`7b19474`](https://github.com/gradio-app/gradio/commit/7b19474cb2dd8f2c34d630f43edb0fcb0e05aa0c) - Ensure `ImageEditor` brush color can be updated with `gr.update`.  Thanks @pngwn!
+- [#8852](https://github.com/gradio-app/gradio/pull/8852) [`16b8200`](https://github.com/gradio-app/gradio/commit/16b820038df43905447ab7623d39d91ceb0d6238) - Fix gr.Image height inconsistencies.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/wasm@0.12.0
+- @gradio/client@1.4.0
+- @gradio/image@0.13.0
+- @gradio/statustracker@0.7.2
+- @gradio/upload@0.12.0
+- @gradio/atoms@0.7.7
+
 ## 0.7.13
 
 ### Dependency updates

package/Index.svelte

@@ -117,6 +117,8 @@
 			tick().then((_) => (value_is_output = false));
 		}
 	}
+
+	$: has_value = value?.background || value?.layers?.length || value?.composite;
 </script>
 
 {#if !interactive}
@@ -156,7 +158,7 @@
 {:else}
 	<Block
 		{visible}
-		variant={value === null ? "dashed" : "solid"}
+		variant={has_value ? "solid" : "dashed"}
 		border_mode={dragging ? "focus" : "base"}
 		padding={false}
 		{elem_id}
@@ -176,6 +178,7 @@
 		/>
 
 		<InteractiveImageEditor
+			bind:dragging
 			{canvas_size}
 			on:change={() => handle_history_change()}
 			bind:image_id

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/imageeditor",
-  "version": "0.7.13",
+  "version": "0.8.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.7.7",
+    "@gradio/client": "^1.4.0",
     "@gradio/icons": "^0.6.0",
-    "@gradio/atoms": "^0.7.6",
-    "@gradio/image": "^0.12.2",
-    "@gradio/client": "^1.3.0",
-    "@gradio/statustracker": "^0.7.1",
-    "@gradio/upload": "^0.11.5",
+    "@gradio/statustracker": "^0.7.2",
+    "@gradio/image": "^0.13.0",
+    "@gradio/upload": "^0.12.0",
     "@gradio/utils": "^0.5.1",
-    "@gradio/wasm": "^0.11.0"
+    "@gradio/wasm": "^0.12.0"
   },
   "devDependencies": {
     "@gradio/preview": "^0.10.1"

package/shared/ImageEditor.svelte

@@ -357,7 +357,8 @@
 		<slot />
 	</div>
 	<div
-		class="border"
+		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 +
@@ -378,13 +379,17 @@
 		justify-content: center;
 		align-items: flex-start;
 	}
-	.border {
+	.canvas {
 		position: absolute;
 		border: var(--block-border-color) 1px solid;
 		pointer-events: none;
 		border-radius: var(--radius-md);
 	}
 
+	.no-border {
+		border: none;
+	}
+
 	.stage-wrap {
 		margin: var(--size-8);
 		margin-bottom: var(--size-1);

package/shared/InteractiveImageEditor.svelte

@@ -48,6 +48,7 @@
 	export let realtime: boolean;
 	export let upload: Client["upload"];
 	export let stream_handler: Client["stream"];
+	export let dragging: boolean;
 
 	const dispatch = createEventDispatcher<{
 		clear?: never;
@@ -221,6 +222,7 @@
 		<Layers layer_files={value?.layers || null} enable_layers={layers} />
 
 		<Sources
+			bind:dragging
 			{i18n}
 			{root}
 			{sources}

package/shared/tools/Brush.svelte

@@ -43,11 +43,11 @@
 	export let color_mode: Brush["color_mode"] | undefined = undefined;
 	export let mode: "erase" | "draw";
 
-	const processed_colors = colors
+	$: processed_colors = colors
 		? colors.map(process_color).filter((_, i) => i < 4)
 		: [];
 
-	let selected_color =
+	$: selected_color =
 		default_color === "auto"
 			? processed_colors[0]
 			: !default_color

package/shared/tools/Sources.svelte

@@ -27,6 +27,7 @@
 	export let i18n: I18nFormatter;
 	export let upload: Client["upload"];
 	export let stream_handler: Client["stream"];
+	export let dragging: boolean;
 
 	const { active_tool } = getContext<ToolContext>(TOOL_KEY);
 	const { pixi, dimensions, register_context, reset, editor_box } =
@@ -179,13 +180,21 @@
 		{/each}
 		<span class="sep"></span>
 	</div>
-	<div class="upload-container">
+	<div
+		class="upload-container"
+		class:click-disabled={!!bg ||
+			active_mode === "webcam" ||
+			$active_tool !== "bg"}
+		style:height="{$editor_box.child_height +
+			($editor_box.child_top - $editor_box.parent_top)}px"
+	>
 		<Upload
-			hidden={true}
+			hidden={bg || active_mode === "webcam" || $active_tool !== "bg"}
 			bind:this={upload_component}
 			filetype="image/*"
 			on:load={handle_upload}
 			on:error
+			bind:dragging
 			{root}
 			disable_click={!sources.includes("upload")}
 			format="blob"
@@ -250,4 +259,18 @@
 		margin-left: var(--spacing-lg);
 		height: 100%;
 	}
+
+	.upload-container {
+		position: absolute;
+		height: 100%;
+		flex-shrink: 1;
+		max-height: 100%;
+		width: 100%;
+		left: 0;
+		top: 0;
+	}
+
+	.upload-container.click-disabled {
+		pointer-events: none;
+	}
 </style>