@gradio/imageeditor 0.13.0 → 0.14.0

package/dist/shared/core/editor.d.ts

@@ -25,6 +25,7 @@ export declare class CommandManager {
 export declare class LayerManager {
     private layers;
     private active_layer;
+    private active_layer_id;
     private draw_textures;
     layer_store: Writable<{
         active_layer: string;
@@ -32,6 +33,7 @@ export declare class LayerManager {
             name: string;
             id: string;
             user_created: boolean;
+            visible: boolean;
         }[];
     }>;
     private background_layer;
@@ -42,6 +44,7 @@ export declare class LayerManager {
     private border_region;
     private layer_options;
     constructor(image_container: Container, app: Application, fixed_canvas: boolean, dark: boolean, border_region: number, layer_options: LayerOptions);
+    toggle_layer_visibility(id: string): void;
     create_background_layer(width: number, height: number): Container;
     set_layer_options(layer_options: LayerOptions, width: number, height: number): void;
     /**
@@ -53,11 +56,13 @@ export declare class LayerManager {
      * @returns A Promise that resolves to the background Container when the image is loaded
      */
     create_background_layer_from_url(url: string, width?: number, height?: number): Promise<Container>;
-    create_layer({ width, height, layer_name, user_created }: {
+    create_layer({ width, height, layer_name, user_created, layer_id, make_active }: {
         width: number;
         height: number;
         layer_name?: string;
         user_created: boolean;
+        layer_id?: string;
+        make_active?: boolean;
     }): Container;
     /**
      * Creates a new layer with an image loaded from a URL
@@ -106,6 +111,7 @@ interface ImageEditorOptions {
     border_region?: number;
     layer_options?: LayerOptions;
     pad_bottom?: number;
+    theme_mode?: "dark" | "light";
 }
 export interface ImageEditorContext {
     app: Application;
@@ -132,8 +138,8 @@ export interface ImageEditorContext {
             y: number;
         };
         animate?: boolean;
-    }) => void;
-    execute_command: (command: Command) => void;
+    }) => Promise<void>;
+    execute_command: (command: Command) => Promise<void> | void;
     resize_canvas: (width: number, height: number) => void;
     reset: () => void;
     set_background_image: (image: Sprite) => void;
@@ -170,6 +176,7 @@ export declare class ImageEditor {
             name: string;
             id: string;
             user_created: boolean;
+            visible: boolean;
         }[];
     }>;
     private outline_container;
@@ -184,6 +191,7 @@ export declare class ImageEditor {
     private overlay_container;
     private overlay_graphics;
     private pad_bottom;
+    private theme_mode;
     constructor(options: ImageEditorOptions);
     private get context();
     init(): Promise<void>;
@@ -199,8 +207,8 @@ export declare class ImageEditor {
             y: number;
         };
         animate?: boolean;
-    }): void;
-    execute_command(command: Command): void;
+    }): Promise<void>;
+    execute_command(command: Command): Promise<void>;
     undo(): void;
     redo(): void;
     add_image({ image, resize }: {
@@ -215,7 +223,7 @@ export declare class ImageEditor {
     set_tool(tool: ToolbarTool): void;
     set_subtool(subtool: Subtool): void;
     set_background_image(image: Sprite): void;
-    reset_canvas(): void;
+    reset_canvas(): Promise<void>;
     add_layer(): void;
     /**
      * Adds a new layer with an image loaded from a URL
@@ -248,5 +256,6 @@ export declare class ImageEditor {
     }>;
     get background_image_sprite(): Sprite | undefined;
     set_layer_options(layer_options: LayerOptions): void;
+    toggle_layer_visibility(id: string): void;
 }
 export {};

package/dist/shared/core/editor.js

@@ -34,6 +34,7 @@ export class CommandManager {
 export class LayerManager {
     layers = [];
     active_layer = null;
+    active_layer_id = null;
     draw_textures = new Map();
     layer_store = writable({
         active_layer: "",
@@ -54,6 +55,17 @@ export class LayerManager {
         this.border_region = border_region;
         this.layer_options = layer_options;
     }
+    toggle_layer_visibility(id) {
+        const layer = this.layers.find((l) => l.id === id);
+        if (layer) {
+            layer.container.visible = !layer.container.visible;
+            layer.visible = layer.container.visible;
+            this.layer_store.update((state) => ({
+                active_layer: state.active_layer,
+                layers: this.layers
+            }));
+        }
+    }
     create_background_layer(width, height) {
         if (this.background_layer) {
             this.background_layer.destroy();
@@ -171,15 +183,16 @@ export class LayerManager {
             return layer;
         }
     }
-    create_layer({ width, height, layer_name, user_created }) {
+    create_layer({ width, height, layer_name, user_created, layer_id = undefined, make_active = false }) {
         const layer = new Container();
-        const layer_id = Math.random().toString(36).substring(2, 15);
+        const _layer_id = layer_id || Math.random().toString(36).substring(2, 15);
         const _layer_name = layer_name || `Layer ${this.layers.length + 1}`;
         this.layers.push({
             name: _layer_name,
-            id: layer_id,
+            id: _layer_id,
             container: layer,
-            user_created
+            user_created,
+            visible: true
         });
         this.image_container.addChild(layer);
         // Create a single render texture for drawing with transparency
@@ -205,9 +218,11 @@ export class LayerManager {
         // Store texture for drawing
         this.draw_textures.set(layer, draw_texture);
         this.update_layer_order();
-        this.active_layer = layer;
+        if (make_active) {
+            this.set_active_layer(_layer_id);
+        }
         this.layer_store.set({
-            active_layer: layer_id,
+            active_layer: this.active_layer_id || "",
             layers: this.layers
         });
         return layer;
@@ -299,6 +314,7 @@ export class LayerManager {
                 this.layers.find((l) => l.id === id)?.container ||
                     this.layers[0]?.container ||
                     null;
+            this.active_layer_id = id;
             this.layer_store.set({
                 active_layer: id,
                 layers: this.layers
@@ -329,8 +345,9 @@ export class LayerManager {
             }
             this.layers[index].container.destroy();
             if (this.active_layer === this.layers[index].container) {
-                this.active_layer =
-                    this.layers[Math.max(0, index - 1)]?.container || null;
+                const new_active_layer = this.layers[Math.max(0, index - 1)] || null;
+                this.active_layer = new_active_layer?.container || null;
+                this.active_layer_id = new_active_layer?.id || null;
             }
             this.layers = this.layers.filter((l) => l.id !== id);
             this.layer_store.update((_layers) => ({
@@ -599,19 +616,30 @@ export class LayerManager {
     }
     reset_layers(width, height, persist = false) {
         const _layers_to_recreate = persist
-            ? this.layers.map((layer) => layer.name)
-            : this.layer_options.layers;
+            ? this.layers.map((layer) => [layer.name, layer.id])
+            : this.layer_options.layers.map((layer) => [layer, undefined]);
         this.layers.forEach((layer) => {
             this.delete_layer(layer.id);
         });
-        for (const layer of _layers_to_recreate) {
+        for (const [layer_name, layer_id] of _layers_to_recreate) {
             this.create_layer({
                 width,
                 height,
-                layer_name: layer,
-                user_created: this.layer_options.layers.includes(layer) ? false : true
+                layer_name: layer_name,
+                user_created: this.layer_options.layers.find((l) => l === layer_name)
+                    ? false
+                    : true,
+                layer_id: layer_id
             });
         }
+        if (!persist) {
+            this.active_layer = this.layers[0].container;
+            this.active_layer_id = this.layers[0].id;
+        }
+        this.layer_store.update((state) => ({
+            active_layer: this.active_layer_id || this.layers[0].id,
+            layers: this.layers
+        }));
     }
     init_layers(width, height) {
         for (const layer of this.layers) {
@@ -626,8 +654,9 @@ export class LayerManager {
             });
         }
         this.active_layer = this.layers[0].container;
+        this.active_layer_id = this.layers[0].id;
         this.layer_store.update((_layers) => ({
-            active_layer: _layers.layers[0].id,
+            active_layer: this.layers[0].id,
             layers: this.layers
         }));
     }
@@ -739,14 +768,15 @@ export class ImageEditor {
     overlay_container;
     overlay_graphics;
     pad_bottom;
+    theme_mode;
     constructor(options) {
         this.pad_bottom = options.pad_bottom || 0;
         this.dark = options.dark || false;
+        this.theme_mode = options.theme_mode || "dark";
         this.target_element = options.target_element;
         this.width = options.width;
         this.height = options.height;
         this.command_manager = new CommandManager();
-        // this.layers = writable([]);
         this.ready = new Promise((resolve) => {
             this.ready_resolve = resolve;
         });
@@ -816,7 +846,7 @@ export class ImageEditor {
             width: container_box.width,
             height: container_box.height,
             backgroundAlpha: this.dark ? 0 : 1,
-            backgroundColor: this.dark ? 0x333333 : 0xffffff,
+            backgroundColor: this.theme_mode === "dark" ? "#27272a" : "#ffffff",
             resolution: window.devicePixelRatio,
             autoDensity: true,
             antialias: true,
@@ -980,11 +1010,6 @@ export class ImageEditor {
         this.layer_manager = new LayerManager(this.image_container, this.app, this.fixed_canvas, this.dark, this.border_region, this.layer_options);
         this.layers = this.layer_manager.layer_store;
     }
-    // private resize_image(width: number, height: number): void {
-    // 	// Implement image resizing logic here
-    // 	this.image_container.width = width;
-    // 	this.image_container.height = height;
-    // }
     resize_canvas(width, height) {
         if (this.app.renderer) {
             this.app.renderer.resize(width, height);
@@ -1006,22 +1031,31 @@ export class ImageEditor {
             zoom.setup(this.context, this.current_tool, this.current_subtool);
         }
     }
-    set_image_properties(properties) {
+    async set_image_properties(properties) {
         let hard = typeof properties.animate !== "undefined" ? !properties.animate : true;
         if (properties.position) {
-            this.position.set(properties.position, { hard });
+            const pos = this.position.set(properties.position, { hard });
+            if (hard) {
+                await pos;
+            }
         }
         if (properties.scale) {
-            this.scale.set(properties.scale, { hard });
+            const scale = this.scale.set(properties.scale, { hard });
+            if (hard) {
+                await scale;
+            }
         }
         if (properties.width && properties.height) {
             this.width = properties.width;
             this.height = properties.height;
-            this.dimensions.set({ width: properties.width, height: properties.height }, { hard });
+            const dimensions = this.dimensions.set({ width: properties.width, height: properties.height }, { hard });
+            if (hard) {
+                await dimensions;
+            }
         }
     }
-    execute_command(command) {
-        this.command_manager.execute(command);
+    async execute_command(command) {
+        await this.command_manager.execute(command);
     }
     undo() {
         this.command_manager.undo();
@@ -1032,9 +1066,12 @@ export class ImageEditor {
         this.notify("change");
     }
     async add_image({ image, resize = true }) {
-        const image_command = new AddImageCommand(this.context, image, this.fixed_canvas, this.border_region);
-        await image_command.start();
-        this.context.execute_command(image_command);
+        const image_tool = this.tools.get("image");
+        await image_tool.add_image({
+            image,
+            fixed_canvas: this.fixed_canvas,
+            border_region: this.border_region
+        });
     }
     /**
      * Adds an image from a URL as the background layer
@@ -1071,13 +1108,13 @@ export class ImageEditor {
     set_background_image(image) {
         this.background_image = image;
     }
-    reset_canvas() {
+    async reset_canvas() {
         this.layer_manager.reset_layers(this.width, this.height);
         // Clear background image
         this.background_image = undefined;
         this.background_image_present.set(false);
         // Reset position, scale and dimensions to default values
-        this.set_image_properties({
+        await this.set_image_properties({
             width: this.width,
             height: this.height,
             scale: 1,
@@ -1106,7 +1143,9 @@ export class ImageEditor {
             width: this.width,
             height: this.height,
             layer_name: undefined,
-            user_created: true
+            user_created: true,
+            layer_id: undefined,
+            make_active: true
         });
         this.notify("change");
     }
@@ -1130,6 +1169,7 @@ export class ImageEditor {
         for await (const url of layer_urls) {
             await this.layer_manager.add_layer_from_url(url);
         }
+        this.layer_manager.set_active_layer(_layers[0].id);
         // Update resize tool if present with border region
         const resize_tool = this.tools.get("resize");
         if (resize_tool && typeof resize_tool.set_border_region === "function") {
@@ -1218,4 +1258,7 @@ export class ImageEditor {
         this.layer_options = layer_options;
         this.layer_manager.set_layer_options(layer_options, this.width, this.height);
     }
+    toggle_layer_visibility(id) {
+        this.layer_manager.toggle_layer_visibility(id);
+    }
 }

package/dist/shared/image/image.js

@@ -22,8 +22,7 @@ export class ImageTool {
     cleanup() { }
     async add_image({ image, fixed_canvas, border_region = 0 }) {
         const image_command = new AddImageCommand(this.context, image, fixed_canvas, border_region);
-        await image_command.start();
-        this.context.execute_command(image_command);
+        await this.context.execute_command(image_command);
     }
     set_tool(tool, subtool) {
         this.current_tool = tool;
@@ -93,7 +92,7 @@ export class AddImageCommand {
         // First ensure we have run start() to create the sprite and get dimensions
         const [width, height] = await this.start();
         // Update image properties with the original dimensions and center in viewport
-        this.context.set_image_properties({
+        await this.context.set_image_properties({
             scale: 1, // Start at 1:1 scale
             position: {
                 x: this.context.app.screen.width / 2,
@@ -115,7 +114,6 @@ export class AddImageCommand {
         if (this.sprite) {
             this.sprite.destroy();
         }
-        // The background layer will be automatically cleaned up when a new image is added
     }
 }
 /**

package/dist/shared/types.d.ts

@@ -10,3 +10,7 @@ export interface LayerOptions {
 }
 export type Source = "upload" | "webcam" | "clipboard";
 export type Transform = "crop" | "resize";
+export interface WebcamOptions {
+    mirror: boolean;
+    constraints: Record<string, any>;
+}

package/dist/shared/zoom/zoom.js

@@ -110,7 +110,7 @@ export class ZoomTool {
         // Setup event listeners
         this.setup_event_listeners();
         // Update context with initial values
-        this.image_editor_context.set_image_properties({
+        await this.image_editor_context.set_image_properties({
             scale: min_zoom,
             position: { x: initial_x, y: initial_y }
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/imageeditor",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -11,14 +11,14 @@
     "pixi-filters": "^6.1.0",
     "pixi.js": "^8.7.3",
     "tinycolor2": "^1.6.0",
-    "@gradio/atoms": "^0.15.0",
-    "@gradio/icons": "^0.11.0",
-    "@gradio/image": "^0.22.0",
-    "@gradio/utils": "^0.10.1",
-    "@gradio/statustracker": "^0.10.7",
-    "@gradio/upload": "^0.16.0",
+    "@gradio/icons": "^0.12.0",
+    "@gradio/client": "^1.14.1",
+    "@gradio/image": "^0.22.1",
+    "@gradio/statustracker": "^0.10.8",
+    "@gradio/upload": "^0.16.1",
+    "@gradio/atoms": "^0.15.1",
     "@gradio/wasm": "^0.18.1",
-    "@gradio/client": "^1.14.1"
+    "@gradio/utils": "^0.10.1"
   },
   "devDependencies": {
     "@gradio/preview": "^0.13.0"

package/shared/Controls.svelte

@@ -1,62 +1,25 @@
 <script lang="ts">
 	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";
 
-	/**
-	 * Can the current image be saved?
-	 */
 	export let can_save = false;
-	/**
-	 * Is the current image changeable?
-	 */
 	export let changeable = false;
-	/**
-	 * The current zoom level.
-	 */
 	export let current_zoom = 1;
-	/**
-	 * The current tool.
-	 */
 	export let tool: string;
-	/**
-	 * Is the current zoom level minimum?
-	 */
 	export let min_zoom = true;
+	export let enable_download = false;
 
 	const dispatch = createEventDispatcher<{
-		/**
-		 * Remove the current image.
-		 */
 		remove_image: void;
-		/**
-		 * Undo the last action.
-		 */
 		undo: void;
-		/**
-		 * Redo the last action.
-		 */
 		redo: void;
-		/**
-		 * Save the current image.
-		 */
 		save: void;
-		/**
-		 * Zoom in.
-		 */
 		zoom_in: void;
-		/**
-		 * Zoom out.
-		 */
 		zoom_out: void;
-		/**
-		 * Set the zoom level.
-		 */
 		set_zoom: number | "fit";
-		/**
-		 * Pan the image.
-		 */
 		pan: void;
+		download: void;
 	}>();
 
 	let show_zoom_popup = false;
@@ -81,6 +44,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/shared/ImageEditor.svelte

@@ -22,7 +22,7 @@
 	import { create_drag } from "@gradio/upload";
 	import SecondaryToolbar from "./SecondaryToolbar.svelte";
 	import { Check } from "@gradio/icons";
-	import type { LayerOptions, Source, Transform } from "./types";
+	import type { LayerOptions, Source, Transform, WebcamOptions } from "./types";
 
 	import { type ImageBlobs } from "./types";
 	import Controls from "./Controls.svelte";
@@ -36,6 +36,7 @@
 		history: CommandManager["current_history"];
 		upload: void;
 		input: void;
+		download_error: string;
 	}>();
 
 	export const antialias = true;
@@ -51,7 +52,6 @@
 	export let eraser_options: Eraser;
 	export let fixed_canvas = false;
 	export let root: string;
-	export let mirror_webcam = true;
 	export let i18n: I18nFormatter;
 	export let upload: Client["upload"];
 	export let composite: FileData | null;
@@ -60,6 +60,9 @@
 	export let border_region = 0;
 	export let layer_options: LayerOptions;
 	export let current_tool: ToolbarTool;
+	export let webcam_options: WebcamOptions;
+	export let show_download_button = false;
+	export let theme_mode: "dark" | "light";
 
 	let pixi_target: HTMLDivElement;
 	let pixi_target_crop: HTMLDivElement;
@@ -256,7 +259,8 @@
 			tools: ["image", zoom, new ResizeTool(), brush],
 			fixed_canvas,
 			border_region,
-			layer_options
+			layer_options,
+			theme_mode
 		});
 
 		brush.on("change", () => {
@@ -563,6 +567,22 @@
 		dispatch("change");
 		dispatch("input");
 	}
+
+	async function handle_download(): Promise<void> {
+		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
@@ -599,6 +619,8 @@
 				on:pan={(e) => {
 					handle_tool_change({ tool: "pan" });
 				}}
+				enable_download={show_download_button}
+				on:download={() => handle_download()}
 			/>
 		{/if}
 
@@ -633,11 +655,12 @@
 						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>
@@ -652,6 +675,9 @@
 				}}
 				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);
@@ -659,6 +685,9 @@
 				on:delete_layer={(e) => {
 					editor.delete_layer(e.detail);
 				}}
+				on:toggle_layer_visibility={(e) => {
+					editor.toggle_layer_visibility(e.detail);
+				}}
 			/>
 		{/if}
 	{/if}

package/shared/Layers.svelte

@@ -1,6 +1,14 @@
 <script lang="ts">
 	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";
 	import type { Writable } from "svelte/store";
@@ -10,11 +18,17 @@
 		change_layer: string;
 		move_layer: { id: string; direction: "up" | "down" };
 		delete_layer: string;
+		toggle_layer_visibility: string;
 	}>();
 
 	export let layers: Writable<{
 		active_layer: string;
-		layers: { name: string; id: string; user_created: boolean }[];
+		layers: {
+			name: string;
+			id: string;
+			user_created: boolean;
+			visible: boolean;
+		}[];
 	}>;
 	export let enable_additional_layers = true;
 	export let enable_layers = true;
@@ -56,8 +70,27 @@
 		</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}`}