Ensure toolbar stays visible for large images in ImageEditor (#10037)

* recalculate canvas dimensions for images larger than max_height

* add changeset

* tweak default height logic

* tweak height logic

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/honest-pianos-decide.md

@@ -0,0 +1,6 @@
+---
+"@gradio/imageeditor": patch
+"gradio": patch
+---
+
+fix:Ensure toolbar stays visible for large images in ImageEditor

js/imageeditor/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")}

js/imageeditor/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();
 

js/imageeditor/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);