@gradio/imageslider 0.7.1 → 0.8.1

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @gradio/imageslider
 
+## 0.8.1
+
+### Dependency updates
+
+- @gradio/upload@0.19.0
+- @gradio/statustracker@0.15.4
+- @gradio/client@2.7.1
+
+## 0.8.0
+
+### Features
+
+- [#13862](https://github.com/gradio-app/gradio/pull/13862) [`3353446`](https://github.com/gradio-app/gradio/commit/3353446616a56838e7e3cb3477fcd02664a0db40) - Expose live camera and slider position to event handlers.  Thanks @abidlabs!/n  `camera_position` on `gr.Model3D` and `slider_position` on `gr.ImageSlider` now follow the user, so a function whose parameter is annotated with the component reads the view that is actually on screen. Both can still be set from the backend to move the camera or the divider./n  Also fixes, in the same area:/n  - `camera_position` is applied on load for `display_mode="point_cloud"` and `display_mode="wireframe"`, not only for `"solid"`./n  - `camera_position` is applied to interactive (uploadable) `gr.Model3D`, and `slider_position` to interactive `gr.ImageSlider`; both previously ignored it./n  - `pan_speed` is passed through to the `gr.Model3D` viewer; it was silently stuck at its default./n  - A Model3D camera observer was added on every camera update without ever being removed; exactly one is now registered, and it is cleaned up with the component.
+
+### Dependency updates
+
+- @gradio/utils@0.14.2
+- @gradio/client@2.7.0
+
+## 0.7.1
+
+### Dependency updates
+
+- @gradio/client@2.6.0
+- @gradio/atoms@0.26.2
+- @gradio/utils@0.14.1
+- @gradio/upload@0.18.3
+
+## 0.7.1
+
+### Dependency updates
+
+- @gradio/client@2.5.1
+
+## 0.7.1
+
+### Dependency updates
+
+- @gradio/client@2.5.0
+
 ## 0.7.1
 
 ### Dependency updates

package/ImageSlider.stories.svelte

@@ -0,0 +1,57 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { userEvent, within } from "storybook/test";
+	import ImageSlider from "./Index.svelte";
+	import { allModes } from "../storybook/modes";
+	import { wrapProps } from "../storybook/wrapProps";
+
+	const cheetah = "/cheetah.jpg";
+	const lion = "/lion.jpg";
+	const fileData = (url, name) => ({
+		path: url,
+		url,
+		orig_name: name,
+		size: null,
+		mime_type: "image/jpeg",
+		is_stream: false,
+		meta: { _type: "gradio.FileData" }
+	});
+
+	const { Story } = defineMeta({
+		title: "Components/Image Slider",
+		component: ImageSlider,
+		parameters: {
+			chromatic: {
+				modes: {
+					desktop: allModes["desktop"],
+					mobile: allModes["mobile"]
+				}
+			}
+		}
+	});
+</script>
+
+<Story
+	name="Mobile fullscreen"
+	args={{
+		value: [fileData(cheetah, "cheetah.jpg"), fileData(lion, "lion.jpg")],
+		interactive: false,
+		show_label: true,
+		label: "Fullscreen comparison",
+		buttons: ["fullscreen"],
+		slider_position: 50,
+		upload_count: 2,
+		slider_color: "#ff8c00",
+		max_height: 500
+	}}
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.click(canvas.getByRole("button", { name: "Fullscreen" }));
+	}}
+>
+	{#snippet template(args)}
+		<div style="width: 360px; height: 440px; position: relative;">
+			<ImageSlider {...wrapProps(args)} />
+		</div>
+	{/snippet}
+</Story>

package/ImageSlider.test.ts

@@ -296,13 +296,6 @@ describe("Props: slider_position", () => {
 
 		expect(getByTestId("slider")).toBeInTheDocument();
 	});
-
-	test.todo(
-		"VISUAL: slider_position=0 positions the slider at the left edge — needs Playwright visual regression screenshot comparison"
-	);
-	test.todo(
-		"VISUAL: slider_position=100 positions the slider at the right edge — needs Playwright visual regression screenshot comparison"
-	);
 });
 
 describe("Props: buttons", () => {
@@ -521,6 +514,21 @@ describe("Events: clear", () => {
 		expect(clear).toHaveBeenCalledTimes(1);
 	});
 
+	test("clearing keeps the configured slider_position", async () => {
+		// One image keeps the component on the uploader branch, which is where the
+		// X lives while a slider is still waiting for its second image.
+		const { get_data, getByLabelText } = await render(ImageSlider, {
+			...default_props,
+			interactive: true,
+			slider_position: 30,
+			value: [img_a, null]
+		});
+
+		await fireEvent.click(getByLabelText("Remove Image"));
+
+		expect((await get_data()).slider_position).toBe(30);
+	});
+
 	test("value is [null, null] after clicking Remove Image", async () => {
 		const { get_data, getByLabelText } = await render(ImageSlider, {
 			...default_props,
@@ -725,22 +733,3 @@ describe("Edge cases", () => {
 		expect(change).not.toHaveBeenCalled();
 	});
 });
-
-test.todo(
-	"VISUAL: slider_color applies the given color to the slider line and handles — needs Playwright visual regression screenshot comparison"
-);
-test.todo(
-	"VISUAL: height prop constrains the component height — needs Playwright visual regression screenshot comparison"
-);
-test.todo(
-	"VISUAL: width prop constrains the component width — needs Playwright visual regression screenshot comparison"
-);
-test.todo(
-	"VISUAL: max_height limits image display height — needs Playwright visual regression screenshot comparison"
-);
-test.todo(
-	"VISUAL: scroll wheel zoom scales both images together — needs Playwright visual regression screenshot comparison"
-);
-test.todo(
-	"VISUAL: mouse drag pans both images when zoomed in — needs Playwright visual regression screenshot comparison"
-);

package/Index.svelte

@@ -1,5 +1,3 @@
-<svelte:options accessors={true} />
-
 <script lang="ts">
 	import { tick } from "svelte";
 	import type { ImageSliderProps, ImageSliderEvents } from "./types";
@@ -39,6 +37,16 @@
 		Math.max(0, Math.min(100, gradio.props.slider_position)) / 100
 	);
 
+	function handle_slider_position(position: number): void {
+		const percentage = Math.max(
+			0,
+			Math.min(100, Math.round(position * 1e5) / 1e3)
+		);
+		if (gradio.props.slider_position !== percentage) {
+			gradio.props.slider_position = percentage;
+		}
+	}
+
 	gradio.watch_for_change();
 
 	$effect(() => {
@@ -96,6 +104,7 @@
 				gradio.dispatch("custom_button_click", { id });
 			}}
 			position={normalised_slider_position}
+			onposition={handle_slider_position}
 			slider_color={gradio.props.slider_color}
 			max_height={gradio.props.max_height}
 		/>
@@ -140,6 +149,8 @@
 			label={gradio.shared.label}
 			show_label={gradio.shared.show_label}
 			upload_count={gradio.props.upload_count}
+			position={normalised_slider_position}
+			onposition={handle_slider_position}
 			max_file_size={gradio.shared.max_file_size}
 			i18n={gradio.i18n}
 			upload={(...args) => gradio.shared.client.upload(...args)}

package/dist/Index.svelte

@@ -1,5 +1,3 @@
-<svelte:options accessors={true} />
-
 <script lang="ts">
 	import { tick } from "svelte";
 	import type { ImageSliderProps, ImageSliderEvents } from "./types";
@@ -39,6 +37,16 @@
 		Math.max(0, Math.min(100, gradio.props.slider_position)) / 100
 	);
 
+	function handle_slider_position(position: number): void {
+		const percentage = Math.max(
+			0,
+			Math.min(100, Math.round(position * 1e5) / 1e3)
+		);
+		if (gradio.props.slider_position !== percentage) {
+			gradio.props.slider_position = percentage;
+		}
+	}
+
 	gradio.watch_for_change();
 
 	$effect(() => {
@@ -96,6 +104,7 @@
 				gradio.dispatch("custom_button_click", { id });
 			}}
 			position={normalised_slider_position}
+			onposition={handle_slider_position}
 			slider_color={gradio.props.slider_color}
 			max_height={gradio.props.max_height}
 		/>
@@ -140,6 +149,8 @@
 			label={gradio.shared.label}
 			show_label={gradio.shared.show_label}
 			upload_count={gradio.props.upload_count}
+			position={normalised_slider_position}
+			onposition={handle_slider_position}
 			max_file_size={gradio.shared.max_file_size}
 			i18n={gradio.i18n}
 			upload={(...args) => gradio.shared.client.upload(...args)}

package/dist/shared/Image.svelte

@@ -18,6 +18,7 @@
 		show_label,
 		root,
 		position = $bindable(0.5),
+		onposition,
 		upload_count = 2,
 		show_download_button = true,
 		slider_color,
@@ -38,6 +39,7 @@
 		show_label: boolean;
 		root: string;
 		position?: number;
+		onposition?: (position: number) => void;
 		upload_count?: number;
 		show_download_button?: boolean;
 		slider_color: string;
@@ -126,6 +128,7 @@
 	{/if}
 	<Slider
 		bind:position
+		{onposition}
 		disabled={upload_count == 2 || !value?.[0]}
 		{slider_color}
 	>

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

@@ -8,6 +8,7 @@ type $$ComponentProps = {
     show_label: boolean;
     root: string;
     position?: number;
+    onposition?: (position: number) => void;
     upload_count?: number;
     show_download_button?: boolean;
     slider_color: string;

package/dist/shared/Slider.svelte

@@ -14,6 +14,7 @@
 		image_size = { top: 0, left: 0, width: 0, height: 0 },
 		el = $bindable<HTMLDivElement | undefined>(undefined),
 		parent_el = $bindable<HTMLDivElement | undefined>(undefined),
+		onposition,
 		children
 	}: {
 		position?: number;
@@ -27,6 +28,7 @@
 		};
 		el?: HTMLDivElement;
 		parent_el?: HTMLDivElement;
+		onposition?: (position: number) => void;
 		children?: Snippet;
 	} = $props();
 
@@ -55,7 +57,8 @@
 
 	function update_position(x: number): void {
 		px = clamp(x, 0, container_width);
-		position = round((x - image_size.left) / image_size.width, 5);
+		position = clamp(round((x - image_size.left) / image_size.width, 5), 0, 1);
+		onposition?.(position);
 	}
 
 	function drag_start(event: any): void {

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

@@ -11,6 +11,7 @@ type $$ComponentProps = {
     };
     el?: HTMLDivElement;
     parent_el?: HTMLDivElement;
+    onposition?: (position: number) => void;
     children?: Snippet;
 };
 declare const Slider: import("svelte").Component<$$ComponentProps, {}, "position" | "el" | "parent_el">;

package/dist/shared/SliderPreview.svelte

@@ -24,6 +24,7 @@
 		show_label,
 		i18n,
 		position = $bindable(0.5),
+		onposition,
 		layer_images = true,
 		show_single = false,
 		slider_color,
@@ -43,6 +44,7 @@
 		show_label: boolean;
 		i18n: I18nFormatter;
 		position?: number;
+		onposition?: (position: number) => void;
 		layer_images?: boolean;
 		show_single?: boolean;
 		slider_color: string;
@@ -213,6 +215,7 @@
 		>
 			<Slider
 				bind:position
+				{onposition}
 				{slider_color}
 				bind:el={slider_wrap}
 				bind:parent_el

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

@@ -8,6 +8,7 @@ type $$ComponentProps = {
     show_label: boolean;
     i18n: I18nFormatter;
     position?: number;
+    onposition?: (position: number) => void;
     layer_images?: boolean;
     show_single?: boolean;
     slider_color: string;

package/dist/shared/SliderUpload.svelte

@@ -1,5 +1,3 @@
-<svelte:options accessors={true} />
-
 <script lang="ts">
 	import type { Snippet } from "svelte";
 	import type { I18nFormatter } from "@gradio/utils";
@@ -24,6 +22,8 @@
 		onclear,
 		ondrag,
 		onupload,
+		onposition,
+		position = 0.5,
 		children
 	}: {
 		value?: [FileData | null, FileData | null];
@@ -41,6 +41,8 @@
 		onclear?: () => void;
 		ondrag?: (dragging: boolean) => void;
 		onupload?: (value: [FileData | null, FileData | null]) => void;
+		onposition?: (position: number) => void;
+		position?: number;
 		children?: Snippet;
 	} = $props();
 </script>
@@ -48,7 +50,8 @@
 <Image
 	bind:upload_promise
 	slider_color="var(--border-color-primary)"
-	position={0.5}
+	{position}
+	{onposition}
 	bind:value
 	bind:dragging
 	{root}

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

@@ -18,6 +18,8 @@ type $$ComponentProps = {
     onclear?: () => void;
     ondrag?: (dragging: boolean) => void;
     onupload?: (value: [FileData | null, FileData | null]) => void;
+    onposition?: (position: number) => void;
+    position?: number;
     children?: Snippet;
 };
 declare const SliderUpload: import("svelte").Component<$$ComponentProps, {}, "value" | "dragging" | "upload_promise">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/imageslider",
-  "version": "0.7.1",
+  "version": "0.8.1",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -11,12 +11,12 @@
     "@types/d3-selection": "^3.0.11",
     "d3-drag": "^3.0.0",
     "d3-selection": "^3.0.0",
-    "@gradio/atoms": "^0.26.1",
-    "@gradio/client": "^2.4.0",
+    "@gradio/atoms": "^0.26.2",
+    "@gradio/client": "^2.7.1",
+    "@gradio/statustracker": "^0.15.4",
+    "@gradio/upload": "^0.19.0",
     "@gradio/icons": "^0.16.0",
-    "@gradio/statustracker": "^0.15.2",
-    "@gradio/utils": "^0.14.0",
-    "@gradio/upload": "^0.18.2"
+    "@gradio/utils": "^0.14.2"
   },
   "exports": {
     ".": {
@@ -32,7 +32,7 @@
     "./package.json": "./package.json"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.17.0"
+    "@gradio/preview": "^0.17.1"
   },
   "main_changeset": true,
   "peerDependencies": {

package/shared/Image.svelte

@@ -18,6 +18,7 @@
 		show_label,
 		root,
 		position = $bindable(0.5),
+		onposition,
 		upload_count = 2,
 		show_download_button = true,
 		slider_color,
@@ -38,6 +39,7 @@
 		show_label: boolean;
 		root: string;
 		position?: number;
+		onposition?: (position: number) => void;
 		upload_count?: number;
 		show_download_button?: boolean;
 		slider_color: string;
@@ -126,6 +128,7 @@
 	{/if}
 	<Slider
 		bind:position
+		{onposition}
 		disabled={upload_count == 2 || !value?.[0]}
 		{slider_color}
 	>

package/shared/Slider.svelte

@@ -14,6 +14,7 @@
 		image_size = { top: 0, left: 0, width: 0, height: 0 },
 		el = $bindable<HTMLDivElement | undefined>(undefined),
 		parent_el = $bindable<HTMLDivElement | undefined>(undefined),
+		onposition,
 		children
 	}: {
 		position?: number;
@@ -27,6 +28,7 @@
 		};
 		el?: HTMLDivElement;
 		parent_el?: HTMLDivElement;
+		onposition?: (position: number) => void;
 		children?: Snippet;
 	} = $props();
 
@@ -55,7 +57,8 @@
 
 	function update_position(x: number): void {
 		px = clamp(x, 0, container_width);
-		position = round((x - image_size.left) / image_size.width, 5);
+		position = clamp(round((x - image_size.left) / image_size.width, 5), 0, 1);
+		onposition?.(position);
 	}
 
 	function drag_start(event: any): void {

package/shared/SliderPreview.svelte

@@ -24,6 +24,7 @@
 		show_label,
 		i18n,
 		position = $bindable(0.5),
+		onposition,
 		layer_images = true,
 		show_single = false,
 		slider_color,
@@ -43,6 +44,7 @@
 		show_label: boolean;
 		i18n: I18nFormatter;
 		position?: number;
+		onposition?: (position: number) => void;
 		layer_images?: boolean;
 		show_single?: boolean;
 		slider_color: string;
@@ -213,6 +215,7 @@
 		>
 			<Slider
 				bind:position
+				{onposition}
 				{slider_color}
 				bind:el={slider_wrap}
 				bind:parent_el

package/shared/SliderUpload.svelte

@@ -1,5 +1,3 @@
-<svelte:options accessors={true} />
-
 <script lang="ts">
 	import type { Snippet } from "svelte";
 	import type { I18nFormatter } from "@gradio/utils";
@@ -24,6 +22,8 @@
 		onclear,
 		ondrag,
 		onupload,
+		onposition,
+		position = 0.5,
 		children
 	}: {
 		value?: [FileData | null, FileData | null];
@@ -41,6 +41,8 @@
 		onclear?: () => void;
 		ondrag?: (dragging: boolean) => void;
 		onupload?: (value: [FileData | null, FileData | null]) => void;
+		onposition?: (position: number) => void;
+		position?: number;
 		children?: Snippet;
 	} = $props();
 </script>
@@ -48,7 +50,8 @@
 <Image
 	bind:upload_promise
 	slider_color="var(--border-color-primary)"
-	position={0.5}
+	{position}
+	{onposition}
 	bind:value
 	bind:dragging
 	{root}