@gradio/imageeditor 0.13.0 → 0.14.1

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @gradio/imageeditor
 
+## 0.14.1
+
+### Dependency updates
+
+- @gradio/statustracker@0.10.9
+- @gradio/atoms@0.15.2
+- @gradio/client@1.14.2
+- @gradio/utils@0.10.2
+- @gradio/upload@0.16.2
+- @gradio/image@0.22.2
+
+## 0.14.0
+
+### Features
+
+- [#10981](https://github.com/gradio-app/gradio/pull/10981) [`0db230f`](https://github.com/gradio-app/gradio/commit/0db230f5c2f19d9b3b455adb1b30ed9374ae1791) - allow users to change the visibility of layers in the image editor.  Thanks @pngwn!
+
+### Fixes
+
+- [#10999](https://github.com/gradio-app/gradio/pull/10999) [`8c70819`](https://github.com/gradio-app/gradio/commit/8c70819f87027b75e44f49a13050ae2c3e8b3580) - implement download button for the ImageEditor.  Thanks @pngwn!
+- [#10997](https://github.com/gradio-app/gradio/pull/10997) [`45d5840`](https://github.com/gradio-app/gradio/commit/45d5840fb265328f3aa0c050ce9c6b87ae7dbbc5) - When custom layers are provided to the ImageEditor, always default to the first layer.  Thanks @pngwn!
+- [#10979](https://github.com/gradio-app/gradio/pull/10979) [`975feee`](https://github.com/gradio-app/gradio/commit/975feee3925e5b65e52ae00da5c5066d8889ae6a) - improve webcam options for the ImageEditor.  Thanks @pngwn!
+- [#10995](https://github.com/gradio-app/gradio/pull/10995) [`fc59815`](https://github.com/gradio-app/gradio/commit/fc598151aa9c77a84f6e7eaf9bcc0cae6ba49369) - ensure the image editor background respects the theme mode.  Thanks @pngwn!
+- [#10994](https://github.com/gradio-app/gradio/pull/10994) [`714015a`](https://github.com/gradio-app/gradio/commit/714015a1868168721ae79d6b5bc10fbc5bbb4290) - ensure images uploaded to the ImageEditor correctly initialise the canvas dimensions.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/upload@0.16.1
+- @gradio/atoms@0.15.1
+- @gradio/statustracker@0.10.8
+- @gradio/icons@0.12.0
+- @gradio/image@0.22.1
+
 ## 0.13.0
 
 ### Features

package/ImageEditor.stories.svelte

@@ -51,6 +51,10 @@
 		},
 		eraser: {
 			default_size: "auto"
+		},
+		webcam_options: {
+			mirror: true,
+			constraints: null
 		}
 	}}
 />
@@ -133,6 +137,10 @@
 		interactive: false,
 		label: "Image Editor",
 		show_label: true,
-		canvas_size: [800, 600]
+		canvas_size: [800, 600],
+		webcam_options: {
+			mirror: true,
+			constraints: null
+		}
 	}}
 />

package/Index.svelte

@@ -13,7 +13,13 @@
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
 	import { tick } from "svelte";
-	import type { LayerOptions, Transform, Source } from "./shared/types";
+	import type {
+		LayerOptions,
+		Transform,
+		Source,
+		WebcamOptions
+	} from "./shared/types";
+
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
@@ -66,6 +72,8 @@
 		clear_status: LoadingStatus;
 	}>;
 	export let border_region = 0;
+	export let webcam_options: WebcamOptions;
+	export let theme_mode: "dark" | "light";
 
 	let editor_instance: InteractiveImageEditor;
 	let image_id: null | string = null;
@@ -235,6 +243,10 @@
 			upload={(...args) => gradio.client.upload(...args)}
 			{placeholder}
 			{full_history}
+			{webcam_options}
+			{show_download_button}
+			{theme_mode}
+			on:download_error={(e) => gradio.dispatch("error", e.detail)}
 		></InteractiveImageEditor>
 	</Block>
 {/if}

package/InteractiveImageEditor.svelte

@@ -31,8 +31,10 @@
 	import {
 		type LayerOptions,
 		type Transform,
-		type Source
+		type Source,
+		type WebcamOptions
 	} from "./shared/types";
+
 	export let brush: IBrush;
 	export let eraser: Eraser;
 	export let sources: Source[];
@@ -41,6 +43,7 @@
 	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;
@@ -58,6 +61,8 @@
 	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;
@@ -220,6 +225,7 @@
 	on:save
 	on:change={handle_change}
 	on:clear={() => dispatch("clear")}
+	on:download_error
 	{sources}
 	{full_history}
 	bind:background_image
@@ -234,6 +240,9 @@
 	{upload}
 	bind:is_dragging
 	bind:has_drawn
+	{webcam_options}
+	{show_download_button}
+	{theme_mode}
 >
 	{#if !background_image && current_tool === "image" && !has_drawn}
 		<div class="empty wrap">

package/README.md

@@ -1 +1,3 @@
 # `@gradio/imageeditor`
+
+hello

package/dist/Index.svelte

@@ -42,6 +42,8 @@ export let show_fullscreen_button = true;
 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() {
@@ -194,6 +196,10 @@ $:
 			upload={(...args) => gradio.client.upload(...args)}
 			{placeholder}
 			{full_history}
+			{webcam_options}
+			{show_download_button}
+			{theme_mode}
+			on:download_error={(e) => gradio.dispatch("error", e.detail)}
 		></InteractiveImageEditor>
 	</Block>
 {/if}

package/dist/Index.svelte.d.ts

@@ -3,7 +3,7 @@ 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";
+import type { LayerOptions, Transform, Source, WebcamOptions } from "./shared/types";
 declare const __propDef: {
     props: {
         elem_id?: string | undefined;
@@ -52,6 +52,8 @@ declare const __propDef: {
             clear_status: LoadingStatus;
         }>;
         border_region?: number | undefined;
+        webcam_options: WebcamOptions;
+        theme_mode: "dark" | "light";
         get_value?: (() => Promise<ImageBlobs | {
             id: string;
         }>) | undefined;
@@ -194,6 +196,12 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
     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);

package/dist/InteractiveImageEditor.svelte

@@ -20,6 +20,7 @@ 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;
@@ -34,6 +35,8 @@ 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;
@@ -168,6 +171,7 @@ let current_tool;
 	on:save
 	on:change={handle_change}
 	on:clear={() => dispatch("clear")}
+	on:download_error
 	{sources}
 	{full_history}
 	bind:background_image
@@ -182,6 +186,9 @@ let current_tool;
 	{upload}
 	bind:is_dragging
 	bind:has_drawn
+	{webcam_options}
+	{show_download_button}
+	{theme_mode}
 >
 	{#if !background_image && current_tool === "image" && !has_drawn}
 		<div class="empty wrap">

package/dist/InteractiveImageEditor.svelte.d.ts

@@ -13,7 +13,7 @@ import { type I18nFormatter } from "@gradio/utils";
 import { type FileData, type Client } from "@gradio/client";
 import { type CommandNode } from "./shared/utils/commands";
 import { type Brush as IBrush, type Eraser } from "./shared/brush/types";
-import { type LayerOptions, type Transform, type Source } from "./shared/types";
+import { type LayerOptions, type Transform, type Source, type WebcamOptions } from "./shared/types";
 declare const __propDef: {
     props: {
         brush: IBrush;
@@ -24,6 +24,7 @@ declare const __propDef: {
         label?: string | undefined;
         show_label: boolean;
         changeable?: boolean | undefined;
+        theme_mode: "dark" | "light";
         layers: FileData[];
         composite: FileData | null;
         background: FileData | null;
@@ -38,12 +39,15 @@ declare const __propDef: {
         placeholder?: string | undefined;
         border_region: number;
         full_history?: (CommandNode | null) | undefined;
+        webcam_options: WebcamOptions;
+        show_download_button?: boolean | undefined;
         get_data?: (() => Promise<ImageBlobs>) | undefined;
         image_id?: (null | string) | undefined;
     };
     events: {
         history: CustomEvent<import("svelte/store").Writable<CommandNode>>;
         save: CustomEvent<void>;
+        download_error: CustomEvent<string>;
         clear?: CustomEvent<undefined> | undefined;
         upload?: CustomEvent<undefined> | undefined;
         change?: CustomEvent<undefined> | undefined;

package/dist/shared/Controls.svelte

@@ -1,11 +1,12 @@
 <script>import { createEventDispatcher } from "svelte";
 import { IconButton, IconButtonWrapper } from "@gradio/atoms";
-import { Check, Trash, ZoomIn, ZoomOut, Pan } from "@gradio/icons";
+import { Check, Trash, ZoomIn, ZoomOut, Pan, Download } from "@gradio/icons";
 export let can_save = false;
 export let changeable = false;
 export let current_zoom = 1;
 export let tool;
 export let min_zoom = true;
+export let enable_download = false;
 const dispatch = createEventDispatcher();
 let show_zoom_popup = false;
 function handle_zoom_click(e) {
@@ -26,6 +27,17 @@ $:
 </script>
 
 <IconButtonWrapper>
+	{#if enable_download}
+		<IconButton
+			Icon={Download}
+			label="Download"
+			on:click={(event) => {
+				dispatch("download");
+				event.stopPropagation();
+			}}
+		/>
+	{/if}
+
 	<IconButton
 		Icon={Pan}
 		label="Pan"

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

@@ -6,6 +6,7 @@ declare const __propDef: {
         current_zoom?: number | undefined;
         tool: string;
         min_zoom?: boolean | undefined;
+        enable_download?: boolean | undefined;
     };
     events: {
         remove_image: CustomEvent<void>;
@@ -16,6 +17,7 @@ declare const __propDef: {
         zoom_out: CustomEvent<void>;
         set_zoom: CustomEvent<number | "fit">;
         pan: CustomEvent<void>;
+        download: CustomEvent<void>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/shared/ImageEditor.svelte

@@ -32,7 +32,6 @@ export let brush_options;
 export let eraser_options;
 export let fixed_canvas = false;
 export let root;
-export let mirror_webcam = true;
 export let i18n;
 export let upload;
 export let composite;
@@ -41,6 +40,9 @@ export let background;
 export let border_region = 0;
 export let layer_options;
 export let current_tool;
+export let webcam_options;
+export let show_download_button = false;
+export let theme_mode;
 let pixi_target;
 let pixi_target_crop;
 $:
@@ -171,7 +173,8 @@ async function init_image_editor() {
     tools: ["image", zoom, new ResizeTool(), brush],
     fixed_canvas,
     border_region,
-    layer_options
+    layer_options,
+    theme_mode
   });
   brush.on("change", () => {
     has_drawn = true;
@@ -391,6 +394,20 @@ async function handle_crop_confirm() {
   dispatch("change");
   dispatch("input");
 }
+async function handle_download() {
+  const blobs = await editor.get_blobs();
+  const blob = blobs.composite;
+  if (!blob) {
+    dispatch("download_error", "Unable to generate image to download.");
+    return;
+  }
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = "image.png";
+  link.click();
+  URL.revokeObjectURL(url);
+}
 </script>
 
 <div
@@ -427,6 +444,8 @@ async function handle_crop_confirm() {
 				on:pan={(e) => {
 					handle_tool_change({ tool: "pan" });
 				}}
+				enable_download={show_download_button}
+				on:download={() => handle_download()}
 			/>
 		{/if}
 
@@ -461,11 +480,12 @@ async function handle_crop_confirm() {
 						on:capture={handle_capture}
 						on:error
 						on:drag
-						{mirror_webcam}
 						streaming={false}
 						mode="image"
 						include_audio={false}
 						{i18n}
+						mirror_webcam={webcam_options.mirror}
+						webcam_constraints={webcam_options.constraints}
 					/>
 				</div>
 			</div>
@@ -480,6 +500,9 @@ async function handle_crop_confirm() {
 				}}
 				on:change_layer={(e) => {
 					editor.set_layer(e.detail);
+					if (current_tool === "draw") {
+						handle_tool_change({ tool: "draw" });
+					}
 				}}
 				on:move_layer={(e) => {
 					editor.move_layer(e.detail.id, e.detail.direction);
@@ -487,6 +510,9 @@ async function handle_crop_confirm() {
 				on:delete_layer={(e) => {
 					editor.delete_layer(e.detail);
 				}}
+				on:toggle_layer_visibility={(e) => {
+					editor.toggle_layer_visibility(e.detail);
+				}}
 			/>
 		{/if}
 	{/if}

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

@@ -6,7 +6,7 @@ import type { I18nFormatter } from "@gradio/utils";
 import type { Client, FileData } from "@gradio/client";
 import { type CommandNode } from "./utils/commands";
 import { type Brush, type Eraser } from "./brush/types";
-import type { LayerOptions, Source, Transform } from "./types";
+import type { LayerOptions, Source, Transform, WebcamOptions } from "./types";
 import { type ImageBlobs } from "./types";
 declare const __propDef: {
     props: {
@@ -22,7 +22,6 @@ declare const __propDef: {
         eraser_options: Eraser;
         fixed_canvas?: boolean | undefined;
         root: string;
-        mirror_webcam?: boolean | undefined;
         i18n: I18nFormatter;
         upload: Client["upload"];
         composite: FileData | null;
@@ -31,6 +30,9 @@ declare const __propDef: {
         border_region?: number | undefined;
         layer_options: LayerOptions;
         current_tool: ToolbarTool;
+        webcam_options: WebcamOptions;
+        show_download_button?: boolean | undefined;
+        theme_mode: "dark" | "light";
         has_drawn?: boolean | undefined;
         get_blobs?: (() => Promise<ImageBlobs>) | undefined;
         add_image?: ((image: Blob | File) => void) | undefined;
@@ -51,6 +53,7 @@ declare const __propDef: {
         history: CustomEvent<import("svelte/store").Writable<CommandNode>>;
         upload: CustomEvent<void>;
         input: CustomEvent<void>;
+        download_error: CustomEvent<string>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/shared/Layers.svelte

@@ -1,5 +1,13 @@
 <script>import { click_outside } from "./utils/events";
-import { Layers, Clear, ArrowUp, ArrowDown, Plus } from "@gradio/icons";
+import {
+  Layers,
+  Clear,
+  ArrowUp,
+  ArrowDown,
+  Plus,
+  Visibility,
+  VisibilityOff
+} from "@gradio/icons";
 import { IconButton } from "@gradio/atoms";
 import { createEventDispatcher } from "svelte";
 const dispatch = createEventDispatcher();
@@ -40,8 +48,27 @@ function delete_layer(id) {
 		</button>
 		{#if show_layers}
 			<ul>
-				{#each $layers.layers as { id, name, user_created }, i (i)}
+				{#each $layers.layers as { id, name, user_created, visible }, i (i)}
 					<li>
+						{#if !visible}
+							<IconButton
+								Icon={VisibilityOff}
+								size="small"
+								on:click={(e) => {
+									e.stopPropagation();
+									dispatch("toggle_layer_visibility", id);
+								}}
+							/>
+						{:else}
+							<IconButton
+								Icon={Visibility}
+								size="small"
+								on:click={(e) => {
+									e.stopPropagation();
+									dispatch("toggle_layer_visibility", id);
+								}}
+							/>
+						{/if}
 						<button
 							class:selected_layer={$layers.active_layer === id}
 							aria-label={`layer-${i + 1}`}

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

@@ -8,6 +8,7 @@ declare const __propDef: {
                 name: string;
                 id: string;
                 user_created: boolean;
+                visible: boolean;
             }[];
         }>;
         enable_additional_layers?: boolean | undefined;
@@ -22,6 +23,7 @@ declare const __propDef: {
             direction: "up" | "down";
         }>;
         delete_layer: CustomEvent<string>;
+        toggle_layer_visibility: CustomEvent<string>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/shared/SecondaryToolbar.svelte

@@ -17,6 +17,7 @@ export let show_layers = false;
 				on:change_layer
 				on:move_layer
 				on:delete_layer
+				on:toggle_layer_visibility
 			/>
 		{/if}
 	</div>

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

@@ -8,6 +8,7 @@ declare const __propDef: {
                 name: string;
                 id: string;
                 user_created: boolean;
+                visible: boolean;
             }[];
         }>;
         enable_additional_layers?: boolean | undefined;
@@ -22,6 +23,7 @@ declare const __propDef: {
             direction: "up" | "down";
         }>;
         delete_layer: CustomEvent<string>;
+        toggle_layer_visibility: CustomEvent<string>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/shared/brush/brush-textures.d.ts

@@ -16,14 +16,8 @@ export declare class BrushTextures {
     private erase_graphics;
     private dimensions;
     private is_new_stroke;
-    private scale;
     private current_opacity;
     private current_mode;
-    private last_from_x;
-    private last_from_y;
-    private last_to_x;
-    private last_to_y;
-    private last_size;
     constructor(image_editor_context: ImageEditorContext, app: Application);
     /**
      * Initializes textures needed for the brush tool.

package/dist/shared/brush/brush-textures.js

@@ -1,5 +1,4 @@
 import { Container, RenderTexture, Sprite, Graphics, Application } from "pixi.js";
-import { safe_destroy, safe_remove_child } from "./brush-utils";
 import {} from "../core/editor";
 /**
  * Class to handle texture operations for the brush tool.
@@ -19,18 +18,10 @@ export class BrushTextures {
     dimensions;
     // Track if a new stroke is starting
     is_new_stroke = true;
-    // Current scale factor
-    scale = 1;
     // Track the current drawing opacity
     current_opacity = 1.0;
     // Track current drawing mode
     current_mode = "draw";
-    // Store last drawing parameters for eraser recreation
-    last_from_x = null;
-    last_from_y = null;
-    last_to_x = null;
-    last_to_y = null;
-    last_size = null;
     constructor(image_editor_context, app) {
         this.image_editor_context = image_editor_context;
         this.app = app;
@@ -38,10 +29,6 @@ export class BrushTextures {
             width: this.image_editor_context.image_container.width,
             height: this.image_editor_context.image_container.height
         };
-        // Subscribe to scale changes
-        this.image_editor_context.scale.subscribe((scale) => {
-            this.scale = scale;
-        });
     }
     /**
      * Initializes textures needed for the brush tool.
@@ -256,12 +243,6 @@ export class BrushTextures {
         this.current_mode = mode;
         this.current_opacity =
             mode === "draw" ? Math.min(Math.max(opacity, 0), 1) : 0.5;
-        // Store parameters for potential eraser recreation
-        this.last_from_x = from_x;
-        this.last_from_y = from_y;
-        this.last_to_x = to_x;
-        this.last_to_y = to_y;
-        this.last_size = size;
         // Apply scale to brush size for consistent rendering
         const scaled_size = size;
         // For new strokes, clear the graphics and texture completely

package/dist/shared/brush/brush.js

@@ -171,8 +171,9 @@ export class BrushTool {
      * @private
      */
     on_pointer_down(event) {
-        // Don't draw if not over image
-        if (this.current_tool !== "erase" && this.current_tool !== "draw") {
+        const current_layer = this.image_editor_context.layer_manager.get_active_layer();
+        if (!current_layer?.visible ||
+            (this.current_tool !== "erase" && this.current_tool !== "draw")) {
             return;
         }
         if (this.brush_cursor && !this.brush_cursor.is_over_image())