@gradio/imageeditor 0.19.0 → 0.20.0

package/dist/InteractiveImageEditor.svelte

@@ -13,7 +13,6 @@
 </script>
 
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
 	import { type I18nFormatter } from "@gradio/utils";
 	import { prepare_files, type FileData, type Client } from "@gradio/client";
 	import { type CommandNode } from "./shared/core/commands";
@@ -31,48 +30,82 @@
 		type WebcamOptions
 	} from "./shared/types";
 
-	export let brush: IBrush | false;
-	export let eraser: Eraser | false;
-	export let sources: Source[];
-	export let i18n: I18nFormatter;
-	export let root: string;
-	export let label: string | undefined = undefined;
-	export let show_label: boolean;
-	export let changeable = false;
-	export let theme_mode: "dark" | "light";
-
-	export let layers: FileData[];
-	export let composite: FileData | null;
-	export let background: FileData | null;
-
-	export let layer_options: LayerOptions = {
-		allow_additional_layers: true,
-		layers: [],
-		disabled: false
-	};
-	export let transforms: Transform[];
-	export let accept_blobs: (a: any) => void;
-
-	export let canvas_size: [number, number];
-	export let fixed_canvas = false;
-	export let realtime = false;
-	export let upload: Client["upload"];
-	export let is_dragging: boolean;
-	export let placeholder: string | undefined = undefined;
-	export let border_region: number;
-	export let full_history: CommandNode | null = null;
-	export let webcam_options: WebcamOptions = { mirror: true, constraints: {} };
-	export let show_download_button = false;
-
-	const dispatch = createEventDispatcher<{
-		clear?: never;
-		upload?: never;
-		change?: never;
-		receive_null?: never;
-	}>();
+	let {
+		brush,
+		eraser,
+		sources,
+		i18n,
+		root,
+		label = undefined,
+		show_label,
+		changeable = false,
+		theme_mode,
+		layers,
+		composite,
+		background,
+		layer_options = {
+			allow_additional_layers: true,
+			layers: [],
+			disabled: false
+		},
+		transforms,
+		accept_blobs,
+		canvas_size,
+		fixed_canvas = false,
+		realtime = false,
+		upload,
+		is_dragging = $bindable(),
+		placeholder = undefined,
+		border_region,
+		full_history = $bindable(null),
+		webcam_options = { mirror: true, constraints: {} },
+		show_download_button = false,
+		image_id = $bindable(null),
+		onclear,
+		onupload,
+		onchange,
+		oninput,
+		onsave,
+		onreceive_null,
+		ondownload_error
+	}: {
+		brush: IBrush | false;
+		eraser: Eraser | false;
+		sources: Source[];
+		i18n: I18nFormatter;
+		root: string;
+		label?: string;
+		show_label: boolean;
+		changeable?: boolean;
+		theme_mode: "dark" | "light";
+		layers: FileData[];
+		composite: FileData | null;
+		background: FileData | null;
+		layer_options?: LayerOptions;
+		transforms: Transform[];
+		accept_blobs: (a: any) => void;
+		canvas_size: [number, number];
+		fixed_canvas?: boolean;
+		realtime?: boolean;
+		upload: Client["upload"];
+		is_dragging?: boolean;
+		placeholder?: string;
+		border_region: number;
+		full_history?: CommandNode | null;
+		webcam_options?: WebcamOptions;
+		show_download_button?: boolean;
+		image_id?: null | string;
+		onclear?: () => void;
+		onupload?: () => void;
+		onchange?: () => void;
+		oninput?: () => void;
+		onsave?: () => void;
+		onreceive_null?: () => void;
+		ondownload_error?: (error: string) => void;
+	} = $props();
 
 	let editor: ImageEditor;
-	let has_drawn = false;
+	let has_drawn = $state(false);
 
 	function is_not_null(o: Blob | null): o is Blob {
 		return !!o;
@@ -82,7 +115,9 @@
 		return !!o;
 	}
 
-	$: if (background_image) dispatch("upload");
+	$effect(() => {
+		if (background_image) onupload?.();
+	});
 
 	export async function get_data(): Promise<ImageBlobs> {
 		let blobs;
@@ -131,16 +166,16 @@
 		if (!editor) return;
 		if (value == null) {
 			editor.handle_remove();
-			dispatch("receive_null");
+			onreceive_null?.();
 		}
 	}
 
-	$: handle_value({ layers, composite, background });
-
-	let background_image = false;
-	let can_undo: boolean;
+	$effect(() => {
+		handle_value({ layers, composite, background });
+	});
 
-	export let image_id: null | string = null;
+	let background_image = $state(false);
+	let can_undo = $state(false);
 
 	type BinaryImages = [string, string, File, number | null][];
 
@@ -148,9 +183,9 @@
 		return new Promise((resolve) => setTimeout(() => resolve(), 30));
 	}
 
-	let uploading = false;
-	let pending = false;
-	async function handle_change(e: CustomEvent<Blob | any>): Promise<void> {
+	let uploading = $state(false);
+	let pending = $state(false);
+	async function handle_change(): Promise<void> {
 		if (!realtime) return;
 		if (uploading) {
 			pending = true;
@@ -193,19 +228,23 @@
 			})
 		);
 		image_id = id;
-		dispatch("change");
+		onchange?.();
 		await nextframe();
 		uploading = false;
 		if (pending) {
 			pending = false;
 			uploading = false;
-			handle_change(e);
+			handle_change();
 		}
 	}
 
-	$: [heading, paragraph] = placeholder ? inject(placeholder) : [false, false];
+	let placeholder_parts = $derived(
+		placeholder ? inject(placeholder) : [false, false]
+	);
+	let heading = $derived(placeholder_parts[0]);
+	let paragraph = $derived(placeholder_parts[1]);
 
-	let current_tool: ToolbarTool;
+	let current_tool = $state<ToolbarTool>("image");
 </script>
 
 <BlockLabel
@@ -218,15 +257,14 @@
 	{composite}
 	{layers}
 	{background}
-	on:history
 	{canvas_size}
 	bind:this={editor}
 	{changeable}
-	on:save
-	on:input
-	on:change={handle_change}
-	on:clear={() => dispatch("clear")}
-	on:download_error
+	{onsave}
+	{oninput}
+	onchange={handle_change}
+	onclear={() => onclear?.()}
+	{ondownload_error}
 	{sources}
 	bind:background_image
 	bind:current_tool

package/dist/InteractiveImageEditor.svelte.d.ts

@@ -13,26 +13,13 @@ import { type FileData, type Client } from "@gradio/client";
 import { type CommandNode } from "./shared/core/commands";
 import { type Brush as IBrush, type Eraser } from "./shared/brush/types";
 import { type LayerOptions, type Transform, type Source, type WebcamOptions } from "./shared/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 InteractiveImageEditor: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     brush: IBrush | false;
     eraser: Eraser | false;
     sources: Source[];
     i18n: I18nFormatter;
     root: string;
-    label?: string | undefined;
+    label?: string;
     show_label: boolean;
     changeable?: boolean;
     theme_mode: "dark" | "light";
@@ -46,27 +33,23 @@ declare const InteractiveImageEditor: $$__sveltets_2_IsomorphicComponent<{
     fixed_canvas?: boolean;
     realtime?: boolean;
     upload: Client["upload"];
-    is_dragging: boolean;
-    placeholder?: string | undefined;
+    is_dragging?: boolean;
+    placeholder?: string;
     border_region: number;
     full_history?: CommandNode | null;
     webcam_options?: WebcamOptions;
     show_download_button?: boolean;
-    get_data?: () => Promise<ImageBlobs>;
     image_id?: null | string;
-}, {
-    history: any;
-    save: any;
-    input: any;
-    download_error: any;
-    clear?: CustomEvent<undefined> | undefined;
-    upload?: CustomEvent<undefined> | undefined;
-    change?: CustomEvent<undefined> | undefined;
-    receive_null?: CustomEvent<undefined> | undefined;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
+    onclear?: () => void;
+    onupload?: () => void;
+    onchange?: () => void;
+    oninput?: () => void;
+    onsave?: () => void;
+    onreceive_null?: () => void;
+    ondownload_error?: (error: string) => void;
+};
+declare const InteractiveImageEditor: import("svelte").Component<$$ComponentProps, {
     get_data: () => Promise<ImageBlobs>;
-}, string>;
-type InteractiveImageEditor = InstanceType<typeof InteractiveImageEditor>;
+}, "is_dragging" | "full_history" | "image_id">;
+type InteractiveImageEditor = ReturnType<typeof InteractiveImageEditor>;
 export default InteractiveImageEditor;

package/dist/shared/Anchor.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { spring } from "svelte/motion";
 	import { Image } from "@gradio/icons";
-	import { onMount, createEventDispatcher } from "svelte";
+	import { onMount } from "svelte";
 
 	const positions = [
 		"top-left",
@@ -14,9 +14,11 @@
 		"bottom",
 		"bottom-right"
 	] as const;
-	const dispatch = createEventDispatcher<{
-		position: (typeof positions)[number];
-	}>();
+	let {
+		onposition
+	}: {
+		onposition?: (position: (typeof positions)[number]) => void;
+	} = $props();
 
 	const spring_opt = {
 		stiffness: 0.1,
@@ -35,8 +37,8 @@
 	};
 	const arrow_spring = spring<Arrow[]>([], spring_opt);
 
-	let last_i = 0;
-	let expanded = true;
+	let last_i = $state(0);
+	let expanded = $state(true);
 	const box_size = (120 - 5 * 2) / 3;
 
 	async function handle_box_hover(i: number): Promise<void> {
@@ -49,7 +51,7 @@
 		dimensions.set(init);
 	}
 
-	let last_pos = 0;
+	let last_pos = $state(0);
 	async function handle_box_click(i: number, stagger = false): Promise<void> {
 		if (expanded && stagger) return;
 
@@ -77,7 +79,7 @@
 		dimensions.set([120 + 10, 120 + 10]);
 		arrow_spring.set(eventual_arrows);
 
-		dispatch("position", positions[i]);
+		onposition?.(positions[i]);
 	}
 
 	function get_valid_offsets(anchorPoint: {
@@ -215,14 +217,14 @@
 		class="box-wrap"
 		role="grid"
 		tabindex="0"
-		on:mouseleave={() => handle_box_click(last_pos, true)}
+		onmouseleave={() => handle_box_click(last_pos, true)}
 	>
 		{#each { length: 9 } as _, i}
 			<button
 				class="box"
 				class:active-box={last_pos === i}
-				on:mouseenter={() => handle_box_hover(i)}
-				on:click={() => handle_box_click(i)}
+				onmouseenter={() => handle_box_hover(i)}
+				onclick={() => handle_box_click(i)}
 			>
 				<span class:active={last_pos === i} class="icon-wrap">
 					<Image />

package/dist/shared/Anchor.svelte.d.ts

@@ -1,20 +1,5 @@
-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: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Anchor: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    position: CustomEvent<"center" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top" | "bottom">;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Anchor = InstanceType<typeof Anchor>;
+declare const Anchor: import("svelte").Component<{
+    onposition?: (position: "center" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top" | "bottom") => void;
+}, {}, "">;
+type Anchor = ReturnType<typeof Anchor>;
 export default Anchor;

package/dist/shared/Controls.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
 	import { IconButton, IconButtonWrapper } from "@gradio/atoms";
 	import {
 		Check,
@@ -11,30 +10,45 @@
 		Undo,
 		Redo
 	} from "@gradio/icons";
-	import type { Writable } from "svelte/store";
-
-	export let can_save = false;
-	export let changeable = false;
-	export let current_zoom = 1;
-	export let tool: string;
-	export let min_zoom = true;
-	export let enable_download = false;
-	export let can_undo: boolean;
-	export let can_redo: boolean;
-
-	const dispatch = createEventDispatcher<{
-		remove_image: void;
-		undo: void;
-		redo: void;
-		save: void;
-		zoom_in: void;
-		zoom_out: void;
-		set_zoom: number | "fit";
-		pan: void;
-		download: void;
-	}>();
-
-	let show_zoom_popup = false;
+	let {
+		can_save = false,
+		changeable = false,
+		current_zoom = 1,
+		tool,
+		min_zoom = true,
+		enable_download = false,
+		can_undo,
+		can_redo,
+		onremove_image,
+		onundo,
+		onredo,
+		onsave,
+		onzoom_in,
+		onzoom_out,
+		onset_zoom,
+		onpan,
+		ondownload
+	}: {
+		can_save?: boolean;
+		changeable?: boolean;
+		current_zoom?: number;
+		tool: string;
+		min_zoom?: boolean;
+		enable_download?: boolean;
+		can_undo: boolean;
+		can_redo: boolean;
+		onremove_image?: () => void;
+		onundo?: () => void;
+		onredo?: () => void;
+		onsave?: () => void;
+		onzoom_in?: () => void;
+		onzoom_out?: () => void;
+		onset_zoom?: (zoom: number | "fit") => void;
+		onpan?: () => void;
+		ondownload?: () => void;
+	} = $props();
+
+	let show_zoom_popup = $state(false);
 
 	function handle_zoom_click(e: MouseEvent): void {
 		e.stopPropagation();
@@ -42,7 +56,7 @@
 	}
 
 	function handle_zoom_change(zoom: number | "fit"): void {
-		dispatch("set_zoom", zoom);
+		onset_zoom?.(zoom);
 		show_zoom_popup = false;
 	}
 
@@ -52,7 +66,7 @@
 		}
 	}
 
-	$: formatted_zoom = Math.round(current_zoom * 100);
+	let formatted_zoom = $derived(Math.round(current_zoom * 100));
 </script>
 
 <IconButtonWrapper>
@@ -61,7 +75,7 @@
 			Icon={Download}
 			label="Download"
 			onclick={(event) => {
-				dispatch("download");
+				ondownload?.();
 				event.stopPropagation();
 			}}
 		/>
@@ -72,7 +86,7 @@
 		label="Pan"
 		onclick={(e) => {
 			e.stopPropagation();
-			dispatch("pan");
+			onpan?.();
 		}}
 		highlight={tool === "pan"}
 		size="small"
@@ -85,7 +99,7 @@
 		Icon={ZoomOut}
 		label="Zoom out"
 		onclick={(event) => {
-			dispatch("zoom_out");
+			onzoom_out?.();
 			event.stopPropagation();
 		}}
 	/>
@@ -93,7 +107,7 @@
 		Icon={ZoomIn}
 		label="Zoom in"
 		onclick={(event) => {
-			dispatch("zoom_in");
+			onzoom_in?.();
 			event.stopPropagation();
 		}}
 	/>
@@ -102,20 +116,30 @@
 		<span
 			role="button"
 			tabindex="0"
-			on:click={handle_zoom_click}
-			on:keydown={handle_zoom_keydown}>{formatted_zoom}%</span
+			onclick={handle_zoom_click}
+			onkeydown={handle_zoom_keydown}>{formatted_zoom}%</span
 		>
 		{#if show_zoom_popup}
 			<div class="zoom-controls">
 				<ul>
 					<li>
-						<button on:click|stopPropagation={() => handle_zoom_change("fit")}>
+						<button
+							onclick={(event) => {
+								event.stopPropagation();
+								handle_zoom_change("fit");
+							}}
+						>
 							Fit to screen
 						</button>
 					</li>
 					{#each [0.25, 0.5, 1, 2, 4] as zoom}
 						<li>
-							<button on:click|stopPropagation={() => handle_zoom_change(zoom)}>
+							<button
+								onclick={(event) => {
+									event.stopPropagation();
+									handle_zoom_change(zoom);
+								}}
+							>
 								{zoom * 100}%
 							</button>
 						</li>
@@ -130,7 +154,7 @@
 		Icon={Undo}
 		label="Undo"
 		onclick={(event) => {
-			dispatch("undo");
+			onundo?.();
 			event.stopPropagation();
 		}}
 		disabled={!can_undo}
@@ -140,7 +164,7 @@
 		Icon={Redo}
 		label="Redo"
 		onclick={(event) => {
-			dispatch("redo");
+			onredo?.();
 			event.stopPropagation();
 		}}
 		disabled={!can_redo}
@@ -152,7 +176,7 @@
 			Icon={Check}
 			label="Save changes"
 			onclick={(event) => {
-				dispatch("save");
+				onsave?.();
 				event.stopPropagation();
 			}}
 			color="var(--color-accent)"
@@ -163,7 +187,7 @@
 		Icon={Trash}
 		label="Clear canvas"
 		onclick={(event) => {
-			dispatch("remove_image");
+			onremove_image?.();
 			event.stopPropagation();
 		}}
 	/>

package/dist/shared/Controls.svelte.d.ts

@@ -1,17 +1,4 @@
-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 Controls: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     can_save?: boolean;
     changeable?: boolean;
     current_zoom?: number;
@@ -20,18 +7,16 @@ declare const Controls: $$__sveltets_2_IsomorphicComponent<{
     enable_download?: boolean;
     can_undo: boolean;
     can_redo: boolean;
-}, {
-    remove_image: CustomEvent<void>;
-    undo: CustomEvent<void>;
-    redo: CustomEvent<void>;
-    save: CustomEvent<void>;
-    zoom_in: CustomEvent<void>;
-    zoom_out: CustomEvent<void>;
-    set_zoom: CustomEvent<number | "fit">;
-    pan: CustomEvent<void>;
-    download: CustomEvent<void>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Controls = InstanceType<typeof Controls>;
+    onremove_image?: () => void;
+    onundo?: () => void;
+    onredo?: () => void;
+    onsave?: () => void;
+    onzoom_in?: () => void;
+    onzoom_out?: () => void;
+    onset_zoom?: (zoom: number | "fit") => void;
+    onpan?: () => void;
+    ondownload?: () => void;
+};
+declare const Controls: import("svelte").Component<$$ComponentProps, {}, "">;
+type Controls = ReturnType<typeof Controls>;
 export default Controls;