@gradio/imageeditor 0.18.1 → 0.18.2-dev.2

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @gradio/imageeditor
 
+## 0.18.2-dev.2
+
+### Dependency updates
+
+- @gradio/atoms@0.19.0-dev.1
+- @gradio/client@2.0.0-dev.2
+- @gradio/statustracker@0.12.0-dev.1
+- @gradio/upload@0.17.2-dev.2
+- @gradio/image@0.24.0-dev.2
+
+## 0.18.2-dev.1
+
+### Dependency updates
+
+- @gradio/atoms@0.18.2-dev.0
+- @gradio/upload@0.17.2-dev.1
+- @gradio/utils@0.10.3-dev.0
+- @gradio/image@0.23.2-dev.1
+- @gradio/statustracker@0.12.0-dev.0
+- @gradio/icons@0.15.0-dev.0
+
+## 0.18.2-dev.0
+
+### Dependency updates
+
+- @gradio/client@2.0.0-dev.1
+
+## 0.18.2-dev.0
+
+### Dependency updates
+
+- @gradio/upload@0.17.2-dev.0
+- @gradio/client@2.0.0-dev.0
+- @gradio/image@0.23.2-dev.0
+
 ## 0.18.1
 
 ### Fixes

package/Index.svelte

@@ -1,85 +1,41 @@
 <svelte:options accessors={true} immutable={true} />
 
 <script lang="ts">
-	import type { Brush, Eraser } from "./shared/brush/types";
-	import type { EditorData, ImageBlobs } from "./InteractiveImageEditor.svelte";
+	import type { ImageBlobs } from "./InteractiveImageEditor.svelte";
 
 	import { FileData } from "@gradio/client";
 
-	import type { Gradio, SelectData } from "@gradio/utils";
 	import { BaseStaticImage as StaticImage } from "@gradio/image";
 	import InteractiveImageEditor from "./InteractiveImageEditor.svelte";
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker";
-	import { tick } from "svelte";
-	import type {
-		LayerOptions,
-		Transform,
-		Source,
-		WebcamOptions
-	} from "./shared/types";
-	import type { CommandNode } from "./shared/core/commands";
-
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible: boolean | "hidden" = true;
-	export let value: EditorData | null = {
-		background: null,
-		layers: [],
-		composite: null
-	};
-	export let label: string;
-	export let show_label: boolean;
-	export let show_download_button: boolean;
-	export let root: string;
-	export let value_is_output = false;
-
-	export let height = 350;
-	export let width: number | undefined;
-
-	export let _selectable = false;
-	export let container = true;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let loading_status: LoadingStatus;
-	export let show_share_button = false;
-	export let sources: Source[] = [];
-	export let interactive: boolean;
-	export let placeholder: string | undefined;
-	export let brush: Brush;
-	export let eraser: Eraser;
-	export let transforms: Transform[] = [];
-	export let layers: LayerOptions;
-	export let attached_events: string[] = [];
-	export let server: {
-		accept_blobs: (a: any) => void;
-	};
-	export let canvas_size: [number, number];
-	export let fixed_canvas = false;
-	export let show_fullscreen_button = true;
-	export let full_history: CommandNode | null = null;
-	export let 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;
-	}>;
-	export let border_region = 0;
-	export let webcam_options: WebcamOptions;
-	export let theme_mode: "dark" | "light";
+
+	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 = null;
+	let image_id: null | string = $state(null);
 
-	export async function get_value(): Promise<ImageBlobs | { id: string }> {
+	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;
@@ -92,127 +48,124 @@
 	}
 
 	let is_dragging: boolean;
-	$: value && handle_change();
+
 	const is_browser = typeof window !== "undefined";
-	const raf = is_browser
-		? window.requestAnimationFrame
-		: (cb: (...args: any[]) => void) => cb();
-
-	function wait_for_next_frame(): Promise<void> {
-		return new Promise((resolve) => {
-			raf(() => raf(() => resolve()));
-		});
-	}
 
-	async function handle_change(): Promise<void> {
-		await wait_for_next_frame();
-
-		if (
-			value &&
-			(value.background || value.layers?.length || value.composite)
-		) {
-			gradio.dispatch("change");
-		}
-	}
+	// 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");
-		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)) || [];
+	// 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}
-			{show_download_button}
-			selectable={_selectable}
-			{show_share_button}
+			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}
-			{show_fullscreen_button}
 		/>
 	</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")}
@@ -220,32 +173,40 @@
 			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}
-			{theme_mode}
+			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
+				: gradio.props.buttons.includes("download")}
+			theme_mode={gradio.shared.theme_mode}
 			on:download_error={(e) => gradio.dispatch("error", e.detail)}
 		></InteractiveImageEditor>
 	</Block>

package/InteractiveImageEditor.svelte

@@ -219,6 +219,7 @@
 	bind:this={editor}
 	{changeable}
 	on:save
+	on:input
 	on:change={handle_change}
 	on:clear={() => dispatch("clear")}
 	on:download_error

package/dist/Example.svelte

@@ -1,7 +1,10 @@
-<script>import { BaseImage as Image } from "@gradio/image";
-export let value;
-export let type;
-export let selected = false;
+<script lang="ts">
+	import { BaseImage as Image } from "@gradio/image";
+	import type { EditorData } from "./InteractiveImageEditor.svelte";
+
+	export let value: EditorData;
+	export let type: "gallery" | "table";
+	export let selected = false;
 </script>
 
 <div

package/dist/Example.svelte.d.ts

@@ -1,21 +1,23 @@
-import { SvelteComponent } from "svelte";
 import type { EditorData } from "./InteractiveImageEditor.svelte";
-declare const __propDef: {
-    props: {
-        value: EditorData;
-        type: "gallery" | "table";
-        selected?: boolean;
+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: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ExampleProps = typeof __propDef.props;
-export type ExampleEvents = typeof __propDef.events;
-export type ExampleSlots = typeof __propDef.slots;
-export default class Example extends SvelteComponent<ExampleProps, ExampleEvents, ExampleSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Example: $$__sveltets_2_IsomorphicComponent<{
+    value: EditorData;
+    type: "gallery" | "table";
+    selected?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Example = InstanceType<typeof Example>;
+export default Example;