svelte-image-viewer
Version:
A couple of simple components for displaying content with pan and zoom capabilities.
53 lines (52 loc) • 2.1 kB
JavaScript
/**
* @deprecated use `panAndZoom` instead
*/
export default function pinchToZoom(element, callback) {
const events = new Map();
let previousDistance = null;
const handlePointerDown = (event) => {
events.set(event.pointerId, event);
if (events.size === 2) {
initialiseDistance();
}
};
const handlePointerMove = (event) => {
events.set(event.pointerId, event);
if (events.size === 2) {
const [first, second] = Array.from(events.values());
const distance = Math.hypot(second.clientX - first.clientX, second.clientY - first.clientY);
if (previousDistance !== null) {
callback(previousDistance - distance);
}
previousDistance = distance;
}
};
const handlePointerUp = (event) => {
events.delete(event.pointerId);
if (events.size < 2) {
previousDistance = null;
}
};
const initialiseDistance = () => {
if (events.size === 2) {
const [first, second] = Array.from(events.values());
previousDistance = Math.hypot(second.clientX - first.clientX, second.clientY - first.clientY);
}
};
element.addEventListener("pointerdown", handlePointerDown);
element.addEventListener("pointermove", handlePointerMove);
element.addEventListener("pointerup", handlePointerUp);
element.addEventListener("pointercancel", handlePointerUp);
element.addEventListener("pointerleave", handlePointerUp);
element.addEventListener("pointerout", handlePointerUp);
return {
destroy() {
element.removeEventListener("pointerdown", handlePointerDown);
element.removeEventListener("pointermove", handlePointerMove);
element.removeEventListener("pointerup", handlePointerUp);
element.removeEventListener("pointercancel", handlePointerUp);
element.removeEventListener("pointerleave", handlePointerUp);
element.removeEventListener("pointerout", handlePointerUp);
},
};
}