@gradio/imageslider 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @gradio/imageslider
 
+## 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
+
+- @gradio/client@2.4.0
+- @gradio/utils@0.14.0
+- @gradio/atoms@0.26.1
+- @gradio/statustracker@0.15.2
+- @gradio/upload@0.18.2
+
 ## 0.7.0
 
 ### Features

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

@@ -521,6 +521,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,

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.0",
+  "version": "0.8.0",
   "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.2",
     "@gradio/icons": "^0.16.0",
-    "@gradio/atoms": "^0.26.0",
-    "@gradio/statustracker": "^0.15.1",
-    "@gradio/utils": "^0.13.0",
-    "@gradio/upload": "^0.18.1",
-    "@gradio/client": "^2.3.1"
+    "@gradio/statustracker": "^0.15.3",
+    "@gradio/upload": "^0.18.3",
+    "@gradio/utils": "^0.14.2",
+    "@gradio/client": "^2.7.0"
   },
   "exports": {
     ".": {
@@ -32,7 +32,7 @@
     "./package.json": "./package.json"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.16.2"
+    "@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}