@gradio/imageeditor 0.4.11 → 0.5.0

package/shared/tools/ColorSwatch.svelte

@@ -4,6 +4,7 @@
 	export let selected_color: string;
 	export let colors: string[];
 	export let user_colors: (string | null)[] | null = [];
+	import { Palette } from "@gradio/icons";
 
 	export let show_empty = false;
 	export let current_mode: "hex" | "rgb" | "hsl" = "hex";
@@ -50,44 +51,75 @@
 	}
 </script>
 
-{#if user_colors}
-	<div class="swatch">
-		{#each user_colors as color, i}
-			<button
-				on:click={() => handle_select("edit", { index: i, color })}
-				class="color"
-				class:empty={color === null}
-				style="background-color: {color}"
-				class:selected={`edit-${i}` === current_index}
-			></button>
-		{/each}
-
-		<button
-			on:click={handle_picker_click}
-			class="color colorpicker"
-			class:hidden={!color_picker}
-		></button>
-	</div>
+{#if !color_picker}
+	<span class:lg={user_colors}></span>
 {/if}
-<menu class="swatch">
-	{#each _colors as color, i}
-		<button
-			on:click={() => handle_select("select", { index: i, color })}
-			class="color"
-			class:empty={color === null}
-			style="background-color: {color}"
-			class:selected={`select-${i}` === current_index}
-		></button>
-	{/each}
-</menu>
+
+<div class="swatch-wrap">
+	<span class="icon-wrap">
+		<Palette />
+	</span>
+	<div>
+		{#if user_colors}
+			<div class="swatch">
+				{#each user_colors as color, i}
+					<button
+						on:click={() => handle_select("edit", { index: i, color })}
+						class="color"
+						class:empty={color === null}
+						style="background-color: {color}"
+						class:selected={`edit-${i}` === current_index}
+					></button>
+				{/each}
+
+				<button
+					on:click={handle_picker_click}
+					class="color colorpicker"
+					class:hidden={!color_picker}
+				></button>
+			</div>
+		{/if}
+		<menu class="swatch">
+			{#each _colors as color, i}
+				<button
+					on:click={() => handle_select("select", { index: i, color })}
+					class="color"
+					class:empty={color === null}
+					style="background-color: {color}"
+					class:selected={`select-${i}` === current_index}
+				></button>
+			{/each}
+		</menu>
+	</div>
+</div>
 
 <style>
+	.icon-wrap {
+		width: 18px;
+		margin-top: 6px;
+
+		margin-left: var(--size-4);
+	}
+
+	.swatch-wrap {
+		display: flex;
+		justify-content: space-between;
+		align-items: flex-start;
+	}
+	span {
+		margin-top: 0px;
+	}
+
+	span.lg {
+		margin-top: var(--spacing-xl);
+	}
 	.swatch {
 		display: flex;
-		width: 100%;
-		gap: var(--size-2);
-		justify-content: center;
-		margin-bottom: var(--size-1);
+		gap: var(--size-2-5);
+		justify-content: space-around;
+		margin-bottom: var(--size-2);
+		margin-right: var(--size-6);
+		padding-left: var(--size-2);
 	}
 
 	.empty {
@@ -96,7 +128,7 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		padding-top: 1px;
+		padding-top: 4px;
 		text-align: center;
 		font-size: var(--scale-0);
 		cursor: pointer;

package/shared/tools/Crop.svelte

@@ -68,14 +68,17 @@
 		t_p = y_offset / $editor_box.child_height;
 
 		c = crop_canvas($pixi!.renderer, $pixi!.mask_container, crop, 0.2);
-		c.start(...$dimensions, current_crop);
-
-		c.continue([
-			l_p * $dimensions[0],
-			t_p * $dimensions[1],
-			w_p * $dimensions[0],
-			h_p * $dimensions[1]
-		]);
+		c.start(...$dimensions, current_crop, false);
+
+		c.continue(
+			[
+				l_p * $dimensions[0],
+				t_p * $dimensions[1],
+				w_p * $dimensions[0],
+				h_p * $dimensions[1]
+			],
+			false
+		);
 		c.stop();
 
 		c.execute();
@@ -167,12 +170,7 @@
 
 	$: $editor_box && get_measurements();
 
-	onMount(() =>
-		register_tool("crop", {
-			default: "crop",
-			options: []
-		})
-	);
+	onMount(() => register_tool("crop"));
 </script>
 
 {#if $active_tool === "crop" && measured}
@@ -188,6 +186,3 @@
 		on:crop_end={({ detail }) => handle_crop("stop", detail)}
 	/>
 {/if}
-
-<style>
-</style>

package/shared/tools/Cropper.svelte

@@ -332,6 +332,7 @@
 		left: 0;
 		width: 100%;
 		height: 100%;
+
 		/* transform: translateY(-20px); */
 	}
 
@@ -340,5 +341,6 @@
 		width: 100%;
 		height: 100%;
 		border: 1px solid black;
+		z-index: var(--layer-top);
 	}
 </style>

package/shared/tools/Handle.svelte

@@ -122,7 +122,7 @@
 		--hitbox-corner-offset: -25px;
 		--handle-corner-offset: calc(50% - 5px);
 		--handle-mid-offset: calc(50% - 2px);
-		z-index: 1;
+		z-index: var(--layer-top);
 	}
 
 	/* hitbox positions  */

package/shared/tools/Sources.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
-	import { getContext, onMount, tick } from "svelte";
+	import { getContext, onMount, tick, createEventDispatcher } from "svelte";
 	import { type ToolContext, TOOL_KEY } from "./Tools.svelte";
 	import { type EditorContext, EDITOR_KEY } from "../ImageEditor.svelte";
 	import {
-		Upload as UploadIcon,
+		Image as ImageIcon,
 		Webcam as WebcamIcon,
 		ImagePaste
 	} from "@gradio/icons";
 	import { Upload } from "@gradio/upload";
 	import { Webcam } from "@gradio/image";
 	import { type I18nFormatter } from "@gradio/utils";
+	import { IconButton } from "@gradio/atoms";
 
 	import { add_bg_color, add_bg_image } from "./sources";
 	import type { FileData } from "@gradio/client";
@@ -24,21 +25,27 @@
 	export let mirror_webcam = true;
 	export let i18n: I18nFormatter;
 
-	const { active_tool, register_tool } = getContext<ToolContext>(TOOL_KEY);
+	const { active_tool } = getContext<ToolContext>(TOOL_KEY);
 	const { pixi, dimensions, register_context, reset, editor_box } =
 		getContext<EditorContext>(EDITOR_KEY);
 
-	let active_mode: "webcam" | "color" | null = null;
+	export let active_mode: "webcam" | "color" | null = null;
 	let background: Blob | File | null;
 
+	const dispatch = createEventDispatcher<{
+		upload: never;
+	}>();
+
 	const sources_meta = {
 		upload: {
-			icon: UploadIcon,
+			icon: ImageIcon,
 			label: "Upload",
 			order: 0,
 			id: "bg_upload",
 			cb() {
 				upload.open_file_upload();
+
+				$active_tool = "bg";
 			}
 		},
 		webcam: {
@@ -48,6 +55,7 @@
 			id: "bg_webcam",
 			cb() {
 				active_mode = "webcam";
+				$active_tool = "bg";
 			}
 		},
 		clipboard: {
@@ -57,6 +65,7 @@
 			id: "bg_clipboard",
 			cb() {
 				process_clipboard();
+				$active_tool = null;
 			}
 		}
 	} as const;
@@ -148,18 +157,25 @@
 		},
 		reset_fn: () => {}
 	});
-
-	onMount(() => {
-		return register_tool("bg", {
-			default: "bg_upload",
-			options: sources_list || []
-		});
-	});
 </script>
 
 <svelte:window on:keydown={handle_key} />
 
-{#if $active_tool === "bg"}
+{#if sources.length}
+	<div class="source-wrap">
+		{#each sources_list as { icon, label, id, cb } (id)}
+			<IconButton
+				Icon={icon}
+				size="medium"
+				padded={false}
+				label={label + " button"}
+				hasPopup={true}
+				transparent={true}
+				on:click={cb}
+			/>
+		{/each}
+		<span class="sep"></span>
+	</div>
 	<div class="upload-container">
 		<Upload
 			hidden={true}
@@ -203,7 +219,6 @@
 		width: 100%;
 		left: 0;
 		right: 0;
-		background-color: rgba(0, 0, 0, 0.9);
 		margin: auto;
 		z-index: var(--layer-top);
 		display: flex;
@@ -213,4 +228,20 @@
 	.modal-inner {
 		width: 100%;
 	}
+
+	.sep {
+		height: 12px;
+		background-color: var(--block-border-color);
+		width: 1px;
+		display: block;
+		margin-left: var(--spacing-xl);
+	}
+
+	.source-wrap {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-left: var(--spacing-lg);
+		height: 100%;
+	}
 </style>

package/shared/tools/Tools.svelte

@@ -28,18 +28,16 @@
 	}
 
 	export interface ToolContext {
-		register_tool: (type: tool, meta: ToolMeta) => () => void;
+		register_tool: (type: tool, opts?: { cb: () => void }) => () => void;
 		active_tool: {
+			set: (tool: tool) => void;
 			subscribe(
 				this: void,
 				run: Subscriber<tool | null>,
 				invalidate?: Invalidator<tool | null>
 			): Unsubscriber;
 		};
-		activate_subtool: (
-			sub_tool: upload_tool | transform_tool | brush_tool | eraser_tool | null,
-			cb?: (...args: any[]) => void
-		) => void;
+
 		current_color: Writable<string>;
 	}
 </script>
@@ -52,28 +50,22 @@
 	import { Image, Crop, Brush, Erase } from "@gradio/icons";
 	import { type I18nFormatter } from "@gradio/utils";
 
-	const { current_history, active_tool } =
+	const { active_tool, toolbar_box, editor_box } =
 		getContext<EditorContext>(EDITOR_KEY);
 
 	export let i18n: I18nFormatter;
 
 	let tools: tool[] = [];
 
-	const metas: Record<tool, ToolMeta | null> = {
-		draw: null,
-		erase: null,
-		crop: null,
-		bg: null
-	};
-
-	$: sub_menu = $active_tool && metas[$active_tool];
+	const cbs: Record<string, () => void> = {};
 	let current_color = writable("#000000");
-	let sub_tool: upload_tool | transform_tool | brush_tool | eraser_tool | null;
 	const tool_context: ToolContext = {
 		current_color,
-		register_tool: (type: tool, meta: ToolMeta) => {
+		register_tool: (type: tool, opts?: { cb: () => void }) => {
 			tools = [...tools, type];
-			metas[type] = meta;
+			if (opts?.cb) {
+				cbs[type] = opts.cb;
+			}
 
 			return () => {
 				tools = tools.filter((tool) => tool !== type);
@@ -81,15 +73,8 @@
 		},
 
 		active_tool: {
-			subscribe: active_tool.subscribe
-		},
-
-		activate_subtool: (
-			_sub_tool: upload_tool | transform_tool | brush_tool | eraser_tool | null,
-			cb?: (...args: any[]) => void
-		) => {
-			sub_tool = _sub_tool;
-			if (cb) cb();
+			subscribe: active_tool.subscribe,
+			set: active_tool.set
 		}
 	};
 
@@ -103,11 +88,6 @@
 			icon: typeof Image;
 		}
 	> = {
-		bg: {
-			order: 0,
-			label: i18n("Image"),
-			icon: Image
-		},
 		crop: {
 			order: 1,
 			label: i18n("Transform"),
@@ -122,44 +102,49 @@
 			order: 2,
 			label: i18n("Erase"),
 			icon: Erase
+		},
+		bg: {
+			order: 0,
+			label: i18n("Background"),
+			icon: Image
 		}
 	} as const;
+
+	let toolbar_width: number;
+	let toolbar_wrap: HTMLDivElement;
+
+	$: toolbar_width, $editor_box, get_dimensions();
+
+	function get_dimensions(): void {
+		if (!toolbar_wrap) return;
+		$toolbar_box = toolbar_wrap.getBoundingClientRect();
+	}
+
+	function handle_click(e: Event, tool: tool): void {
+		e.stopPropagation();
+		$active_tool = tool;
+		cbs[tool] && cbs[tool]();
+	}
 </script>
 
 <slot />
 
-<div class="toolbar-wrap">
-	<Toolbar show_border={false}>
-		{#if sub_menu}
-			{#each sub_menu.options as meta (meta.id)}
-				<IconButton
-					highlight={sub_tool === meta.id && meta.id !== "brush_size"}
-					color={$active_tool === "draw" && meta.id === "brush_size"
-						? $current_color
-						: undefined}
-					on:click={() => tool_context.activate_subtool(meta.id, meta.cb)}
-					Icon={meta.icon}
-					size="large"
-					padded={false}
-					label={meta.label + " button"}
-					hasPopup={true}
-					transparent={true}
-				/>
-			{/each}
-		{/if}
-	</Toolbar>
-
+<div
+	class="toolbar-wrap"
+	bind:clientWidth={toolbar_width}
+	bind:this={toolbar_wrap}
+>
 	<Toolbar show_border={false}>
 		{#each tools as tool (tool)}
 			<IconButton
-				disabled={tool === "bg" && !!$current_history.previous}
 				highlight={$active_tool === tool}
-				on:click={() => ($active_tool = tool)}
+				on:click={(e) => handle_click(e, tool)}
 				Icon={tools_meta[tool].icon}
-				size="large"
+				size="medium"
 				padded={false}
 				label={tools_meta[tool].label + " button"}
 				transparent={true}
+				offset={tool === "draw" ? -2 : tool === "erase" ? -6 : 0}
 			/>
 		{/each}
 	</Toolbar>
@@ -168,9 +153,9 @@
 <style>
 	.toolbar-wrap {
 		display: flex;
-		flex-direction: column;
 		justify-content: center;
 		align-items: center;
-		width: 100%;
+		margin-left: var(--spacing-xl);
+		height: 100%;
 	}
 </style>

package/shared/tools/crop.ts

@@ -14,10 +14,14 @@ export interface CropCommand extends Command {
 		width: number,
 		height: number,
 		previous_crop: [number, number, number, number],
+		preview?: boolean,
 		set_previous?: boolean
 	) => void;
 	stop: () => number;
-	continue: (crop_size: [number, number, number, number]) => void;
+	continue: (
+		crop_size: [number, number, number, number],
+		preview?: boolean
+	) => void;
 }
 
 export function crop_canvas(
@@ -74,6 +78,7 @@ export function crop_canvas(
 			_width: number,
 			_height: number,
 			_previous_crop: [number, number, number, number],
+			_preview = true,
 			set_previous = true
 		) => {
 			clean = false;
@@ -82,7 +87,7 @@ export function crop_canvas(
 				height: _height
 			});
 
-			crop_mask(_width, _height, _previous_crop, true);
+			crop_mask(_width, _height, _previous_crop, _preview);
 			sprite = new Sprite(text);
 			mask_container.mask = sprite;
 			width = _width;
@@ -90,10 +95,10 @@ export function crop_canvas(
 			if (set_previous)
 				previous_crop = JSON.parse(JSON.stringify(_previous_crop));
 		},
-		continue: (crop_size: [number, number, number, number]) => {
+		continue: (crop_size: [number, number, number, number], preview = true) => {
 			final_crop = JSON.parse(JSON.stringify(crop_size));
 			if (spring_value === 0.2) {
-				crop_mask(width, height, final_crop, true);
+				crop_mask(width, height, final_crop, preview);
 			} else {
 				alpha_spring.set(0.2);
 			}

package/shared/utils/events.ts

@@ -1,3 +1,5 @@
+import { tick } from "svelte";
+
 /**
  * Svelte action to handle clicks outside of a DOM node
  * @param node DOM node to check the click is outside of