@gradio/imageeditor 0.18.11 → 0.19.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @gradio/imageeditor
 
+## 0.19.0
+
+### Features
+
+- [#13526](https://github.com/gradio-app/gradio/pull/13526) [`53cb4ca`](https://github.com/gradio-app/gradio/commit/53cb4cae1ec3521e9170d12867253516413ba37a) - Run `pnpm lint` and `pnpm ts:check` on CI.  Thanks @abidlabs!
+
+### Dependency updates
+
+- @gradio/atoms@0.25.0
+- @gradio/statustracker@0.15.0
+- @gradio/utils@0.13.0
+- @gradio/client@2.3.0
+- @gradio/upload@0.18.0
+- @gradio/image@0.27.0
+
+## 0.18.12
+
+### Dependency updates
+
+- @gradio/client@2.2.2
+
+## 0.18.12
+
+### Fixes
+
+- [#13379](https://github.com/gradio-app/gradio/pull/13379) [`b8e8745`](https://github.com/gradio-app/gradio/commit/b8e8745d2f4fb156dd12d57a3f4eb2e165f20216) - fix default tool logic in gr.ImageEditor.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/client@2.2.1
+- @gradio/upload@0.17.10
+
 ## 0.18.11
 
 ### Dependency updates

package/ImageEditor.stories.svelte

@@ -1,6 +1,5 @@
 <script module>
 	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { userEvent, within } from "storybook/test";
 	import ImageEditor from "./Index.svelte";
 	import { allModes } from "../storybook/modes";
 	import { wrapProps } from "../storybook/wrapProps";
@@ -59,79 +58,6 @@
 	{/snippet}
 </Story>
 
-<Story
-	name="Image Editor Undo/Redo Interactions"
-	args={{
-		value: {
-			background: {
-				path: cheetah,
-				url: cheetah,
-				orig_name: "cheetah.jpg"
-			},
-			layers: [],
-			composite: null
-		},
-		type: "pil",
-		placeholder: "Upload an image of a cat",
-		sources: ["upload", "webcam"],
-		canvas_size: [800, 800],
-		interactive: true,
-		transforms: ["crop"],
-		layers: { allow_additional_layers: true, layers: [] },
-		brush: {
-			default_size: "auto",
-			colors: ["#ff0000", "#00ff00", "#0000ff"],
-			default_color: "#ff0000",
-			color_mode: "defaults"
-		},
-		eraser: {
-			default_size: "auto"
-		},
-		webcam_options: {
-			mirror: true,
-			constraints: null
-		}
-	}}
-	parameters={{ chromatic: { disableSnapshot: true } }}
-	play={async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-
-		const drawButton = canvas.getAllByLabelText("Brush")[0];
-		await userEvent.click(drawButton);
-
-		const drawCanvas = document.getElementsByTagName("canvas")[0];
-		if (!drawCanvas) {
-			throw new Error("Could not find canvas");
-		}
-
-		await new Promise((r) => setTimeout(r, 1000));
-
-		await userEvent.pointer({
-			keys: "[MouseLeft][MouseRight]",
-			target: drawCanvas,
-			coords: { clientX: 300, clientY: 100 }
-		});
-
-		await userEvent.pointer({
-			keys: "[MouseLeft][MouseRight]",
-			target: drawCanvas,
-			coords: { clientX: 400, clientY: 200 }
-		});
-
-		await userEvent.click(canvas.getByLabelText("Undo"));
-		await userEvent.click(canvas.getByLabelText("Redo"));
-	}}
->
-	{#snippet template(args)}
-		<div
-			class="image-container"
-			style="width: 500px; position: relative;border-radius: var(--radius-lg);overflow: hidden;"
-		>
-			<ImageEditor {...wrapProps(args)} />
-		</div>
-	{/snippet}
-</Story>
-
 <Story
 	name="Static Image Display"
 	args={{

package/Index.svelte

@@ -116,7 +116,7 @@
 			value={gradio.props.value?.composite || null}
 			label={gradio.shared.label}
 			show_label={gradio.shared.show_label}
-			buttons={gradio.props.buttons}
+			buttons={gradio.props.buttons ?? []}
 			selectable={gradio.props._selectable}
 			i18n={gradio.i18n}
 		/>
@@ -146,16 +146,16 @@
 		/>
 
 		<InteractiveImageEditor
-			border_region={gradio.props.border_region}
+			border_region={gradio.props.border_region ?? 0}
 			bind:is_dragging
-			canvas_size={gradio.props.canvas_size}
+			canvas_size={gradio.props.canvas_size ?? [800, 800]}
 			bind:image_id
 			layers={normalised_layers}
 			composite={normalised_composite}
 			background={normalised_background}
 			bind:this={editor_instance}
 			root={gradio.shared.root}
-			sources={gradio.props.sources}
+			sources={gradio.props.sources ?? ["upload", "webcam", "clipboard"]}
 			label={gradio.shared.label}
 			show_label={gradio.shared.show_label}
 			fixed_canvas={gradio.props.fixed_canvas}
@@ -191,13 +191,13 @@
 				}
 			}}
 			on:error
-			brush={gradio.props.brush}
-			eraser={gradio.props.eraser}
-			changeable={gradio.shared.attached_events.includes("apply")}
-			realtime={gradio.shared.attached_events.includes("change") ||
-				gradio.shared.attached_events.includes("input")}
+			brush={gradio.props.brush ?? false}
+			eraser={gradio.props.eraser ?? false}
+			changeable={gradio.shared.attached_events?.includes("apply") ?? false}
+			realtime={gradio.shared.attached_events?.includes("change") ||
+				gradio.shared.attached_events?.includes("input")}
 			i18n={gradio.i18n}
-			transforms={gradio.props.transforms}
+			transforms={gradio.props.transforms ?? []}
 			accept_blobs={gradio.shared.server.accept_blobs}
 			layer_options={gradio.props.layers}
 			upload={(...args) => gradio.shared.client.upload(...args)}
@@ -205,8 +205,8 @@
 			webcam_options={gradio.props.webcam_options}
 			show_download_button={gradio.props.buttons === null
 				? true
-				: gradio.props.buttons.includes("download")}
-			theme_mode={gradio.shared.theme_mode}
+				: (gradio.props.buttons ?? []).includes("download")}
+			theme_mode={gradio.shared.theme_mode === "dark" ? "dark" : "light"}
 			on:download_error={(e) => gradio.dispatch("error", e.detail)}
 		></InteractiveImageEditor>
 	</Block>

package/InteractiveImageEditor.svelte

@@ -31,8 +31,8 @@
 		type WebcamOptions
 	} from "./shared/types";
 
-	export let brush: IBrush;
-	export let eraser: Eraser;
+	export let brush: IBrush | false;
+	export let eraser: Eraser | false;
 	export let sources: Source[];
 	export let i18n: I18nFormatter;
 	export let root: string;
@@ -45,19 +45,23 @@
 	export let composite: FileData | null;
 	export let background: FileData | null;
 
-	export let layer_options: LayerOptions;
+	export let layer_options: LayerOptions = {
+		allow_additional_layers: true,
+		layers: [],
+		disabled: false
+	};
 	export let transforms: Transform[];
 	export let accept_blobs: (a: any) => void;
 
 	export let canvas_size: [number, number];
 	export let fixed_canvas = false;
-	export let realtime: boolean;
+	export let realtime = false;
 	export let upload: Client["upload"];
 	export let is_dragging: boolean;
 	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 webcam_options: WebcamOptions = { mirror: true, constraints: {} };
 	export let show_download_button = false;
 
 	const dispatch = createEventDispatcher<{

package/dist/Index.svelte

@@ -116,7 +116,7 @@
 			value={gradio.props.value?.composite || null}
 			label={gradio.shared.label}
 			show_label={gradio.shared.show_label}
-			buttons={gradio.props.buttons}
+			buttons={gradio.props.buttons ?? []}
 			selectable={gradio.props._selectable}
 			i18n={gradio.i18n}
 		/>
@@ -146,16 +146,16 @@
 		/>
 
 		<InteractiveImageEditor
-			border_region={gradio.props.border_region}
+			border_region={gradio.props.border_region ?? 0}
 			bind:is_dragging
-			canvas_size={gradio.props.canvas_size}
+			canvas_size={gradio.props.canvas_size ?? [800, 800]}
 			bind:image_id
 			layers={normalised_layers}
 			composite={normalised_composite}
 			background={normalised_background}
 			bind:this={editor_instance}
 			root={gradio.shared.root}
-			sources={gradio.props.sources}
+			sources={gradio.props.sources ?? ["upload", "webcam", "clipboard"]}
 			label={gradio.shared.label}
 			show_label={gradio.shared.show_label}
 			fixed_canvas={gradio.props.fixed_canvas}
@@ -191,13 +191,13 @@
 				}
 			}}
 			on:error
-			brush={gradio.props.brush}
-			eraser={gradio.props.eraser}
-			changeable={gradio.shared.attached_events.includes("apply")}
-			realtime={gradio.shared.attached_events.includes("change") ||
-				gradio.shared.attached_events.includes("input")}
+			brush={gradio.props.brush ?? false}
+			eraser={gradio.props.eraser ?? false}
+			changeable={gradio.shared.attached_events?.includes("apply") ?? false}
+			realtime={gradio.shared.attached_events?.includes("change") ||
+				gradio.shared.attached_events?.includes("input")}
 			i18n={gradio.i18n}
-			transforms={gradio.props.transforms}
+			transforms={gradio.props.transforms ?? []}
 			accept_blobs={gradio.shared.server.accept_blobs}
 			layer_options={gradio.props.layers}
 			upload={(...args) => gradio.shared.client.upload(...args)}
@@ -205,8 +205,8 @@
 			webcam_options={gradio.props.webcam_options}
 			show_download_button={gradio.props.buttons === null
 				? true
-				: gradio.props.buttons.includes("download")}
-			theme_mode={gradio.shared.theme_mode}
+				: (gradio.props.buttons ?? []).includes("download")}
+			theme_mode={gradio.shared.theme_mode === "dark" ? "dark" : "light"}
 			on:download_error={(e) => gradio.dispatch("error", e.detail)}
 		></InteractiveImageEditor>
 	</Block>

package/dist/InteractiveImageEditor.svelte

@@ -31,8 +31,8 @@
 		type WebcamOptions
 	} from "./shared/types";
 
-	export let brush: IBrush;
-	export let eraser: Eraser;
+	export let brush: IBrush | false;
+	export let eraser: Eraser | false;
 	export let sources: Source[];
 	export let i18n: I18nFormatter;
 	export let root: string;
@@ -45,19 +45,23 @@
 	export let composite: FileData | null;
 	export let background: FileData | null;
 
-	export let layer_options: LayerOptions;
+	export let layer_options: LayerOptions = {
+		allow_additional_layers: true,
+		layers: [],
+		disabled: false
+	};
 	export let transforms: Transform[];
 	export let accept_blobs: (a: any) => void;
 
 	export let canvas_size: [number, number];
 	export let fixed_canvas = false;
-	export let realtime: boolean;
+	export let realtime = false;
 	export let upload: Client["upload"];
 	export let is_dragging: boolean;
 	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 webcam_options: WebcamOptions = { mirror: true, constraints: {} };
 	export let show_download_button = false;
 
 	const dispatch = createEventDispatcher<{

package/dist/InteractiveImageEditor.svelte.d.ts

@@ -27,8 +27,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const InteractiveImageEditor: $$__sveltets_2_IsomorphicComponent<{
-    brush: IBrush;
-    eraser: Eraser;
+    brush: IBrush | false;
+    eraser: Eraser | false;
     sources: Source[];
     i18n: I18nFormatter;
     root: string;
@@ -39,18 +39,18 @@ declare const InteractiveImageEditor: $$__sveltets_2_IsomorphicComponent<{
     layers: FileData[];
     composite: FileData | null;
     background: FileData | null;
-    layer_options: LayerOptions;
+    layer_options?: LayerOptions;
     transforms: Transform[];
     accept_blobs: (a: any) => void;
     canvas_size: [number, number];
     fixed_canvas?: boolean;
-    realtime: boolean;
+    realtime?: boolean;
     upload: Client["upload"];
     is_dragging: boolean;
     placeholder?: string | undefined;
     border_region: number;
     full_history?: CommandNode | null;
-    webcam_options: WebcamOptions;
+    webcam_options?: WebcamOptions;
     show_download_button?: boolean;
     get_data?: () => Promise<ImageBlobs>;
     image_id?: null | string;

package/dist/shared/IconButton.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { type ComponentType } from "svelte";
+	import { type Component } from "svelte";
 	import type { ColorInput } from "tinycolor2";
-	export let Icon: ComponentType;
+	export let Icon: Component<any>;
 	export let label = "";
 	export let show_label = false;
 	export let pending = false;

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

@@ -1,4 +1,4 @@
-import { type ComponentType } from "svelte";
+import { type Component } from "svelte";
 import type { ColorInput } from "tinycolor2";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -14,7 +14,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const IconButton: $$__sveltets_2_IsomorphicComponent<{
-    Icon: ComponentType;
+    Icon: Component<any>;
     label?: string;
     show_label?: boolean;
     pending?: boolean;

package/dist/shared/ImageEditor.svelte

@@ -47,8 +47,8 @@
 	export let canvas_size: [number, number];
 	export let is_dragging = false;
 	export let background_image = false;
-	export let brush_options: Brush;
-	export let eraser_options: Eraser;
+	export let brush_options: Brush | false;
+	export let eraser_options: Eraser | false;
 	export let fixed_canvas = false;
 	export let root: string;
 	export let i18n: I18nFormatter;
@@ -371,8 +371,12 @@
 			ready = true;
 			if (sources.length > 0) {
 				handle_tool_change({ tool: "image" });
-			} else {
+			} else if (brush_options) {
 				handle_tool_change({ tool: "draw" });
+			} else if (eraser_options) {
+				handle_tool_change({ tool: "erase" });
+			} else {
+				handle_tool_change({ tool: "image" });
 			}
 			crop.set_subtool("crop");
 		});
@@ -513,10 +517,12 @@
 	}
 
 	function update_brush_options(): void {
+		if (!brush_options) return;
+		const options = brush_options;
 		const default_color =
-			brush_options.default_color === "auto"
-				? brush_options.colors[0]
-				: brush_options.default_color;
+			options.default_color === "auto"
+				? options.colors[0]
+				: options.default_color;
 
 		// color is already a tuple [color, opacity]
 		if (Array.isArray(default_color)) {
@@ -535,14 +541,14 @@
 		}
 
 		selected_size =
-			typeof brush_options.default_size === "number"
-				? brush_options.default_size
-				: 25;
+			typeof options.default_size === "number" ? options.default_size : 25;
 	}
 
 	function update_eraser_options(): void {
+		if (!eraser_options) return;
+		const options = eraser_options;
 		selected_eraser_size =
-			eraser_options.default_size === "auto" ? 25 : eraser_options.default_size;
+			options.default_size === "auto" ? 25 : options.default_size;
 	}
 
 	let brush_size_visible = false;
@@ -553,12 +559,14 @@
 		(() => {
 			let color_value;
 			if (selected_color === "auto") {
+				if (!brush_options) return "black";
+				const options = brush_options;
 				const default_color =
-					brush_options.colors.find((color) =>
+					options.colors.find((color) =>
 						Array.isArray(color)
-							? color[0] === brush_options.default_color
-							: color === brush_options.default_color
-					) || brush_options.colors[0];
+							? color[0] === options.default_color
+							: color === options.default_color
+					) || options.colors[0];
 
 				color_value = Array.isArray(default_color)
 					? default_color[0]

package/dist/shared/Toolbar.svelte

@@ -43,7 +43,7 @@
 		brush_options && typeof brush_options.default_size === "number"
 			? brush_options.default_size
 			: 25;
-	export let eraser_options: EraserType;
+	export let eraser_options: EraserType | false;
 	export let selected_eraser_size =
 		eraser_options && typeof eraser_options.default_size === "number"
 			? eraser_options.default_size

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

@@ -21,7 +21,7 @@ declare const Toolbar: $$__sveltets_2_IsomorphicComponent<{
     background?: boolean;
     brush_options: BrushType | false;
     selected_size?: number;
-    eraser_options: EraserType;
+    eraser_options: EraserType | false;
     selected_eraser_size?: number;
     selected_color?: any;
     selected_opacity?: any;

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 import type { SelectData, ShareData } from "@gradio/utils";
-import type { LoadingStatus } from "@gradio/statustracker";
+import type { ILoadingStatus as LoadingStatus } from "@gradio/statustracker";
 import type { CommandNode } from "./shared/core/commands";
 import type { LayerOptions, Source, Transform, WebcamOptions } from "./shared/types";
 import type { Brush, Eraser } from "./shared/brush/types";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/imageeditor",
-  "version": "0.18.11",
+  "version": "0.19.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -11,13 +11,13 @@
     "pixi-filters": "^6.1.4",
     "pixi.js": "^8.14.0",
     "tinycolor2": "^1.6.0",
-    "@gradio/atoms": "^0.24.0",
-    "@gradio/client": "^2.2.0",
-    "@gradio/image": "^0.26.3",
+    "@gradio/atoms": "^0.25.0",
     "@gradio/icons": "^0.15.1",
-    "@gradio/statustracker": "^0.14.1",
-    "@gradio/upload": "^0.17.9",
-    "@gradio/utils": "^0.12.2"
+    "@gradio/image": "^0.27.0",
+    "@gradio/statustracker": "^0.15.0",
+    "@gradio/upload": "^0.18.0",
+    "@gradio/utils": "^0.13.0",
+    "@gradio/client": "^2.3.0"
   },
   "devDependencies": {
     "@gradio/preview": "^0.16.2"

package/shared/IconButton.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { type ComponentType } from "svelte";
+	import { type Component } from "svelte";
 	import type { ColorInput } from "tinycolor2";
-	export let Icon: ComponentType;
+	export let Icon: Component<any>;
 	export let label = "";
 	export let show_label = false;
 	export let pending = false;

package/shared/ImageEditor.svelte

@@ -47,8 +47,8 @@
 	export let canvas_size: [number, number];
 	export let is_dragging = false;
 	export let background_image = false;
-	export let brush_options: Brush;
-	export let eraser_options: Eraser;
+	export let brush_options: Brush | false;
+	export let eraser_options: Eraser | false;
 	export let fixed_canvas = false;
 	export let root: string;
 	export let i18n: I18nFormatter;
@@ -371,8 +371,12 @@
 			ready = true;
 			if (sources.length > 0) {
 				handle_tool_change({ tool: "image" });
-			} else {
+			} else if (brush_options) {
 				handle_tool_change({ tool: "draw" });
+			} else if (eraser_options) {
+				handle_tool_change({ tool: "erase" });
+			} else {
+				handle_tool_change({ tool: "image" });
 			}
 			crop.set_subtool("crop");
 		});
@@ -513,10 +517,12 @@
 	}
 
 	function update_brush_options(): void {
+		if (!brush_options) return;
+		const options = brush_options;
 		const default_color =
-			brush_options.default_color === "auto"
-				? brush_options.colors[0]
-				: brush_options.default_color;
+			options.default_color === "auto"
+				? options.colors[0]
+				: options.default_color;
 
 		// color is already a tuple [color, opacity]
 		if (Array.isArray(default_color)) {
@@ -535,14 +541,14 @@
 		}
 
 		selected_size =
-			typeof brush_options.default_size === "number"
-				? brush_options.default_size
-				: 25;
+			typeof options.default_size === "number" ? options.default_size : 25;
 	}
 
 	function update_eraser_options(): void {
+		if (!eraser_options) return;
+		const options = eraser_options;
 		selected_eraser_size =
-			eraser_options.default_size === "auto" ? 25 : eraser_options.default_size;
+			options.default_size === "auto" ? 25 : options.default_size;
 	}
 
 	let brush_size_visible = false;
@@ -553,12 +559,14 @@
 		(() => {
 			let color_value;
 			if (selected_color === "auto") {
+				if (!brush_options) return "black";
+				const options = brush_options;
 				const default_color =
-					brush_options.colors.find((color) =>
+					options.colors.find((color) =>
 						Array.isArray(color)
-							? color[0] === brush_options.default_color
-							: color === brush_options.default_color
-					) || brush_options.colors[0];
+							? color[0] === options.default_color
+							: color === options.default_color
+					) || options.colors[0];
 
 				color_value = Array.isArray(default_color)
 					? default_color[0]

package/shared/Toolbar.svelte

@@ -43,7 +43,7 @@
 		brush_options && typeof brush_options.default_size === "number"
 			? brush_options.default_size
 			: 25;
-	export let eraser_options: EraserType;
+	export let eraser_options: EraserType | false;
 	export let selected_eraser_size =
 		eraser_options && typeof eraser_options.default_size === "number"
 			? eraser_options.default_size

package/types.ts

@@ -1,5 +1,5 @@
 import type { SelectData, ShareData } from "@gradio/utils";
-import type { LoadingStatus } from "@gradio/statustracker";
+import type { ILoadingStatus as LoadingStatus } from "@gradio/statustracker";
 import type { CommandNode } from "./shared/core/commands";
 import type {
 	LayerOptions,