@gradio/imageeditor 0.18.2-dev.0 → 0.18.2-dev.2

package/dist/Index.svelte

@@ -1,161 +1,171 @@
 <svelte:options accessors={true} immutable={true} />
 
-<script>import { FileData } from "@gradio/client";
-import { BaseStaticImage as StaticImage } from "@gradio/image";
-import InteractiveImageEditor from "./InteractiveImageEditor.svelte";
-import { Block } from "@gradio/atoms";
-import { StatusTracker } from "@gradio/statustracker";
-import { tick } from "svelte";
-export let elem_id = "";
-export let elem_classes = [];
-export let visible = true;
-export let value = {
-  background: null,
-  layers: [],
-  composite: null
-};
-export let label;
-export let show_label;
-export let buttons = null;
-export let root;
-export let value_is_output = false;
-export let height = 350;
-export let width;
-export let _selectable = false;
-export let container = true;
-export let scale = null;
-export let min_width = void 0;
-export let loading_status;
-export let sources = [];
-export let interactive;
-export let placeholder;
-export let brush;
-export let eraser;
-export let transforms = [];
-export let layers;
-export let attached_events = [];
-export let server;
-export let canvas_size;
-export let fixed_canvas = false;
-export let full_history = null;
-export let gradio;
-export let border_region = 0;
-export let webcam_options;
-export let theme_mode;
-let editor_instance;
-let image_id = null;
-export async function get_value() {
-  if (image_id) {
-    const val = { id: image_id };
-    image_id = null;
-    return val;
-  }
-  const blobs = await editor_instance.get_data();
-  return blobs;
-}
-let is_dragging;
-$: value && handle_change();
-const is_browser = typeof window !== "undefined";
-const raf = is_browser ? window.requestAnimationFrame : (cb) => cb();
-function wait_for_next_frame() {
-  return new Promise((resolve) => {
-    raf(() => raf(() => resolve()));
-  });
-}
-async function handle_change() {
-  await wait_for_next_frame();
-  if (value && (value.background || value.layers?.length || value.composite)) {
-    gradio.dispatch("change");
-  }
-}
-function handle_save() {
-  gradio.dispatch("apply");
-}
-function handle_history_change() {
-  gradio.dispatch("change");
-  if (!value_is_output) {
-    gradio.dispatch("input");
-    tick().then((_) => value_is_output = false);
-  }
-}
-$: has_value = value?.background || value?.layers?.length || value?.composite;
-$: normalised_background = value?.background ? new FileData(value.background) : null;
-$: normalised_composite = value?.composite ? new FileData(value.composite) : null;
-$: normalised_layers = value?.layers?.map((layer) => new FileData(layer)) || [];
+<script lang="ts">
+	import type { ImageBlobs } from "./InteractiveImageEditor.svelte";
+
+	import { FileData } from "@gradio/client";
+
+	import { BaseStaticImage as StaticImage } from "@gradio/image";
+	import InteractiveImageEditor from "./InteractiveImageEditor.svelte";
+	import { Block } from "@gradio/atoms";
+	import { StatusTracker } from "@gradio/statustracker";
+
+	import { Gradio } from "@gradio/utils";
+	import type { ImageEditorEvents, ImageEditorProps } from "./types";
+
+	let props = $props();
+
+	class ImageEditorGradio extends Gradio<ImageEditorEvents, ImageEditorProps> {
+		async get_data() {
+			const data = await super.get_data();
+			const value = await _get_value();
+			return { ...data, value: value };
+		}
+	}
+	const gradio = new ImageEditorGradio(props, {
+		server: { accept_blobs: () => {} },
+		buttons: [],
+		height: 350,
+		border_region: 0
+	});
+
+	let editor_instance: InteractiveImageEditor;
+	let image_id: null | string = $state(null);
+
+	let has_run_change = false;
+	let has_run_input = false;
+
+	async function _get_value(): Promise<ImageBlobs | { id: string }> {
+		if (image_id) {
+			const val = { id: image_id };
+			image_id = null;
+			return val;
+		}
+
+		const blobs = await editor_instance.get_data();
+
+		return blobs;
+	}
+
+	let is_dragging: boolean;
+
+	const is_browser = typeof window !== "undefined";
+
+	// function handle_change(): void {
+	// 	if (gradio.props.value) gradio.dispatch("change");
+	// }
+
+	function handle_save(): void {
+		gradio.dispatch("apply");
+	}
+
+	// function handle_history_change(): void {
+	// 	gradio.dispatch("change");
+
+	// 	gradio.dispatch("input");
+	// }
+
+	let has_value = $derived(
+		gradio.props.value?.background ||
+			gradio.props.value?.layers?.length ||
+			gradio.props.value?.composite
+	);
+
+	let normalised_background = $derived(
+		gradio.props.value?.background
+			? new FileData(gradio.props.value.background)
+			: null
+	);
+	let normalised_composite = $derived(
+		gradio.props.value?.composite
+			? new FileData(gradio.props.value.composite)
+			: null
+	);
+	let normalised_layers = $derived(
+		gradio.props.value?.layers?.map((layer) => new FileData(layer)) || []
+	);
 </script>
 
-{#if !interactive}
+{#if !gradio.shared.interactive}
 	<Block
-		{visible}
+		visible={gradio.shared.visible}
 		variant={"solid"}
 		border_mode={is_dragging ? "focus" : "base"}
 		padding={false}
-		{elem_id}
-		{elem_classes}
-		{height}
-		{width}
+		elem_id={gradio.shared.elem_id}
+		elem_classes={gradio.shared.elem_classes}
+		height={gradio.props.height}
+		width={gradio.props.width}
 		allow_overflow={true}
 		overflow_behavior="visible"
-		{container}
-		{scale}
-		{min_width}
+		container={gradio.shared.container}
+		scale={gradio.shared.scale}
+		min_width={gradio.shared.min_width}
 	>
 		<StatusTracker
-			autoscroll={gradio.autoscroll}
+			autoscroll={gradio.shared.autoscroll}
 			i18n={gradio.i18n}
-			{...loading_status}
-			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+			{...gradio.shared.loading_status}
+			on:clear_status={() =>
+				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)}
-			value={value?.composite || null}
-			{label}
-			{show_label}
-			{buttons}
-			selectable={_selectable}
+			value={gradio.props.value?.composite || null}
+			label={gradio.shared.label}
+			show_label={gradio.shared.show_label}
+			buttons={gradio.props.buttons}
+			selectable={gradio.props._selectable}
 			i18n={gradio.i18n}
 		/>
 	</Block>
 {:else}
 	<Block
-		{visible}
+		visible={gradio.shared.visible}
 		variant={has_value ? "solid" : "dashed"}
 		border_mode={is_dragging ? "focus" : "base"}
 		padding={false}
-		{elem_id}
-		{elem_classes}
-		{height}
-		{width}
+		elem_id={gradio.shared.elem_id}
+		elem_classes={gradio.shared.elem_classes}
+		height={gradio.props.height}
+		width={gradio.props.width}
 		allow_overflow={true}
 		overflow_behavior="visible"
-		{container}
-		{scale}
-		{min_width}
+		container={gradio.shared.container}
+		scale={gradio.shared.scale}
+		min_width={gradio.shared.min_width}
 	>
 		<StatusTracker
-			autoscroll={gradio.autoscroll}
+			autoscroll={gradio.shared.autoscroll}
 			i18n={gradio.i18n}
-			{...loading_status}
-			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+			{...gradio.shared.loading_status}
+			on:clear_status={() =>
+				gradio.dispatch("clear_status", gradio.shared.loading_status)}
 		/>
 
 		<InteractiveImageEditor
-			{border_region}
+			border_region={gradio.props.border_region}
 			bind:is_dragging
-			{canvas_size}
-			on:change={() => handle_history_change()}
+			canvas_size={gradio.props.canvas_size}
 			bind:image_id
 			layers={normalised_layers}
 			composite={normalised_composite}
 			background={normalised_background}
 			bind:this={editor_instance}
-			{root}
-			{sources}
-			{label}
-			{show_label}
-			{fixed_canvas}
+			root={gradio.shared.root}
+			sources={gradio.props.sources}
+			label={gradio.shared.label}
+			show_label={gradio.shared.show_label}
+			fixed_canvas={gradio.props.fixed_canvas}
+			on:input={() => {
+				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")}
@@ -163,34 +173,40 @@ $: normalised_layers = value?.layers?.map((layer) => new FileData(layer)) || [];
 			on:upload={() => gradio.dispatch("upload")}
 			on:share={({ detail }) => gradio.dispatch("share", detail)}
 			on:error={({ detail }) => {
-				loading_status = loading_status || {};
-				loading_status.status = "error";
+				gradio.shared.loading_status = gradio.shared.loading_status || {};
+				gradio.shared.loading_status.status = "error";
 				gradio.dispatch("error", detail);
 			}}
 			on:receive_null={() =>
-				(value = {
+				(gradio.props.value = {
 					background: null,
 					layers: [],
 					composite: null
 				})}
+			on:change={() => {
+				if (!has_run_change) {
+					has_run_change = true;
+				} else {
+					gradio.dispatch("change");
+				}
+			}}
 			on:error
-			{brush}
-			{eraser}
-			changeable={attached_events.includes("apply")}
-			realtime={attached_events.includes("change") ||
-				attached_events.includes("input")}
+			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")}
 			i18n={gradio.i18n}
-			{transforms}
-			accept_blobs={server.accept_blobs}
-			layer_options={layers}
-			upload={(...args) => gradio.client.upload(...args)}
-			{placeholder}
-			bind:full_history
-			{webcam_options}
-			show_download_button={buttons === null
+			transforms={gradio.props.transforms}
+			accept_blobs={gradio.shared.server.accept_blobs}
+			layer_options={gradio.props.layers}
+			upload={(...args) => gradio.shared.client.upload(...args)}
+			placeholder={gradio.props.placeholder}
+			webcam_options={gradio.props.webcam_options}
+			show_download_button={gradio.props.buttons === null
 				? true
-				: buttons.includes("download")}
-			{theme_mode}
+				: gradio.props.buttons.includes("download")}
+			theme_mode={gradio.shared.theme_mode}
 			on:download_error={(e) => gradio.dispatch("error", e.detail)}
 		></InteractiveImageEditor>
 	</Block>

package/dist/Index.svelte.d.ts

@@ -1,204 +1,20 @@
-import { SvelteComponent } from "svelte";
-import type { Brush, Eraser } from "./shared/brush/types";
-import type { EditorData, ImageBlobs } from "./InteractiveImageEditor.svelte";
-import type { Gradio, SelectData } from "@gradio/utils";
-import type { LoadingStatus } from "@gradio/statustracker";
-import type { LayerOptions, Transform, Source, WebcamOptions } from "./shared/types";
-import type { CommandNode } from "./shared/core/commands";
-declare const __propDef: {
-    props: {
-        elem_id?: string;
-        elem_classes?: string[];
-        visible?: boolean | "hidden";
-        value?: EditorData | null;
-        label: string;
-        show_label: boolean;
-        buttons?: string[] | null;
-        root: string;
-        value_is_output?: boolean;
-        height?: number;
-        width: number | undefined;
-        _selectable?: boolean;
-        container?: boolean;
-        scale?: number | null;
-        min_width?: number | undefined;
-        loading_status: LoadingStatus;
-        sources?: Source[];
-        interactive: boolean;
-        placeholder: string | undefined;
-        brush: Brush;
-        eraser: Eraser;
-        transforms?: Transform[];
-        layers: LayerOptions;
-        attached_events?: string[];
-        server: {
-            accept_blobs: (a: any) => void;
-        };
-        canvas_size: [number, number];
-        fixed_canvas?: boolean;
-        full_history?: CommandNode | null;
-        gradio: Gradio<{
-            change: never;
-            error: string;
-            input: never;
-            edit: never;
-            drag: never;
-            apply: never;
-            upload: never;
-            clear: never;
-            select: SelectData;
-            share: ShareData;
-            clear_status: LoadingStatus;
-        }>;
-        border_region?: number;
-        webcam_options: WebcamOptions;
-        theme_mode: "dark" | "light";
-        get_value?: () => Promise<ImageBlobs | {
-            id: string;
-        }>;
+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;
     };
-    events: {
-        error: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type IndexProps = typeof __propDef.props;
-export type IndexEvents = typeof __propDef.events;
-export type IndexSlots = typeof __propDef.slots;
-export default class Index extends SvelteComponent<IndexProps, IndexEvents, IndexSlots> {
-    get get_value(): () => Promise<ImageBlobs | {
-        id: string;
-    }>;
-    get elem_id(): string | undefined;
-    /**accessor*/
-    set elem_id(_: string | undefined);
-    get elem_classes(): string[] | undefined;
-    /**accessor*/
-    set elem_classes(_: string[] | undefined);
-    get visible(): boolean | "hidden" | undefined;
-    /**accessor*/
-    set visible(_: boolean | "hidden" | undefined);
-    get value(): EditorData | null | undefined;
-    /**accessor*/
-    set value(_: EditorData | null | undefined);
-    get label(): string;
-    /**accessor*/
-    set label(_: string);
-    get show_label(): boolean;
-    /**accessor*/
-    set show_label(_: boolean);
-    get buttons(): string[] | null | undefined;
-    /**accessor*/
-    set buttons(_: string[] | null | undefined);
-    get root(): string;
-    /**accessor*/
-    set root(_: string);
-    get value_is_output(): boolean | undefined;
-    /**accessor*/
-    set value_is_output(_: boolean | undefined);
-    get height(): number | undefined;
-    /**accessor*/
-    set height(_: number | undefined);
-    get width(): number | undefined;
-    /**accessor*/
-    set width(_: number | undefined);
-    get _selectable(): boolean | undefined;
-    /**accessor*/
-    set _selectable(_: boolean | undefined);
-    get container(): boolean | undefined;
-    /**accessor*/
-    set container(_: boolean | undefined);
-    get scale(): number | null | undefined;
-    /**accessor*/
-    set scale(_: number | null | undefined);
-    get min_width(): number | undefined;
-    /**accessor*/
-    set min_width(_: number | undefined);
-    get loading_status(): LoadingStatus;
-    /**accessor*/
-    set loading_status(_: LoadingStatus);
-    get sources(): Source[] | undefined;
-    /**accessor*/
-    set sources(_: Source[] | undefined);
-    get interactive(): boolean;
-    /**accessor*/
-    set interactive(_: boolean);
-    get placeholder(): string | undefined;
-    /**accessor*/
-    set placeholder(_: string | undefined);
-    get brush(): Brush;
-    /**accessor*/
-    set brush(_: Brush);
-    get eraser(): Eraser;
-    /**accessor*/
-    set eraser(_: Eraser);
-    get transforms(): Transform[] | undefined;
-    /**accessor*/
-    set transforms(_: Transform[] | undefined);
-    get layers(): LayerOptions;
-    /**accessor*/
-    set layers(_: LayerOptions);
-    get attached_events(): string[] | undefined;
-    /**accessor*/
-    set attached_events(_: string[] | undefined);
-    get server(): {
-        accept_blobs: (a: any) => void;
-    };
-    /**accessor*/
-    set server(_: {
-        accept_blobs: (a: any) => void;
-    });
-    get canvas_size(): [number, number];
-    /**accessor*/
-    set canvas_size(_: [number, number]);
-    get fixed_canvas(): boolean | undefined;
-    /**accessor*/
-    set fixed_canvas(_: boolean | undefined);
-    get full_history(): CommandNode | null | undefined;
-    /**accessor*/
-    set full_history(_: CommandNode | null | undefined);
-    get gradio(): Gradio<{
-        change: never;
-        error: string;
-        input: never;
-        edit: never;
-        drag: never;
-        apply: never;
-        upload: never;
-        clear: never;
-        select: SelectData;
-        share: ShareData;
-        clear_status: LoadingStatus;
-    }>;
-    /**accessor*/
-    set gradio(_: Gradio<{
-        change: never;
-        error: string;
-        input: never;
-        edit: never;
-        drag: never;
-        apply: never;
-        upload: never;
-        clear: never;
-        select: SelectData;
-        share: ShareData;
-        clear_status: LoadingStatus;
-    }>);
-    get border_region(): number | undefined;
-    /**accessor*/
-    set border_region(_: number | undefined);
-    get webcam_options(): WebcamOptions;
-    /**accessor*/
-    set webcam_options(_: WebcamOptions);
-    get theme_mode(): "light" | "dark";
-    /**accessor*/
-    set theme_mode(_: "light" | "dark");
-    get undefined(): any;
-    /**accessor*/
-    set undefined(_: any);
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Index: $$__sveltets_2_IsomorphicComponent<$$ComponentProps, {
+    error: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Index = InstanceType<typeof Index>;
+export default Index;