@gradio/imageslider 0.2.0

package/dist/shared/zoom.js

@@ -0,0 +1,349 @@
+export class ZoomableImage {
+    container;
+    image;
+    scale;
+    offsetX;
+    offsetY;
+    isDragging;
+    lastX;
+    lastY;
+    initial_left_padding;
+    initial_top_padding;
+    initial_width;
+    initial_height;
+    subscribers;
+    handleImageLoad;
+    real_image_size = { top: 0, left: 0, width: 0, height: 0 };
+    last_touch_distance;
+    constructor(container, image) {
+        this.container = container;
+        this.image = image;
+        this.scale = 1;
+        this.offsetX = 0;
+        this.offsetY = 0;
+        this.isDragging = false;
+        this.lastX = 0;
+        this.lastY = 0;
+        this.initial_left_padding = 0;
+        this.initial_top_padding = 0;
+        this.initial_width = 0;
+        this.initial_height = 0;
+        this.subscribers = [];
+        this.last_touch_distance = 0;
+        this.handleWheel = this.handleWheel.bind(this);
+        this.handleMouseDown = this.handleMouseDown.bind(this);
+        this.handleMouseMove = this.handleMouseMove.bind(this);
+        this.handleMouseUp = this.handleMouseUp.bind(this);
+        this.handleImageLoad = this.init.bind(this);
+        this.handleTouchStart = this.handleTouchStart.bind(this);
+        this.handleTouchMove = this.handleTouchMove.bind(this);
+        this.handleTouchEnd = this.handleTouchEnd.bind(this);
+        this.image.addEventListener("load", this.handleImageLoad);
+        this.container.addEventListener("wheel", this.handleWheel);
+        this.container.addEventListener("mousedown", this.handleMouseDown);
+        document.addEventListener("mousemove", this.handleMouseMove);
+        document.addEventListener("mouseup", this.handleMouseUp);
+        this.container.addEventListener("touchstart", this.handleTouchStart);
+        document.addEventListener("touchmove", this.handleTouchMove);
+        document.addEventListener("touchend", this.handleTouchEnd);
+        const observer = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.target === this.container) {
+                    this.handleResize();
+                    this.get_image_size(this.image);
+                }
+            }
+        });
+        observer.observe(this.container);
+    }
+    handleResize() {
+        this.init();
+    }
+    init() {
+        const containerRect = this.container.getBoundingClientRect();
+        const imageRect = this.image.getBoundingClientRect();
+        this.initial_left_padding = imageRect.left - containerRect.left;
+        this.initial_top_padding = imageRect.top - containerRect.top;
+        this.initial_width = imageRect.width;
+        this.initial_height = imageRect.height;
+        this.reset_zoom();
+        this.updateTransform();
+    }
+    reset_zoom() {
+        this.scale = 1;
+        this.offsetX = 0;
+        this.offsetY = 0;
+        this.updateTransform();
+    }
+    handleMouseDown(e) {
+        const imageRect = this.image.getBoundingClientRect();
+        if (e.clientX >= imageRect.left &&
+            e.clientX <= imageRect.right &&
+            e.clientY >= imageRect.top &&
+            e.clientY <= imageRect.bottom) {
+            e.preventDefault();
+            if (this.scale === 1)
+                return;
+            this.isDragging = true;
+            this.lastX = e.clientX;
+            this.lastY = e.clientY;
+            this.image.style.cursor = "grabbing";
+        }
+    }
+    handleMouseMove(e) {
+        if (!this.isDragging)
+            return;
+        const deltaX = e.clientX - this.lastX;
+        const deltaY = e.clientY - this.lastY;
+        this.offsetX += deltaX;
+        this.offsetY += deltaY;
+        this.lastX = e.clientX;
+        this.lastY = e.clientY;
+        this.updateTransform();
+        this.updateTransform();
+    }
+    handleMouseUp() {
+        if (this.isDragging) {
+            this.constrain_to_bounds(true);
+            this.updateTransform();
+            this.isDragging = false;
+            this.image.style.cursor = this.scale > 1 ? "grab" : "zoom-in";
+        }
+    }
+    async handleWheel(e) {
+        e.preventDefault();
+        const containerRect = this.container.getBoundingClientRect();
+        const imageRect = this.image.getBoundingClientRect();
+        if (e.clientX < imageRect.left ||
+            e.clientX > imageRect.right ||
+            e.clientY < imageRect.top ||
+            e.clientY > imageRect.bottom) {
+            return;
+        }
+        const zoomFactor = 1.05;
+        const oldScale = this.scale;
+        const newScale = -Math.sign(e.deltaY) > 0
+            ? Math.min(15, oldScale * zoomFactor) // in
+            : Math.max(1, oldScale / zoomFactor); // out
+        if (newScale === oldScale)
+            return;
+        const cursorX = e.clientX - containerRect.left - this.initial_left_padding;
+        const cursorY = e.clientY - containerRect.top - this.initial_top_padding;
+        this.scale = newScale;
+        this.offsetX = this.compute_new_offset({
+            cursor_position: cursorX,
+            current_offset: this.offsetX,
+            new_scale: newScale,
+            old_scale: oldScale
+        });
+        this.offsetY = this.compute_new_offset({
+            cursor_position: cursorY,
+            current_offset: this.offsetY,
+            new_scale: newScale,
+            old_scale: oldScale
+        });
+        this.updateTransform(); // apply before constraints
+        this.constrain_to_bounds();
+        this.updateTransform(); // apply again after constraints
+        this.image.style.cursor = this.scale > 1 ? "grab" : "zoom-in";
+    }
+    // compute_offset_for_positions({ position: number, scale: number }) {
+    // 	return position - (scale / this.scale) * (position - this.offset);
+    // }
+    compute_new_position({ position, scale, anchor_position }) {
+        return position - (position - anchor_position) * (scale / this.scale);
+    }
+    compute_new_offset({ cursor_position, current_offset, new_scale, old_scale }) {
+        return (cursor_position -
+            (new_scale / old_scale) * (cursor_position - current_offset));
+    }
+    constrain_to_bounds(pan = false) {
+        if (this.scale === 1) {
+            this.offsetX = 0;
+            this.offsetY = 0;
+            return;
+        }
+        const onscreen = {
+            top: this.real_image_size.top * this.scale + this.offsetY,
+            left: this.real_image_size.left * this.scale + this.offsetX,
+            width: this.real_image_size.width * this.scale,
+            height: this.real_image_size.height * this.scale,
+            bottom: this.real_image_size.top * this.scale +
+                this.offsetY +
+                this.real_image_size.height * this.scale,
+            right: this.real_image_size.left * this.scale +
+                this.offsetX +
+                this.real_image_size.width * this.scale
+        };
+        const real_image_size_right = this.real_image_size.left + this.real_image_size.width;
+        const real_image_size_bottom = this.real_image_size.top + this.real_image_size.height;
+        if (pan) {
+            if (onscreen.top > this.real_image_size.top) {
+                this.offsetY = this.calculate_position(this.real_image_size.top, 0, "y");
+            }
+            else if (onscreen.bottom < real_image_size_bottom) {
+                this.offsetY = this.calculate_position(real_image_size_bottom, 1, "y");
+            }
+            if (onscreen.left > this.real_image_size.left) {
+                this.offsetX = this.calculate_position(this.real_image_size.left, 0, "x");
+            }
+            else if (onscreen.right < real_image_size_right) {
+                this.offsetX = this.calculate_position(real_image_size_right, 1, "x");
+            }
+        }
+    }
+    updateTransform() {
+        this.notify({ x: this.offsetX, y: this.offsetY, scale: this.scale });
+    }
+    destroy() {
+        this.container.removeEventListener("wheel", this.handleWheel);
+        this.container.removeEventListener("mousedown", this.handleMouseDown);
+        document.removeEventListener("mousemove", this.handleMouseMove);
+        document.removeEventListener("mouseup", this.handleMouseUp);
+        this.container.removeEventListener("touchstart", this.handleTouchStart);
+        document.removeEventListener("touchmove", this.handleTouchMove);
+        document.removeEventListener("touchend", this.handleTouchEnd);
+        this.image.removeEventListener("load", this.handleImageLoad);
+    }
+    subscribe(cb) {
+        this.subscribers.push(cb);
+    }
+    unsubscribe(cb) {
+        this.subscribers = this.subscribers.filter((subscriber) => subscriber !== cb);
+    }
+    notify({ x, y, scale }) {
+        this.subscribers.forEach((subscriber) => subscriber({ x, y, scale }));
+    }
+    handleTouchStart(e) {
+        e.preventDefault();
+        const imageRect = this.image.getBoundingClientRect();
+        const touch = e.touches[0];
+        if (touch.clientX >= imageRect.left &&
+            touch.clientX <= imageRect.right &&
+            touch.clientY >= imageRect.top &&
+            touch.clientY <= imageRect.bottom) {
+            if (e.touches.length === 1 && this.scale > 1) {
+                // one finger == prepare pan
+                this.isDragging = true;
+                this.lastX = touch.clientX;
+                this.lastY = touch.clientY;
+            }
+            else if (e.touches.length === 2) {
+                // two fingers == prepare pinch zoom
+                const touch1 = e.touches[0];
+                const touch2 = e.touches[1];
+                this.last_touch_distance = Math.hypot(touch2.clientX - touch1.clientX, touch2.clientY - touch1.clientY);
+            }
+        }
+    }
+    get_image_size(img) {
+        if (!img)
+            return;
+        const container = img.parentElement?.getBoundingClientRect();
+        if (!container)
+            return;
+        const naturalAspect = img.naturalWidth / img.naturalHeight;
+        const containerAspect = container.width / container.height;
+        let displayedWidth, displayedHeight;
+        if (naturalAspect > containerAspect) {
+            displayedWidth = container.width;
+            displayedHeight = container.width / naturalAspect;
+        }
+        else {
+            displayedHeight = container.height;
+            displayedWidth = container.height * naturalAspect;
+        }
+        const offsetX = (container.width - displayedWidth) / 2;
+        const offsetY = (container.height - displayedHeight) / 2;
+        this.real_image_size = {
+            top: offsetY,
+            left: offsetX,
+            width: displayedWidth,
+            height: displayedHeight
+        };
+    }
+    handleTouchMove(e) {
+        if (e.touches.length === 1 && this.isDragging) {
+            // one finger == pan
+            e.preventDefault();
+            const touch = e.touches[0];
+            const deltaX = touch.clientX - this.lastX;
+            const deltaY = touch.clientY - this.lastY;
+            this.offsetX += deltaX;
+            this.offsetY += deltaY;
+            this.lastX = touch.clientX;
+            this.lastY = touch.clientY;
+            this.updateTransform();
+        }
+        else if (e.touches.length === 2) {
+            // two fingers == pinch zoom
+            e.preventDefault();
+            const touch1 = e.touches[0];
+            const touch2 = e.touches[1];
+            const current_distance = Math.hypot(touch2.clientX - touch1.clientX, touch2.clientY - touch1.clientY);
+            if (this.last_touch_distance === 0) {
+                this.last_touch_distance = current_distance;
+                return;
+            }
+            const zoomFactor = current_distance / this.last_touch_distance;
+            const oldScale = this.scale;
+            const newScale = Math.min(15, Math.max(1, oldScale * zoomFactor));
+            if (newScale === oldScale) {
+                this.last_touch_distance = current_distance;
+                return;
+            }
+            // midpoint of touches relative to image
+            const containerRect = this.container.getBoundingClientRect();
+            const midX = (touch1.clientX + touch2.clientX) / 2 -
+                containerRect.left -
+                this.initial_left_padding;
+            const midY = (touch1.clientY + touch2.clientY) / 2 -
+                containerRect.top -
+                this.initial_top_padding;
+            this.scale = newScale;
+            this.offsetX = this.compute_new_offset({
+                cursor_position: midX,
+                current_offset: this.offsetX,
+                new_scale: newScale,
+                old_scale: oldScale
+            });
+            this.offsetY = this.compute_new_offset({
+                cursor_position: midY,
+                current_offset: this.offsetY,
+                new_scale: newScale,
+                old_scale: oldScale
+            });
+            this.updateTransform();
+            this.constrain_to_bounds();
+            this.updateTransform();
+            this.last_touch_distance = current_distance;
+            this.image.style.cursor = this.scale > 1 ? "grab" : "zoom-in";
+        }
+    }
+    handleTouchEnd(e) {
+        if (this.isDragging) {
+            this.constrain_to_bounds(true);
+            this.updateTransform();
+            this.isDragging = false;
+        }
+        if (e.touches.length === 0) {
+            this.last_touch_distance = 0;
+        }
+    }
+    calculate_position(screen_coord, image_anchor, axis) {
+        const containerRect = this.container.getBoundingClientRect();
+        // Calculate X offset if requested
+        if (axis === "x") {
+            const relative_screen_x = screen_coord;
+            const anchor_x = this.real_image_size.left + image_anchor * this.real_image_size.width;
+            return relative_screen_x - anchor_x * this.scale;
+        }
+        // Calculate Y offset if requested
+        if (axis === "y") {
+            const relative_screen_y = screen_coord;
+            const anchor_y = this.real_image_size.top + image_anchor * this.real_image_size.height;
+            return relative_screen_y - anchor_y * this.scale;
+        }
+        return 0;
+    }
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@gradio/imageslider",
+  "version": "0.2.0",
+  "description": "Gradio UI packages",
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "dependencies": {
+    "@types/d3-drag": "^3.0.7",
+    "@types/d3-selection": "^3.0.11",
+    "d3-drag": "^3.0.0",
+    "d3-selection": "^3.0.0",
+    "@gradio/atoms": "^0.16.0",
+    "@gradio/client": "^1.14.2",
+    "@gradio/icons": "^0.12.0",
+    "@gradio/statustracker": "^0.10.10",
+    "@gradio/upload": "^0.16.3",
+    "@gradio/utils": "^0.10.2",
+    "@gradio/wasm": "^0.18.1"
+  },
+  "exports": {
+    ".": {
+      "gradio": "./Index.svelte",
+      "svelte": "./dist/Index.svelte",
+      "types": "./dist/Index.svelte.d.ts"
+    },
+    "./example": {
+      "gradio": "./Example.svelte",
+      "svelte": "./dist/Example.svelte",
+      "types": "./dist/Example.svelte.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "devDependencies": {
+    "@gradio/preview": "^0.13.0"
+  },
+  "main_changeset": true,
+  "peerDependencies": {
+    "svelte": "^4.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gradio-app/gradio.git",
+    "directory": "js/imageslider"
+  }
+}

package/shared/ClearImage.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import { IconButton } from "@gradio/atoms";
+	import { Clear } from "@gradio/icons";
+
+	const dispatch = createEventDispatcher();
+</script>
+
+<div>
+	<IconButton
+		Icon={Clear}
+		label="Remove Image"
+		on:click={(event) => {
+			dispatch("remove_image");
+			event.stopPropagation();
+		}}
+	/>
+</div>
+
+<style>
+	div {
+		display: flex;
+		position: absolute;
+		top: var(--size-2);
+		right: var(--size-2);
+		justify-content: flex-end;
+		gap: var(--spacing-sm);
+		z-index: var(--layer-5);
+	}
+</style>

package/shared/Image.svelte

@@ -0,0 +1,235 @@
+<script lang="ts">
+	import Slider from "./Slider.svelte";
+	import { createEventDispatcher, tick } from "svelte";
+	import { BlockLabel, Empty, IconButton } from "@gradio/atoms";
+	import { Download } from "@gradio/icons";
+	import { Image } from "@gradio/icons";
+	import { type SelectData, type I18nFormatter } from "@gradio/utils";
+	import ClearImage from "./ClearImage.svelte";
+	import ImageEl from "./ImageEl.svelte";
+
+	import { Upload } from "@gradio/upload";
+	import { DownloadLink } from "@gradio/wasm/svelte";
+
+	import { type FileData, type Client } from "@gradio/client";
+
+	export let value: [FileData | null, FileData | null];
+
+	export let label: string | undefined = undefined;
+	export let show_label: boolean;
+	export let root: string;
+	export let position: number;
+	export let upload_count = 2;
+
+	export let show_download_button = true;
+	export let slider_color: string;
+	export let upload: Client["upload"];
+	export let stream_handler: Client["stream"];
+	export let max_file_size: number | null = null;
+	export let i18n: I18nFormatter;
+	export let max_height: number;
+
+	let value_: [FileData | null, FileData | null] = value || [null, null];
+
+	let img: HTMLImageElement;
+	let el_width: number;
+	let el_height: number;
+
+	async function handle_upload(
+		{ detail }: CustomEvent<FileData[]>,
+		n: number
+	): Promise<void> {
+		const new_value = [value[0], value[1]] as [
+			FileData | null,
+			FileData | null
+		];
+		if (detail.length > 1) {
+			new_value[n] = detail[0];
+		} else {
+			new_value[n] = detail[n];
+		}
+		value = new_value;
+		await tick();
+
+		dispatch("upload", new_value);
+	}
+
+	let old_value = "";
+
+	$: if (JSON.stringify(value) !== old_value) {
+		old_value = JSON.stringify(value);
+		value_ = value;
+	}
+
+	const dispatch = createEventDispatcher<{
+		change: string | null;
+		stream: string | null;
+		edit: undefined;
+		clear: undefined;
+		drag: boolean;
+		upload: [FileData | null, FileData | null];
+		select: SelectData;
+	}>();
+
+	export let dragging = false;
+
+	$: dispatch("drag", dragging);
+</script>
+
+<BlockLabel {show_label} Icon={Image} label={label || i18n("image.image")} />
+
+<div
+	data-testid="image"
+	class="image-container"
+	bind:clientWidth={el_width}
+	bind:clientHeight={el_height}
+>
+	{#if value?.[0]?.url || value?.[1]?.url}
+		<ClearImage
+			on:remove_image={() => {
+				position = 0.5;
+				value = [null, null];
+				dispatch("clear");
+			}}
+		/>
+	{/if}
+	{#if value?.[1]?.url}
+		<div class="icon-buttons">
+			{#if show_download_button}
+				<DownloadLink
+					href={value[1].url}
+					download={value[1].orig_name || "image"}
+				>
+					<IconButton Icon={Download} />
+				</DownloadLink>
+			{/if}
+		</div>
+	{/if}
+	<Slider
+		bind:position
+		disabled={upload_count == 2 || !value?.[0]}
+		{slider_color}
+	>
+		<div
+			class="upload-wrap"
+			style:display={upload_count === 2 ? "flex" : "block"}
+			class:side-by-side={upload_count === 2}
+		>
+			{#if !value_?.[0]}
+				<div class="wrap" class:half-wrap={upload_count === 1}>
+					<Upload
+						bind:dragging
+						filetype="image/*"
+						on:load={(e) => handle_upload(e, 0)}
+						disable_click={!!value?.[0]}
+						{root}
+						file_count="multiple"
+						{upload}
+						{stream_handler}
+						{max_file_size}
+					>
+						<slot />
+					</Upload>
+				</div>
+			{:else}
+				<ImageEl
+					variant="upload"
+					src={value_[0]?.url}
+					alt=""
+					bind:img_el={img}
+					{max_height}
+				/>
+			{/if}
+
+			{#if !value_?.[1] && upload_count === 2}
+				<Upload
+					bind:dragging
+					filetype="image/*"
+					on:load={(e) => handle_upload(e, 1)}
+					disable_click={!!value?.[1]}
+					{root}
+					file_count="multiple"
+					{upload}
+					{stream_handler}
+					{max_file_size}
+				>
+					<slot />
+				</Upload>
+			{:else if !value_?.[1] && upload_count === 1}
+				<div
+					class="empty-wrap fixed"
+					style:width="{el_width * (1 - position)}px"
+					style:transform="translateX({el_width * position}px)"
+					class:white-icon={!value?.[0]?.url}
+				>
+					<Empty unpadded_box={true} size="large"><Image /></Empty>
+				</div>
+			{:else if value_?.[1]}
+				<ImageEl
+					variant="upload"
+					src={value_[1].url}
+					alt=""
+					fixed={upload_count === 1}
+					transform="translate(0px, 0px) scale(1)"
+					{max_height}
+				/>
+			{/if}
+		</div>
+	</Slider>
+</div>
+
+<style>
+	.upload-wrap {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+		width: 100%;
+	}
+
+	.wrap {
+		width: 100%;
+	}
+
+	.half-wrap {
+		width: 50%;
+	}
+	.image-container,
+	.empty-wrap {
+		width: var(--size-full);
+		height: var(--size-full);
+	}
+
+	.fixed {
+		--anim-block-background-fill: 255, 255, 255;
+		position: absolute;
+		top: 0;
+		left: 0;
+		background-color: rgba(var(--anim-block-background-fill), 0.8);
+		z-index: 0;
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.fixed {
+			--anim-block-background-fill: 31, 41, 55;
+		}
+	}
+
+	.side-by-side :global(img) {
+		/* width: 100%; */
+		width: 50%;
+		object-fit: contain;
+	}
+
+	.empty-wrap {
+		pointer-events: none;
+	}
+
+	.icon-buttons {
+		display: flex;
+		position: absolute;
+		right: 8px;
+		z-index: var(--layer-top);
+		top: 8px;
+	}
+</style>