@gradio/imageeditor 0.4.10 → 0.5.0

package/shared/layers/Layers.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
-	import { createEventDispatcher, getContext, onMount, tick } from "svelte";
-	import { DropdownArrow } from "@gradio/icons";
+	import { getContext, onMount, tick } from "svelte";
+
 	import { click_outside } from "../utils/events";
 	import { layer_manager, type LayerScene } from "./utils";
 	import { EDITOR_KEY, type EditorContext } from "../ImageEditor.svelte";
 	import type { FileData } from "@gradio/client";
+	import { Layers } from "@gradio/icons";
 
 	let show_layers = false;
 
 	export let layer_files: (FileData | null)[] | null = [];
+	export let enable_layers = true;
 
 	const { pixi, current_layer, dimensions, register_context } =
 		getContext<EditorContext>(EDITOR_KEY);
@@ -25,6 +27,20 @@
 		}
 	});
 
+	async function validate_layers(): Promise<void> {
+		let invalid = layers.some(
+			(layer) =>
+				layer.composite.texture?.width != $dimensions[0] ||
+				layer.composite.texture?.height != $dimensions[1]
+		);
+		if (invalid) {
+			LayerManager.reset();
+			if (!layer_files || layer_files.length == 0) new_layer();
+			else render_layer_files(layer_files);
+		}
+	}
+	$: $dimensions, validate_layers();
+
 	async function new_layer(): Promise<void> {
 		if (!$pixi) return;
 
@@ -48,7 +64,11 @@
 		_layer_files: typeof layer_files
 	): Promise<void> {
 		await tick();
-		if (!_layer_files || _layer_files.length == 0) return;
+		if (!_layer_files || _layer_files.length == 0) {
+			LayerManager.reset();
+			new_layer();
+			return;
+		}
 		if (!$pixi) return;
 
 		const fetch_promises = await Promise.all(
@@ -73,7 +93,8 @@
 			last_layer = await LayerManager.add_layer_from_blob(
 				$pixi.layer_container,
 				$pixi.renderer,
-				blob
+				blob,
+				$pixi.view
 			);
 		}
 
@@ -91,75 +112,79 @@
 	});
 </script>
 
-<div
-	class="layer-wrap"
-	class:closed={!show_layers}
-	use:click_outside={() => (show_layers = false)}
->
-	<button aria-label="Show Layers" on:click={() => (show_layers = !show_layers)}
-		>Layers<span class="layer-toggle"><DropdownArrow /></span></button
+{#if enable_layers}
+	<div
+		class="layer-wrap"
+		class:closed={!show_layers}
+		use:click_outside={() => (show_layers = false)}
 	>
-	{#if show_layers}
-		<ul>
-			{#each layers as layer, i (i)}
+		<button
+			aria-label="Show Layers"
+			on:click={() => (show_layers = !show_layers)}
+			><span class="icon"><Layers /></span> Layer {layers.findIndex(
+				(l) => l === $current_layer
+			) + 1}
+		</button>
+		{#if show_layers}
+			<ul>
+				{#each layers as layer, i (i)}
+					<li>
+						<button
+							class:selected_layer={$current_layer === layer}
+							on:click={() =>
+								($current_layer = LayerManager.change_active_layer(i))}
+							>Layer {i + 1}</button
+						>
+					</li>
+				{/each}
 				<li>
-					<button
-						class:selected_layer={$current_layer === layer}
-						on:click={() =>
-							($current_layer = LayerManager.change_active_layer(i))}
-						>Layer {i + 1}</button
-					>
+					<button aria-label="Add Layer" on:click={new_layer}> +</button>
 				</li>
-			{/each}
-			<li>
-				<button aria-label="Add Layer" on:click={new_layer}> +</button>
-			</li>
-		</ul>
-	{/if}
-</div>
+			</ul>
+		{/if}
 
-<style>
-	.layer-toggle {
-		width: 20px;
-		transform: rotate(0deg);
-	}
+		<span class="sep"></span>
+	</div>
+{/if}
 
-	.closed .layer-toggle {
-		transform: rotate(-90deg);
+<style>
+	.icon {
+		width: 14px;
+		margin-right: var(--spacing-md);
+		color: var(--block-label-text-color);
+		margin-right: var(--spacing-lg);
+		margin-top: 1px;
 	}
 
 	.layer-wrap {
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		display: inline-block;
-		border: 1px solid var(--block-border-color);
-		border-radius: var(--radius-md);
-
-		transition: var(--button-transition);
-		box-shadow: var(--button-shadow);
-
-		text-align: left;
-		border-bottom: none;
-		border-left: none;
-		border-bottom-right-radius: 0;
-		border-top-left-radius: 0;
-		background-color: var(--background-fill-primary);
-		overflow: hidden;
+		position: relative;
+		display: flex;
+		justify-content: center;
+		align-items: center;
 	}
 
 	.layer-wrap button {
-		display: inline-flex;
 		justify-content: flex-start;
 		align-items: flex-start;
-		padding: var(--size-2) var(--size-4);
 		width: 100%;
 		border-bottom: 1px solid var(--block-border-color);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: var(--scale-000);
+		line-height: var(--line-sm);
+		padding-bottom: 1px;
+		margin-left: var(--spacing-xl);
+		padding: var(--spacing-sm) 0;
 	}
 
 	.layer-wrap li:last-child button {
 		border-bottom: none;
 		text-align: center;
+		font-size: var(--scale-0);
+		line-height: 1;
+		font-weight: var(--weight-bold);
+		padding: 5px 0 1px 0;
 	}
 
 	.closed > button {
@@ -167,12 +192,44 @@
 	}
 
 	.layer-wrap button:hover {
-		background-color: var(--background-fill-secondary);
+		background-color: none;
+	}
+
+	.layer-wrap button:hover .icon {
+		color: var(--color-accent);
 	}
 
 	.selected_layer {
-		background-color: var(--color-accent) !important;
-		color: white;
+		background-color: var(--block-background-fill);
+		color: var(--color-accent);
 		font-weight: bold;
 	}
+
+	ul {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		background: var(--block-background-fill);
+		width: calc(100% + 1px);
+		list-style: none;
+		z-index: var(--layer-top);
+		border: 1px solid var(--block-border-color);
+		padding: var(--spacing-sm) 0;
+		text-wrap: none;
+		transform: translate(-1px, 1px);
+		border-radius: var(--radius-sm);
+		border-bottom-right-radius: 0;
+	}
+
+	.layer-wrap ul > li > button {
+		margin-left: 0;
+	}
+
+	.sep {
+		height: 12px;
+		background-color: var(--block-border-color);
+		width: 1px;
+		display: block;
+		margin-left: var(--spacing-xl);
+	}
 </style>

package/shared/layers/utils.ts

@@ -93,7 +93,8 @@ interface LayerManager {
 	add_layer_from_blob(
 		container: Container,
 		renderer: IRenderer,
-		blob: Blob
+		blob: Blob,
+		view: HTMLCanvasElement
 	): Promise<[LayerScene, LayerScene[]]>;
 }
 
@@ -197,19 +198,32 @@ export function layer_manager(): LayerManager {
 		async add_layer_from_blob(
 			container: Container,
 			renderer: IRenderer,
-			blob: Blob
+			blob: Blob,
+			view: HTMLCanvasElement
 		) {
 			const img = await createImageBitmap(blob);
 			const bitmap_texture = Texture.from(img);
+
+			const [w, h] = resize_to_fit(
+				bitmap_texture.width,
+				bitmap_texture.height,
+				view.width,
+				view.height
+			);
+
 			const sprite = new Sprite(bitmap_texture) as Sprite & DisplayObject;
 			sprite.zIndex = 0;
 
+			sprite.width = w;
+			sprite.height = h;
+
 			const [layer, layers] = this.add_layer(
 				container,
 				renderer,
-				sprite.width,
-				sprite.height
+				view.width,
+				view.height
 			);
+
 			renderer.render(sprite, {
 				renderTexture: layer.draw_texture
 			});
@@ -221,3 +235,29 @@ export function layer_manager(): LayerManager {
 		}
 	};
 }
+
+function resize_to_fit(
+	inner_width: number,
+	inner_height: number,
+	outer_width: number,
+	outer_height: number
+): [number, number] {
+	if (inner_width <= outer_width && inner_height <= outer_height) {
+		return [inner_width, inner_height];
+	}
+
+	const inner_aspect = inner_width / inner_height;
+	const outer_aspect = outer_width / outer_height;
+
+	let new_width, new_height;
+
+	if (inner_aspect > outer_aspect) {
+		new_width = outer_width;
+		new_height = outer_width / inner_aspect;
+	} else {
+		new_height = outer_height;
+		new_width = outer_height * inner_aspect;
+	}
+
+	return [new_width, new_height];
+}

package/shared/tools/Brush.svelte

@@ -23,7 +23,7 @@
 		color_mode: "fixed" | "defaults";
 	}
 
-	type brush_option_type = "color" | "size";
+	type brush_option_type = boolean;
 </script>
 
 <script lang="ts">
@@ -32,11 +32,9 @@
 
 	import { getContext, onMount, tick } from "svelte";
 	import { type ToolContext, TOOL_KEY } from "./Tools.svelte";
-	import { Palette, BrushSize as SizeIcon } from "@gradio/icons";
 	import { type EditorContext, EDITOR_KEY } from "../ImageEditor.svelte";
 	import { draw_path, type DrawCommand } from "./brush";
-	import BrushColor from "./BrushColor.svelte";
-	import BrushSize from "./BrushSize.svelte";
+	import BrushOptions from "./BrushOptions.svelte";
 	import type { FederatedPointerEvent } from "pixi.js";
 
 	export let default_size: Brush["default_size"];
@@ -46,7 +44,7 @@
 	export let mode: "erase" | "draw";
 
 	const processed_colors = colors
-		? colors.map(process_color).filter((_, i) => i < 5)
+		? colors.map(process_color).filter((_, i) => i < 4)
 		: [];
 
 	let selected_color =
@@ -56,32 +54,7 @@
 			? "black"
 			: process_color(default_color);
 
-	const paint_meta = {
-		color: {
-			icon: Palette,
-			label: "Color",
-			order: 0,
-			id: "brush_color",
-			cb() {
-				current_option = "color";
-			}
-		},
-		size: {
-			icon: SizeIcon,
-			label: "Size",
-			order: 1,
-			id: "brush_size",
-			cb() {
-				current_option = "size";
-			}
-		}
-	} as const;
-
-	let brush_options: (typeof paint_meta)[brush_option_type][];
-	$: brush_options =
-		mode === "draw" ? Object.values(paint_meta) : [paint_meta.size];
-
-	let current_option: brush_option_type | null = null;
+	let brush_options: brush_option_type = false;
 
 	const {
 		pixi,
@@ -90,7 +63,8 @@
 		command_manager,
 		register_context,
 		editor_box,
-		crop
+		crop,
+		toolbar_box
 	} = getContext<EditorContext>(EDITOR_KEY);
 
 	const { active_tool, register_tool, current_color } =
@@ -216,8 +190,7 @@
 
 	onMount(() => {
 		const unregister = register_tool(mode, {
-			default: null,
-			options: brush_options
+			cb: toggle_options
 		});
 
 		return () => {
@@ -232,19 +205,37 @@
 		return tinycolor(color).toRgbString();
 	}
 
-	$: {
-		if ($active_tool !== mode) {
-			current_option = null;
-		}
-	}
-
 	let pos = { x: 0, y: 0 };
 	$: brush_size =
 		(selected_size / $dimensions[0]) * $editor_box.child_width * 2;
+
+	function debounce_toggle(): (should_close?: boolean) => void {
+		let timeout: NodeJS.Timeout | null = null;
+
+		return function executedFunction(should_close?: boolean) {
+			const later = (): void => {
+				if (timeout) {
+					clearTimeout(timeout);
+				}
+				if (should_close !== undefined) {
+					brush_options = should_close;
+					return;
+				}
+				brush_options = !brush_options;
+			};
+
+			if (timeout) {
+				clearTimeout(timeout);
+			}
+			timeout = setTimeout(later, 100);
+		};
+	}
+
+	const toggle_options = debounce_toggle();
 </script>
 
 <svelte:window
-	on:keydown={({ key }) => key === "Escape" && (current_option = null)}
+	on:keydown={({ key }) => key === "Escape" && toggle_options(false)}
 />
 
 <span
@@ -260,23 +251,23 @@
 	style:opacity={brush_cursor ? 1 : 0}
 />
 
-{#if current_option === "color" && colors}
+{#if brush_options}
 	<div>
-		<BrushColor
-			on:click_outside={() => (current_option = null)}
+		<BrushOptions
+			show_swatch={mode === "draw"}
+			on:click_outside={() => toggle_options()}
 			colors={processed_colors}
 			bind:selected_color
 			{color_mode}
 			bind:recent_colors
+			bind:selected_size
+			dimensions={$dimensions}
+			parent_width={$editor_box.parent_width}
+			parent_height={$editor_box.parent_height}
+			parent_left={$editor_box.parent_left}
+			toolbar_box={$toolbar_box}
 		/>
 	</div>
-{:else if current_option === "size"}
-	<BrushSize
-		on:click_outside={() => (current_option = null)}
-		max={$dimensions[0] / 10}
-		min={1}
-		bind:selected_size
-	/>
 {/if}
 
 <style>

package/shared/tools/{BrushColor.svelte → BrushOptions.svelte}

@@ -6,11 +6,19 @@
 	import ColorPicker from "./ColorPicker.svelte";
 	import ColorSwatch from "./ColorSwatch.svelte";
 	import ColorField from "./ColorField.svelte";
+	import BrushSize from "./BrushSize.svelte";
 
 	export let colors: string[];
 	export let selected_color: string;
 	export let color_mode: Brush["color_mode"] | undefined = undefined;
 	export let recent_colors: (string | null)[] = [];
+	export let selected_size: number;
+	export let dimensions: [number, number];
+	export let parent_width: number;
+	export let parent_height: number;
+	export let parent_left: number;
+	export let toolbar_box: DOMRect;
+	export let show_swatch: boolean;
 
 	let color_picker = false;
 	let current_mode: "hex" | "rgb" | "hsl" = "hex";
@@ -54,15 +62,29 @@
 	let c_width = 0;
 	let c_height = 0;
 	let wrap_el: HTMLDivElement;
-	let anchor_right = false;
-	let anchor_top = false;
-
+	let full_screen = false;
+	let anchor: "default" | "center" | "top" = "default";
+	let left_anchor = 0;
+	let top_anchor = null;
 	$: {
 		if (wrap_el && (width || height || c_height || c_width)) {
 			const box = wrap_el.getBoundingClientRect();
-
-			anchor_right = box.width + 30 > width / 2;
-			anchor_top = box.y < 80;
+			color_picker;
+
+			if (box.width > parent_width) {
+				full_screen = true;
+			} else if (parent_width > box.width + 230 * 2 + 25) {
+				anchor = "default";
+
+				left_anchor = toolbar_box.right - parent_left + 24;
+			} else {
+				anchor = "center";
+			}
+
+			if (box.height + 50 > parent_height) {
+				anchor = "top";
+				top_anchor = true;
+			}
 		}
 	}
 </script>
@@ -73,12 +95,13 @@
 	class="wrap"
 	class:padded={!color_picker}
 	use:click_outside={() => dispatch("click_outside")}
-	class:right={anchor_right}
-	class:top={anchor_top}
-	class:bottom={!anchor_top}
+	class:anchor_default={anchor === "default"}
+	class:anchor_center={anchor === "center"}
+	class:anchor_top={anchor === "top"}
 	bind:this={wrap_el}
 	bind:clientWidth={c_width}
 	bind:clientHeight={c_height}
+	class:anchor={`${left_anchor}px`}
 >
 	{#if color_mode === "defaults"}
 		{#if color_picker}
@@ -91,49 +114,67 @@
 			/>
 		{/if}
 	{/if}
-	<ColorSwatch
-		bind:color_picker
-		{colors}
-		on:select={({ detail }) => handle_color_selection(detail, "core")}
-		on:edit={({ detail }) => handle_color_selection(detail, "user")}
-		user_colors={color_mode === "defaults" ? recent_colors : null}
-		{selected_color}
-		{current_mode}
-	/>
+	{#if show_swatch}
+		<ColorSwatch
+			bind:color_picker
+			{colors}
+			on:select={({ detail }) => handle_color_selection(detail, "core")}
+			on:edit={({ detail }) => handle_color_selection(detail, "user")}
+			user_colors={color_mode === "defaults" ? recent_colors : null}
+			{selected_color}
+			{current_mode}
+		/>
+	{/if}
+
+	{#if color_picker || show_swatch}
+		<div class="sep"></div>
+	{/if}
+
+	<BrushSize max={dimensions[0] / 10} min={1} bind:selected_size />
 </div>
 
 <style>
 	.wrap {
-		width: 230px;
+		max-width: 230px;
+		width: 90%;
 		position: absolute;
 		display: flex;
 		flex-direction: column;
 		gap: 5px;
 		background: var(--background-fill-secondary);
 		border: 1px solid var(--block-border-color);
-
 		border-radius: var(--radius-md);
-		box-shadow:
-			0 0 5px rgba(0, 0, 0, 0.1),
-			0 5px 30px rgba(0, 0, 0, 0.2);
+		box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
 		padding-bottom: var(--size-2);
 		pointer-events: all;
 		cursor: default;
 		z-index: var(--layer-top);
+		overflow: hidden;
 	}
 
-	.bottom {
-		bottom: 85px;
+	.anchor_default {
+		position: absolute;
+		left: var(--left-anchor);
+		bottom: 8px;
 	}
-
-	.top {
-		top: 30px;
+	.anchor_center {
+		position: absolute;
+		bottom: 50px;
+		left: 50%;
+		transform: translateX(-50%);
 	}
 
-	.right {
-		right: 10px;
+	.anchor_top {
+		position: absolute;
+		top: 1px;
+		left: 50%;
+		transform: translateX(-50%);
 	}
-	.padded {
-		padding-top: var(--size-3);
+
+	.sep {
+		height: 1px;
+		background-color: var(--block-border-color);
+		margin: 0 var(--size-3);
+		margin-top: var(--size-1);
 	}
 </style>

package/shared/tools/BrushSize.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { click_outside } from "../utils/events";
 	import { createEventDispatcher } from "svelte";
+	import { BrushSize } from "@gradio/icons";
 
 	export let selected_size: number;
 	export let min: number;
@@ -40,36 +41,28 @@
 	class:top={anchor_top}
 	class:bottom={!anchor_top}
 >
+	<span>
+		<BrushSize />
+	</span>
 	<input type="range" bind:value={selected_size} {min} {max} step={1} />
 </div>
 
 <style>
 	.wrap {
-		width: 180px;
-		position: absolute;
+		width: 100%;
 		display: flex;
-		flex-direction: column;
-		gap: 5px;
+		gap: var(--size-4);
 		background: var(--background-fill-secondary);
-		border: 1px solid var(--block-border-color);
-
-		border-radius: var(--radius-md);
-		box-shadow:
-			0 0 5px rgba(0, 0, 0, 0.1),
-			0 5px 30px rgba(0, 0, 0, 0.2);
-		padding: var(--size-2);
+		padding: 0 var(--size-4);
 		cursor: default;
+		padding-top: var(--size-2-5);
 	}
 
-	.bottom {
-		bottom: 85px;
-	}
-
-	.top {
-		top: 30px;
+	input {
+		width: 100%;
 	}
-
-	.right {
-		right: 10px;
+	span {
+		width: 26px;
+		color: var(--body-text-color);
 	}
 </style>