@gradio/imageeditor 0.19.0 → 0.20.0

package/shared/brush/ColorField.svelte

@@ -1,18 +1,21 @@
 <script lang="ts">
 	import { Eyedropper, Plus } from "@gradio/icons";
-	import { createEventDispatcher } from "svelte";
 
 	import tinycolor from "tinycolor2";
 	import IconButton from "../IconButton.svelte";
-	export let color: string;
 
-	export let current_mode: "hex" | "rgb" | "hsl" = "hex";
+	let {
+		color,
+		current_mode = $bindable<"hex" | "rgb" | "hsl">("hex"),
+		onselected,
+		onclose
+	}: {
+		color: string;
+		current_mode?: "hex" | "rgb" | "hsl";
+		onselected?: (color: string) => void;
+		onclose?: () => void;
+	} = $props();
 
-	const dispatch = createEventDispatcher<{
-		selected: string;
-		close: void;
-		add_color: void;
-	}>();
 	const modes = [
 		["Hex", "hex"],
 		["RGB", "rgb"],
@@ -28,8 +31,10 @@
 		return tinycolor(color).toHslString();
 	}
 
-	$: color_string = format_color(color, current_mode);
-	$: color_string && dispatch("selected", color_string);
+	let color_string = $derived(format_color(color, current_mode));
+	$effect(() => {
+		if (color_string) onselected?.(color_string);
+	});
 
 	function request_eyedropper(): void {
 		// @ts-ignore
@@ -44,23 +49,23 @@
 	const eyedropper_supported = !!window.EyeDropper;
 
 	function handle_click(): void {
-		dispatch("selected", color_string);
-		dispatch("close");
+		onselected?.(color_string);
+		onclose?.();
 	}
 </script>
 
 <div class="input">
-	<button class="swatch" style:background={color} on:click={handle_click}
+	<button class="swatch" style:background={color} onclick={handle_click}
 	></button>
 	<div>
 		<div class="input-wrap">
 			<input
 				type="text"
 				value={color_string}
-				on:change={(e) => (color = e.currentTarget.value)}
+				onchange={(e) => (color = e.currentTarget.value)}
 			/>
 
-			<button class="eyedropper" on:click={request_eyedropper}>
+			<button class="eyedropper" onclick={request_eyedropper}>
 				{#if eyedropper_supported}
 					<Eyedropper />
 				{/if}
@@ -71,7 +76,7 @@
 				<button
 					class="button"
 					class:active={current_mode === value}
-					on:click={() => (current_mode = value)}>{label}</button
+					onclick={() => (current_mode = value)}>{label}</button
 				>
 			{/each}
 		</div>

package/shared/brush/ColorPicker.svelte

@@ -3,19 +3,25 @@
 	import tinycolor from "tinycolor2";
 	import { clamp } from "../utils/pixi";
 
-	export let color = "rgb(255, 255, 255)";
-
-	let sl_marker_pos = [0, 0];
+	let {
+		color = $bindable("rgb(255, 255, 255)"),
+		opacity = $bindable(1)
+	}: {
+		color?: string;
+		opacity?: number;
+	} = $props();
+
+	let sl_marker_pos = $state([0, 0]);
 	let sl_rect: DOMRect | null = null;
-	let sl_moving = false;
-	let sl = [0, 0];
+	let sl_moving = $state(false);
+	let sl = $state([0, 0]);
 
-	let hue = 0;
-	let hue_marker_pos = 0;
+	let hue = $state(0);
+	let hue_marker_pos = $state(0);
 	let hue_rect: DOMRect | null = null;
-	let hue_moving = false;
+	let hue_moving = $state(false);
 
-	let opacity_moving = false;
+	let opacity_moving = $state(false);
 
 	function handle_hue_down(
 		event: MouseEvent & { currentTarget: HTMLDivElement }
@@ -121,13 +127,13 @@
 		hue_marker_pos = (hsva.h / 360) * hue_rect!.width;
 	}
 
-	$: update_mouse_from_color(color);
+	$effect(() => {
+		update_mouse_from_color(color);
+	});
 
 	let sl_wrap: HTMLDivElement;
 	let hue_wrap: HTMLDivElement;
 
-	export let opacity = 1;
-
 	let opacity_wrap: HTMLDivElement;
 
 	function handle_opacity_down(
@@ -150,12 +156,12 @@
 	});
 </script>
 
-<svelte:window on:mousemove={handle_move} on:mouseup={handle_end} />
+<svelte:window onmousemove={handle_move} onmouseup={handle_end} />
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	class="color-gradient"
-	on:mousedown={handle_sl_down}
+	onmousedown={handle_sl_down}
 	style="--hue:{hue}"
 	bind:this={sl_wrap}
 >
@@ -168,7 +174,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	class="opacity-slider"
-	on:mousedown={handle_opacity_down}
+	onmousedown={handle_opacity_down}
 	style="--color:{color === 'auto' ? 'transparent' : color}"
 	bind:this={opacity_wrap}
 >
@@ -179,7 +185,7 @@
 	/>
 </div>
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<div class="hue-slider" on:mousedown={handle_hue_down} bind:this={hue_wrap}>
+<div class="hue-slider" onmousedown={handle_hue_down} bind:this={hue_wrap}>
 	<div
 		class="marker"
 		style:background={"hsl(" + hue + ", 100%, 50%)"}

package/shared/brush/ColorSwatch.svelte

@@ -1,25 +1,41 @@
 <script lang="ts">
 	import tinycolor from "tinycolor2";
-	import { createEventDispatcher } from "svelte";
 	import type { ColorTuple } from "./types";
 	import type { ColorInput } from "tinycolor2";
 	import IconButton from "../IconButton.svelte";
 	import { Plus } from "@gradio/icons";
 
-	export let selected_color: string;
-	export let colors: (ColorInput | ColorTuple)[];
-	export let user_colors: (ColorInput | ColorTuple)[] | null = [];
-
-	export let show_empty = false;
-	export let current_mode: "hex" | "rgb" | "hsl" = "hex";
-	export let color_picker = false;
-	const dispatch = createEventDispatcher<{
-		select: { index: number | null; color: string | null; opacity?: number };
-		edit: { index: number; color: string | null };
-		add_color: void;
-	}>();
+	let {
+		selected_color,
+		colors,
+		user_colors = [],
+		show_empty = false,
+		current_mode = "hex",
+		color_picker = $bindable(false),
+		onselect,
+		onedit,
+		onadd_color
+	}: {
+		selected_color: string;
+		colors: (ColorInput | ColorTuple)[];
+		user_colors?: (ColorInput | ColorTuple)[] | null;
+		show_empty?: boolean;
+		current_mode?: "hex" | "rgb" | "hsl";
+		color_picker?: boolean;
+		onselect?: (value: {
+			index: number | null;
+			color: string | null;
+			opacity?: number;
+		}) => void;
+		onedit?: (value: {
+			index: number;
+			color: string | null;
+			opacity?: number;
+		}) => void;
+		onadd_color?: () => void;
+	} = $props();
 
-	$: _colors = show_empty ? colors : colors.filter((c) => c);
+	let _colors = $derived(show_empty ? colors : colors.filter((c) => c));
 
 	function get_color(color_input: ColorInput | ColorTuple): string {
 		if (Array.isArray(color_input)) {
@@ -58,7 +74,7 @@
 			get_formatted_color(selected_color, current_mode)
 	)}`;
 
-	$: selected_opacity = get_opacity(selected_color);
+	let selected_opacity = $derived(get_opacity(selected_color));
 
 	function handle_select(
 		type: "edit" | "select",
@@ -69,11 +85,15 @@
 		}
 	): void {
 		current_index = `${type}-${detail.index}`;
-		dispatch(type, detail);
+		if (type === "edit") {
+			onedit?.(detail);
+		} else {
+			onselect?.(detail);
+		}
 	}
 
 	function handle_picker_click(): void {
-		dispatch("select", { index: null, color: selected_color });
+		onselect?.({ index: null, color: selected_color });
 		color_picker = !color_picker;
 	}
 </script>
@@ -89,7 +109,7 @@
 				{#if color_picker}
 					<IconButton
 						Icon={Plus}
-						onclick={() => dispatch("add_color")}
+						onclick={() => onadd_color?.()}
 						roundedness="very"
 						background={get_color(selected_color)}
 						color="white"
@@ -99,7 +119,7 @@
 					{@const color_string = get_color(color)}
 					{@const opacity = get_opacity(color)}
 					<button
-						on:click={() =>
+						onclick={() =>
 							handle_select("edit", {
 								index: i,
 								color: color_string,
@@ -115,7 +135,7 @@
 				{/each}
 
 				<button
-					on:click={handle_picker_click}
+					onclick={handle_picker_click}
 					class="color colorpicker"
 					class:hidden={!color_picker}
 				></button>
@@ -126,7 +146,7 @@
 				{@const color_string = get_color(color_item)}
 				{@const opacity = get_opacity(color_item)}
 				<button
-					on:click={() =>
+					onclick={() =>
 						handle_select("select", {
 							index: i,
 							color: color_string,

package/shared/brush/brush.ts

@@ -150,22 +150,23 @@ export class BrushTool implements Tool {
 	 * @param {Subtool} subtool - The current subtool.
 	 */
 	set_tool(tool: ToolbarTool, subtool: Subtool): void {
-		this.current_tool = tool;
-		this.current_subtool = subtool;
+		const new_mode = tool === "erase" ? "erase" : "draw";
+		const mode_changed = this.state.mode !== new_mode;
+		const needs_brush_tool = tool === "erase" || tool === "draw";
 
-		if (this.current_tool !== "erase" && this.current_tool !== "draw") {
+		if (this.is_drawing && (!needs_brush_tool || mode_changed)) {
 			this.commit_pending_changes();
 		}
 
+		this.current_tool = tool;
+		this.current_subtool = subtool;
+
 		if (this.brush_cursor) {
 			const should_be_active = tool === "draw" || tool === "erase";
 
 			this.brush_cursor.set_active(should_be_active);
 		}
 
-		const new_mode = tool === "erase" ? "erase" : "draw";
-		const mode_changed = this.state.mode !== new_mode;
-		const needs_brush_tool = tool === "erase" || tool === "draw";
 		const textures_initialized =
 			this.brush_textures?.textures_initialized ?? false;
 
@@ -179,10 +180,7 @@ export class BrushTool implements Tool {
 				Math.round(current_bounds.height) !== Math.round(tex_dims.height);
 		}
 
-		if (
-			needs_brush_tool &&
-			(mode_changed || !textures_initialized || dimensions_changed)
-		) {
+		if (needs_brush_tool && (!textures_initialized || dimensions_changed)) {
 			this.brush_textures?.initialize_textures();
 		}
 

package/shared/core/editor.ts

@@ -74,6 +74,7 @@ export interface ImageEditorContext {
 	resize_canvas: (width: number, height: number) => void;
 	reset: () => void;
 	set_background_image: (image: Sprite) => void;
+	request_render: () => void;
 	pad_bottom: number;
 }
 
@@ -82,6 +83,8 @@ const spring_config = {
 	damping: 0.8
 };
 
+const RENDER_IDLE_TIMEOUT_MS = 500;
+
 interface EditorStatePublic {
 	position: { x: number; y: number };
 	scale: number;
@@ -204,6 +207,15 @@ export class ImageEditor {
 	private overlay_graphics!: Graphics;
 	private pad_bottom: number;
 	private theme_mode: "dark" | "light";
+	private render_idle_remaining = RENDER_IDLE_TIMEOUT_MS;
+	private static readonly WAKE_EVENTS: string[] = [
+		"pointerdown",
+		"pointermove",
+		"pointerup",
+		"pointerenter",
+		"wheel"
+	];
+	private wake_render_loop_bound = this.wake_render_loop.bind(this);
 	constructor(options: ImageEditorOptions) {
 		this.pad_bottom = options.pad_bottom || 0;
 		this.dark = options.dark || false;
@@ -278,7 +290,8 @@ export class ImageEditor {
 			execute_command: this.execute_command.bind(this),
 			resize_canvas: this.resize_canvas.bind(this),
 			reset: this.reset.bind(this),
-			set_background_image: this.set_background_image.bind(this)
+			set_background_image: this.set_background_image.bind(this),
+			request_render: this.wake_render_loop.bind(this)
 		};
 	}
 
@@ -337,17 +350,20 @@ export class ImageEditor {
 			this.dimensions_value = dimensions;
 			this.image_container.width = dimensions.width;
 			this.image_container.height = dimensions.height;
+			this.wake_render_loop();
 		});
 
 		this.scale.subscribe((scale) => {
 			this.scale_value = scale;
+			this.wake_render_loop();
 		});
 
 		this.position.subscribe((position) => {
 			this.position_value = position;
+			this.wake_render_loop();
 		});
 
-		this.app.ticker.add(() => {
+		this.app.ticker.add((ticker) => {
 			this.image_container.scale.set(this.scale_value);
 			this.image_container.position.set(
 				this.position_value.x,
@@ -442,11 +458,28 @@ export class ImageEditor {
 			} else {
 				this.overlay_graphics.clear();
 			}
+
+			this.render_idle_remaining -= ticker.deltaMS;
+			if (this.render_idle_remaining <= 0) {
+				ticker.stop();
+			}
 		});
 
+		for (const event_name of ImageEditor.WAKE_EVENTS) {
+			canvas.addEventListener(event_name, this.wake_render_loop_bound);
+		}
+
+		this.wake_render_loop();
 		this.ready_resolve();
 	}
 
+	private wake_render_loop(): void {
+		this.render_idle_remaining = RENDER_IDLE_TIMEOUT_MS;
+		if (this.app?.ticker && !this.app.ticker.started) {
+			this.app.ticker.start();
+		}
+	}
+
 	private setup_containers(): void {
 		this.image_container = new Container({
 			eventMode: "static",
@@ -542,6 +575,7 @@ export class ImageEditor {
 		if (this.outline_container) {
 			this.outline_container.position.set(app_center_x, app_center_y);
 		}
+		this.wake_render_loop();
 	}
 
 	reset(): void {
@@ -557,6 +591,7 @@ export class ImageEditor {
 		if (brush) {
 			this.set_tool("draw");
 		}
+		this.wake_render_loop();
 	}
 
 	async set_image_properties(properties: {
@@ -647,6 +682,7 @@ export class ImageEditor {
 		for (const tool of this.tools.values()) {
 			tool.set_tool(this.current_tool, this.current_subtool);
 		}
+		this.wake_render_loop();
 	}
 
 	set_subtool(subtool: Subtool): void {
@@ -655,6 +691,7 @@ export class ImageEditor {
 		for (const tool of this.tools.values()) {
 			tool.set_tool(this.current_tool, this.current_subtool);
 		}
+		this.wake_render_loop();
 	}
 
 	set_background_image(image: Sprite): void {
@@ -829,6 +866,7 @@ export class ImageEditor {
 	}
 
 	private notify(event: "change" | "input"): void {
+		this.wake_render_loop();
 		for (const callback of this.event_callbacks.get(event) || []) {
 			callback();
 		}
@@ -837,6 +875,13 @@ export class ImageEditor {
 	destroy(): void {
 		if (!this.app) return;
 
+		const canvas = this.app.canvas as HTMLCanvasElement | undefined;
+		if (canvas) {
+			for (const event_name of ImageEditor.WAKE_EVENTS) {
+				canvas.removeEventListener(event_name, this.wake_render_loop_bound);
+			}
+		}
+
 		this.app?.destroy();
 	}
 
@@ -877,9 +922,11 @@ export class ImageEditor {
 			this.width,
 			this.height
 		);
+		this.wake_render_loop();
 	}
 
 	toggle_layer_visibility(id: string): void {
 		this.layer_manager.toggle_layer_visibility(id);
+		this.wake_render_loop();
 	}
 }

package/shared/resize/resize.ts

@@ -108,6 +108,9 @@ export class ResizeTool implements Tool {
 	private dom_mouseup_handler: ((e: MouseEvent) => void) | null = null;
 	private event_callbacks: Map<string, (() => void)[]> = new Map();
 	private last_scale = 1;
+	private readonly handle_pointer_move_bound =
+		this.handle_pointer_move.bind(this);
+	private readonly handle_pointer_up_bound = this.handle_pointer_up.bind(this);
 
 	private original_state: {
 		width: number;
@@ -223,7 +226,7 @@ export class ResizeTool implements Tool {
 	 * @returns {void}
 	 */
 	cleanup(): void {
-		if (this.resize_ui_container) {
+		if (this.resize_ui_container && this.image_editor_context?.app) {
 			this.image_editor_context.app.stage.removeChild(this.resize_ui_container);
 		}
 		this.cleanup_event_listeners();
@@ -241,10 +244,12 @@ export class ResizeTool implements Tool {
 		this.current_subtool = subtool;
 
 		if (tool === "image" && subtool === "size") {
-			if (this.image_editor_context.background_image) {
-				const storedBorderRegion = (
-					this.image_editor_context.background_image as any
-				).borderRegion;
+			const context = this.image_editor_context;
+			if (!context) return;
+
+			if (context.background_image) {
+				const storedBorderRegion = (context.background_image as any)
+					.borderRegion;
 				if (typeof storedBorderRegion === "number" && storedBorderRegion > 0) {
 					this.borderRegion = storedBorderRegion;
 				}
@@ -252,9 +257,9 @@ export class ResizeTool implements Tool {
 
 			this.show_resize_ui();
 
-			if (this.image_editor_context.background_image) {
-				const bg = this.image_editor_context.background_image;
-				const container = this.image_editor_context.image_container;
+			if (context.background_image) {
+				const bg = context.background_image;
+				const container = context.image_container;
 
 				const bg_width = bg.width;
 				const bg_height = bg.height;
@@ -936,9 +941,9 @@ export class ResizeTool implements Tool {
 	private setup_event_listeners(): void {
 		const stage = this.image_editor_context.app.stage;
 		stage.eventMode = "static";
-		stage.on("pointermove", this.handle_pointer_move.bind(this));
-		stage.on("pointerup", this.handle_pointer_up.bind(this));
-		stage.on("pointerupoutside", this.handle_pointer_up.bind(this));
+		stage.on("pointermove", this.handle_pointer_move_bound);
+		stage.on("pointerup", this.handle_pointer_up_bound);
+		stage.on("pointerupoutside", this.handle_pointer_up_bound);
 
 		this.setup_dom_event_listeners();
 	}
@@ -949,7 +954,10 @@ export class ResizeTool implements Tool {
 	private setup_dom_event_listeners(): void {
 		this.cleanup_dom_event_listeners();
 
-		const canvas = this.image_editor_context.app.canvas;
+		const context = this.image_editor_context;
+		if (!context?.app?.canvas) return;
+
+		const canvas = context.app.canvas;
 
 		this.dom_mousedown_handler = (e: MouseEvent) => {
 			if (this.current_subtool !== "size") return;
@@ -1070,10 +1078,10 @@ export class ResizeTool implements Tool {
 	 * Cleans up DOM event listeners
 	 */
 	private cleanup_dom_event_listeners(): void {
-		const canvas = this.image_editor_context.app.canvas;
+		const canvas = this.image_editor_context?.app?.canvas;
 
 		if (this.dom_mousedown_handler) {
-			canvas.removeEventListener("mousedown", this.dom_mousedown_handler);
+			canvas?.removeEventListener("mousedown", this.dom_mousedown_handler);
 			this.dom_mousedown_handler = null;
 		}
 
@@ -1092,11 +1100,11 @@ export class ResizeTool implements Tool {
 	 * removes event listeners for the resize tool
 	 */
 	private cleanup_event_listeners(): void {
-		const stage = this.image_editor_context.app.stage;
+		const stage = this.image_editor_context?.app?.stage;
 
-		stage.off("pointermove", this.handle_pointer_move.bind(this));
-		stage.off("pointerup", this.handle_pointer_up.bind(this));
-		stage.off("pointerupoutside", this.handle_pointer_up.bind(this));
+		stage?.off("pointermove", this.handle_pointer_move_bound);
+		stage?.off("pointerup", this.handle_pointer_up_bound);
+		stage?.off("pointerupoutside", this.handle_pointer_up_bound);
 
 		this.cleanup_dom_event_listeners();
 	}
@@ -1687,7 +1695,7 @@ export class ResizeTool implements Tool {
 			this.update_resize_ui();
 		}
 
-		if (this.image_editor_context.background_image) {
+		if (this.image_editor_context?.background_image) {
 			const bg = this.image_editor_context.background_image;
 			this.current_cursor = bg.cursor;
 			bg.cursor = "move";
@@ -1705,7 +1713,7 @@ export class ResizeTool implements Tool {
 			this.resize_ui_container.visible = false;
 		}
 
-		if (this.image_editor_context.background_image) {
+		if (this.image_editor_context?.background_image) {
 			const bg = this.image_editor_context.background_image;
 			bg.cursor = this.current_cursor;
 		}