@gradio/imageeditor 0.18.12 → 0.20.0

package/dist/Index.svelte

@@ -10,7 +10,7 @@
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
 
-	import { Gradio } from "@gradio/utils";
+	import { Gradio, type ShareData } from "@gradio/utils";
 	import type { ImageEditorEvents, ImageEditorProps } from "./types";
 
 	let props = $props();
@@ -47,7 +47,7 @@
 		return blobs;
 	}
 
-	let is_dragging: boolean;
+	let is_dragging = $state(false);
 
 	const is_browser = typeof window !== "undefined";
 
@@ -84,6 +84,14 @@
 	let normalised_layers = $derived(
 		gradio.props.value?.layers?.map((layer) => new FileData(layer)) || []
 	);
+	let resolved_theme_mode: "dark" | "light" = $derived(
+		gradio.shared.theme_mode === "dark" ||
+			(gradio.shared.theme_mode === "system" &&
+				typeof window !== "undefined" &&
+				window.matchMedia?.("(prefers-color-scheme: dark)").matches)
+			? "dark"
+			: "light"
+	);
 </script>
 
 {#if !gradio.shared.interactive}
@@ -110,13 +118,13 @@
 				gradio.dispatch("clear_status", gradio.shared.loading_status)}
 		/>
 		<StaticImage
-			on:select={({ detail }) => gradio.dispatch("select", detail)}
-			on:share={({ detail }) => gradio.dispatch("share", detail)}
-			on:error={({ detail }) => gradio.dispatch("error", detail)}
+			onselect={(detail) => gradio.dispatch("select", detail)}
+			onshare={(detail) => gradio.dispatch("share", detail as ShareData)}
+			onerror={(detail) => gradio.dispatch("error", detail)}
 			value={gradio.props.value?.composite || null}
 			label={gradio.shared.label}
 			show_label={gradio.shared.show_label}
-			buttons={gradio.props.buttons}
+			buttons={gradio.props.buttons ?? []}
 			selectable={gradio.props._selectable}
 			i18n={gradio.i18n}
 		/>
@@ -146,68 +154,59 @@
 		/>
 
 		<InteractiveImageEditor
-			border_region={gradio.props.border_region}
+			border_region={gradio.props.border_region ?? 0}
 			bind:is_dragging
-			canvas_size={gradio.props.canvas_size}
+			canvas_size={gradio.props.canvas_size ?? [800, 800]}
 			bind:image_id
 			layers={normalised_layers}
 			composite={normalised_composite}
 			background={normalised_background}
 			bind:this={editor_instance}
 			root={gradio.shared.root}
-			sources={gradio.props.sources}
+			sources={gradio.props.sources ?? ["upload", "webcam", "clipboard"]}
 			label={gradio.shared.label}
 			show_label={gradio.shared.show_label}
 			fixed_canvas={gradio.props.fixed_canvas}
-			on:input={() => {
+			oninput={() => {
 				if (!has_run_input) {
 					has_run_input = true;
 				} else {
 					gradio.dispatch("input");
 				}
 			}}
-			on:save={(e) => handle_save()}
-			on:edit={() => gradio.dispatch("edit")}
-			on:clear={() => gradio.dispatch("clear")}
-			on:drag={({ detail }) => (is_dragging = detail)}
-			on:upload={() => gradio.dispatch("upload")}
-			on:share={({ detail }) => gradio.dispatch("share", detail)}
-			on:error={({ detail }) => {
-				gradio.shared.loading_status = gradio.shared.loading_status || {};
-				gradio.shared.loading_status.status = "error";
-				gradio.dispatch("error", detail);
-			}}
-			on:receive_null={() =>
+			onsave={() => handle_save()}
+			onclear={() => gradio.dispatch("clear")}
+			onupload={() => gradio.dispatch("upload")}
+			onreceive_null={() =>
 				(gradio.props.value = {
 					background: null,
 					layers: [],
 					composite: null
 				})}
-			on:change={() => {
+			onchange={() => {
 				if (!has_run_change) {
 					has_run_change = true;
 				} else {
 					gradio.dispatch("change");
 				}
 			}}
-			on:error
-			brush={gradio.props.brush}
-			eraser={gradio.props.eraser}
-			changeable={gradio.shared.attached_events.includes("apply")}
-			realtime={gradio.shared.attached_events.includes("change") ||
-				gradio.shared.attached_events.includes("input")}
+			brush={gradio.props.brush ?? false}
+			eraser={gradio.props.eraser ?? false}
+			changeable={gradio.shared.attached_events?.includes("apply") ?? false}
+			realtime={gradio.shared.attached_events?.includes("change") ||
+				gradio.shared.attached_events?.includes("input")}
 			i18n={gradio.i18n}
-			transforms={gradio.props.transforms}
+			transforms={gradio.props.transforms ?? []}
 			accept_blobs={gradio.shared.server.accept_blobs}
-			layer_options={gradio.props.layers}
+			layer_options={gradio.props.layers!}
 			upload={(...args) => gradio.shared.client.upload(...args)}
 			placeholder={gradio.props.placeholder}
-			webcam_options={gradio.props.webcam_options}
+			webcam_options={gradio.props.webcam_options!}
 			show_download_button={gradio.props.buttons === null
 				? true
-				: gradio.props.buttons.includes("download")}
-			theme_mode={gradio.shared.theme_mode}
-			on:download_error={(e) => gradio.dispatch("error", e.detail)}
+				: (gradio.props.buttons ?? []).includes("download")}
+			theme_mode={resolved_theme_mode}
+			ondownload_error={(detail) => gradio.dispatch("error", detail)}
 		></InteractiveImageEditor>
 	</Block>
 {/if}

package/dist/Index.svelte.d.ts

@@ -1,20 +1,3 @@
-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 Index: $$__sveltets_2_IsomorphicComponent<$$ComponentProps, {
-    error: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type Index = InstanceType<typeof Index>;
+declare const Index: import("svelte").Component<$$ComponentProps, {}, "">;
+type Index = ReturnType<typeof Index>;
 export default Index;

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,44 +30,82 @@
 		type WebcamOptions
 	} from "./shared/types";
 
-	export let brush: IBrush;
-	export let eraser: Eraser;
-	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;
-	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: boolean;
-	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;
-	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;
@@ -78,7 +115,9 @@
 		return !!o;
 	}
 
-	$: if (background_image) dispatch("upload");
+	$effect(() => {
+		if (background_image) onupload?.();
+	});
 
 	export async function get_data(): Promise<ImageBlobs> {
 		let blobs;
@@ -127,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][];
 
@@ -144,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;
@@ -189,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
@@ -214,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,60 +13,43 @@ 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<{
-    brush: IBrush;
-    eraser: Eraser;
+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";
     layers: FileData[];
     composite: FileData | null;
     background: FileData | null;
-    layer_options: LayerOptions;
+    layer_options?: LayerOptions;
     transforms: Transform[];
     accept_blobs: (a: any) => void;
     canvas_size: [number, number];
     fixed_canvas?: boolean;
-    realtime: 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;
+    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;