JavaScript Element gestureend Event

const hasGesture =
  "ongestureend" in window ||
  typeof GestureEvent !== "undefined";

console.log("gestureend supported:", hasGesture);

if (!hasGesture) {
  console.log("Use touchend / pointerup instead");
}

const el = document.getElementById("stage");
let lastScale = 1;

el.addEventListener("gesturechange", (event) => {
  lastScale = event.scale;
  console.log("live scale:", lastScale);
});

el.addEventListener("gestureend", (event) => {
  console.log("gestureend — commit scale:", event.scale);
  console.log("rotation:", event.rotation);
  // persist lastScale into your model / CSS
});

console.log("Listeners attached (needs Safari multi-touch)");

const el = document.getElementById("stage");
let startDist = 0;
let lastScale = 1;

function distance(a, b) {
  return Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
}

el.addEventListener("touchstart", (event) => {
  if (event.touches.length === 2) {
    startDist = distance(event.touches[0], event.touches[1]);
  }
});

el.addEventListener("touchmove", (event) => {
  if (event.touches.length === 2 && startDist) {
    lastScale = distance(event.touches[0], event.touches[1]) / startDist;
  }
});

el.addEventListener("touchend", (event) => {
  if (event.touches.length < 2 && startDist) {
    console.log("commit scale:", lastScale.toFixed(3));
    startDist = 0;
  }
});