@gradio/imageeditor 0.19.0 → 0.20.1

package/dist/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/dist/shared/brush/BrushOptions.svelte.d.ts

@@ -1,22 +1,9 @@
 import { type Brush, type ColorTuple } from "./types";
 import type { ColorInput } from "tinycolor2";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const BrushOptions: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     colors: (ColorInput | ColorTuple)[];
     selected_color: any;
-    color_mode?: Brush["color_mode"] | undefined;
+    color_mode?: Brush["color_mode"];
     recent_colors?: (ColorInput | ColorTuple)[];
     selected_size: number;
     selected_opacity: number;
@@ -24,10 +11,8 @@ declare const BrushOptions: $$__sveltets_2_IsomorphicComponent<{
     show_size: boolean;
     mode?: "brush" | "eraser";
     preview?: boolean;
-}, {
-    click_outside: CustomEvent<void>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type BrushOptions = InstanceType<typeof BrushOptions>;
+    onclick_outside?: (event: MouseEvent) => void;
+};
+declare const BrushOptions: import("svelte").Component<$$ComponentProps, {}, "selected_color" | "selected_size" | "selected_opacity" | "preview">;
+type BrushOptions = ReturnType<typeof BrushOptions>;
 export default BrushOptions;

package/dist/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>

package/dist/shared/brush/BrushSize.svelte.d.ts

@@ -1,25 +1,10 @@
 import { BrushSize } from "@gradio/icons";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const BrushSize: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     selected_size: number;
     min: number;
     max: number;
-}, {
-    click_outside: CustomEvent<void>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type BrushSize = InstanceType<typeof BrushSize>;
+    onclick_outside?: (event: MouseEvent) => void;
+};
+declare const BrushSize: import("svelte").Component<$$ComponentProps, {}, "selected_size">;
+type BrushSize = ReturnType<typeof BrushSize>;
 export default BrushSize;

package/dist/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/dist/shared/brush/ColorField.svelte.d.ts

@@ -1,25 +1,9 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ColorField: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     color: string;
     current_mode?: "hex" | "rgb" | "hsl";
-}, {
-    selected: CustomEvent<string>;
-    close: CustomEvent<void>;
-    add_color: CustomEvent<void>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ColorField = InstanceType<typeof ColorField>;
+    onselected?: (color: string) => void;
+    onclose?: () => void;
+};
+declare const ColorField: import("svelte").Component<$$ComponentProps, {}, "current_mode">;
+type ColorField = ReturnType<typeof ColorField>;
 export default ColorField;

package/dist/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/dist/shared/brush/ColorPicker.svelte.d.ts

@@ -1,21 +1,7 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ColorPicker: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     color?: string;
     opacity?: number;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ColorPicker = InstanceType<typeof ColorPicker>;
+};
+declare const ColorPicker: import("svelte").Component<$$ComponentProps, {}, "color" | "opacity">;
+type ColorPicker = ReturnType<typeof ColorPicker>;
 export default ColorPicker;

package/dist/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/dist/shared/brush/ColorSwatch.svelte.d.ts

@@ -1,38 +1,24 @@
 import type { ColorTuple } from "./types";
 import type { ColorInput } from "tinycolor2";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ColorSwatch: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     selected_color: string;
     colors: (ColorInput | ColorTuple)[];
     user_colors?: (ColorInput | ColorTuple)[] | null;
     show_empty?: boolean;
     current_mode?: "hex" | "rgb" | "hsl";
     color_picker?: boolean;
-}, {
-    select: CustomEvent<{
+    onselect?: (value: {
         index: number | null;
         color: string | null;
         opacity?: number;
-    }>;
-    edit: CustomEvent<{
+    }) => void;
+    onedit?: (value: {
         index: number;
         color: string | null;
-    }>;
-    add_color: CustomEvent<void>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ColorSwatch = InstanceType<typeof ColorSwatch>;
+        opacity?: number;
+    }) => void;
+    onadd_color?: () => void;
+};
+declare const ColorSwatch: import("svelte").Component<$$ComponentProps, {}, "color_picker">;
+type ColorSwatch = ReturnType<typeof ColorSwatch>;
 export default ColorSwatch;

package/dist/shared/brush/brush.js

@@ -115,18 +115,18 @@ export class BrushTool {
      * @param {Subtool} subtool - The current subtool.
      */
     set_tool(tool, subtool) {
-        this.current_tool = tool;
-        this.current_subtool = subtool;
-        if (this.current_tool !== "erase" && this.current_tool !== "draw") {
+        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.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;
         let dimensions_changed = false;
         if (this.brush_textures && textures_initialized) {
@@ -136,8 +136,7 @@ export class BrushTool {
                 Math.round(current_bounds.width) !== Math.round(tex_dims.width) ||
                     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();
         }
         if (this.state.mode !== new_mode) {