@gradio/imageeditor 0.12.13 → 0.13.0

package/{shared/InteractiveImageEditor.svelte → InteractiveImageEditor.svelte}

@@ -16,49 +16,47 @@
 	import { createEventDispatcher } from "svelte";
 	import { type I18nFormatter } from "@gradio/utils";
 	import { prepare_files, type FileData, type Client } from "@gradio/client";
-	import { type CommandNode } from "./utils/commands";
-	import ImageEditor from "./ImageEditor.svelte";
-	import Layers from "./layers/Layers.svelte";
-	import { type Brush as IBrush } from "./tools/Brush.svelte";
-	import { type Eraser } from "./tools/Brush.svelte";
-
-	import { Tools, Crop, Brush, Sources } from "./tools";
+	import { type CommandNode } from "./shared/utils/commands";
+	import ImageEditor from "./shared/ImageEditor.svelte";
+	// import Layers from "./layers/Layers.svelte";
+	import { type Brush as IBrush, type Eraser } from "./shared/brush/types";
+	// import { type Eraser } from "./tools/Brush.svelte";
+	import { type Tool as ToolbarTool } from "./shared/Toolbar.svelte";
+
+	// import { Tools, Crop, Brush, Sources } from "./tools";
 	import { BlockLabel } from "@gradio/atoms";
 	import { Image as ImageIcon } from "@gradio/icons";
-	import { inject } from "./utils/parse_placeholder";
-
-	export let brush: IBrush | null;
-	export let eraser: Eraser | null;
-	export let sources: ("clipboard" | "webcam" | "upload")[];
-	export let crop_size: [number, number] | `${string}:${string}` | null = null;
+	import { inject } from "./shared/utils/parse_placeholder";
+	// import Sources from "./shared/image/Sources.svelte";
+	import {
+		type LayerOptions,
+		type Transform,
+		type Source
+	} 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 value: EditorData | null = {
-		background: null,
-		layers: [],
-		composite: null
-	};
-	export let transforms: "crop"[] = ["crop"];
-	export let layers: boolean;
+
+	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 status:
-		| "pending"
-		| "complete"
-		| "error"
-		| "generating"
-		| "streaming" = "complete";
+
 	export let canvas_size: [number, number];
 	export let fixed_canvas = false;
 	export let realtime: boolean;
 	export let upload: Client["upload"];
-	export let stream_handler: Client["stream"];
-	export let dragging: boolean;
+	export let is_dragging: boolean;
 	export let placeholder: string | undefined = undefined;
-	export let dynamic_height: number | undefined = undefined;
-	export let height;
+	export let border_region: number;
 	export let full_history: CommandNode | null = null;
 
 	const dispatch = createEventDispatcher<{
@@ -69,6 +67,7 @@
 	}>();
 
 	let editor: ImageEditor;
+	let has_drawn = false;
 
 	function is_not_null(o: Blob | null): o is Blob {
 		return !!o;
@@ -78,7 +77,7 @@
 		return !!o;
 	}
 
-	$: if (bg) dispatch("upload");
+	$: if (background_image) dispatch("upload");
 
 	export async function get_data(): Promise<ImageBlobs> {
 		let blobs;
@@ -131,19 +130,13 @@
 		}
 	}
 
-	$: handle_value(value);
-	$: crop_constraint = crop_size;
-	let bg = false;
+	$: handle_value({ layers, composite, background });
+
+	let background_image = false;
 	let history = false;
 
 	export let image_id: null | string = null;
 
-	$: editor &&
-		editor.set_tool &&
-		(sources && sources.length
-			? editor.set_tool("bg")
-			: editor.set_tool("draw"));
-
 	type BinaryImages = [string, string, File, number | null][];
 
 	function nextframe(): Promise<void> {
@@ -158,16 +151,11 @@
 			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,
@@ -191,7 +179,6 @@
 					i
 				]);
 		});
-
 		await Promise.all(
 			images.map(async ([image_id, type, data, index]) => {
 				return accept_blobs({
@@ -202,7 +189,6 @@
 		);
 		image_id = id;
 		dispatch("change");
-
 		await nextframe();
 		uploading = false;
 		if (pending) {
@@ -212,14 +198,9 @@
 		}
 	}
 
-	let active_mode: "webcam" | "color" | null = null;
-	let editor_height = height - 100;
-
-	let _dynamic_height: number;
-
-	$: dynamic_height = _dynamic_height;
-
 	$: [heading, paragraph] = placeholder ? inject(placeholder) : [false, false];
+
+	let current_tool: ToolbarTool;
 </script>
 
 <BlockLabel
@@ -228,60 +209,34 @@
 	label={label || i18n("image.image")}
 />
 <ImageEditor
+	{transforms}
+	{composite}
+	{layers}
+	{background}
 	on:history
 	{canvas_size}
-	crop_size={Array.isArray(crop_size) ? crop_size : undefined}
 	bind:this={editor}
-	bind:height={editor_height}
-	bind:canvas_height={_dynamic_height}
-	parent_height={height}
 	{changeable}
 	on:save
 	on:change={handle_change}
 	on:clear={() => dispatch("clear")}
-	bind:history
-	bind:bg
 	{sources}
-	crop_constraint={!!crop_constraint}
 	{full_history}
+	bind:background_image
+	bind:current_tool
+	brush_options={brush}
+	eraser_options={eraser}
+	{fixed_canvas}
+	{border_region}
+	{layer_options}
+	{i18n}
+	{root}
+	{upload}
+	bind:is_dragging
+	bind:has_drawn
 >
-	<Tools {i18n}>
-		<Layers layer_files={value?.layers || null} enable_layers={layers} />
-
-		<Sources
-			bind:dragging
-			{i18n}
-			{root}
-			{sources}
-			{upload}
-			{stream_handler}
-			{canvas_size}
-			bind:bg
-			bind:active_mode
-			background_file={value?.background || value?.composite || null}
-			{fixed_canvas}
-		></Sources>
-
-		{#if transforms.includes("crop")}
-			<Crop {crop_constraint} />
-		{/if}
-		{#if brush}
-			<Brush
-				color_mode={brush.color_mode}
-				default_color={brush.default_color}
-				default_size={brush.default_size}
-				colors={brush.colors}
-				mode="draw"
-			/>
-		{/if}
-
-		{#if brush && eraser}
-			<Brush default_size={eraser.default_size} mode="erase" />
-		{/if}
-	</Tools>
-
-	{#if !bg && !history && active_mode !== "webcam" && status !== "error"}
-		<div class="empty wrap" style:height={`${editor_height}px`}>
+	{#if !background_image && current_tool === "image" && !has_drawn}
+		<div class="empty wrap">
 			{#if sources && sources.length}
 				{#if heading || paragraph}
 					{#if heading}
@@ -326,10 +281,10 @@
 		left: 0;
 		right: 0;
 		margin: auto;
-		z-index: var(--layer-top);
+		z-index: var(--layer-1);
 		text-align: center;
-		color: var(--body-text-color);
-		top: var(--size-8);
+		color: var(--color-grey-500) !important;
+		cursor: pointer;
 	}
 
 	.wrap {
@@ -337,10 +292,8 @@
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
-		color: var(--block-label-text-color);
 		line-height: var(--line-md);
 		font-size: var(--text-md);
-		pointer-events: none;
 	}
 
 	.or {

package/dist/Example.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { EditorData } from "./shared/InteractiveImageEditor.svelte";
+import type { EditorData } from "./InteractiveImageEditor.svelte";
 declare const __propDef: {
     props: {
         value: EditorData;

package/dist/Index.svelte

@@ -1,7 +1,8 @@
 <svelte:options accessors={true} immutable={true} />
 
-<script>import { BaseStaticImage as StaticImage } from "@gradio/image";
-import InteractiveImageEditor from "./shared/InteractiveImageEditor.svelte";
+<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";
@@ -18,7 +19,7 @@ export let show_label;
 export let show_download_button;
 export let root;
 export let value_is_output = false;
-export let height;
+export let height = 350;
 export let width;
 export let _selectable = false;
 export let container = true;
@@ -26,18 +27,13 @@ export let scale = null;
 export let min_width = void 0;
 export let loading_status;
 export let show_share_button = false;
-export let sources = [
-  "upload",
-  "clipboard",
-  "webcam"
-];
+export let sources = [];
 export let interactive;
 export let placeholder;
 export let brush;
 export let eraser;
-export let crop_size = null;
-export let transforms = ["crop"];
-export let layers = true;
+export let transforms = [];
+export let layers;
 export let attached_events = [];
 export let server;
 export let canvas_size;
@@ -45,6 +41,7 @@ export let fixed_canvas = false;
 export let show_fullscreen_button = true;
 export let full_history = null;
 export let gradio;
+export let border_region = 0;
 let editor_instance;
 let image_id = null;
 export async function get_value() {
@@ -56,7 +53,7 @@ export async function get_value() {
   const blobs = await editor_instance.get_data();
   return blobs;
 }
-let dragging;
+let is_dragging;
 $:
   value && handle_change();
 const is_browser = typeof window !== "undefined";
@@ -82,28 +79,28 @@ function handle_history_change() {
     tick().then((_) => value_is_output = false);
   }
 }
-let dynamic_height = void 0;
-let safe_height_initial = Math.max(
-  canvas_size[1] / (is_browser ? window.devicePixelRatio : 1),
-  250
-);
-$:
-  safe_height = Math.max((dynamic_height ?? safe_height_initial) + 100, 250);
 $:
   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>
 
 {#if !interactive}
 	<Block
 		{visible}
 		variant={"solid"}
-		border_mode={dragging ? "focus" : "base"}
+		border_mode={is_dragging ? "focus" : "base"}
 		padding={false}
 		{elem_id}
 		{elem_classes}
 		{height}
 		{width}
-		allow_overflow={false}
+		allow_overflow={true}
+		overflow_behavior="visible"
 		{container}
 		{scale}
 		{min_width}
@@ -132,13 +129,14 @@ $:
 	<Block
 		{visible}
 		variant={has_value ? "solid" : "dashed"}
-		border_mode={dragging ? "focus" : "base"}
+		border_mode={is_dragging ? "focus" : "base"}
 		padding={false}
 		{elem_id}
 		{elem_classes}
-		height={height || safe_height}
+		{height}
 		{width}
-		allow_overflow={false}
+		allow_overflow={true}
+		overflow_behavior="visible"
 		{container}
 		{scale}
 		{min_width}
@@ -151,25 +149,25 @@ $:
 		/>
 
 		<InteractiveImageEditor
+			{border_region}
 			on:history={(e) => (full_history = e.detail)}
-			bind:dragging
+			bind:is_dragging
 			{canvas_size}
 			on:change={() => handle_history_change()}
 			bind:image_id
-			{crop_size}
-			{value}
+			layers={normalised_layers}
+			composite={normalised_composite}
+			background={normalised_background}
 			bind:this={editor_instance}
-			bind:dynamic_height
 			{root}
 			{sources}
 			{label}
 			{show_label}
-			{height}
 			{fixed_canvas}
 			on:save={(e) => handle_save()}
 			on:edit={() => gradio.dispatch("edit")}
 			on:clear={() => gradio.dispatch("clear")}
-			on:drag={({ detail }) => (dragging = detail)}
+			on:drag={({ detail }) => (is_dragging = detail)}
 			on:upload={() => gradio.dispatch("upload")}
 			on:share={({ detail }) => gradio.dispatch("share", detail)}
 			on:error={({ detail }) => {
@@ -192,10 +190,8 @@ $:
 			i18n={gradio.i18n}
 			{transforms}
 			accept_blobs={server.accept_blobs}
-			{layers}
-			status={loading_status?.status}
+			layer_options={layers}
 			upload={(...args) => gradio.client.upload(...args)}
-			stream_handler={(...args) => gradio.client.stream(...args)}
 			{placeholder}
 			{full_history}
 		></InteractiveImageEditor>

package/dist/Index.svelte.d.ts

@@ -1,8 +1,9 @@
 import { SvelteComponent } from "svelte";
-import type { Brush, Eraser } from "./shared/tools/Brush.svelte";
-import type { EditorData, ImageBlobs } from "./shared/InteractiveImageEditor.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 } from "./shared/types";
 declare const __propDef: {
     props: {
         elem_id?: string | undefined;
@@ -14,7 +15,7 @@ declare const __propDef: {
         show_download_button: boolean;
         root: string;
         value_is_output?: boolean | undefined;
-        height: number | undefined;
+        height?: number | undefined;
         width: number | undefined;
         _selectable?: boolean | undefined;
         container?: boolean | undefined;
@@ -22,14 +23,13 @@ declare const __propDef: {
         min_width?: number | undefined;
         loading_status: LoadingStatus;
         show_share_button?: boolean | undefined;
-        sources?: ("clipboard" | "webcam" | "upload")[] | undefined;
+        sources?: Source[] | undefined;
         interactive: boolean;
         placeholder: string | undefined;
         brush: Brush;
         eraser: Eraser;
-        crop_size?: ([number, number] | `${string}:${string}` | null) | undefined;
-        transforms?: "crop"[] | undefined;
-        layers?: boolean | undefined;
+        transforms?: Transform[] | undefined;
+        layers: LayerOptions;
         attached_events?: string[] | undefined;
         server: {
             accept_blobs: (a: any) => void;
@@ -51,6 +51,7 @@ declare const __propDef: {
             share: ShareData;
             clear_status: LoadingStatus;
         }>;
+        border_region?: number | undefined;
         get_value?: (() => Promise<ImageBlobs | {
             id: string;
         }>) | undefined;
@@ -120,9 +121,9 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
     get show_share_button(): boolean | undefined;
     /**accessor*/
     set show_share_button(_: boolean | undefined);
-    get sources(): ("clipboard" | "upload" | "webcam")[] | undefined;
+    get sources(): Source[] | undefined;
     /**accessor*/
-    set sources(_: ("clipboard" | "upload" | "webcam")[] | undefined);
+    set sources(_: Source[] | undefined);
     get interactive(): boolean;
     /**accessor*/
     set interactive(_: boolean);
@@ -135,15 +136,12 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
     get eraser(): Eraser;
     /**accessor*/
     set eraser(_: Eraser);
-    get crop_size(): [number, number] | `${string}:${string}` | null | undefined;
+    get transforms(): Transform[] | undefined;
     /**accessor*/
-    set crop_size(_: [number, number] | `${string}:${string}` | null | undefined);
-    get transforms(): "crop"[] | undefined;
+    set transforms(_: Transform[] | undefined);
+    get layers(): LayerOptions;
     /**accessor*/
-    set transforms(_: "crop"[] | undefined);
-    get layers(): boolean | undefined;
-    /**accessor*/
-    set layers(_: boolean | undefined);
+    set layers(_: LayerOptions);
     get attached_events(): string[] | undefined;
     /**accessor*/
     set attached_events(_: string[] | undefined);
@@ -193,6 +191,9 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
         share: ShareData;
         clear_status: LoadingStatus;
     }>);
+    get border_region(): number | undefined;
+    /**accessor*/
+    set border_region(_: number | undefined);
     get undefined(): any;
     /**accessor*/
     set undefined(_: any);