/src/elements/x-preview.js at bc979512b2cffca4a3daf894834122735b55c2d2

// Copyright 2026 Shota FUJI
//
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.
//
// SPDX-License-Identifier: MPL-2.0

import css from "./x-preview.css";

const SCALE_MIN = 0.1;
const SCALE_MAX = 5.0;

const TOUCH_IDLE = 0;
const TOUCH_PANNING = 1;
const TOUCH_SCALING = 2;

function idle() {
	return {
		state: TOUCH_IDLE,
		touch: null,
		x: 0,
		y: 0,
		distance: 0,
		scale: 0.0,
	};
}

function panning(touch, x, y) {
	return {
		state: TOUCH_PANNING,
		touch,
		x,
		y,
		distance: 0,
		scale: 0.0,
	};
}

function scaling(distance, scale) {
	return {
		state: TOUCH_SCALING,
		touch: null,
		x: 0,
		y: 0,
		distance,
		scale,
	};
}

export class XPreview extends HTMLElement {
	#slot = document.createElement("slot");
	#gesturePlane = document.createElement("div");

	#size = null;
	#resizeObserver = new ResizeObserver((entries) => {
		for (const entry of entries) {
			this.#size = entry.contentRect;
			return;
		}
	});

	#dx = 0;
	#dy = 0;
	#scale = 1.0;

	#touch = idle();

	#isRenderScheduled = false;

	constructor() {
		super();

		const shadow = this.attachShadow({
			mode: "open",
		});

		const style = document.createElement("style");
		style.textContent = css;
		shadow.appendChild(style);

		shadow.appendChild(this.#slot);

		this.#gesturePlane.classList.add("gesture-plane");
		shadow.appendChild(this.#gesturePlane);

		const reset = document.createElement("button");
		reset.textContent = "Reset Viewport";
		reset.classList.add("reset");
		reset.classList.add("hidden");
		reset.addEventListener("click", (event) => {
			this.#dx = 0;
			this.#dy = 0;
			this.#scale = 1.0;

			this.#render();
		});
		shadow.appendChild(reset);
	}

	connectedCallback() {
		this.#gesturePlane.addEventListener("wheel", this.#onWheel);
		this.#gesturePlane.addEventListener("touchstart", this.#onTouchChange);
		this.#gesturePlane.addEventListener("touchend", this.#onTouchChange);
		this.#gesturePlane.addEventListener("touchmove", this.#onTouchMove);
		this.#gesturePlane.addEventListener("touchcancel", this.#onTouchCancel);

		this.#render();

		this.#resizeObserver.observe(this.#gesturePlane);
	}

	disconnectedCallback() {
		this.#gesturePlane.removeEventListener("wheel", this.#onWheel);
		this.#gesturePlane.removeEventListener("touchstart", this.#onTouchChange);
		this.#gesturePlane.removeEventListener("touchend", this.#onTouchChange);
		this.#gesturePlane.removeEventListener("touchmove", this.#onTouchMove);
		this.#gesturePlane.removeEventListener("touchcancel", this.#onTouchCancel);
		this.#resizeObserver.disconnect();
	}

	#onTouchChange = (event) => {
		switch (event.touches.length) {
			case 0:
				return;
			case 1:
				this.#touch = panning(event.touches.item(0), this.#dx, this.#dy);
				return;
			default:
				const distance = getPinchSize(event.touches);
				if (distance !== null) {
					this.#touch = scaling(distance, this.#scale);
				}
				return;
		}
	};

	#onTouchCancel = (event) => {
		this.#touch = idle();
	};

	#onTouchMove = (event) => {
		switch (this.#touch.state) {
			case TOUCH_IDLE:
				return;
			case TOUCH_PANNING: {
				this.#dx =
					this.#touch.x + (event.touches[0].clientX - this.#touch.touch.clientX) / this.#scale;
				this.#dy =
					this.#touch.y + (event.touches[0].clientY - this.#touch.touch.clientY) / this.#scale;
				this.#render();
				return;
			}
			case TOUCH_SCALING: {
				const distance = getPinchSize(event.touches);
				if (distance === null) {
					return;
				}

				this.#scale = Math.max(
					SCALE_MIN,
					Math.min(SCALE_MAX, this.#touch.scale * (distance / this.#touch.distance)),
				);
				this.#render();
				return;
			}
		}
	};

	#onWheel = (event) => {
		event.preventDefault();

		if (event.ctrlKey || event.metaKey) {
			let { deltaY } = event;
			// Workaround shitty design.
			switch (event.deltaMode) {
				// DOM_DELTA_LINE
				case 1:
					deltaY *= 15;
					break;
				// DOM_DELTA_PAGE
				case 2:
					deltaY *= 100;
					break;
			}

			const previous = this.#scale;
			this.#scale = Math.max(SCALE_MIN, Math.min(SCALE_MAX, this.#scale * (1 - deltaY / 100)));

			const ox = event.offsetX - this.#size.width * 0.5;
			const oy = event.offsetY - this.#size.height * 0.5;

			this.#dx += ox / this.#scale - ox / previous;
			this.#dy += oy / this.#scale - oy / previous;
		} else {
			this.#dx -= event.deltaX / this.#scale;
			this.#dy -= event.deltaY / this.#scale;
		}

		this.#render();
	};

	#render() {
		if (this.#isRenderScheduled) {
			return;
		}

		this.#isRenderScheduled = true;

		requestAnimationFrame(() => {
			if (!this.isConnected) {
				return;
			}

			for (const element of this.#slot.assignedElements()) {
				element.style.transform = `scale(${this.#scale}) translate(${this.#dx}px, ${this.#dy}px)`;
			}

			this.#isRenderScheduled = false;
		});
	}
}

function getPinchSize(touches) {
	const firstTouch = touches.item(0);
	if (!firstTouch) {
		return null;
	}

	const px = firstTouch.clientX;
	const py = firstTouch.clientY;

	let tx = 0;
	let ty = 0;

	for (let i = 1, touch; (touch = touches.item(i)); i++) {
		tx += touch.clientX;
		ty += touch.clientY;
	}

	return Math.sqrt(Math.pow(px - tx / touches.length, 2) + Math.pow(py - ty / touches.length, 2));
}