@drop-in/new/packages/decks/src/lib/drawer.ts

A SvelteKit Svelte 5 PocketBase Starter Kit with a CLI

export function drawer_animated(node: HTMLElement) {
	let x: number;
	let y: number;

	function handleMousedown(event: MouseEvent) {
		x = event.clientX;
		y = event.clientY;

		node.dispatchEvent(
			new CustomEvent('panstart', {
				detail: { x, y }
			})
		);

		window.addEventListener('mousemove', handleMousemove);
		window.addEventListener('mouseup', handleMouseup);
	}

	function handleMousemove(event: MouseEvent) {
		const dx = event.clientX - x;
		const dy = event.clientY - y;
		x = event.clientX;
		y = event.clientY;

		node.dispatchEvent(
			new CustomEvent('panmove', {
				detail: { x, y, dx, dy }
			})
		);
	}

	function handleMouseup(event: MouseEvent) {
		x = event.clientX;
		y = event.clientY;
		const dx = event.clientX - x;
		const dy = event.clientY - y;

		node.dispatchEvent(
			new CustomEvent('panend', {
				detail: { x, y, dx, dy }
			})
		);

		window.removeEventListener('mousemove', handleMousemove);
		window.removeEventListener('mouseup', handleMouseup);
	}

	node.addEventListener('mousedown', handleMousedown);

	return {
		destroy() {
			node.removeEventListener('mousedown', handleMousedown);
		}
	};
}