@gradio/imageeditor 0.19.0 → 0.20.0

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

@@ -1,19 +1,6 @@
 import { Layers } from "@gradio/icons";
 import type { Writable } from "svelte/store";
-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 Layers: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     layers: Writable<{
         active_layer: string;
         layers: {
@@ -26,17 +13,15 @@ declare const Layers: $$__sveltets_2_IsomorphicComponent<{
     enable_additional_layers?: boolean;
     enable_layers?: boolean;
     show_layers?: boolean;
-}, {
-    new_layer: CustomEvent<void>;
-    change_layer: CustomEvent<string>;
-    move_layer: CustomEvent<{
+    onnew_layer?: () => void;
+    onchange_layer?: (id: string) => void;
+    onmove_layer?: (value: {
         id: string;
         direction: "up" | "down";
-    }>;
-    delete_layer: CustomEvent<string>;
-    toggle_layer_visibility: CustomEvent<string>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Layers = InstanceType<typeof Layers>;
+    }) => void;
+    ondelete_layer?: (id: string) => void;
+    ontoggle_layer_visibility?: (id: string) => void;
+};
+declare const Layers: import("svelte").Component<$$ComponentProps, {}, "">;
+type Layers = ReturnType<typeof Layers>;
 export default Layers;

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

@@ -1,33 +1,17 @@
 export type Position = "top-left" | "top" | "top-right" | "left" | "center" | "right" | "bottom-left" | "bottom" | "bottom-right";
 import type { Spring } from "svelte/motion";
-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 Resize: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     dimensions: Spring<{
         width: number;
         height: number;
     }>;
-}, {
-    click: PointerEvent;
-    change: CustomEvent<{
+    onchange?: (value: {
         anchor: Position;
         scale: boolean;
         width: number;
         height: number;
-    }>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Resize = InstanceType<typeof Resize>;
+    }) => void;
+};
+declare const Resize: import("svelte").Component<$$ComponentProps, {}, "">;
+type Resize = ReturnType<typeof Resize>;
 export default Resize;

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

@@ -1,18 +1,5 @@
 import type { Writable } from "svelte/store";
-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 SecondaryToolbar: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     layers: Writable<{
         active_layer: string;
         layers: {
@@ -25,17 +12,15 @@ declare const SecondaryToolbar: $$__sveltets_2_IsomorphicComponent<{
     enable_additional_layers?: boolean;
     enable_layers?: boolean;
     show_layers?: boolean;
-}, {
-    new_layer: CustomEvent<void>;
-    change_layer: CustomEvent<string>;
-    move_layer: CustomEvent<{
+    onnew_layer?: () => void;
+    onchange_layer?: (id: string) => void;
+    onmove_layer?: (value: {
         id: string;
         direction: "up" | "down";
-    }>;
-    delete_layer: CustomEvent<string>;
-    toggle_layer_visibility: CustomEvent<string>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type SecondaryToolbar = InstanceType<typeof SecondaryToolbar>;
+    }) => void;
+    ondelete_layer?: (id: string) => void;
+    ontoggle_layer_visibility?: (id: string) => void;
+};
+declare const SecondaryToolbar: import("svelte").Component<$$ComponentProps, {}, "">;
+type SecondaryToolbar = ReturnType<typeof SecondaryToolbar>;
 export default SecondaryToolbar;

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

@@ -2,20 +2,7 @@ export type Tool = "image" | "draw" | "erase" | "pan";
 export type Subtool = "upload" | "paste" | "webcam" | "color" | "size" | "crop" | "remove_background" | null;
 import type { Source, Transform } from "./types";
 import { type Brush as BrushType, type Eraser as EraserType } from "./brush/types";
-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 Toolbar: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     tool?: Tool;
     subtool?: Subtool;
     background?: boolean;
@@ -24,23 +11,21 @@ declare const Toolbar: $$__sveltets_2_IsomorphicComponent<{
     eraser_options: EraserType | false;
     selected_eraser_size?: number;
     selected_color?: any;
-    selected_opacity?: any;
+    selected_opacity?: number;
     preview?: boolean;
     show_brush_color?: boolean;
     show_brush_size?: boolean;
     show_eraser_size?: boolean;
     sources: Source[];
     transforms: Transform[];
-}, {
-    tool_change: CustomEvent<{
+    ontool_change?: (value: {
         tool: Tool;
-    }>;
-    subtool_change: CustomEvent<{
+    }) => void;
+    onsubtool_change?: (value: {
         tool: Tool;
         subtool: Subtool;
-    }>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Toolbar = InstanceType<typeof Toolbar>;
+    }) => void;
+};
+declare const Toolbar: import("svelte").Component<$$ComponentProps, {}, "selected_color" | "selected_size" | "selected_opacity" | "preview" | "selected_eraser_size">;
+type Toolbar = ReturnType<typeof Toolbar>;
 export default Toolbar;