@gradio/imageeditor 0.19.0 → 0.20.0

package/shared/Layers.svelte

@@ -10,45 +10,53 @@
 		VisibilityOff
 	} from "@gradio/icons";
 	import { IconButton } from "@gradio/atoms";
-	import { createEventDispatcher } from "svelte";
 	import type { Writable } from "svelte/store";
 
-	const dispatch = createEventDispatcher<{
-		new_layer: void;
-		change_layer: string;
-		move_layer: { id: string; direction: "up" | "down" };
-		delete_layer: string;
-		toggle_layer_visibility: string;
-	}>();
-
-	export let layers: Writable<{
-		active_layer: string;
-		layers: {
-			name: string;
-			id: string;
-			user_created: boolean;
-			visible: boolean;
-		}[];
-	}>;
-	export let enable_additional_layers = true;
-	export let enable_layers = true;
-	export let show_layers = false;
+	let {
+		layers,
+		enable_additional_layers = true,
+		enable_layers = true,
+		show_layers = false,
+		onnew_layer,
+		onchange_layer,
+		onmove_layer,
+		ondelete_layer,
+		ontoggle_layer_visibility
+	}: {
+		layers: Writable<{
+			active_layer: string;
+			layers: {
+				name: string;
+				id: string;
+				user_created: boolean;
+				visible: boolean;
+			}[];
+		}>;
+		enable_additional_layers?: boolean;
+		enable_layers?: boolean;
+		show_layers?: boolean;
+		onnew_layer?: () => void;
+		onchange_layer?: (id: string) => void;
+		onmove_layer?: (value: { id: string; direction: "up" | "down" }) => void;
+		ondelete_layer?: (id: string) => void;
+		ontoggle_layer_visibility?: (id: string) => void;
+	} = $props();
 
 	function new_layer(): void {
-		dispatch("new_layer");
+		onnew_layer?.();
 	}
 
 	function change_layer(id: string): void {
-		dispatch("change_layer", id);
+		onchange_layer?.(id);
 		show_layers = false;
 	}
 
 	function move_layer(id: string, direction: "up" | "down"): void {
-		dispatch("move_layer", { id, direction });
+		onmove_layer?.({ id, direction });
 	}
 
 	function delete_layer(id: string): void {
-		dispatch("delete_layer", id);
+		ondelete_layer?.(id);
 	}
 </script>
 
@@ -61,7 +69,10 @@
 		<button
 			class="layer-title-button"
 			aria-label="Show Layers"
-			on:click|stopPropagation={() => (show_layers = !show_layers)}
+			onclick={(event) => {
+				event.stopPropagation();
+				show_layers = !show_layers;
+			}}
 		>
 			{show_layers
 				? "Layers"
@@ -78,7 +89,7 @@
 								size="small"
 								onclick={(e) => {
 									e.stopPropagation();
-									dispatch("toggle_layer_visibility", id);
+									ontoggle_layer_visibility?.(id);
 								}}
 							/>
 						{:else}
@@ -87,14 +98,17 @@
 								size="small"
 								onclick={(e) => {
 									e.stopPropagation();
-									dispatch("toggle_layer_visibility", id);
+									ontoggle_layer_visibility?.(id);
 								}}
 							/>
 						{/if}
 						<button
 							class:selected_layer={$layers.active_layer === id}
 							aria-label={`layer-${i + 1}`}
-							on:click|stopPropagation={() => change_layer(id)}>{name}</button
+							onclick={(event) => {
+								event.stopPropagation();
+								change_layer(id);
+							}}>{name}</button
 						>
 						{#if $layers.layers.length > 1}
 							<div>

package/shared/Resize.svelte

@@ -12,24 +12,30 @@
 </script>
 
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
 	import type { Spring } from "svelte/motion";
 	import Anchor from "./Anchor.svelte";
 
-	export let dimensions: Spring<{ width: number; height: number }>;
-
-	const dispatch = createEventDispatcher<{
-		change: { anchor: Position; scale: boolean; width: number; height: number };
-	}>();
-
-	let selected_anchor: Position = "center";
-	let scale = false;
-
-	let new_width = $dimensions?.width;
-	let new_height = $dimensions?.height;
+	let {
+		dimensions,
+		onchange
+	}: {
+		dimensions: Spring<{ width: number; height: number }>;
+		onchange?: (value: {
+			anchor: Position;
+			scale: boolean;
+			width: number;
+			height: number;
+		}) => void;
+	} = $props();
+
+	let selected_anchor = $state<Position>("center");
+	let scale = $state(false);
+
+	let new_width = $state($dimensions?.width);
+	let new_height = $state($dimensions?.height);
 
 	function handle_click(): void {
-		dispatch("change", {
+		onchange?.({
 			anchor: selected_anchor,
 			scale,
 			width: new_width,
@@ -44,7 +50,7 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<div class="wrap" on:click|stopPropagation>
+<div class="wrap" onclick={(event) => event.stopPropagation()}>
 	<div class="size-wrap">
 		<div class="size-input">
 			<label for="width">Width</label><input
@@ -86,9 +92,9 @@
 		</div>
 	</div>
 	<div class="anchor-wrap">
-		<Anchor on:position={(e) => set_anchor(e.detail)} />
+		<Anchor onposition={(position) => set_anchor(position)} />
 	</div>
-	<button class="apply-button" on:click={() => handle_click()}
+	<button class="apply-button" onclick={() => handle_click()}
 		>Resize Canvas</button
 	>
 </div>

package/shared/SecondaryToolbar.svelte

@@ -2,19 +2,35 @@
 	import Layers from "./Layers.svelte";
 	import type { Writable } from "svelte/store";
 
-	export let layers: Writable<{
-		active_layer: string;
-		layers: {
-			name: string;
-			id: string;
-			user_created: boolean;
-			visible: boolean;
-		}[];
-	}>;
-
-	export let enable_additional_layers = true;
-	export let enable_layers = true;
-	export let show_layers = false;
+	let {
+		layers,
+		enable_additional_layers = true,
+		enable_layers = true,
+		show_layers = false,
+		onnew_layer,
+		onchange_layer,
+		onmove_layer,
+		ondelete_layer,
+		ontoggle_layer_visibility
+	}: {
+		layers: Writable<{
+			active_layer: string;
+			layers: {
+				name: string;
+				id: string;
+				user_created: boolean;
+				visible: boolean;
+			}[];
+		}>;
+		enable_additional_layers?: boolean;
+		enable_layers?: boolean;
+		show_layers?: boolean;
+		onnew_layer?: () => void;
+		onchange_layer?: (id: string) => void;
+		onmove_layer?: (value: { id: string; direction: "up" | "down" }) => void;
+		ondelete_layer?: (id: string) => void;
+		ontoggle_layer_visibility?: (id: string) => void;
+	} = $props();
 </script>
 
 <div class="toolbar-wrap-wrap">
@@ -25,11 +41,11 @@
 				{enable_additional_layers}
 				{enable_layers}
 				{show_layers}
-				on:new_layer
-				on:change_layer
-				on:move_layer
-				on:delete_layer
-				on:toggle_layer_visibility
+				{onnew_layer}
+				{onchange_layer}
+				{onmove_layer}
+				{ondelete_layer}
+				{ontoggle_layer_visibility}
 			/>
 		{/if}
 	</div>

package/shared/Toolbar.svelte

@@ -12,17 +12,16 @@
 </script>
 
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
 	import IconButton from "./IconButton.svelte";
 	import {
 		Image,
 		Brush,
+		BrushSize,
 		Erase,
 		Crop,
 		Upload,
 		ImagePaste,
 		Webcam,
-		Circle,
 		Resize,
 		ColorPickerSolid
 	} from "@gradio/icons";
@@ -32,66 +31,46 @@
 		type Brush as BrushType,
 		type Eraser as EraserType
 	} from "./brush/types";
-	import tinycolor from "tinycolor2";
 
-	export let tool: Tool = "image";
-	export let subtool: Subtool = null;
+	let {
+		tool = "image",
+		subtool = null,
+		background = false,
+		brush_options,
+		selected_size = $bindable(25),
+		eraser_options,
+		selected_eraser_size = $bindable(25),
+		selected_color = $bindable(),
+		selected_opacity = $bindable(1),
+		preview = $bindable(),
+		show_brush_color = false,
+		show_brush_size = false,
+		show_eraser_size = false,
+		sources,
+		transforms,
+		ontool_change,
+		onsubtool_change
+	}: {
+		tool?: Tool;
+		subtool?: Subtool;
+		background?: boolean;
+		brush_options: BrushType | false;
+		selected_size?: number;
+		eraser_options: EraserType | false;
+		selected_eraser_size?: number;
+		selected_color?: any;
+		selected_opacity?: number;
+		preview?: boolean;
+		show_brush_color?: boolean;
+		show_brush_size?: boolean;
+		show_eraser_size?: boolean;
+		sources: Source[];
+		transforms: Transform[];
+		ontool_change?: (value: { tool: Tool }) => void;
+		onsubtool_change?: (value: { tool: Tool; subtool: Subtool }) => void;
+	} = $props();
 
-	export let background = false;
-	export let brush_options: BrushType | false;
-	export let selected_size =
-		brush_options && typeof brush_options.default_size === "number"
-			? brush_options.default_size
-			: 25;
-	export let eraser_options: EraserType | false;
-	export let selected_eraser_size =
-		eraser_options && typeof eraser_options.default_size === "number"
-			? eraser_options.default_size
-			: 25;
-
-	// Handle default_color including potential color-opacity tuple
-	export let selected_color =
-		brush_options &&
-		(() => {
-			const default_color = brush_options.default_color;
-			if (Array.isArray(default_color)) {
-				return default_color[0];
-			}
-			return default_color;
-		})();
-
-	// Set default opacity based on default_color if it's a tuple
-	export let selected_opacity =
-		brush_options &&
-		(() => {
-			const default_color = brush_options.default_color;
-			if (Array.isArray(default_color)) {
-				return default_color[1];
-			}
-			// Check if color string has opacity
-			const color = tinycolor(default_color);
-			if (color.getAlpha() < 1) {
-				return color.getAlpha();
-			}
-			return 1;
-		})();
-
-	export let preview = false;
-	export let show_brush_color = false;
-	export let show_brush_size = false;
-	export let show_eraser_size = false;
-	export let sources: Source[];
-	export let transforms: Transform[];
-	let recent_colors: string[] = [];
-
-	let enable_layers = true;
-	const dispatch = createEventDispatcher<{
-		tool_change: { tool: Tool };
-		subtool_change: {
-			tool: Tool;
-			subtool: Subtool;
-		};
-	}>();
+	let recent_colors = $state<string[]>([]);
 
 	/**
 	 * Handles tool click events
@@ -99,7 +78,7 @@
 	 */
 	function handle_tool_click(e: Event, _tool: Tool): void {
 		e.stopPropagation();
-		dispatch("tool_change", { tool: _tool });
+		ontool_change?.({ tool: _tool });
 	}
 
 	/**
@@ -110,23 +89,28 @@
 	function handle_subtool_click(e: Event, _subtool: typeof subtool): void {
 		e.stopPropagation();
 
-		dispatch("subtool_change", { tool, subtool: _subtool });
+		onsubtool_change?.({ tool, subtool: _subtool });
 	}
 
-	$: show_brush_size = tool === "draw" && subtool === "size";
-	$: show_brush_color = tool === "draw" && subtool === "color";
-	$: show_eraser_size = tool === "erase" && subtool === "size";
+	$effect(() => {
+		show_brush_size = tool === "draw" && subtool === "size";
+		show_brush_color = tool === "draw" && subtool === "color";
+		show_eraser_size = tool === "erase" && subtool === "size";
+	});
 
-	$: can_crop = transforms.includes("crop");
-	$: can_resize = transforms.includes("resize");
-	$: can_upload = sources.includes("upload");
-	$: can_webcam = sources.includes("webcam");
-	$: can_paste = sources.includes("clipboard");
+	let can_crop = $derived(transforms.includes("crop"));
+	let can_resize = $derived(transforms.includes("resize"));
+	let can_upload = $derived(sources.includes("upload"));
+	let can_webcam = $derived(sources.includes("webcam"));
+	let can_paste = $derived(sources.includes("clipboard"));
+	let can_edit_image = $derived(
+		sources.length > 0 || (background && transforms.length > 0)
+	);
 </script>
 
-<div class="toolbar-wrap">
+<div class="toolbar-wrap" onclick={(e) => e.stopPropagation()}>
 	<div class="half-container">
-		{#if sources.length > 0}
+		{#if can_edit_image}
 			<IconButton
 				Icon={Image}
 				label="Image"
@@ -244,7 +228,7 @@
 				offset={0}
 			/>
 			<IconButton
-				Icon={Circle}
+				Icon={BrushSize}
 				label="Brush Size"
 				onclick={(e) => handle_subtool_click(e, "size")}
 				highlight={subtool === "size"}
@@ -265,7 +249,7 @@
 					bind:selected_color
 					bind:selected_opacity
 					bind:preview
-					on:click_outside={(e) => {
+					onclick_outside={(e) => {
 						e.stopPropagation();
 						preview = false;
 						show_brush_color = false;
@@ -279,7 +263,7 @@
 
 		{#if tool === "erase" && eraser_options}
 			<IconButton
-				Icon={Circle}
+				Icon={BrushSize}
 				label="Eraser Size"
 				onclick={(e) => handle_subtool_click(e, "size")}
 				highlight={subtool === "size"}
@@ -298,7 +282,7 @@
 				bind:selected_color
 				bind:selected_opacity
 				bind:preview
-				on:click_outside={(e) => {
+				onclick_outside={(e) => {
 					e.stopPropagation();
 					preview = false;
 					show_eraser_size = false;

package/shared/brush/BrushOptions.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { createEventDispatcher, tick } from "svelte";
 	import { click_outside } from "../utils/events";
 
 	import { type Brush, type ColorTuple } from "./types";
@@ -9,23 +8,35 @@
 	import BrushSize from "./BrushSize.svelte";
 	import type { ColorInput } from "tinycolor2";
 
-	export let colors: (ColorInput | ColorTuple)[];
-	export let selected_color: any;
-	export let color_mode: Brush["color_mode"] | undefined = undefined;
-	export let recent_colors: (ColorInput | ColorTuple)[] = [];
-	export let selected_size: number;
-	export let selected_opacity: number;
-	export let show_swatch: boolean;
-	export let show_size: boolean;
-	export let mode: "brush" | "eraser" = "brush";
-
-	let color_picker = false;
-	let current_mode: "hex" | "rgb" | "hsl" = "hex";
-	let editing_index: number | null = null;
-
-	const dispatch = createEventDispatcher<{
-		click_outside: void;
-	}>();
+	let {
+		colors,
+		selected_color = $bindable(),
+		color_mode = undefined,
+		recent_colors = [],
+		selected_size = $bindable(),
+		selected_opacity = $bindable(),
+		show_swatch,
+		show_size,
+		mode = "brush",
+		preview = $bindable(),
+		onclick_outside = () => {}
+	}: {
+		colors: (ColorInput | ColorTuple)[];
+		selected_color: any;
+		color_mode?: Brush["color_mode"];
+		recent_colors?: (ColorInput | ColorTuple)[];
+		selected_size: number;
+		selected_opacity: number;
+		show_swatch: boolean;
+		show_size: boolean;
+		mode?: "brush" | "eraser";
+		preview?: boolean;
+		onclick_outside?: (event: MouseEvent) => void;
+	} = $props();
+
+	let color_picker = $state(false);
+	let current_mode = $state<"hex" | "rgb" | "hsl">("hex");
+	let editing_index = $state<number | null>(null);
 
 	function handle_color_selection(
 		{
@@ -61,9 +72,11 @@
 		recent_colors[editing_index] = color;
 	}
 
-	$: handle_color_change(selected_color);
-	let width = 0;
-	let height = 0;
+	$effect(() => {
+		handle_color_change(selected_color);
+	});
+	let width = $state(0);
+	let height = $state(0);
 
 	function debounce(
 		func: (...args: any[]) => void,
@@ -76,7 +89,6 @@
 		};
 	}
 
-	export let preview = false;
 	function handle_preview(): void {
 		if (!preview) {
 			preview = true;
@@ -92,7 +104,15 @@
 
 	const debounced_close_preview = debounce(handle_close_preview, 1000);
 
-	$: (selected_size, selected_color, handle_preview());
+	$effect(() => {
+		if (!show_size) {
+			preview = false;
+			return;
+		}
+
+		selected_size;
+		handle_preview();
+	});
 
 	function handle_select(color: string): void {
 		selected_color = color;
@@ -124,7 +144,7 @@
 <div
 	class="wrap"
 	class:padded={!color_picker}
-	use:click_outside={() => dispatch("click_outside")}
+	use:click_outside={onclick_outside}
 	class:color_picker
 	class:size_picker={show_size && mode === "brush"}
 	class:eraser_picker={mode === "eraser"}
@@ -138,8 +158,8 @@
 			<ColorField
 				bind:current_mode
 				color={selected_color}
-				on:close={() => (color_picker = false)}
-				on:selected={({ detail }) => handle_select(detail)}
+				onclose={() => (color_picker = false)}
+				onselected={(detail) => handle_select(detail)}
 			/>
 		{/if}
 	{/if}
@@ -147,12 +167,12 @@
 		<ColorSwatch
 			bind:color_picker
 			{colors}
-			on:select={({ detail }) => handle_color_selection(detail, "core")}
-			on:edit={({ detail }) => handle_color_selection(detail, "user")}
+			onselect={(detail) => handle_color_selection(detail, "core")}
+			onedit={(detail) => handle_color_selection(detail, "user")}
 			user_colors={color_mode === "defaults" ? recent_colors : null}
 			{selected_color}
 			{current_mode}
-			on:add_color={handle_add_color}
+			onadd_color={handle_add_color}
 		/>
 	{/if}
 

package/shared/brush/BrushSize.svelte

@@ -1,18 +1,21 @@
 <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;
-	export let max: number;
-
-	const dispatch = createEventDispatcher<{
-		click_outside: void;
-	}>();
+	let {
+		selected_size = $bindable(),
+		min,
+		max,
+		onclick_outside = () => {}
+	}: {
+		selected_size: number;
+		min: number;
+		max: number;
+		onclick_outside?: (event: MouseEvent) => void;
+	} = $props();
 </script>
 
-<div class="wrap" use:click_outside={() => dispatch("click_outside")}>
+<div class="wrap" use:click_outside={onclick_outside}>
 	<span>
 		<BrushSize />
 	</span>