@gradio/imageeditor 0.20.2 → 0.21.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @gradio/imageeditor
 
+## 0.21.0
+
+### Features
+
+- [`96a79b1`](https://github.com/gradio-app/gradio/commit/96a79b19c8b4a0634c9ab4a969460c0ad55ddf77) - Refactor the remaining component unit tests and remove components.test.ts.  Thanks @abidlabs!
+
+### Dependency updates
+
+- @gradio/upload@0.19.0
+- @gradio/statustracker@0.15.4
+- @gradio/client@2.7.1
+- @gradio/image@0.28.4
+
+## 0.20.2
+
+### Dependency updates
+
+- @gradio/utils@0.14.2
+- @gradio/client@2.7.0
+
 ## 0.20.2
 
 ### Fixes

package/ImageEditor.test.ts

@@ -1,4 +1,4 @@
-import { afterEach, describe, expect, test } from "vitest";
+import { afterEach, describe, expect, test, vi } from "vitest";
 import {
 	cleanup,
 	fireEvent,
@@ -127,3 +127,589 @@ describe("Internationalization", () => {
 		expect(getByRole("button", { name: "Añadir capa" })).toBeVisible();
 	});
 });
+
+describe("Static mode", () => {
+	afterEach(() => cleanup());
+
+	const static_props = { ...default_props, interactive: false };
+
+	test("renders the composite image", async () => {
+		const { getByRole } = await render(ImageEditor, {
+			...static_props,
+			value: { background: null, layers: [], composite: TEST_PNG }
+		});
+
+		// The static branch renders the composite through StaticImage without any
+		// alt text, so the <img> is exposed as decorative rather than role="img".
+		await waitFor(() => expect(getByRole("presentation")).toBeVisible());
+	});
+
+	test("renders no editing toolbar", async () => {
+		const { queryByRole } = await render(ImageEditor, {
+			...static_props,
+			value: { background: null, layers: [], composite: TEST_PNG }
+		});
+
+		expect(
+			queryByRole("button", { name: "image_editor.brush" })
+		).not.toBeInTheDocument();
+	});
+
+	test("renders the label", async () => {
+		const { getByText } = await render(ImageEditor, {
+			...static_props,
+			label: "Sketch pad",
+			show_label: true,
+			value: { background: null, layers: [], composite: TEST_PNG }
+		});
+
+		await waitFor(() => expect(getByText("Sketch pad")).toBeVisible());
+	});
+
+	test("renders an empty component when there is no value", async () => {
+		const { queryByRole } = await render(ImageEditor, {
+			...static_props,
+			value: null
+		});
+
+		expect(queryByRole("presentation")).not.toBeInTheDocument();
+	});
+
+	test("clear_status is dispatched when the error status is dismissed", async () => {
+		const { listen, getByLabelText } = await render(ImageEditor, {
+			...static_props,
+			loading_status: {
+				status: "error",
+				queue_position: null,
+				queue_size: null,
+				eta: null,
+				message: "it broke",
+				show_progress: "full",
+				scroll_to_output: false,
+				visible: true,
+				fn_index: 0
+			}
+		});
+		const clear_status = listen("clear_status");
+
+		await fireEvent.click(getByLabelText("common.clear"));
+
+		expect(clear_status).toHaveBeenCalledTimes(1);
+	});
+});
+
+describe("Interactive mode", () => {
+	afterEach(() => cleanup());
+
+	async function render_editor(
+		overrides: Record<string, any> = {}
+	): Promise<Awaited<ReturnType<typeof render>>> {
+		const view = await render(ImageEditor, {
+			...default_props,
+			client: mock_client(),
+			...overrides
+		});
+		await waitFor(
+			() => {
+				expect(
+					view.getByRole("button", { name: "image_editor.pan" })
+				).toBeVisible();
+			},
+			{ timeout: 5000 }
+		);
+		return view;
+	}
+
+	test("renders the canvas controls", async () => {
+		const { getByRole } = await render_editor();
+
+		expect(getByRole("button", { name: "image_editor.pan" })).toBeVisible();
+		expect(
+			getByRole("button", { name: "image_editor.zoom_out" })
+		).toBeVisible();
+		expect(getByRole("button", { name: "common.undo" })).toBeVisible();
+		expect(
+			getByRole("button", { name: "image_editor.clear_canvas" })
+		).toBeVisible();
+	});
+
+	test("renders the drawing tools", async () => {
+		const { getByRole } = await render_editor();
+
+		expect(getByRole("button", { name: "image_editor.brush" })).toBeVisible();
+		expect(getByRole("button", { name: "image_editor.erase" })).toBeVisible();
+	});
+
+	test("undo and redo start disabled on a fresh canvas", async () => {
+		const { getByRole } = await render_editor();
+
+		expect(getByRole("button", { name: "common.undo" })).toBeDisabled();
+		expect(getByRole("button", { name: "image_editor.redo" })).toBeDisabled();
+	});
+
+	test("renders the label", async () => {
+		const { getByText } = await render_editor({
+			label: "Sketch pad",
+			show_label: true
+		});
+
+		expect(getByText("Sketch pad")).toBeVisible();
+	});
+
+	test("the download button is shown by default", async () => {
+		const { getByRole } = await render_editor({ buttons: null });
+
+		expect(getByRole("button", { name: "common.download" })).toBeVisible();
+	});
+
+	test("an empty buttons list hides the download button", async () => {
+		const { queryByRole } = await render_editor({ buttons: [] });
+
+		expect(
+			queryByRole("button", { name: "common.download" })
+		).not.toBeInTheDocument();
+	});
+
+	test("buttons: ['download'] shows the download button", async () => {
+		const { getByRole } = await render_editor({ buttons: ["download"] });
+
+		expect(getByRole("button", { name: "common.download" })).toBeVisible();
+	});
+
+	test("the save button only appears when an apply listener is attached", async () => {
+		const { queryByRole } = await render_editor({ attached_events: [] });
+
+		expect(
+			queryByRole("button", { name: "image_editor.save_changes" })
+		).not.toBeInTheDocument();
+	});
+
+	test("attaching an apply listener shows the save button", async () => {
+		const { getByRole } = await render_editor({ attached_events: ["apply"] });
+
+		expect(
+			getByRole("button", { name: "image_editor.save_changes" })
+		).toBeVisible();
+	});
+});
+
+describe("Toolbar: sources", () => {
+	afterEach(() => cleanup());
+
+	test("all three sources render their own button", async () => {
+		const { getByRole } = await render(ImageEditorTestWrapper, {
+			kind: "toolbar",
+			sources: ["upload", "clipboard", "webcam"]
+		});
+
+		expect(getByRole("button", { name: "image_editor.upload" })).toBeVisible();
+		expect(getByRole("button", { name: "image_editor.paste" })).toBeVisible();
+		expect(getByRole("button", { name: "image_editor.webcam" })).toBeVisible();
+	});
+
+	test("only the listed sources are offered", async () => {
+		const { getByRole, queryByRole } = await render(ImageEditorTestWrapper, {
+			kind: "toolbar",
+			sources: ["upload"]
+		});
+
+		expect(getByRole("button", { name: "image_editor.upload" })).toBeVisible();
+		expect(
+			queryByRole("button", { name: "image_editor.webcam" })
+		).not.toBeInTheDocument();
+		expect(
+			queryByRole("button", { name: "image_editor.paste" })
+		).not.toBeInTheDocument();
+	});
+
+	test("no sources and no transforms hides the image tool entirely", async () => {
+		const { queryByRole } = await render(ImageEditorTestWrapper, {
+			kind: "toolbar",
+			sources: [],
+			transforms: []
+		});
+
+		expect(
+			queryByRole("button", { name: "image.image" })
+		).not.toBeInTheDocument();
+	});
+
+	test("a transform keeps the image tool available once there is a background", async () => {
+		const { getByRole } = await render(ImageEditorTestWrapper, {
+			kind: "toolbar",
+			sources: [],
+			transforms: ["crop"],
+			background: true
+		});
+
+		expect(getByRole("button", { name: "image.image" })).toBeVisible();
+	});
+});
+
+describe("Toolbar: transforms", () => {
+	afterEach(() => cleanup());
+
+	test("crop and resize are offered for an image with a background", async () => {
+		const { getByRole } = await render(ImageEditorTestWrapper, {
+			kind: "toolbar",
+			transforms: ["crop", "resize"],
+			background: true
+		});
+
+		expect(getByRole("button", { name: "image_editor.crop" })).toBeVisible();
+		expect(getByRole("button", { name: "image_editor.resize" })).toBeVisible();
+	});
+
+	test("only the listed transforms are offered", async () => {
+		const { getByRole, queryByRole } = await render(ImageEditorTestWrapper, {
+			kind: "toolbar",
+			transforms: ["crop"],
+			background: true
+		});
+
+		expect(getByRole("button", { name: "image_editor.crop" })).toBeVisible();
+		expect(
+			queryByRole("button", { name: "image_editor.resize" })
+		).not.toBeInTheDocument();
+	});
+
+	test("transforms are not offered until there is a background to transform", async () => {
+		const { queryByRole } = await render(ImageEditorTestWrapper, {
+			kind: "toolbar",
+			transforms: ["crop", "resize"],
+			background: false
+		});
+
+		expect(
+			queryByRole("button", { name: "image_editor.crop" })
+		).not.toBeInTheDocument();
+	});
+});
+
+describe("Toolbar: brush and eraser", () => {
+	afterEach(() => cleanup());
+
+	test("brush: false removes the brush tool", async () => {
+		const { queryByRole, getByRole } = await render(ImageEditorTestWrapper, {
+			kind: "toolbar",
+			brush_options: false
+		});
+
+		expect(
+			queryByRole("button", { name: "image_editor.brush" })
+		).not.toBeInTheDocument();
+		expect(getByRole("button", { name: "image_editor.erase" })).toBeVisible();
+	});
+
+	test("eraser: false removes the eraser tool", async () => {
+		const { queryByRole, getByRole } = await render(ImageEditorTestWrapper, {
+			kind: "toolbar",
+			eraser_options: false
+		});
+
+		expect(
+			queryByRole("button", { name: "image_editor.erase" })
+		).not.toBeInTheDocument();
+		expect(getByRole("button", { name: "image_editor.brush" })).toBeVisible();
+	});
+
+	test("clicking the brush asks the editor to switch to the draw tool", async () => {
+		const ontool_change = vi.fn();
+		const { getByRole } = await render(ImageEditorTestWrapper, {
+			kind: "toolbar",
+			ontool_change
+		});
+
+		await fireEvent.click(getByRole("button", { name: "image_editor.brush" }));
+
+		expect(ontool_change).toHaveBeenCalledWith({ tool: "draw" });
+	});
+
+	test("clicking the eraser asks the editor to switch to the erase tool", async () => {
+		const ontool_change = vi.fn();
+		const { getByRole } = await render(ImageEditorTestWrapper, {
+			kind: "toolbar",
+			ontool_change
+		});
+
+		await fireEvent.click(getByRole("button", { name: "image_editor.erase" }));
+
+		expect(ontool_change).toHaveBeenCalledWith({ tool: "erase" });
+	});
+
+	test("the draw tool offers colour and size controls", async () => {
+		const { getByRole } = await render(ImageEditorTestWrapper, {
+			kind: "toolbar",
+			tool: "draw"
+		});
+
+		expect(getByRole("button", { name: "image_editor.color" })).toBeVisible();
+		expect(
+			getByRole("button", { name: "image_editor.brush_size" })
+		).toBeVisible();
+	});
+
+	test("the erase tool offers a size control", async () => {
+		const { getByRole } = await render(ImageEditorTestWrapper, {
+			kind: "toolbar",
+			tool: "erase"
+		});
+
+		expect(
+			getByRole("button", { name: "image_editor.eraser_size" })
+		).toBeVisible();
+	});
+
+	test("choosing the brush size sub-tool is reported to the editor", async () => {
+		const onsubtool_change = vi.fn();
+		const { getByRole } = await render(ImageEditorTestWrapper, {
+			kind: "toolbar",
+			tool: "draw",
+			onsubtool_change
+		});
+
+		await fireEvent.click(
+			getByRole("button", { name: "image_editor.brush_size" })
+		);
+
+		expect(onsubtool_change).toHaveBeenCalledWith({
+			tool: "draw",
+			subtool: "size"
+		});
+	});
+});
+
+describe("Controls", () => {
+	afterEach(() => cleanup());
+
+	test("undo is disabled until there is something to undo", async () => {
+		const { getByRole } = await render(ImageEditorTestWrapper, {
+			kind: "controls",
+			can_undo: false
+		});
+
+		expect(getByRole("button", { name: "common.undo" })).toBeDisabled();
+	});
+
+	test("undo is enabled when there is something to undo", async () => {
+		const { getByRole } = await render(ImageEditorTestWrapper, {
+			kind: "controls",
+			can_undo: true
+		});
+
+		expect(getByRole("button", { name: "common.undo" })).toBeEnabled();
+	});
+
+	test("clicking undo calls back", async () => {
+		const onundo = vi.fn();
+		const { getByRole } = await render(ImageEditorTestWrapper, {
+			kind: "controls",
+			can_undo: true,
+			onundo
+		});
+
+		await fireEvent.click(getByRole("button", { name: "common.undo" }));
+
+		expect(onundo).toHaveBeenCalledTimes(1);
+	});
+
+	test("clicking redo calls back", async () => {
+		const onredo = vi.fn();
+		const { getByRole } = await render(ImageEditorTestWrapper, {
+			kind: "controls",
+			can_redo: true,
+			onredo
+		});
+
+		await fireEvent.click(getByRole("button", { name: "image_editor.redo" }));
+
+		expect(onredo).toHaveBeenCalledTimes(1);
+	});
+
+	test("clicking clear calls back", async () => {
+		const onremove_image = vi.fn();
+		const { getByRole } = await render(ImageEditorTestWrapper, {
+			kind: "controls",
+			onremove_image
+		});
+
+		await fireEvent.click(
+			getByRole("button", { name: "image_editor.clear_canvas" })
+		);
+
+		expect(onremove_image).toHaveBeenCalledTimes(1);
+	});
+
+	test("enable_download: false removes the download button", async () => {
+		const { queryByRole } = await render(ImageEditorTestWrapper, {
+			kind: "controls",
+			enable_download: false
+		});
+
+		expect(
+			queryByRole("button", { name: "common.download" })
+		).not.toBeInTheDocument();
+	});
+
+	test("changeable: false removes the save button", async () => {
+		const { queryByRole } = await render(ImageEditorTestWrapper, {
+			kind: "controls",
+			changeable: false
+		});
+
+		expect(
+			queryByRole("button", { name: "image_editor.save_changes" })
+		).not.toBeInTheDocument();
+	});
+
+	test("save is disabled until there are changes to save", async () => {
+		const { getByRole } = await render(ImageEditorTestWrapper, {
+			kind: "controls",
+			changeable: true,
+			can_save: false
+		});
+
+		expect(
+			getByRole("button", { name: "image_editor.save_changes" })
+		).toBeDisabled();
+	});
+
+	test("clicking save calls back", async () => {
+		const onsave = vi.fn();
+		const { getByRole } = await render(ImageEditorTestWrapper, {
+			kind: "controls",
+			changeable: true,
+			can_save: true,
+			onsave
+		});
+
+		await fireEvent.click(
+			getByRole("button", { name: "image_editor.save_changes" })
+		);
+
+		expect(onsave).toHaveBeenCalledTimes(1);
+	});
+
+	test("clicking zoom out calls back", async () => {
+		const onzoom_out = vi.fn();
+		const { getByRole } = await render(ImageEditorTestWrapper, {
+			kind: "controls",
+			onzoom_out
+		});
+
+		await fireEvent.click(
+			getByRole("button", { name: "image_editor.zoom_out" })
+		);
+
+		expect(onzoom_out).toHaveBeenCalledTimes(1);
+	});
+
+	test("clicking pan calls back", async () => {
+		const onpan = vi.fn();
+		const { getByRole } = await render(ImageEditorTestWrapper, {
+			kind: "controls",
+			onpan
+		});
+
+		await fireEvent.click(getByRole("button", { name: "image_editor.pan" }));
+
+		expect(onpan).toHaveBeenCalledTimes(1);
+	});
+});
+
+describe("Layers", () => {
+	afterEach(() => cleanup());
+
+	const named_layers = {
+		active_layer: "layer-1",
+		layers: [
+			{ name: "Background", id: "layer-1", user_created: false, visible: true },
+			{ name: "Sketch", id: "layer-2", user_created: true, visible: true }
+		]
+	};
+
+	test("the active layer is named in the toolbar", async () => {
+		const { getByText } = await render(ImageEditorTestWrapper, {
+			kind: "layers",
+			layer_store: named_layers
+		});
+
+		expect(getByText("Background")).toBeVisible();
+	});
+
+	test("opening the layer panel lists every layer", async () => {
+		const { getByRole, getAllByText } = await render(ImageEditorTestWrapper, {
+			kind: "layers",
+			layer_store: named_layers
+		});
+
+		await fireEvent.click(
+			getByRole("button", { name: "image_editor.show_layers" })
+		);
+
+		expect(getAllByText("Sketch").length).toBeGreaterThan(0);
+	});
+
+	test("auto-generated layer names are translated", async () => {
+		const { getByText } = await render(ImageEditorTestWrapper, {
+			kind: "layers",
+			i18n: spanish_i18n
+		});
+
+		expect(getByText("Capa 1")).toBeVisible();
+	});
+
+	test("a user-supplied layer name is shown verbatim", async () => {
+		const { getByText } = await render(ImageEditorTestWrapper, {
+			kind: "layers",
+			i18n: spanish_i18n,
+			layer_store: named_layers
+		});
+
+		expect(getByText("Background")).toBeVisible();
+	});
+
+	test("a new layer can be added when additional layers are allowed", async () => {
+		const onnew_layer = vi.fn();
+		const { getByRole } = await render(ImageEditorTestWrapper, {
+			kind: "layers",
+			enable_additional_layers: true,
+			onnew_layer
+		});
+
+		await fireEvent.click(
+			getByRole("button", { name: "image_editor.show_layers" })
+		);
+		await fireEvent.click(
+			getByRole("button", { name: "image_editor.add_layer" })
+		);
+
+		expect(onnew_layer).toHaveBeenCalledTimes(1);
+	});
+
+	test("the add layer button is hidden when additional layers are disallowed", async () => {
+		const { getByRole, queryByRole } = await render(ImageEditorTestWrapper, {
+			kind: "layers",
+			enable_additional_layers: false
+		});
+
+		await fireEvent.click(
+			getByRole("button", { name: "image_editor.show_layers" })
+		);
+
+		expect(
+			queryByRole("button", { name: "image_editor.add_layer" })
+		).not.toBeInTheDocument();
+	});
+
+	test("enable_layers: false renders no layer controls at all", async () => {
+		const { queryByRole } = await render(ImageEditorTestWrapper, {
+			kind: "layers",
+			enable_layers: false
+		});
+
+		expect(
+			queryByRole("button", { name: "image_editor.show_layers" })
+		).not.toBeInTheDocument();
+	});
+});

package/ImageEditorTestWrapper.svelte

@@ -10,41 +10,72 @@
 	}: {
 		props: {
 			kind: "controls" | "toolbar" | "layers";
-			i18n: I18nFormatter;
+			i18n?: I18nFormatter;
+			[key: string]: any;
 		};
 	} = $props();
 
-	const layers = writable({
-		active_layer: "layer-1",
-		layers: [
-			{ name: "Layer 1", id: "layer-1", user_created: false, visible: true }
-		]
-	});
+	const identity: I18nFormatter = (s: string) => s;
+
+	const default_brush = {
+		default_size: "auto" as const,
+		colors: ["#000000"],
+		default_color: "#000000",
+		color_mode: "defaults" as const
+	};
+
+	const layers = writable(
+		props.layer_store ?? {
+			active_layer: "layer-1",
+			layers: [
+				{ name: "Layer 1", id: "layer-1", user_created: false, visible: true }
+			]
+		}
+	);
 </script>
 
 {#if props.kind === "controls"}
 	<Controls
-		i18n={props.i18n}
-		tool="image"
-		can_undo={false}
-		can_redo={false}
-		enable_download={true}
-		changeable={true}
+		i18n={props.i18n ?? identity}
+		tool={props.tool ?? "image"}
+		can_undo={props.can_undo ?? false}
+		can_redo={props.can_redo ?? false}
+		can_save={props.can_save ?? false}
+		enable_download={props.enable_download ?? true}
+		changeable={props.changeable ?? true}
+		current_zoom={props.current_zoom ?? 1}
+		onundo={props.onundo}
+		onredo={props.onredo}
+		onsave={props.onsave}
+		onremove_image={props.onremove_image}
+		ondownload={props.ondownload}
+		onzoom_in={props.onzoom_in}
+		onzoom_out={props.onzoom_out}
+		onpan={props.onpan}
 	/>
 {:else if props.kind === "toolbar"}
 	<Toolbar
-		i18n={props.i18n}
-		brush_options={{
-			default_size: "auto",
-			colors: ["#000000"],
-			default_color: "#000000",
-			color_mode: "defaults"
-		}}
-		eraser_options={{ default_size: "auto" }}
-		sources={["upload", "clipboard", "webcam"]}
-		transforms={[]}
-		background={false}
+		i18n={props.i18n ?? identity}
+		brush_options={props.brush_options === undefined
+			? default_brush
+			: props.brush_options}
+		eraser_options={props.eraser_options === undefined
+			? { default_size: "auto" }
+			: props.eraser_options}
+		sources={props.sources ?? ["upload", "clipboard", "webcam"]}
+		transforms={props.transforms ?? []}
+		background={props.background ?? false}
+		tool={props.tool ?? "image"}
+		subtool={props.subtool ?? null}
+		ontool_change={props.ontool_change}
+		onsubtool_change={props.onsubtool_change}
 	/>
 {:else}
-	<SecondaryToolbar i18n={props.i18n} {layers} />
+	<SecondaryToolbar
+		i18n={props.i18n ?? identity}
+		{layers}
+		enable_layers={props.enable_layers ?? true}
+		enable_additional_layers={props.enable_additional_layers ?? true}
+		onnew_layer={props.onnew_layer}
+	/>
 {/if}

package/dist/ImageEditorTestWrapper.svelte

@@ -10,41 +10,72 @@
 	}: {
 		props: {
 			kind: "controls" | "toolbar" | "layers";
-			i18n: I18nFormatter;
+			i18n?: I18nFormatter;
+			[key: string]: any;
 		};
 	} = $props();
 
-	const layers = writable({
-		active_layer: "layer-1",
-		layers: [
-			{ name: "Layer 1", id: "layer-1", user_created: false, visible: true }
-		]
-	});
+	const identity: I18nFormatter = (s: string) => s;
+
+	const default_brush = {
+		default_size: "auto" as const,
+		colors: ["#000000"],
+		default_color: "#000000",
+		color_mode: "defaults" as const
+	};
+
+	const layers = writable(
+		props.layer_store ?? {
+			active_layer: "layer-1",
+			layers: [
+				{ name: "Layer 1", id: "layer-1", user_created: false, visible: true }
+			]
+		}
+	);
 </script>
 
 {#if props.kind === "controls"}
 	<Controls
-		i18n={props.i18n}
-		tool="image"
-		can_undo={false}
-		can_redo={false}
-		enable_download={true}
-		changeable={true}
+		i18n={props.i18n ?? identity}
+		tool={props.tool ?? "image"}
+		can_undo={props.can_undo ?? false}
+		can_redo={props.can_redo ?? false}
+		can_save={props.can_save ?? false}
+		enable_download={props.enable_download ?? true}
+		changeable={props.changeable ?? true}
+		current_zoom={props.current_zoom ?? 1}
+		onundo={props.onundo}
+		onredo={props.onredo}
+		onsave={props.onsave}
+		onremove_image={props.onremove_image}
+		ondownload={props.ondownload}
+		onzoom_in={props.onzoom_in}
+		onzoom_out={props.onzoom_out}
+		onpan={props.onpan}
 	/>
 {:else if props.kind === "toolbar"}
 	<Toolbar
-		i18n={props.i18n}
-		brush_options={{
-			default_size: "auto",
-			colors: ["#000000"],
-			default_color: "#000000",
-			color_mode: "defaults"
-		}}
-		eraser_options={{ default_size: "auto" }}
-		sources={["upload", "clipboard", "webcam"]}
-		transforms={[]}
-		background={false}
+		i18n={props.i18n ?? identity}
+		brush_options={props.brush_options === undefined
+			? default_brush
+			: props.brush_options}
+		eraser_options={props.eraser_options === undefined
+			? { default_size: "auto" }
+			: props.eraser_options}
+		sources={props.sources ?? ["upload", "clipboard", "webcam"]}
+		transforms={props.transforms ?? []}
+		background={props.background ?? false}
+		tool={props.tool ?? "image"}
+		subtool={props.subtool ?? null}
+		ontool_change={props.ontool_change}
+		onsubtool_change={props.onsubtool_change}
 	/>
 {:else}
-	<SecondaryToolbar i18n={props.i18n} {layers} />
+	<SecondaryToolbar
+		i18n={props.i18n ?? identity}
+		{layers}
+		enable_layers={props.enable_layers ?? true}
+		enable_additional_layers={props.enable_additional_layers ?? true}
+		onnew_layer={props.onnew_layer}
+	/>
 {/if}

package/dist/ImageEditorTestWrapper.svelte.d.ts

@@ -2,7 +2,8 @@ import type { I18nFormatter } from "@gradio/utils";
 type $$ComponentProps = {
     props: {
         kind: "controls" | "toolbar" | "layers";
-        i18n: I18nFormatter;
+        i18n?: I18nFormatter;
+        [key: string]: any;
     };
 };
 declare const ImageEditorTestWrapper: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/shared/resize/resize.js

@@ -789,7 +789,16 @@ export class ResizeTool {
      * Cleans up DOM event listeners
      */
     cleanup_dom_event_listeners() {
-        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;
+        try {
+            canvas = this.image_editor_context?.app?.canvas;
+        }
+        catch {
+            canvas = undefined;
+        }
         if (this.dom_mousedown_handler) {
             canvas?.removeEventListener("mousedown", this.dom_mousedown_handler);
             this.dom_mousedown_handler = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/imageeditor",
-  "version": "0.20.2",
+  "version": "0.21.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -11,16 +11,16 @@
     "pixi-filters": "^6.1.4",
     "pixi.js": "^8.14.0",
     "tinycolor2": "^1.6.0",
-    "@gradio/client": "^2.6.0",
-    "@gradio/image": "^0.28.3",
-    "@gradio/icons": "^0.16.0",
-    "@gradio/statustracker": "^0.15.3",
-    "@gradio/utils": "^0.14.1",
     "@gradio/atoms": "^0.26.2",
-    "@gradio/upload": "^0.18.3"
+    "@gradio/icons": "^0.16.0",
+    "@gradio/image": "^0.28.4",
+    "@gradio/upload": "^0.19.0",
+    "@gradio/statustracker": "^0.15.4",
+    "@gradio/client": "^2.7.1",
+    "@gradio/utils": "^0.14.2"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.17.0"
+    "@gradio/preview": "^0.17.1"
   },
   "main_changeset": true,
   "main": "./Index.svelte",

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);