@gradio/imageeditor 0.12.2 → 0.12.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @gradio/imageeditor
 
+## 0.12.3
+
+### Fixes
+
+- [#10357](https://github.com/gradio-app/gradio/pull/10357) [`43e7cce`](https://github.com/gradio-app/gradio/commit/43e7cce2bd8ddd274fcba890bfeaa7ead7f32434) - Fix ImageEditor Size Issues.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/upload@0.14.6
+- @gradio/wasm@0.17.0
+- @gradio/statustracker@0.10.2
+- @gradio/image@0.20.2
+
 ## 0.12.2
 
 ### Fixes

package/ImageEditor.stories.svelte

@@ -42,6 +42,7 @@
 		interactive: "true",
 		label: "Image Editor",
 		show_label: true,
+		canvas_size: [800, 600],
 		brush: {
 			default_size: "auto",
 			colors: ["#ff0000", "#00ff00", "#0000ff"],
@@ -216,6 +217,7 @@
 		type: "pil",
 		placeholder: "Upload an image of a cat",
 		sources: ["upload", "webcam"],
+		canvas_size: [800, 800],
 		interactive: "true",
 		brush: {
 			default_size: "auto",

package/Index.svelte

@@ -29,7 +29,7 @@
 	export let root: string;
 	export let value_is_output = false;
 
-	export let height: number | undefined = 450;
+	export let height: number | undefined;
 	export let width: number | undefined;
 
 	export let _selectable = false;
@@ -55,7 +55,8 @@
 	export let server: {
 		accept_blobs: (a: any) => void;
 	};
-	export let canvas_size: [number, number] | undefined;
+	export let canvas_size: [number, number];
+	export let fixed_canvas = false;
 	export let show_fullscreen_button = true;
 	export let full_history: any = null;
 
@@ -125,6 +126,18 @@
 		}
 	}
 
+	let dynamic_height: number | undefined = undefined;
+
+	// In case no height given, pick a height large enough for the entire canvas
+	// in pixi.ts, the max-height of the canvas is canvas height / pixel ratio
+
+	let safe_height_initial = Math.max(
+		canvas_size[1] / (is_browser ? window.devicePixelRatio : 1),
+		250
+	);
+
+	$: safe_height = Math.max((dynamic_height ?? safe_height_initial) + 100, 250);
+
 	$: has_value = value?.background || value?.layers?.length || value?.composite;
 </script>
 
@@ -136,7 +149,7 @@
 		padding={false}
 		{elem_id}
 		{elem_classes}
-		height={height || undefined}
+		{height}
 		{width}
 		allow_overflow={false}
 		{container}
@@ -171,7 +184,7 @@
 		padding={false}
 		{elem_id}
 		{elem_classes}
-		height={height || undefined}
+		height={height || safe_height}
 		{width}
 		allow_overflow={false}
 		{container}
@@ -194,11 +207,13 @@
 			{crop_size}
 			{value}
 			bind:this={editor_instance}
+			bind:dynamic_height
 			{root}
 			{sources}
 			{label}
 			{show_label}
 			{height}
+			{fixed_canvas}
 			on:save={(e) => handle_save()}
 			on:edit={() => gradio.dispatch("edit")}
 			on:clear={() => gradio.dispatch("clear")}

package/dist/Index.svelte

@@ -18,7 +18,7 @@ export let show_label;
 export let show_download_button;
 export let root;
 export let value_is_output = false;
-export let height = 450;
+export let height;
 export let width;
 export let _selectable = false;
 export let container = true;
@@ -41,6 +41,7 @@ export let layers = true;
 export let attached_events = [];
 export let server;
 export let canvas_size;
+export let fixed_canvas = false;
 export let show_fullscreen_button = true;
 export let full_history = null;
 export let gradio;
@@ -81,6 +82,13 @@ function handle_history_change() {
     tick().then((_) => value_is_output = false);
   }
 }
+let dynamic_height = void 0;
+let safe_height_initial = Math.max(
+  canvas_size[1] / (is_browser ? window.devicePixelRatio : 1),
+  250
+);
+$:
+  safe_height = Math.max((dynamic_height ?? safe_height_initial) + 100, 250);
 $:
   has_value = value?.background || value?.layers?.length || value?.composite;
 </script>
@@ -93,7 +101,7 @@ $:
 		padding={false}
 		{elem_id}
 		{elem_classes}
-		height={height || undefined}
+		{height}
 		{width}
 		allow_overflow={false}
 		{container}
@@ -128,7 +136,7 @@ $:
 		padding={false}
 		{elem_id}
 		{elem_classes}
-		height={height || undefined}
+		height={height || safe_height}
 		{width}
 		allow_overflow={false}
 		{container}
@@ -151,11 +159,13 @@ $:
 			{crop_size}
 			{value}
 			bind:this={editor_instance}
+			bind:dynamic_height
 			{root}
 			{sources}
 			{label}
 			{show_label}
 			{height}
+			{fixed_canvas}
 			on:save={(e) => handle_save()}
 			on:edit={() => gradio.dispatch("edit")}
 			on:clear={() => gradio.dispatch("clear")}

package/dist/Index.svelte.d.ts

@@ -14,7 +14,7 @@ declare const __propDef: {
         show_download_button: boolean;
         root: string;
         value_is_output?: boolean | undefined;
-        height?: number | undefined;
+        height: number | undefined;
         width: number | undefined;
         _selectable?: boolean | undefined;
         container?: boolean | undefined;
@@ -34,7 +34,8 @@ declare const __propDef: {
         server: {
             accept_blobs: (a: any) => void;
         };
-        canvas_size: [number, number] | undefined;
+        canvas_size: [number, number];
+        fixed_canvas?: boolean | undefined;
         show_fullscreen_button?: boolean | undefined;
         full_history?: any;
         gradio: Gradio<{
@@ -153,9 +154,12 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
     set server(_: {
         accept_blobs: (a: any) => void;
     });
-    get canvas_size(): [number, number] | undefined;
+    get canvas_size(): [number, number];
     /**accessor*/
-    set canvas_size(_: [number, number] | undefined);
+    set canvas_size(_: [number, number]);
+    get fixed_canvas(): boolean | undefined;
+    /**accessor*/
+    set fixed_canvas(_: boolean | undefined);
     get show_fullscreen_button(): boolean | undefined;
     /**accessor*/
     set show_fullscreen_button(_: boolean | undefined);

package/dist/shared/ImageEditor.svelte

@@ -42,8 +42,11 @@ let editor_box = writable({
   child_right: 0,
   child_bottom: 0
 });
+export let canvas_height = void 0;
 $:
   height = $editor_box.child_height;
+$:
+  canvas_height = $crop[3] * $editor_box.child_height + 1;
 const crop = writable([0, 0, 1, 1]);
 const position_spring = spring(
   { x: 0, y: 0 },
@@ -312,6 +315,9 @@ export function set_tool(tool) {
 	.container {
 		position: relative;
 		margin: var(--spacing-md);
+		/* in case the canvas_size is really small */
+		/* set min-height so that upload text does not cover the toolbar */
+		min-height: 100px;
 	}
 
 	.no-border {

package/dist/shared/ImageEditor.svelte.d.ts

@@ -54,6 +54,7 @@ declare const __propDef: {
         parent_height: number;
         full_history?: (CommandNode | null) | undefined;
         height?: number | undefined;
+        canvas_height?: number | undefined;
         get_blobs?: (() => Promise<ImageBlobs>) | undefined;
         handle_remove?: (() => void) | undefined;
         set_tool?: ((tool: tool) => void) | undefined;

package/dist/shared/InteractiveImageEditor.svelte

@@ -31,12 +31,14 @@ export let layers;
 export let accept_blobs;
 export let status = "complete";
 export let canvas_size;
+export let fixed_canvas = false;
 export let realtime;
 export let upload;
 export let stream_handler;
 export let dragging;
 export let placeholder = void 0;
-export let height = 450;
+export let dynamic_height = void 0;
+export let height;
 export let full_history = null;
 const dispatch = createEventDispatcher();
 let editor;
@@ -149,6 +151,9 @@ async function handle_change(e) {
 }
 let active_mode = null;
 let editor_height = height - 100;
+let _dynamic_height;
+$:
+  dynamic_height = _dynamic_height;
 $:
   [heading, paragraph] = placeholder ? inject(placeholder) : [false, false];
 </script>
@@ -164,6 +169,7 @@ $:
 	crop_size={Array.isArray(crop_size) ? crop_size : undefined}
 	bind:this={editor}
 	bind:height={editor_height}
+	bind:canvas_height={_dynamic_height}
 	parent_height={height}
 	{changeable}
 	on:save
@@ -185,10 +191,11 @@ $:
 			{sources}
 			{upload}
 			{stream_handler}
+			{canvas_size}
 			bind:bg
 			bind:active_mode
 			background_file={value?.background || value?.composite || null}
-			max_height={height}
+			{fixed_canvas}
 		></Sources>
 
 		{#if transforms.includes("crop")}

package/dist/shared/InteractiveImageEditor.svelte.d.ts

@@ -30,13 +30,15 @@ declare const __propDef: {
         layers: boolean;
         accept_blobs: (a: any) => void;
         status?: ("pending" | "complete" | "error" | "generating" | "streaming") | undefined;
-        canvas_size: [number, number] | undefined;
+        canvas_size: [number, number];
+        fixed_canvas?: boolean | undefined;
         realtime: boolean;
         upload: Client["upload"];
         stream_handler: Client["stream"];
         dragging: boolean;
         placeholder?: string | undefined;
-        height?: number | undefined;
+        dynamic_height?: number | undefined;
+        height: any;
         full_history?: (CommandNode | null) | undefined;
         get_data?: (() => Promise<ImageBlobs>) | undefined;
         image_id?: (null | string) | undefined;

package/dist/shared/tools/Sources.svelte

@@ -24,7 +24,8 @@ export let i18n;
 export let upload;
 export let stream_handler;
 export let dragging;
-export let max_height;
+export let canvas_size;
+export let fixed_canvas = false;
 const { active_tool } = getContext(TOOL_KEY);
 const { pixi, dimensions, register_context, reset, editor_box } = getContext(EDITOR_KEY);
 export let active_mode = null;
@@ -90,7 +91,8 @@ async function set_background() {
       $pixi.renderer,
       background,
       $pixi.resize,
-      max_height
+      canvas_size,
+      fixed_canvas
     );
     $dimensions = await add_image.start();
     if (should_reset) {
@@ -161,8 +163,11 @@ register_context("bg", {
 		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"
+		style:height="{Math.max(
+			$editor_box.child_height +
+				($editor_box.child_top - $editor_box.parent_top),
+			100
+		)}px"
 	>
 		<Upload
 			hidden={bg || active_mode === "webcam" || $active_tool !== "bg"}

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

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

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

@@ -8,14 +8,20 @@ interface BgImageCommand extends Command {
     start: () => Promise<[number, number]>;
 }
 /**
- * Adds a background image to the canvas.
- * @param container The container to add the image to.
- * @param renderer The renderer to use for the image.
- * @param background The background image to add.
- * @param resize The function to resize the canvas.
- * @returns A command that can be used to undo the action.
+ * Calculates new dimensions and position for an image to fit within a canvas while maintaining aspect ratio
+ * @param image_width Original width of the image
+ * @param image_height Original height of the image
+ * @param canvas_width Width of the canvas
+ * @param canvas_height Height of the canvas
+ * @returns Object containing new dimensions and position
  */
-export declare function add_bg_image(container: Container, renderer: IRenderer, background: Blob | File, resize: (width: number, height: number) => void, max_height?: number): BgImageCommand;
+export declare function fit_image_to_canvas(image_width: number, image_height: number, canvas_width: number, canvas_height: number): {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+};
+export declare function add_bg_image(container: Container, renderer: IRenderer, background: Blob | File, resize: (width: number, height: number) => void, canvas_size: [number, number], fixed_canvas: boolean): BgImageCommand;
 /**
  * Command that sets a background
  */

package/dist/shared/tools/sources.js

@@ -2,46 +2,78 @@ import { Sprite, Texture, DisplayObject, Color, RenderTexture } from "pixi.js";
 import {} from "../utils/commands";
 import { make_graphics } from "../utils/pixi";
 /**
- * Adds a background image to the canvas.
- * @param container The container to add the image to.
- * @param renderer The renderer to use for the image.
- * @param background The background image to add.
- * @param resize The function to resize the canvas.
- * @returns A command that can be used to undo the action.
+ * Calculates new dimensions and position for an image to fit within a canvas while maintaining aspect ratio
+ * @param image_width Original width of the image
+ * @param image_height Original height of the image
+ * @param canvas_width Width of the canvas
+ * @param canvas_height Height of the canvas
+ * @returns Object containing new dimensions and position
  */
-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;
+export function fit_image_to_canvas(image_width, image_height, canvas_width, canvas_height) {
+    const image_aspect_ratio = image_width / image_height;
+    const canvas_aspect_ratio = canvas_width / canvas_height;
+    let new_width;
+    let new_height;
+    if (image_width <= canvas_width && image_height <= canvas_height) {
+        new_width = image_width;
+        new_height = image_height;
+    }
+    else {
+        if (image_aspect_ratio > canvas_aspect_ratio) {
+            // Width is the limiting factor
+            new_width = canvas_width;
+            new_height = canvas_width / image_aspect_ratio;
         }
-        if (new_width > MAX_WIDTH) {
-            const ratio = MAX_WIDTH / new_width;
-            new_width = MAX_WIDTH;
-            new_height = new_height * ratio;
+        else {
+            // Height is the limiting factor
+            new_height = canvas_height;
+            new_width = canvas_height * image_aspect_ratio;
         }
-        return [Math.round(new_width), Math.round(new_height)];
     }
+    // Calculate position to center the image
+    const x = Math.round((canvas_width - new_width) / 2);
+    const y = Math.round((canvas_height - new_height) / 2);
+    return {
+        width: Math.round(new_width),
+        height: Math.round(new_height),
+        x,
+        y
+    };
+}
+export function add_bg_image(container, renderer, background, resize, canvas_size, fixed_canvas) {
+    let sprite;
     return {
         async start() {
             container.removeChildren();
             const img = await createImageBitmap(background);
             const bitmap_texture = Texture.from(img);
             sprite = new Sprite(bitmap_texture);
-            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];
+            if (!fixed_canvas) {
+                canvas_size = [sprite.width, sprite.height];
+            }
+            if (fixed_canvas) {
+                const [canvas_width, canvas_height] = canvas_size;
+                const { width, height, x, y } = fit_image_to_canvas(sprite.width, sprite.height, canvas_width, canvas_height);
+                sprite.width = width;
+                sprite.height = height;
+                sprite.x = x;
+                sprite.y = y;
+                return canvas_size;
+            }
+            // Use existing max_height based scaling if no canvas_size
+            const x = fit_image_to_canvas(sprite.width, sprite.height, canvas_size[0], canvas_size[1]);
+            sprite.width = x.width;
+            sprite.height = x.height;
+            sprite.x = 0;
+            sprite.y = 0;
+            return [x.width, x.height];
         },
         async execute() {
-            // renderer.resize(sprite.width, sprite.height);
-            resize(sprite.width, sprite.height);
+            resize(
+            // @ts-ignore
+            fixed_canvas ? canvas_size[0] : sprite.width, 
+            // @ts-ignore
+            fixed_canvas ? canvas_size[1] : sprite.height);
             sprite.zIndex = 0;
             container.addChild(sprite);
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/imageeditor",
-  "version": "0.12.2",
+  "version": "0.12.3",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -12,12 +12,12 @@
     "tinycolor2": "^1.6.0",
     "@gradio/atoms": "^0.13.1",
     "@gradio/client": "^1.10.0",
-    "@gradio/image": "^0.20.1",
+    "@gradio/image": "^0.20.2",
     "@gradio/icons": "^0.10.0",
-    "@gradio/statustracker": "^0.10.1",
-    "@gradio/upload": "^0.14.5",
+    "@gradio/upload": "^0.14.6",
+    "@gradio/statustracker": "^0.10.2",
     "@gradio/utils": "^0.10.0",
-    "@gradio/wasm": "^0.16.0"
+    "@gradio/wasm": "^0.17.0"
   },
   "devDependencies": {
     "@gradio/preview": "^0.13.0"

package/shared/ImageEditor.svelte

@@ -100,7 +100,10 @@
 		child_bottom: 0
 	});
 
+	export let canvas_height = undefined;
+
 	$: height = $editor_box.child_height;
+	$: canvas_height = $crop[3] * $editor_box.child_height + 1;
 
 	const crop = writable<[number, number, number, number]>([0, 0, 1, 1]);
 	const position_spring = spring(
@@ -408,6 +411,9 @@
 	.container {
 		position: relative;
 		margin: var(--spacing-md);
+		/* in case the canvas_size is really small */
+		/* set min-height so that upload text does not cover the toolbar */
+		min-height: 100px;
 	}
 
 	.no-border {

package/shared/InteractiveImageEditor.svelte

@@ -50,13 +50,15 @@
 		| "error"
 		| "generating"
 		| "streaming" = "complete";
-	export let canvas_size: [number, number] | undefined;
+	export let canvas_size: [number, number];
+	export let fixed_canvas = false;
 	export let realtime: boolean;
 	export let upload: Client["upload"];
 	export let stream_handler: Client["stream"];
 	export let dragging: boolean;
 	export let placeholder: string | undefined = undefined;
-	export let height = 450;
+	export let dynamic_height: number | undefined = undefined;
+	export let height;
 	export let full_history: CommandNode | null = null;
 
 	const dispatch = createEventDispatcher<{
@@ -207,6 +209,10 @@
 	let active_mode: "webcam" | "color" | null = null;
 	let editor_height = height - 100;
 
+	let _dynamic_height: number;
+
+	$: dynamic_height = _dynamic_height;
+
 	$: [heading, paragraph] = placeholder ? inject(placeholder) : [false, false];
 </script>
 
@@ -221,6 +227,7 @@
 	crop_size={Array.isArray(crop_size) ? crop_size : undefined}
 	bind:this={editor}
 	bind:height={editor_height}
+	bind:canvas_height={_dynamic_height}
 	parent_height={height}
 	{changeable}
 	on:save
@@ -242,10 +249,11 @@
 			{sources}
 			{upload}
 			{stream_handler}
+			{canvas_size}
 			bind:bg
 			bind:active_mode
 			background_file={value?.background || value?.composite || null}
-			max_height={height}
+			{fixed_canvas}
 		></Sources>
 
 		{#if transforms.includes("crop")}

package/shared/tools/Sources.svelte

@@ -28,7 +28,8 @@
 	export let upload: Client["upload"];
 	export let stream_handler: Client["stream"];
 	export let dragging: boolean;
-	export let max_height: number;
+	export let canvas_size: [number, number];
+	export let fixed_canvas = false;
 
 	const { active_tool } = getContext<ToolContext>(TOOL_KEY);
 	const { pixi, dimensions, register_context, reset, editor_box } =
@@ -110,7 +111,8 @@
 				$pixi.renderer,
 				background,
 				$pixi.resize,
-				max_height
+				canvas_size,
+				fixed_canvas
 			);
 			$dimensions = await add_image.start();
 
@@ -187,8 +189,11 @@
 		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"
+		style:height="{Math.max(
+			$editor_box.child_height +
+				($editor_box.child_top - $editor_box.parent_top),
+			100
+		)}px"
 	>
 		<Upload
 			hidden={bg || active_mode === "webcam" || $active_tool !== "bg"}

package/shared/tools/sources.ts

@@ -21,69 +21,113 @@ interface BgImageCommand extends Command {
 }
 
 /**
- * Adds a background image to the canvas.
- * @param container The container to add the image to.
- * @param renderer The renderer to use for the image.
- * @param background The background image to add.
- * @param resize The function to resize the canvas.
- * @returns A command that can be used to undo the action.
+ * Calculates new dimensions and position for an image to fit within a canvas while maintaining aspect ratio
+ * @param image_width Original width of the image
+ * @param image_height Original height of the image
+ * @param canvas_width Width of the canvas
+ * @param canvas_height Height of the canvas
+ * @returns Object containing new dimensions and position
  */
+export function fit_image_to_canvas(
+	image_width: number,
+	image_height: number,
+	canvas_width: number,
+	canvas_height: number
+): {
+	width: number;
+	height: number;
+	x: number;
+	y: number;
+} {
+	const image_aspect_ratio = image_width / image_height;
+	const canvas_aspect_ratio = canvas_width / canvas_height;
+
+	let new_width: number;
+	let new_height: number;
+
+	if (image_width <= canvas_width && image_height <= canvas_height) {
+		new_width = image_width;
+		new_height = image_height;
+	} else {
+		if (image_aspect_ratio > canvas_aspect_ratio) {
+			// Width is the limiting factor
+			new_width = canvas_width;
+			new_height = canvas_width / image_aspect_ratio;
+		} else {
+			// Height is the limiting factor
+			new_height = canvas_height;
+			new_width = canvas_height * image_aspect_ratio;
+		}
+	}
+
+	// Calculate position to center the image
+	const x = Math.round((canvas_width - new_width) / 2);
+	const y = Math.round((canvas_height - new_height) / 2);
+
+	return {
+		width: Math.round(new_width),
+		height: Math.round(new_height),
+		x,
+		y
+	};
+}
 
 export function add_bg_image(
 	container: Container,
 	renderer: IRenderer,
 	background: Blob | File,
 	resize: (width: number, height: number) => void,
-	max_height = 450
+	canvas_size: [number, number],
+	fixed_canvas: boolean
 ): 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;
+			if (!fixed_canvas) {
+				canvas_size = [sprite.width, sprite.height];
+			}
+
+			if (fixed_canvas) {
+				const [canvas_width, canvas_height] = canvas_size;
+				const { width, height, x, y } = fit_image_to_canvas(
+					sprite.width,
+					sprite.height,
+					canvas_width,
+					canvas_height
+				);
+
+				sprite.width = width;
+				sprite.height = height;
+				sprite.x = x;
+				sprite.y = y;
 
-			const [new_width, new_height] = calculate_dimensions(
+				return canvas_size;
+			}
+			// Use existing max_height based scaling if no canvas_size
+			const x = fit_image_to_canvas(
 				sprite.width,
 				sprite.height,
-				max_height
+				canvas_size[0],
+				canvas_size[1]
 			);
-			sprite.width = new_width;
-			sprite.height = new_height;
-
-			return [new_width, new_height];
+			sprite.width = x.width;
+			sprite.height = x.height;
+			sprite.x = 0;
+			sprite.y = 0;
+			return [x.width, x.height];
 		},
 		async execute() {
-			// renderer.resize(sprite.width, sprite.height);
-			resize(sprite.width, sprite.height);
+			resize(
+				// @ts-ignore
+				fixed_canvas ? canvas_size[0] : sprite.width,
+				// @ts-ignore
+				fixed_canvas ? canvas_size[1] : sprite.height
+			);
 
 			sprite.zIndex = 0;
 			container.addChild(sprite);