@gradio/imageeditor 0.18.12 → 0.20.0

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;

package/dist/shared/IconButton.svelte

@@ -1,23 +1,44 @@
 <script lang="ts">
-	import { type ComponentType } from "svelte";
+	import { type Component } from "svelte";
 	import type { ColorInput } from "tinycolor2";
-	export let Icon: ComponentType;
-	export let label = "";
-	export let show_label = false;
-	export let pending = false;
-	export let size: "small" | "large" | "medium" = "small";
-	export let padded = true;
-	export let highlight = false;
-	export let disabled = false;
-	export let hasPopup = false;
-	export let color: string | ColorInput = "var(--block-label-text-color)";
-	export let transparent = false;
-	export let background = "var(--background-fill-primary)";
-	export let offset = 0;
-	export let label_position: "left" | "right" = "left";
-	export let roundedness: "quite" | "very" = "quite";
-	export let onclick: ((event: MouseEvent) => void) | undefined = undefined;
-	$: _color = highlight ? "var(--color-accent)" : color.toString();
+
+	let {
+		Icon,
+		label = "",
+		show_label = false,
+		pending = false,
+		size = "small",
+		padded = true,
+		highlight = false,
+		disabled = false,
+		hasPopup = false,
+		color = "var(--block-label-text-color)",
+		transparent = false,
+		background = "var(--background-fill-primary)",
+		offset = 0,
+		label_position = "left",
+		roundedness = "quite",
+		onclick = undefined
+	}: {
+		Icon: Component<any>;
+		label?: string;
+		show_label?: boolean;
+		pending?: boolean;
+		size?: "small" | "large" | "medium";
+		padded?: boolean;
+		highlight?: boolean;
+		disabled?: boolean;
+		hasPopup?: boolean;
+		color?: string | ColorInput;
+		transparent?: boolean;
+		background?: string;
+		offset?: number;
+		label_position?: "left" | "right";
+		roundedness?: "quite" | "very";
+		onclick?: (event: MouseEvent) => void;
+	} = $props();
+
+	let _color = $derived(highlight ? "var(--color-accent)" : color.toString());
 </script>
 
 <button

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

@@ -1,20 +1,7 @@
-import { type ComponentType } from "svelte";
+import { type Component } from "svelte";
 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 IconButton: $$__sveltets_2_IsomorphicComponent<{
-    Icon: ComponentType;
+type $$ComponentProps = {
+    Icon: Component<any>;
     label?: string;
     show_label?: boolean;
     pending?: boolean;
@@ -29,9 +16,8 @@ declare const IconButton: $$__sveltets_2_IsomorphicComponent<{
     offset?: number;
     label_position?: "left" | "right";
     roundedness?: "quite" | "very";
-    onclick?: ((event: MouseEvent) => void) | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type IconButton = InstanceType<typeof IconButton>;
+    onclick?: (event: MouseEvent) => void;
+};
+declare const IconButton: Component<$$ComponentProps, {}, "">;
+type IconButton = ReturnType<typeof IconButton>;
 export default IconButton;