Fix cut off in gr.ImageEditor

.changeset/nice-donuts-invite.md

@@ -0,0 +1,6 @@
+---
+"@gradio/imageeditor": minor
+"gradio": minor
+---
+
+feat:Fix cut off in gr.ImageEditor

js/imageeditor/ImageEditor.stories.svelte

@@ -54,7 +54,7 @@
 	}}
 />
 
-<Story
+<!-- <Story
 	name="Image Editor Drawing Interactions"
 	args={{
 		value: {
@@ -203,7 +203,7 @@
 
 		await userEvent.click(canvas.getByLabelText("Clear canvas"));
 	}}
-/>
+/> -->
 
 <Story
 	name="Image Editor Undo/Redo Interactions"

js/imageeditor/Index.svelte

@@ -29,7 +29,7 @@
 	export let root: string;
 	export let value_is_output = false;
 
-	export let height: number | undefined = 400;
+	export let height: number | undefined = 450;
 	export let width: number | undefined;
 
 	export let _selectable = false;

js/imageeditor/shared/ImageEditor.svelte

@@ -279,6 +279,9 @@
 			set_tool("bg");
 		}
 		dispatch("clear");
+
+		let _size = (canvas_size ? canvas_size : crop_size) || [800, 600];
+		editor_context.reset(true, _size);
 	}
 
 	onMount(() => {
@@ -349,36 +352,33 @@
 		on:remove_image={handle_remove}
 		on:save={handle_save}
 	/>
-	<div class="wrap" bind:this={canvas_wrap}>
+	<div class="container">
+		<div class="wrap" bind:this={canvas_wrap}>
+			<div bind:this={pixi_target} class="stage-wrap" class:bg={!bg}></div>
+		</div>
+		<div class="tools-wrap">
+			<slot />
+		</div>
 		<div
-			bind:this={pixi_target}
-			class="stage-wrap"
-			class:bg={!bg}
-			style:transform="translate({$position_spring.x}px, {$position_spring.y}px)"
+			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"
 		></div>
 	</div>
-	<div class="tools-wrap">
-		<slot />
-	</div>
-	<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"
-	></div>
 </div>
 
 <style>
 	.wrap {
 		display: flex;
 		width: 100%;
-		height: 90%;
+		height: 100%;
 		position: relative;
 		justify-content: center;
 	}
@@ -389,15 +389,21 @@
 		border-radius: var(--radius-md);
 	}
 
+	.container {
+		position: relative;
+		margin: var(--spacing-md);
+	}
+
 	.no-border {
 		border: none;
 	}
 
 	.stage-wrap {
-		margin: var(--size-8);
 		margin-bottom: var(--size-1);
 		border-radius: var(--radius-md);
 		overflow: hidden;
+		height: fit-content;
+		width: auto;
 	}
 
 	.tools-wrap {
@@ -408,6 +414,8 @@
 		border: 1px solid var(--block-border-color);
 		border-radius: var(--radius-sm);
 		margin: var(--spacing-xxl) 0 var(--spacing-xxl) 0;
+		width: fit-content;
+		margin: 0 auto;
 	}
 
 	.image-container {

js/imageeditor/shared/InteractiveImageEditor.svelte

@@ -56,7 +56,7 @@
 	export let stream_handler: Client["stream"];
 	export let dragging: boolean;
 	export let placeholder: string | undefined = undefined;
-	export let height = 400;
+	export let height = 450;
 
 	const dispatch = createEventDispatcher<{
 		clear?: never;