@gradio/imageeditor 0.20.1 → 0.21.0

package/shared/ImageEditor.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script module lang="ts">
 	import type { Tool, Subtool } from "./Toolbar.svelte";
 
 	export const EDITOR_KEY = Symbol("editor");
@@ -58,6 +58,7 @@
 		full_history = $bindable(null),
 		has_drawn = $bindable(false),
 		can_undo = $bindable(false),
+		has_user_edits = $bindable(false),
 		onclear,
 		onsave,
 		onchange,
@@ -90,6 +91,7 @@
 		full_history?: CommandNode | null;
 		has_drawn?: boolean;
 		can_undo?: boolean;
+		has_user_edits?: boolean;
 		onclear?: () => void;
 		onsave?: () => void;
 		onchange?: () => void;
@@ -182,6 +184,7 @@
 	}
 
 	let pending_bg: Promise<void>;
+	let loading_value = 0;
 	/**
 	 * Adds an image to the editor from a URL
 	 * @param {string | FileData} source - The URL of the image or a FileData object
@@ -199,6 +202,8 @@
 			| any
 	): Promise<void> {
 		if (!editor || !source || !check_if_should_init()) return;
+		has_user_edits = false;
+		loading_value += 1;
 		let url: string;
 
 		if (typeof source === "string") {
@@ -207,6 +212,7 @@
 			url = source.url;
 		} else {
 			console.warn("Invalid source provided to add_image_from_url:", source);
+			loading_value -= 1;
 			return;
 		}
 
@@ -222,6 +228,8 @@
 			oninput?.();
 		} catch (error) {
 			console.error("Error adding image from URL:", error);
+		} finally {
+			loading_value -= 1;
 		}
 	}
 
@@ -234,19 +242,23 @@
 		source: FileData[] | any
 	): Promise<void> {
 		if (!editor || !source.length || !check_if_should_init()) return;
+		has_user_edits = false;
+		loading_value += 1;
 
-		if (
-			Array.isArray(source) &&
-			source.every((item) => item?.meta?._type === "gradio.FileData")
-		) {
-			try {
+		try {
+			if (
+				Array.isArray(source) &&
+				source.every((item) => item?.meta?._type === "gradio.FileData")
+			) {
 				await pending_bg;
 				await editor.add_layers_from_url(source.map((item) => item.url));
 				onchange?.();
 				oninput?.();
-			} catch (error) {
-				console.error("Error adding layer from URL:", error);
 			}
+		} catch (error) {
+			console.error("Error adding layer from URL:", error);
+		} finally {
+			loading_value -= 1;
 		}
 	}
 
@@ -425,6 +437,7 @@
 		});
 
 		editor.on("change", () => {
+			if (loading_value === 0) has_user_edits = true;
 			onchange?.();
 			oninput?.();
 			full_history = editor.command_manager.history;
@@ -782,6 +795,7 @@
 	{#if ready}
 		{#if current_subtool !== "crop"}
 			<Controls
+				{i18n}
 				{changeable}
 				onset_zoom={(zoom) => handle_zoom_change(zoom)}
 				onzoom_in={() => zoom_in_out("in")}
@@ -806,6 +820,7 @@
 
 		{#if current_subtool !== "crop"}
 			<Toolbar
+				{i18n}
 				{sources}
 				{transforms}
 				background={background_image}
@@ -846,6 +861,7 @@
 
 		{#if current_subtool !== "crop" && !layer_options.disabled}
 			<SecondaryToolbar
+				{i18n}
 				enable_additional_layers={layer_options.allow_additional_layers}
 				layers={editor.layers}
 				onnew_layer={() => {
@@ -884,7 +900,7 @@
 		<div class="crop-confirm-button">
 			<IconButton
 				Icon={Check}
-				label="Confirm crop"
+				label={i18n("image_editor.confirm_crop")}
 				show_label={true}
 				size="large"
 				padded={true}

package/shared/Layers.svelte

@@ -11,8 +11,10 @@
 	} from "@gradio/icons";
 	import { IconButton } from "@gradio/atoms";
 	import type { Writable } from "svelte/store";
+	import type { I18nFormatter } from "@gradio/utils";
 
 	let {
+		i18n,
 		layers,
 		enable_additional_layers = true,
 		enable_layers = true,
@@ -23,6 +25,7 @@
 		ondelete_layer,
 		ontoggle_layer_visibility
 	}: {
+		i18n: I18nFormatter;
 		layers: Writable<{
 			active_layer: string;
 			layers: {
@@ -58,6 +61,13 @@
 	function delete_layer(id: string): void {
 		ondelete_layer?.(id);
 	}
+
+	function localize_layer_name(name: string): string {
+		const generated_layer_name = /^Layer (\d+)$/.exec(name);
+		return generated_layer_name
+			? `${i18n("image_editor.layer")} ${generated_layer_name[1]}`
+			: name;
+	}
 </script>
 
 {#if enable_layers}
@@ -68,15 +78,18 @@
 	>
 		<button
 			class="layer-title-button"
-			aria-label="Show Layers"
+			aria-label={i18n("image_editor.show_layers")}
 			onclick={(event) => {
 				event.stopPropagation();
 				show_layers = !show_layers;
 			}}
 		>
 			{show_layers
-				? "Layers"
-				: $layers.layers.find((l) => l.id === $layers.active_layer)?.name}
+				? i18n("image_editor.layers")
+				: localize_layer_name(
+						$layers.layers.find((l) => l.id === $layers.active_layer)?.name ??
+							""
+					)}
 			<span class="icon"><Layers /></span>
 		</button>
 		{#if show_layers}
@@ -108,7 +121,7 @@
 							onclick={(event) => {
 								event.stopPropagation();
 								change_layer(id);
-							}}>{name}</button
+							}}>{localize_layer_name(name)}</button
 						>
 						{#if $layers.layers.length > 1}
 							<div>
@@ -150,7 +163,7 @@
 					<li class="add-layer">
 						<IconButton
 							Icon={Plus}
-							label="Add Layer"
+							label={i18n("image_editor.add_layer")}
 							onclick={(e) => {
 								e.stopPropagation();
 								new_layer();

package/shared/Resize.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script module lang="ts">
 	export type Position =
 		| "top-left"
 		| "top"

package/shared/SecondaryToolbar.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
 	import Layers from "./Layers.svelte";
 	import type { Writable } from "svelte/store";
+	import type { I18nFormatter } from "@gradio/utils";
 
 	let {
+		i18n,
 		layers,
 		enable_additional_layers = true,
 		enable_layers = true,
@@ -13,6 +15,7 @@
 		ondelete_layer,
 		ontoggle_layer_visibility
 	}: {
+		i18n: I18nFormatter;
 		layers: Writable<{
 			active_layer: string;
 			layers: {
@@ -37,6 +40,7 @@
 	<div class="toolbar-wrap">
 		{#if enable_layers}
 			<Layers
+				{i18n}
 				{layers}
 				{enable_additional_layers}
 				{enable_layers}

package/shared/Toolbar.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script module lang="ts">
 	export type Tool = "image" | "draw" | "erase" | "pan";
 	export type Subtool =
 		| "upload"
@@ -13,6 +13,7 @@
 
 <script lang="ts">
 	import IconButton from "./IconButton.svelte";
+	import type { I18nFormatter } from "@gradio/utils";
 	import {
 		Image,
 		Brush,
@@ -33,6 +34,7 @@
 	} from "./brush/types";
 
 	let {
+		i18n,
 		tool = "image",
 		subtool = null,
 		background = false,
@@ -51,6 +53,7 @@
 		ontool_change,
 		onsubtool_change
 	}: {
+		i18n: I18nFormatter;
 		tool?: Tool;
 		subtool?: Subtool;
 		background?: boolean;
@@ -113,7 +116,7 @@
 		{#if can_edit_image}
 			<IconButton
 				Icon={Image}
-				label="Image"
+				label={i18n("image.image")}
 				highlight={tool === "image"}
 				onclick={(e) => handle_tool_click(e, "image")}
 				size="medium"
@@ -124,7 +127,7 @@
 		{#if brush_options}
 			<IconButton
 				Icon={Brush}
-				label="Brush"
+				label={i18n("image_editor.brush")}
 				onclick={(e) => handle_tool_click(e, "draw")}
 				highlight={tool === "draw"}
 				size="medium"
@@ -135,7 +138,7 @@
 		{#if eraser_options}
 			<IconButton
 				Icon={Erase}
-				label="Erase"
+				label={i18n("image_editor.erase")}
 				onclick={(e) => handle_tool_click(e, "erase")}
 				highlight={tool === "erase"}
 				size="medium"
@@ -155,7 +158,7 @@
 				{#if can_crop}
 					<IconButton
 						Icon={Crop}
-						label="Crop"
+						label={i18n("image_editor.crop")}
 						onclick={(e) => handle_subtool_click(e, "crop")}
 						highlight={subtool === "crop"}
 						size="medium"
@@ -167,7 +170,7 @@
 				{#if can_resize}
 					<IconButton
 						Icon={Resize}
-						label="Resize"
+						label={i18n("image_editor.resize")}
 						onclick={(e) => handle_subtool_click(e, "size")}
 						highlight={subtool === "size"}
 						size="medium"
@@ -180,7 +183,7 @@
 				{#if can_upload}
 					<IconButton
 						Icon={Upload}
-						label="Upload"
+						label={i18n("image_editor.upload")}
 						onclick={(e) => handle_subtool_click(e, "upload")}
 						highlight={subtool === "upload"}
 						size="medium"
@@ -192,7 +195,7 @@
 				{#if can_paste}
 					<IconButton
 						Icon={ImagePaste}
-						label="Paste"
+						label={i18n("image_editor.paste")}
 						onclick={(e) => handle_subtool_click(e, "paste")}
 						highlight={subtool === "paste"}
 						size="large"
@@ -204,7 +207,7 @@
 				{#if can_webcam}
 					<IconButton
 						Icon={Webcam}
-						label="Webcam"
+						label={i18n("image_editor.webcam")}
 						onclick={(e) => handle_subtool_click(e, "webcam")}
 						highlight={subtool === "webcam"}
 						size="medium"
@@ -219,7 +222,7 @@
 		{#if tool === "draw" && brush_options}
 			<IconButton
 				Icon={ColorPickerSolid}
-				label="Color"
+				label={i18n("image_editor.color")}
 				color={selected_color}
 				onclick={(e) => handle_subtool_click(e, "color")}
 				size="medium"
@@ -229,7 +232,7 @@
 			/>
 			<IconButton
 				Icon={BrushSize}
-				label="Brush Size"
+				label={i18n("image_editor.brush_size")}
 				onclick={(e) => handle_subtool_click(e, "size")}
 				highlight={subtool === "size"}
 				size="medium"
@@ -264,7 +267,7 @@
 		{#if tool === "erase" && eraser_options}
 			<IconButton
 				Icon={BrushSize}
-				label="Eraser Size"
+				label={i18n("image_editor.eraser_size")}
 				onclick={(e) => handle_subtool_click(e, "size")}
 				highlight={subtool === "size"}
 				size="medium"

package/shared/brush/brush-textures.test.ts

@@ -0,0 +1,77 @@
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import { Application, Container } from "pixi.js";
+
+import { LayerManager } from "../core/layers";
+import type { ImageEditorContext } from "../core/editor";
+import { BrushCommand } from "./brush-textures";
+
+describe("BrushCommand", () => {
+	let app: Application;
+	let image_container: Container;
+	let layer_manager: LayerManager;
+	let context: ImageEditorContext;
+
+	beforeEach(async () => {
+		app = new Application();
+		await app.init({
+			width: 32,
+			height: 32,
+			backgroundAlpha: 0,
+			preference: "webgl"
+		});
+		image_container = new Container();
+		layer_manager = new LayerManager(image_container, app, true, false, 0, {
+			allow_additional_layers: true,
+			layers: ["Layer 1"],
+			disabled: false
+		});
+		layer_manager.create_layer({
+			width: 32,
+			height: 32,
+			user_created: true,
+			layer_id: "mask",
+			make_active: true
+		});
+		context = {
+			app,
+			image_container,
+			layer_manager
+		} as ImageEditorContext;
+	});
+
+	afterEach(() => {
+		image_container.destroy({ children: true });
+		app.destroy(true);
+	});
+
+	test("keeps repeated strokes of the same color at a fixed opacity", async () => {
+		const stroke = {
+			layer_id: "mask",
+			segments: [
+				{
+					from_x: 16,
+					from_y: 16,
+					to_x: 16,
+					to_y: 16,
+					size: 5,
+					color: "#ff0000",
+					opacity: 0.25,
+					mode: "draw" as const
+				}
+			]
+		};
+
+		await new BrushCommand(context, stroke).execute(context);
+		const texture = layer_manager.get_layer_textures("mask")!.draw;
+		const first = app.renderer.extract.pixels(texture);
+
+		await new BrushCommand(context, stroke).execute(context);
+		const second = app.renderer.extract.pixels(texture);
+
+		const pixel_index = (16 * first.width + 16) * 4;
+		const first_alpha = first.pixels[pixel_index + 3];
+
+		expect(first_alpha).toBeGreaterThan(0);
+		expect(Array.from(second.pixels)).toEqual(Array.from(first.pixels));
+	});
+});

package/shared/brush/brush-textures.ts

@@ -88,14 +88,13 @@ export class BrushCommand implements Command {
 
 		if (draw_segments.length > 0) {
 			const graphics = new Graphics();
-			const container = new Container();
-			container.addChild(graphics);
-			let alpha = 1;
+			const replacement_container = new Container();
+			const render_root = new Container();
+			replacement_container.blendMode = "none";
+			replacement_container.addChild(graphics);
+			render_root.addChild(replacement_container);
 
 			for (const segment of draw_segments) {
-				if (segment.opacity < alpha) {
-					alpha = segment.opacity;
-				}
 				let colorValue = 0xffffff;
 				if (segment.color.startsWith("#")) {
 					colorValue = parseInt(segment.color.replace("#", "0x"), 16);
@@ -103,37 +102,19 @@ export class BrushCommand implements Command {
 
 				graphics.setFillStyle({
 					color: colorValue,
-					alpha: 1
+					alpha: segment.opacity
 				});
 
 				this.render_segment_to_graphics(graphics, segment);
 			}
 
-			// we need a sprite in order to set the alpha and for that we need a texture
-			// i'm not entirely sure why other approaches didn't work
-			const alpha_sprite_texture = RenderTexture.create({
-				width: target_texture.width,
-				height: target_texture.height,
-				resolution: window.devicePixelRatio || 1
-			});
-
-			const alpha_sprite = new Sprite(alpha_sprite_texture);
-			this.context.app.renderer.render({
-				container: container,
-				target: alpha_sprite_texture
-			});
-
-			alpha_sprite.alpha = alpha;
-
 			this.context.app.renderer.render({
-				container: alpha_sprite,
+				container: render_root,
 				target: target_texture,
 				clear: false
 			});
 
-			container.destroy({ children: true });
-			alpha_sprite.destroy();
-			alpha_sprite_texture.destroy();
+			render_root.destroy({ children: true });
 		}
 
 		if (erase_segments.length > 0) {

package/shared/resize/resize.ts

@@ -1078,7 +1078,15 @@ export class ResizeTool implements Tool {
 	 * Cleans up DOM event listeners
 	 */
 	private cleanup_dom_event_listeners(): void {
-		const canvas = this.image_editor_context?.app?.canvas;
+		// Pixi's `canvas` getter dereferences the renderer, which is null once the
+		// app has been destroyed — so optional chaining on `app` is not enough when
+		// the editor is torn down before this cleanup runs.
+		let canvas: HTMLCanvasElement | undefined;
+		try {
+			canvas = this.image_editor_context?.app?.canvas;
+		} catch {
+			canvas = undefined;
+		}
 
 		if (this.dom_mousedown_handler) {
 			canvas?.removeEventListener("mousedown", this.dom_mousedown_handler);