@gradio/imageslider 0.2.0

package/shared/zoom.ts

@@ -0,0 +1,487 @@
+export class ZoomableImage {
+	container: HTMLDivElement;
+	image: HTMLImageElement;
+	scale: number;
+	offsetX: number;
+	offsetY: number;
+	isDragging: boolean;
+	lastX: number;
+	lastY: number;
+	initial_left_padding: number;
+	initial_top_padding: number;
+	initial_width: number;
+	initial_height: number;
+	subscribers: (({
+		x,
+		y,
+		scale
+	}: {
+		x: number;
+		y: number;
+		scale: number;
+	}) => void)[];
+	handleImageLoad: () => void;
+	real_image_size: {
+		top: number;
+		left: number;
+		width: number;
+		height: number;
+	} = { top: 0, left: 0, width: 0, height: 0 };
+
+	last_touch_distance: number;
+
+	constructor(container: HTMLDivElement, image: HTMLImageElement) {
+		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(): void {
+		this.init();
+	}
+
+	init(): void {
+		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(): void {
+		this.scale = 1;
+		this.offsetX = 0;
+		this.offsetY = 0;
+		this.updateTransform();
+	}
+
+	handleMouseDown(e: MouseEvent): void {
+		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: MouseEvent): void {
+		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(): void {
+		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: WheelEvent): Promise<void> {
+		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
+	}: {
+		position: number;
+		scale: number;
+		anchor_position: number;
+	}): number {
+		return position - (position - anchor_position) * (scale / this.scale);
+	}
+
+	compute_new_offset({
+		cursor_position,
+		current_offset,
+		new_scale,
+		old_scale
+	}: {
+		cursor_position: number;
+		current_offset: number;
+		new_scale: number;
+		old_scale: number;
+	}): number {
+		return (
+			cursor_position -
+			(new_scale / old_scale) * (cursor_position - current_offset)
+		);
+	}
+
+	constrain_to_bounds(pan = false): void {
+		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(): void {
+		this.notify({ x: this.offsetX, y: this.offsetY, scale: this.scale });
+	}
+
+	destroy(): void {
+		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: ({ x, y, scale }: { x: number; y: number; scale: number }) => void
+	): void {
+		this.subscribers.push(cb);
+	}
+
+	unsubscribe(
+		cb: ({ x, y, scale }: { x: number; y: number; scale: number }) => void
+	): void {
+		this.subscribers = this.subscribers.filter(
+			(subscriber) => subscriber !== cb
+		);
+	}
+
+	notify({ x, y, scale }: { x: number; y: number; scale: number }): void {
+		this.subscribers.forEach((subscriber) => subscriber({ x, y, scale }));
+	}
+
+	handleTouchStart(e: TouchEvent): void {
+		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: HTMLImageElement | null): void {
+		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: TouchEvent): void {
+		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: TouchEvent): void {
+		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: number,
+		image_anchor: number,
+		axis: "x" | "y"
+	): number {
+		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;
+	}
+}