@gradio/image 0.26.3 → 0.27.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @gradio/image
 
+## 0.27.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!
+
+### Fixes
+
+- [#13532](https://github.com/gradio-app/gradio/pull/13532) [`0a933b4`](https://github.com/gradio-app/gradio/commit/0a933b428f5b2158cb8c764f38abf0da2312d58a) - Fix `gr.SelectData` coordinates when the image in `gr.Image` does not fill its container.  Thanks @hysts!
+- [#13533](https://github.com/gradio-app/gradio/pull/13533) [`e5ec1ca`](https://github.com/gradio-app/gradio/commit/e5ec1ca66c45e7e3a057b75ac2b8b86660b2827b) - Fix fullscreen button not working in ImageSlider, interactive Image, native plots, and AnnotatedImage.  Thanks @hysts!
+
+### 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
+
+## 0.26.3
+
+### Dependency updates
+
+- @gradio/client@2.2.2
+
+## 0.26.3
+
+### Dependency updates
+
+- @gradio/client@2.2.1
+- @gradio/upload@0.17.10
+
 ## 0.26.3
 
 ### Dependency updates

package/Image.stories.svelte

@@ -1,7 +1,6 @@
 <script module>
 	import { defineMeta } from "@storybook/addon-svelte-csf";
 	import StaticImage from "./Index.svelte";
-	import { userEvent, within, expect } from "storybook/test";
 	import { allModes } from "../storybook/modes";
 	import { wrapProps } from "../storybook/wrapProps";
 
@@ -37,13 +36,6 @@
 		buttons: ["fullscreen", "download"],
 		webcam_options: { mirror: true, constraints: null }
 	}}
-	play={async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		const expand_btn = await canvas.findByRole("button", {
-			name: "Fullscreen"
-		});
-		expect(expand_btn).toBeTruthy();
-	}}
 >
 	{#snippet template(args)}
 		<div
@@ -146,41 +138,6 @@
 	{/snippet}
 </Story>
 
-<Story
-	name="interactive with upload, clipboard, and webcam"
-	args={{
-		sources: ["upload", "clipboard", "webcam"],
-		value: {
-			path: cheetah,
-			url: cheetah,
-			orig_name: "cheetah.jpg"
-		},
-		show_label: false,
-		interactive: true,
-		placeholder: md,
-		buttons: [],
-		webcam_options: { mirror: true, constraints: null }
-	}}
-	parameters={{ chromatic: { disableSnapshot: true } }}
-	play={async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		const webcamButton = await canvas.findByLabelText("Capture from camera");
-		userEvent.click(webcamButton);
-		userEvent.click(await canvas.findByTitle("grant webcam access"));
-		userEvent.click(await canvas.findByLabelText("Upload file"));
-		userEvent.click(await canvas.findByLabelText("Paste from clipboard"));
-	}}
->
-	{#snippet template(args)}
-		<div
-			class="image-container"
-			style="width: 300px; position: relative;border-radius: var(--radius-lg);overflow: hidden;"
-		>
-			<StaticImage {...wrapProps(args)} />
-		</div>
-	{/snippet}
-</Story>
-
 <Story
 	name="interactive with webcam"
 	args={{
@@ -217,28 +174,3 @@
 		</div>
 	{/snippet}
 </Story>
-
-<Story
-	name="interactive webcam with streaming"
-	args={{
-		sources: ["webcam"],
-		interactive: true,
-		value: {
-			path: cheetah,
-			url: cheetah,
-			orig_name: "cheetah.jpg"
-		},
-		streaming: true,
-		buttons: ["download"],
-		webcam_options: { mirror: true, constraints: null }
-	}}
->
-	{#snippet template(args)}
-		<div
-			class="image-container"
-			style="width: 300px; position: relative;border-radius: var(--radius-lg);overflow: hidden;"
-		>
-			<StaticImage {...wrapProps(args)} />
-		</div>
-	{/snippet}
-</Story>

package/Image.test.ts

@@ -326,6 +326,25 @@ describe("Props: buttons (static mode)", () => {
 		expect(getByLabelText("Fullscreen")).toBeTruthy();
 	});
 
+	test("clicking the fullscreen button toggles fullscreen in interactive mode", async () => {
+		const { getByLabelText } = await render(Image, {
+			...default_props,
+			interactive: true,
+			value: fake_value,
+			buttons: ["fullscreen"]
+		});
+
+		await fireEvent.click(getByLabelText("Fullscreen"));
+		await waitFor(() => {
+			expect(getByLabelText("Exit fullscreen mode")).toBeVisible();
+		});
+
+		await fireEvent.click(getByLabelText("Exit fullscreen mode"));
+		await waitFor(() => {
+			expect(getByLabelText("Fullscreen")).toBeVisible();
+		});
+	});
+
 	test("empty buttons array shows no action buttons", async () => {
 		const { queryByLabelText } = await render(Image, {
 			...default_props,
@@ -635,6 +654,52 @@ describe("get_coordinates_of_clicked_image", () => {
 		expect(result).toEqual([100, 200]);
 	});
 
+	test("handles image shown at natural size with empty space on both axes", () => {
+		// `object-fit: scale-down` never upscales: a 100x100 natural image in
+		// a 400x300 box is drawn at natural size, centered at offset (150, 100).
+		// Click at (150, 100) = top-left corner of the drawn image.
+		const evt = make_mock_event(
+			150,
+			100,
+			{
+				naturalWidth: 100,
+				naturalHeight: 100
+			},
+			{
+				left: 0,
+				top: 0,
+				width: 400,
+				height: 300
+			}
+		);
+
+		const result = get_coordinates_of_clicked_image(evt);
+		expect(result).toEqual([0, 0]);
+	});
+
+	test("returns null when click is in the empty space around a natural-size image", () => {
+		// 100x100 natural image in a 1920x1080 box: drawn at natural size,
+		// centered at offset (910, 490). A click at (500, 540) is inside the
+		// box but left of the drawn image, so no image pixel is under it.
+		const evt = make_mock_event(
+			500,
+			540,
+			{
+				naturalWidth: 100,
+				naturalHeight: 100
+			},
+			{
+				left: 0,
+				top: 0,
+				width: 1920,
+				height: 1080
+			}
+		);
+
+		const result = get_coordinates_of_clicked_image(evt);
+		expect(result).toBeNull();
+	});
+
 	test("returns [NaN, NaN] when currentTarget is not an Element", () => {
 		const evt = {
 			currentTarget: {},

package/ImageExample.stories.svelte

@@ -24,14 +24,3 @@
 		<Image {...args} />
 	{/snippet}
 </Story>
-
-<Story
-	name="Null"
-	args={{
-		value: null
-	}}
->
-	{#snippet template(args)}
-		<Image {...args} />
-	{/snippet}
-</Story>

package/Index.svelte

@@ -100,7 +100,7 @@
 		width={gradio.props.width}
 		allow_overflow={false}
 		container={gradio.shared.container}
-		scale{gradio.shared.scale}
+		scale={gradio.shared.scale}
 		min_width={gradio.shared.min_width}
 		bind:fullscreen
 	>

package/dist/Index.svelte

@@ -100,7 +100,7 @@
 		width={gradio.props.width}
 		allow_overflow={false}
 		container={gradio.shared.container}
-		scale{gradio.shared.scale}
+		scale={gradio.shared.scale}
 		min_width={gradio.shared.min_width}
 		bind:fullscreen
 	>

package/dist/shared/Image.svelte

@@ -1,23 +1,26 @@
 <script lang="ts">
 	let {
-		src,
-		restProps,
+		src = "",
+		restProps = {},
 		data_testid,
-		class_names
+		class_names = [],
+		...imgProps
 	}: {
-		src: string;
-		restProps: object;
-		data_testid: string;
-		class_names: string[];
+		src?: string;
+		restProps?: Record<string, any>;
+		data_testid?: string;
+		class_names?: string[];
+		[key: string]: any;
 	} = $props();
 </script>
 
 <!-- svelte-ignore a11y-missing-attribute -->
 <img
 	{src}
-	class={(class_names || []).join(" ")}
+	class={class_names.join(" ")}
 	data-testid={data_testid}
 	{...restProps}
+	{...imgProps}
 	on:load
 />
 

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

@@ -1,8 +1,9 @@
 type $$ComponentProps = {
-    src: string;
-    restProps: object;
-    data_testid: string;
-    class_names: string[];
+    src?: string;
+    restProps?: Record<string, any>;
+    data_testid?: string;
+    class_names?: string[];
+    [key: string]: any;
 };
 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> & {

package/dist/shared/ImageUploader.svelte

@@ -121,6 +121,7 @@
 		upload?: never;
 		select: SelectData;
 		end_stream: never;
+		fullscreen: boolean;
 	}>();
 
 	export let dragging = false;
@@ -184,7 +185,13 @@
 	<IconButtonWrapper>
 		{#if value?.url && !active_streaming}
 			{#if show_fullscreen_button}
-				<FullscreenButton {fullscreen} on:fullscreen />
+				<FullscreenButton
+					{fullscreen}
+					onclick={(is_fullscreen) => {
+						fullscreen = is_fullscreen;
+						dispatch("fullscreen", is_fullscreen);
+					}}
+				/>
 			{/if}
 			<IconButton
 				Icon={Clear}
@@ -257,7 +264,7 @@
 			{sources}
 			bind:active_source
 			{handle_clear}
-			handle_select={handle_select_source}
+			handle_select={(source) => handle_select_source(source as source_type)}
 		/>
 	{/if}
 </div>

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

@@ -46,7 +46,6 @@ declare const ImageUploader: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_P
 }, {
     default: {};
 }>, {
-    fullscreen: any;
     error: CustomEvent<string>;
     drag: CustomEvent<any>;
     close_stream: CustomEvent<undefined>;
@@ -56,6 +55,7 @@ declare const ImageUploader: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_P
     upload?: CustomEvent<undefined> | undefined;
     select: CustomEvent<SelectData>;
     end_stream: CustomEvent<never>;
+    fullscreen: CustomEvent<boolean>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {

package/dist/shared/types.d.ts

@@ -1,4 +1,4 @@
-import type { LoadingStatus } from "@gradio/statustracker";
+import type { ILoadingStatus as LoadingStatus } from "@gradio/statustracker";
 import type { FileData } from "@gradio/client";
 import type { CustomButton } from "@gradio/utils";
 export interface Base64File {

package/dist/shared/utils.js

@@ -7,20 +7,13 @@ export const get_coordinates_of_clicked_image = (evt) => {
         return [NaN, NaN];
     }
     const imageRect = image.getBoundingClientRect();
-    const xScale = image.naturalWidth / imageRect.width;
-    const yScale = image.naturalHeight / imageRect.height;
-    if (xScale > yScale) {
-        const displayed_height = image.naturalHeight / xScale;
-        const y_offset = (imageRect.height - displayed_height) / 2;
-        var x = Math.round((evt.clientX - imageRect.left) * xScale);
-        var y = Math.round((evt.clientY - imageRect.top - y_offset) * xScale);
-    }
-    else {
-        const displayed_width = image.naturalWidth / yScale;
-        const x_offset = (imageRect.width - displayed_width) / 2;
-        var x = Math.round((evt.clientX - imageRect.left - x_offset) * yScale);
-        var y = Math.round((evt.clientY - imageRect.top) * yScale);
-    }
+    // The image is rendered with `object-fit: scale-down`: centered, never
+    // scaled above its natural size, so empty space can appear on both axes.
+    const scale = Math.min(imageRect.width / image.naturalWidth, imageRect.height / image.naturalHeight, 1);
+    const x_offset = (imageRect.width - image.naturalWidth * scale) / 2;
+    const y_offset = (imageRect.height - image.naturalHeight * scale) / 2;
+    const x = Math.round((evt.clientX - imageRect.left - x_offset) / scale);
+    const y = Math.round((evt.clientY - imageRect.top - y_offset) / scale);
     if (x < 0 || x >= image.naturalWidth || y < 0 || y >= image.naturalHeight) {
         return null;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/image",
-  "version": "0.26.3",
+  "version": "0.27.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -10,12 +10,12 @@
     "cropperjs": "^2.0.1",
     "lazy-brush": "^2.0.2",
     "resize-observer-polyfill": "^1.5.1",
-    "@gradio/atoms": "^0.24.0",
+    "@gradio/atoms": "^0.25.0",
+    "@gradio/client": "^2.3.0",
     "@gradio/icons": "^0.15.1",
-    "@gradio/statustracker": "^0.14.1",
-    "@gradio/upload": "^0.17.9",
-    "@gradio/utils": "^0.12.2",
-    "@gradio/client": "^2.2.0"
+    "@gradio/statustracker": "^0.15.0",
+    "@gradio/utils": "^0.13.0",
+    "@gradio/upload": "^0.18.0"
   },
   "devDependencies": {
     "@gradio/preview": "^0.16.2"

package/shared/Image.svelte

@@ -1,23 +1,26 @@
 <script lang="ts">
 	let {
-		src,
-		restProps,
+		src = "",
+		restProps = {},
 		data_testid,
-		class_names
+		class_names = [],
+		...imgProps
 	}: {
-		src: string;
-		restProps: object;
-		data_testid: string;
-		class_names: string[];
+		src?: string;
+		restProps?: Record<string, any>;
+		data_testid?: string;
+		class_names?: string[];
+		[key: string]: any;
 	} = $props();
 </script>
 
 <!-- svelte-ignore a11y-missing-attribute -->
 <img
 	{src}
-	class={(class_names || []).join(" ")}
+	class={class_names.join(" ")}
 	data-testid={data_testid}
 	{...restProps}
+	{...imgProps}
 	on:load
 />
 

package/shared/ImageUploader.svelte

@@ -121,6 +121,7 @@
 		upload?: never;
 		select: SelectData;
 		end_stream: never;
+		fullscreen: boolean;
 	}>();
 
 	export let dragging = false;
@@ -184,7 +185,13 @@
 	<IconButtonWrapper>
 		{#if value?.url && !active_streaming}
 			{#if show_fullscreen_button}
-				<FullscreenButton {fullscreen} on:fullscreen />
+				<FullscreenButton
+					{fullscreen}
+					onclick={(is_fullscreen) => {
+						fullscreen = is_fullscreen;
+						dispatch("fullscreen", is_fullscreen);
+					}}
+				/>
 			{/if}
 			<IconButton
 				Icon={Clear}
@@ -257,7 +264,7 @@
 			{sources}
 			bind:active_source
 			{handle_clear}
-			handle_select={handle_select_source}
+			handle_select={(source) => handle_select_source(source as source_type)}
 		/>
 	{/if}
 </div>

package/shared/types.ts

@@ -1,4 +1,4 @@
-import type { LoadingStatus } from "@gradio/statustracker";
+import type { ILoadingStatus as LoadingStatus } from "@gradio/statustracker";
 import type { FileData } from "@gradio/client";
 import type { CustomButton } from "@gradio/utils";
 

package/shared/utils.ts

@@ -9,19 +9,17 @@ export const get_coordinates_of_clicked_image = (
 	}
 
 	const imageRect = image.getBoundingClientRect();
-	const xScale = image.naturalWidth / imageRect.width;
-	const yScale = image.naturalHeight / imageRect.height;
-	if (xScale > yScale) {
-		const displayed_height = image.naturalHeight / xScale;
-		const y_offset = (imageRect.height - displayed_height) / 2;
-		var x = Math.round((evt.clientX - imageRect.left) * xScale);
-		var y = Math.round((evt.clientY - imageRect.top - y_offset) * xScale);
-	} else {
-		const displayed_width = image.naturalWidth / yScale;
-		const x_offset = (imageRect.width - displayed_width) / 2;
-		var x = Math.round((evt.clientX - imageRect.left - x_offset) * yScale);
-		var y = Math.round((evt.clientY - imageRect.top) * yScale);
-	}
+	// The image is rendered with `object-fit: scale-down`: centered, never
+	// scaled above its natural size, so empty space can appear on both axes.
+	const scale = Math.min(
+		imageRect.width / image.naturalWidth,
+		imageRect.height / image.naturalHeight,
+		1
+	);
+	const x_offset = (imageRect.width - image.naturalWidth * scale) / 2;
+	const y_offset = (imageRect.height - image.naturalHeight * scale) / 2;
+	const x = Math.round((evt.clientX - imageRect.left - x_offset) / scale);
+	const y = Math.round((evt.clientY - imageRect.top - y_offset) / scale);
 	if (x < 0 || x >= image.naturalWidth || y < 0 || y >= image.naturalHeight) {
 		return null;
 	}