@gradio/imageeditor 0.12.2 → 0.12.4

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @gradio/imageeditor
 
+## 0.12.4
+
+### Features
+
+- [#10370](https://github.com/gradio-app/gradio/pull/10370) [`71c8b8a`](https://github.com/gradio-app/gradio/commit/71c8b8abbfae0e47eb46561b0104bd452e5dffe8) - Clear Image Editor Value with None.  Thanks @freddyaboulton!
+- [#10416](https://github.com/gradio-app/gradio/pull/10416) [`3c2e12b`](https://github.com/gradio-app/gradio/commit/3c2e12b5ba52441f45565ae8e14cea46ea5b5b2c) - Fix ImageEditor Cropping - Cropping now crops the background image instead of the image + canvas.  Thanks @freddyaboulton!
+
+## 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")}
@@ -210,6 +225,12 @@
 				loading_status.status = "error";
 				gradio.dispatch("error", detail);
 			}}
+			on:receive_null={() =>
+				(value = {
+					background: null,
+					layers: [],
+					composite: null
+				})}
 			on:error
 			{brush}
 			{eraser}

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")}
@@ -167,6 +177,12 @@ $:
 				loading_status.status = "error";
 				gradio.dispatch("error", detail);
 			}}
+			on:receive_null={() =>
+				(value = {
+					background: null,
+					layers: [],
+					composite: null
+				})}
 			on:error
 			{brush}
 			{eraser}

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 = $editor_box.child_height + 1;
 const crop = writable([0, 0, 1, 1]);
 const position_spring = spring(
   { x: 0, y: 0 },
@@ -168,10 +171,10 @@ function reposition_canvas() {
   if (!$editor_box)
     return;
   const [l, t, w, h] = $crop;
-  const cx = l * $editor_box.child_width;
-  const cy = t * $editor_box.child_height;
-  const cw = w * $editor_box.child_width;
-  const ch = h * $editor_box.child_height;
+  const cx = 0;
+  const cy = 0;
+  const cw = $editor_box.child_width;
+  const ch = $editor_box.child_height;
   const x = 0.5 * $editor_box.child_width - cx - cw / 2;
   const y = 0.5 * $editor_box.child_height - cy - ch / 2;
   position_spring.set({ x, y });
@@ -183,10 +186,10 @@ export async function get_blobs() {
   return $pixi?.get_blobs(
     $pixi.get_layers(),
     new Rectangle(
-      Math.round(l * $dimensions[0]),
-      Math.round(t * $dimensions[1]),
-      Math.round(w * $dimensions[0]),
-      Math.round(h * $dimensions[1])
+      Math.round(0),
+      Math.round(0),
+      Math.round(1 * $dimensions[0]),
+      Math.round(1 * $dimensions[1])
     ),
     $dimensions
   );
@@ -282,14 +285,10 @@ export function set_tool(tool) {
 		<div
 			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 +
-				($editor_box.child_top - $editor_box.parent_top) -
-				0.5}px"
-			style:left="{$crop[0] * $editor_box.child_width +
-				($editor_box.child_left - $editor_box.parent_left) -
-				0.5}px"
+			style:width="{$editor_box.child_width + 1}px"
+			style:height="{$editor_box.child_height + 1}px"
+			style:top="{$editor_box.child_top - $editor_box.parent_top - 0.5}px"
+			style:left="{$editor_box.child_left - $editor_box.parent_left - 0.5}px"
 		></div>
 	</div>
 </div>
@@ -312,6 +311,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;
@@ -50,7 +52,12 @@ $:
   if (bg)
     dispatch("upload");
 export async function get_data() {
-  const blobs = await editor.get_blobs();
+  let blobs;
+  try {
+    blobs = await editor.get_blobs();
+  } catch (e) {
+    return { background: null, layers: [], composite: null };
+  }
   const bg2 = blobs.background ? upload(
     await prepare_files([new File([blobs.background], "background.png")]),
     root
@@ -78,6 +85,7 @@ function handle_value(value2) {
     return;
   if (value2 == null) {
     editor.handle_remove();
+    dispatch("receive_null");
   }
 }
 $:
@@ -149,6 +157,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 +175,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 +197,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;
@@ -47,6 +49,7 @@ declare const __propDef: {
         clear?: CustomEvent<undefined> | undefined;
         upload?: CustomEvent<undefined> | undefined;
         change?: CustomEvent<undefined> | undefined;
+        receive_null?: CustomEvent<undefined> | undefined;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/shared/tools/Crop.svelte

@@ -52,7 +52,7 @@ async function initial_crop() {
   h_p = new_height / $editor_box.child_height;
   l_p = x_offset / $editor_box.child_width;
   t_p = y_offset / $editor_box.child_height;
-  c = crop_canvas($pixi.renderer, $pixi.mask_container, crop, 0.2);
+  c = crop_canvas($pixi.renderer, $pixi.background_container, crop, 0.2);
   c.start(...$dimensions, current_crop, false);
   c.continue(
     [
@@ -83,7 +83,7 @@ function handle_crop(type, {
     }
     cropper = crop_canvas(
       $pixi?.renderer,
-      $pixi.mask_container,
+      $pixi.background_container,
       crop,
       current_opacity
     );

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/crop.d.ts

@@ -6,7 +6,7 @@ export interface CropCommand extends Command {
     stop: () => number;
     continue: (crop_size: [number, number, number, number], preview?: boolean) => void;
 }
-export declare function crop_canvas(renderer: IRenderer, mask_container: Container, crop: Writable<[number, number, number, number]>, current_opacity?: number): CropCommand;
+export declare function crop_canvas(renderer: IRenderer, background_container: Container, crop: Writable<[number, number, number, number]>, current_opacity?: number): CropCommand;
 export declare function resize_and_reposition(original_width: number, original_height: number, anchor: "t" | "r" | "l" | "b" | "tl" | "tr" | "bl" | "br" | "c", aspect_ratio: number, max_width: number, max_height: number): {
     new_width: number;
     new_height: number;

package/dist/shared/tools/crop.js

@@ -1,7 +1,7 @@
 import { Graphics, Sprite, RenderTexture } from "pixi.js";
 import {} from "../utils/commands";
 import { spring } from "svelte/motion";
-export function crop_canvas(renderer, mask_container, crop, current_opacity = 0) {
+export function crop_canvas(renderer, background_container, crop, current_opacity = 0) {
     let text;
     let sprite;
     const mask_graphics = new Graphics();
@@ -45,7 +45,7 @@ export function crop_canvas(renderer, mask_container, crop, current_opacity = 0)
             });
             crop_mask(_width, _height, _previous_crop, _preview);
             sprite = new Sprite(text);
-            mask_container.mask = sprite;
+            background_container.mask = sprite;
             width = _width;
             height = _height;
             if (set_previous)
@@ -87,7 +87,7 @@ export function crop_canvas(renderer, mask_container, crop, current_opacity = 0)
             }
             else {
                 if (!stopped) {
-                    alpha_spring.set(0);
+                    alpha_spring.set(0, { hard: true });
                 }
                 crop.set([
                     final_crop[0] / width,

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.4",
   "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/icons": "^0.10.0",
-    "@gradio/statustracker": "^0.10.1",
-    "@gradio/upload": "^0.14.5",
+    "@gradio/image": "^0.20.2",
+    "@gradio/statustracker": "^0.10.2",
     "@gradio/utils": "^0.10.0",
-    "@gradio/wasm": "^0.16.0"
+    "@gradio/wasm": "^0.17.0",
+    "@gradio/upload": "^0.14.6"
   },
   "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 = $editor_box.child_height + 1;
 
 	const crop = writable<[number, number, number, number]>([0, 0, 1, 1]);
 	const position_spring = spring(
@@ -247,10 +250,10 @@
 		if (!$editor_box) return;
 		const [l, t, w, h] = $crop;
 
-		const cx = l * $editor_box.child_width;
-		const cy = t * $editor_box.child_height;
-		const cw = w * $editor_box.child_width;
-		const ch = h * $editor_box.child_height;
+		const cx = 0;
+		const cy = 0;
+		const cw = $editor_box.child_width;
+		const ch = $editor_box.child_height;
 
 		const x = 0.5 * $editor_box.child_width - cx - cw / 2;
 		const y = 0.5 * $editor_box.child_height - cy - ch / 2;
@@ -266,10 +269,10 @@
 		return $pixi?.get_blobs(
 			$pixi.get_layers(),
 			new Rectangle(
-				Math.round(l * $dimensions[0]),
-				Math.round(t * $dimensions[1]),
-				Math.round(w * $dimensions[0]),
-				Math.round(h * $dimensions[1])
+				Math.round(0),
+				Math.round(0),
+				Math.round(1 * $dimensions[0]),
+				Math.round(1 * $dimensions[1])
 			),
 			$dimensions
 		);
@@ -378,14 +381,10 @@
 		<div
 			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 +
-				($editor_box.child_top - $editor_box.parent_top) -
-				0.5}px"
-			style:left="{$crop[0] * $editor_box.child_width +
-				($editor_box.child_left - $editor_box.parent_left) -
-				0.5}px"
+			style:width="{$editor_box.child_width + 1}px"
+			style:height="{$editor_box.child_height + 1}px"
+			style:top="{$editor_box.child_top - $editor_box.parent_top - 0.5}px"
+			style:left="{$editor_box.child_left - $editor_box.parent_left - 0.5}px"
 		></div>
 	</div>
 </div>
@@ -408,6 +407,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,19 +50,22 @@
 		| "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<{
 		clear?: never;
 		upload?: never;
 		change?: never;
+		receive_null?: never;
 	}>();
 
 	let editor: ImageEditor;
@@ -78,7 +81,12 @@
 	$: if (bg) dispatch("upload");
 
 	export async function get_data(): Promise<ImageBlobs> {
-		const blobs = await editor.get_blobs();
+		let blobs;
+		try {
+			blobs = await editor.get_blobs();
+		} catch (e) {
+			return { background: null, layers: [], composite: null };
+		}
 
 		const bg = blobs.background
 			? upload(
@@ -119,11 +127,11 @@
 		if (!editor) return;
 		if (value == null) {
 			editor.handle_remove();
+			dispatch("receive_null");
 		}
 	}
 
 	$: handle_value(value);
-
 	$: crop_constraint = crop_size;
 	let bg = false;
 	let history = false;
@@ -207,6 +215,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 +233,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 +255,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/Crop.svelte

@@ -67,7 +67,7 @@
 		l_p = x_offset / $editor_box.child_width;
 		t_p = y_offset / $editor_box.child_height;
 
-		c = crop_canvas($pixi!.renderer, $pixi!.mask_container, crop, 0.2);
+		c = crop_canvas($pixi!.renderer, $pixi!.background_container, crop, 0.2);
 		c.start(...$dimensions, current_crop, false);
 
 		c.continue(
@@ -111,7 +111,7 @@
 
 			cropper = crop_canvas(
 				$pixi?.renderer,
-				$pixi.mask_container,
+				$pixi.background_container,
 				crop,
 				current_opacity
 			);

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/crop.ts

@@ -26,7 +26,7 @@ export interface CropCommand extends Command {
 
 export function crop_canvas(
 	renderer: IRenderer,
-	mask_container: Container,
+	background_container: Container,
 	crop: Writable<[number, number, number, number]>,
 	current_opacity = 0
 ): CropCommand {
@@ -89,7 +89,7 @@ export function crop_canvas(
 
 			crop_mask(_width, _height, _previous_crop, _preview);
 			sprite = new Sprite(text);
-			mask_container.mask = sprite;
+			background_container.mask = sprite;
 			width = _width;
 			height = _height;
 			if (set_previous)
@@ -131,16 +131,14 @@ export function crop_canvas(
 				clean = true;
 			} else {
 				if (!stopped) {
-					alpha_spring.set(0);
+					alpha_spring.set(0, { hard: true });
 				}
-
 				crop.set([
 					final_crop[0] / width,
 					final_crop[1] / height,
 					final_crop[2] / width,
 					final_crop[3] / height
 				]);
-
 				clean = true;
 			}
 		}

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);