@gradio/imageeditor 0.11.7 → 0.11.9

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @gradio/imageeditor
 
+## 0.11.9
+
+### Fixes
+
+- [#10037](https://github.com/gradio-app/gradio/pull/10037) [`d0b74ba`](https://github.com/gradio-app/gradio/commit/d0b74ba281b37d8883a4e4fbb98c5922600ca41e) - Ensure toolbar stays visible for large images in ImageEditor.  Thanks @hannahblair!
+- [#10041](https://github.com/gradio-app/gradio/pull/10041) [`c1fa13c`](https://github.com/gradio-app/gradio/commit/c1fa13c9c057ce05a325782e58b409cde79383b8) - Ensure ImageEditor brush colour is updated when changed.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/atoms@0.11.2
+- @gradio/utils@0.9.0
+- @gradio/statustracker@0.9.6
+- @gradio/upload@0.14.2
+- @gradio/image@0.17.0
+
+## 0.11.8
+
+### Dependency updates
+
+- @gradio/atoms@0.11.1
+- @gradio/client@1.8.0
+- @gradio/utils@0.8.0
+- @gradio/upload@0.14.1
+- @gradio/statustracker@0.9.5
+- @gradio/image@0.16.8
+
 ## 0.11.7
 
 ### Dependency updates

package/dist/shared/InteractiveImageEditor.svelte

@@ -184,6 +184,7 @@ $:
 			bind:bg
 			bind:active_mode
 			background_file={value?.background || value?.composite || null}
+			max_height={height}
 		></Sources>
 
 		{#if transforms.includes("crop")}

package/dist/shared/tools/Brush.svelte

@@ -15,8 +15,11 @@ export let color_mode = void 0;
 export let mode;
 $:
   processed_colors = colors ? colors.map(process_color).filter((_, i) => i < 4) : [];
+let selected_color = process_color(default_color || "#000000");
 $:
-  selected_color = default_color === "auto" ? processed_colors[0] : !default_color ? "black" : process_color(default_color);
+  if (mode === "draw") {
+    current_color.set(selected_color);
+  }
 let brush_options = false;
 const {
   pixi,

package/dist/shared/tools/Sources.svelte

@@ -24,6 +24,7 @@ export let i18n;
 export let upload;
 export let stream_handler;
 export let dragging;
+export let max_height;
 const { active_tool } = getContext(TOOL_KEY);
 const { pixi, dimensions, register_context, reset, editor_box } = getContext(EDITOR_KEY);
 export let active_mode = null;
@@ -88,7 +89,8 @@ async function set_background() {
       $pixi.background_container,
       $pixi.renderer,
       background,
-      $pixi.resize
+      $pixi.resize,
+      max_height
     );
     $dimensions = await add_image.start();
     if (should_reset) {

package/dist/shared/tools/Sources.svelte.d.ts

@@ -12,6 +12,7 @@ declare const __propDef: {
         upload: Client["upload"];
         stream_handler: Client["stream"];
         dragging: boolean;
+        max_height: number;
         active_mode?: ("webcam" | "color" | null) | undefined;
         bg?: boolean | undefined;
     };

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

@@ -15,7 +15,7 @@ interface BgImageCommand extends Command {
  * @param resize The function to resize the canvas.
  * @returns A command that can be used to undo the action.
  */
-export declare function add_bg_image(container: Container, renderer: IRenderer, background: Blob | File, resize: (width: number, height: number) => void): BgImageCommand;
+export declare function add_bg_image(container: Container, renderer: IRenderer, background: Blob | File, resize: (width: number, height: number) => void, max_height?: number): BgImageCommand;
 /**
  * Command that sets a background
  */

package/dist/shared/tools/sources.js

@@ -9,15 +9,35 @@ import { make_graphics } from "../utils/pixi";
  * @param resize The function to resize the canvas.
  * @returns A command that can be used to undo the action.
  */
-export function add_bg_image(container, renderer, background, resize) {
+export function add_bg_image(container, renderer, background, resize, max_height = 450) {
     let sprite;
+    function calculate_dimensions(width, height, max_height) {
+        const MAX_HEIGHT = max_height * 1.5;
+        const MAX_WIDTH = MAX_HEIGHT * 2;
+        let new_width = width;
+        let new_height = height;
+        if (height > MAX_HEIGHT) {
+            const ratio = MAX_HEIGHT / height;
+            new_width = width * ratio;
+            new_height = MAX_HEIGHT;
+        }
+        if (new_width > MAX_WIDTH) {
+            const ratio = MAX_WIDTH / new_width;
+            new_width = MAX_WIDTH;
+            new_height = new_height * ratio;
+        }
+        return [Math.round(new_width), Math.round(new_height)];
+    }
     return {
         async start() {
             container.removeChildren();
             const img = await createImageBitmap(background);
             const bitmap_texture = Texture.from(img);
             sprite = new Sprite(bitmap_texture);
-            return [sprite.width, sprite.height];
+            const [new_width, new_height] = calculate_dimensions(sprite.width, sprite.height, max_height);
+            sprite.width = new_width;
+            sprite.height = new_height;
+            return [new_width, new_height];
         },
         async execute() {
             // renderer.resize(sprite.width, sprite.height);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/imageeditor",
-  "version": "0.11.7",
+  "version": "0.11.9",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -10,13 +10,13 @@
     "@types/tinycolor2": "^1.4.6",
     "pixi.js": "^7.3.2",
     "tinycolor2": "^1.6.0",
+    "@gradio/atoms": "^0.11.2",
+    "@gradio/client": "^1.8.0",
     "@gradio/icons": "^0.8.1",
-    "@gradio/atoms": "^0.11.0",
-    "@gradio/image": "^0.16.7",
-    "@gradio/statustracker": "^0.9.4",
-    "@gradio/upload": "^0.14.0",
-    "@gradio/client": "^1.7.1",
-    "@gradio/utils": "^0.7.0",
+    "@gradio/image": "^0.17.0",
+    "@gradio/upload": "^0.14.2",
+    "@gradio/statustracker": "^0.9.6",
+    "@gradio/utils": "^0.9.0",
     "@gradio/wasm": "^0.15.0"
   },
   "devDependencies": {

package/shared/InteractiveImageEditor.svelte

@@ -242,6 +242,7 @@
 			bind:bg
 			bind:active_mode
 			background_file={value?.background || value?.composite || null}
+			max_height={height}
 		></Sources>
 
 		{#if transforms.includes("crop")}

package/shared/tools/Brush.svelte

@@ -47,12 +47,11 @@
 		? colors.map(process_color).filter((_, i) => i < 4)
 		: [];
 
-	$: selected_color =
-		default_color === "auto"
-			? processed_colors[0]
-			: !default_color
-				? "black"
-				: process_color(default_color);
+	let selected_color = process_color(default_color || "#000000");
+
+	$: if (mode === "draw") {
+		current_color.set(selected_color);
+	}
 
 	let brush_options: brush_option_type = false;
 

package/shared/tools/Sources.svelte

@@ -28,6 +28,7 @@
 	export let upload: Client["upload"];
 	export let stream_handler: Client["stream"];
 	export let dragging: boolean;
+	export let max_height: number;
 
 	const { active_tool } = getContext<ToolContext>(TOOL_KEY);
 	const { pixi, dimensions, register_context, reset, editor_box } =
@@ -108,7 +109,8 @@
 				$pixi.background_container,
 				$pixi.renderer,
 				background,
-				$pixi.resize
+				$pixi.resize,
+				max_height
 			);
 			$dimensions = await add_image.start();
 

package/shared/tools/sources.ts

@@ -33,16 +33,53 @@ export function add_bg_image(
 	container: Container,
 	renderer: IRenderer,
 	background: Blob | File,
-	resize: (width: number, height: number) => void
+	resize: (width: number, height: number) => void,
+	max_height = 450
 ): BgImageCommand {
 	let sprite: Sprite & DisplayObject;
+
+	function calculate_dimensions(
+		width: number,
+		height: number,
+		max_height: number
+	): [number, number] {
+		const MAX_HEIGHT = max_height * 1.5;
+		const MAX_WIDTH = MAX_HEIGHT * 2;
+
+		let new_width = width;
+		let new_height = height;
+
+		if (height > MAX_HEIGHT) {
+			const ratio = MAX_HEIGHT / height;
+			new_width = width * ratio;
+			new_height = MAX_HEIGHT;
+		}
+
+		if (new_width > MAX_WIDTH) {
+			const ratio = MAX_WIDTH / new_width;
+			new_width = MAX_WIDTH;
+			new_height = new_height * ratio;
+		}
+
+		return [Math.round(new_width), Math.round(new_height)];
+	}
+
 	return {
 		async start() {
 			container.removeChildren();
 			const img = await createImageBitmap(background);
 			const bitmap_texture = Texture.from(img);
 			sprite = new Sprite(bitmap_texture) as Sprite & DisplayObject;
-			return [sprite.width, sprite.height];
+
+			const [new_width, new_height] = calculate_dimensions(
+				sprite.width,
+				sprite.height,
+				max_height
+			);
+			sprite.width = new_width;
+			sprite.height = new_height;
+
+			return [new_width, new_height];
 		},
 		async execute() {
 			// renderer.resize(sprite.width, sprite.height);