@gradio/imageeditor 0.18.2-dev.0 → 0.18.2

package/dist/InteractiveImageEditor.svelte

@@ -1,151 +1,207 @@
-<script context="module"></script>
-
-<script>import { createEventDispatcher } from "svelte";
-import {} from "@gradio/utils";
-import { prepare_files } from "@gradio/client";
-import {} from "./shared/core/commands";
-import ImageEditor from "./shared/ImageEditor.svelte";
-import {} from "./shared/brush/types";
-import {} from "./shared/Toolbar.svelte";
-import { BlockLabel } from "@gradio/atoms";
-import { Image as ImageIcon } from "@gradio/icons";
-import { inject } from "./shared/utils/parse_placeholder";
-import {
-} from "./shared/types";
-export let brush;
-export let eraser;
-export let sources;
-export let i18n;
-export let root;
-export let label = void 0;
-export let show_label;
-export let changeable = false;
-export let theme_mode;
-export let layers;
-export let composite;
-export let background;
-export let layer_options;
-export let transforms;
-export let accept_blobs;
-export let canvas_size;
-export let fixed_canvas = false;
-export let realtime;
-export let upload;
-export let is_dragging;
-export let placeholder = void 0;
-export let border_region;
-export let full_history = null;
-export let webcam_options;
-export let show_download_button = false;
-const dispatch = createEventDispatcher();
-let editor;
-let has_drawn = false;
-function is_not_null(o) {
-  return !!o;
-}
-function is_file_data(o) {
-  return !!o;
-}
-$: if (background_image) dispatch("upload");
-export async function get_data() {
-  let blobs;
-  try {
-    blobs = await editor.get_blobs();
-  } catch (e) {
-    return { background: null, layers: [], composite: null };
-  }
-  const bg = blobs.background ? upload(
-    await prepare_files([new File([blobs.background], "background.png")]),
-    root
-  ) : Promise.resolve(null);
-  const layers2 = blobs.layers.filter(is_not_null).map(
-    async (blob, i) => upload(await prepare_files([new File([blob], `layer_${i}.png`)]), root)
-  );
-  const composite2 = blobs.composite ? upload(
-    await prepare_files([new File([blobs.composite], "composite.png")]),
-    root
-  ) : Promise.resolve(null);
-  const [background2, composite_, ...layers_] = await Promise.all([
-    bg,
-    composite2,
-    ...layers2
-  ]);
-  return {
-    background: Array.isArray(background2) ? background2[0] : background2,
-    layers: layers_.flatMap((layer) => Array.isArray(layer) ? layer : [layer]).filter(is_file_data),
-    composite: Array.isArray(composite_) ? composite_[0] : composite_
-  };
-}
-function handle_value(value) {
-  if (!editor) return;
-  if (value == null) {
-    editor.handle_remove();
-    dispatch("receive_null");
-  }
-}
-$: handle_value({ layers, composite, background });
-let background_image = false;
-let can_undo;
-export let image_id = null;
-function nextframe() {
-  return new Promise((resolve) => setTimeout(() => resolve(), 30));
-}
-let uploading = false;
-let pending = false;
-async function handle_change(e) {
-  if (!realtime) return;
-  if (uploading) {
-    pending = true;
-    return;
-  }
-  uploading = true;
-  await nextframe();
-  const blobs = await editor.get_blobs();
-  const images = [];
-  let id = Math.random().toString(36).substring(2);
-  if (blobs.background)
-    images.push([
-      id,
-      "background",
-      new File([blobs.background], "background.png"),
-      null
-    ]);
-  if (blobs.composite)
-    images.push([
-      id,
-      "composite",
-      new File([blobs.composite], "composite.png"),
-      null
-    ]);
-  blobs.layers.forEach((layer, i) => {
-    if (layer)
-      images.push([
-        id,
-        `layer`,
-        new File([layer], `layer_${i}.png`),
-        i
-      ]);
-  });
-  await Promise.all(
-    images.map(async ([image_id2, type, data, index]) => {
-      return accept_blobs({
-        binary: true,
-        data: { file: data, id: image_id2, type, index }
-      });
-    })
-  );
-  image_id = id;
-  dispatch("change");
-  await nextframe();
-  uploading = false;
-  if (pending) {
-    pending = false;
-    uploading = false;
-    handle_change(e);
-  }
-}
-$: [heading, paragraph] = placeholder ? inject(placeholder) : [false, false];
-let current_tool;
+<script lang="ts" context="module">
+	export interface EditorData {
+		background: FileData | null;
+		layers: FileData[] | null;
+		composite: FileData | null;
+	}
+
+	export interface ImageBlobs {
+		background: FileData | null;
+		layers: FileData[];
+		composite: FileData | null;
+	}
+</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";
+	import ImageEditor from "./shared/ImageEditor.svelte";
+	import { type Brush as IBrush, type Eraser } from "./shared/brush/types";
+	import { type Tool as ToolbarTool } from "./shared/Toolbar.svelte";
+
+	import { BlockLabel } from "@gradio/atoms";
+	import { Image as ImageIcon } from "@gradio/icons";
+	import { inject } from "./shared/utils/parse_placeholder";
+	import {
+		type LayerOptions,
+		type Transform,
+		type Source,
+		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 editor: ImageEditor;
+	let has_drawn = false;
+
+	function is_not_null(o: Blob | null): o is Blob {
+		return !!o;
+	}
+
+	function is_file_data(o: null | FileData): o is FileData {
+		return !!o;
+	}
+
+	$: if (background_image) dispatch("upload");
+
+	export async function get_data(): Promise<ImageBlobs> {
+		let blobs;
+		try {
+			blobs = await editor.get_blobs();
+		} catch (e) {
+			return { background: null, layers: [], composite: null };
+		}
+
+		const bg = blobs.background
+			? upload(
+					await prepare_files([new File([blobs.background], "background.png")]),
+					root
+				)
+			: Promise.resolve(null);
+
+		const layers = blobs.layers
+			.filter(is_not_null)
+			.map(async (blob, i) =>
+				upload(await prepare_files([new File([blob], `layer_${i}.png`)]), root)
+			);
+
+		const composite = blobs.composite
+			? upload(
+					await prepare_files([new File([blobs.composite], "composite.png")]),
+					root
+				)
+			: Promise.resolve(null);
+
+		const [background, composite_, ...layers_] = await Promise.all([
+			bg,
+			composite,
+			...layers
+		]);
+
+		return {
+			background: Array.isArray(background) ? background[0] : background,
+			layers: layers_
+				.flatMap((layer) => (Array.isArray(layer) ? layer : [layer]))
+				.filter(is_file_data),
+			composite: Array.isArray(composite_) ? composite_[0] : composite_
+		};
+	}
+
+	function handle_value(value: EditorData | null): void {
+		if (!editor) return;
+		if (value == null) {
+			editor.handle_remove();
+			dispatch("receive_null");
+		}
+	}
+
+	$: handle_value({ layers, composite, background });
+
+	let background_image = false;
+	let can_undo: boolean;
+
+	export let image_id: null | string = null;
+
+	type BinaryImages = [string, string, File, number | null][];
+
+	function nextframe(): Promise<void> {
+		return new Promise((resolve) => setTimeout(() => resolve(), 30));
+	}
+
+	let uploading = false;
+	let pending = false;
+	async function handle_change(e: CustomEvent<Blob | any>): Promise<void> {
+		if (!realtime) return;
+		if (uploading) {
+			pending = true;
+			return;
+		}
+		uploading = true;
+		await nextframe();
+		const blobs = await editor.get_blobs();
+		const images: BinaryImages = [];
+		let id = Math.random().toString(36).substring(2);
+		if (blobs.background)
+			images.push([
+				id,
+				"background",
+				new File([blobs.background], "background.png"),
+				null
+			]);
+		if (blobs.composite)
+			images.push([
+				id,
+				"composite",
+				new File([blobs.composite], "composite.png"),
+				null
+			]);
+		blobs.layers.forEach((layer, i) => {
+			if (layer)
+				images.push([
+					id as string,
+					`layer`,
+					new File([layer], `layer_${i}.png`),
+					i
+				]);
+		});
+		await Promise.all(
+			images.map(async ([image_id, type, data, index]) => {
+				return accept_blobs({
+					binary: true,
+					data: { file: data, id: image_id, type, index }
+				});
+			})
+		);
+		image_id = id;
+		dispatch("change");
+		await nextframe();
+		uploading = false;
+		if (pending) {
+			pending = false;
+			uploading = false;
+			handle_change(e);
+		}
+	}
+
+	$: [heading, paragraph] = placeholder ? inject(placeholder) : [false, false];
+
+	let current_tool: ToolbarTool;
 </script>
 
 <BlockLabel
@@ -163,6 +219,7 @@ let current_tool;
 	bind:this={editor}
 	{changeable}
 	on:save
+	on:input
 	on:change={handle_change}
 	on:clear={() => dispatch("clear")}
 	on:download_error

package/dist/InteractiveImageEditor.svelte.d.ts

@@ -1,4 +1,3 @@
-import { SvelteComponent } from "svelte";
 export interface EditorData {
     background: FileData | null;
     layers: FileData[] | null;
@@ -14,55 +13,60 @@ 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";
-declare const __propDef: {
-    props: {
-        brush: IBrush;
-        eraser: Eraser;
-        sources: Source[];
-        i18n: I18nFormatter;
-        root: string;
-        label?: string | undefined;
-        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 | undefined;
-        border_region: number;
-        full_history?: CommandNode | null;
-        webcam_options: WebcamOptions;
-        show_download_button?: boolean;
-        get_data?: () => Promise<ImageBlobs>;
-        image_id?: null | 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: {
-        history: CustomEvent<any>;
-        save: CustomEvent<void>;
-        download_error: CustomEvent<string>;
-        clear?: CustomEvent<undefined> | undefined;
-        upload?: CustomEvent<undefined> | undefined;
-        change?: CustomEvent<undefined> | undefined;
-        receive_null?: CustomEvent<undefined> | undefined;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type InteractiveImageEditorProps = typeof __propDef.props;
-export type InteractiveImageEditorEvents = typeof __propDef.events;
-export type InteractiveImageEditorSlots = typeof __propDef.slots;
-export default class InteractiveImageEditor extends SvelteComponent<InteractiveImageEditorProps, InteractiveImageEditorEvents, InteractiveImageEditorSlots> {
-    get get_data(): () => Promise<ImageBlobs>;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const InteractiveImageEditor: $$__sveltets_2_IsomorphicComponent<{
+    brush: IBrush;
+    eraser: Eraser;
+    sources: Source[];
+    i18n: I18nFormatter;
+    root: string;
+    label?: string | undefined;
+    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 | undefined;
+    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>;
+}, {}, {
+    get_data: () => Promise<ImageBlobs>;
+}, string>;
+type InteractiveImageEditor = InstanceType<typeof InteractiveImageEditor>;
+export default InteractiveImageEditor;