@pdf-viewer/react/dist/utils/hooks/usePinch.js

A react-pdf-viewer component for React and Next.js. Suitable for react-pdf document.

import { useState as w, useRef as T, useCallback as r, useEffect as u } from "react";
import { useDebounce as g } from "./useDebounce.js";
import { useZoomContext as A } from "../../contexts/ZoomContext.js";
const I = (n) => {
  const { currentZoom: m, setZoomLevel: b } = A(), [E, d] = w(m || 100), L = g(E, 100), [o, y] = w(!1), c = T(null), i = r((e) => {
    d(e ? (t) => t + 3 : (t) => t - 3);
  }, []), a = r(
    (e) => {
      if (!e.ctrlKey)
        return;
      e.preventDefault();
      const t = e.deltaY < 0;
      i(t);
    },
    [i]
  );
  u(() => {
    if (L) {
      const e = Math.round(m * 100 + E);
      d(0), b(e > 25 ? e : 25);
    }
  }, [L]);
  const p = (e, t) => {
    const s = e.clientX - t.clientX, l = e.clientY - t.clientY;
    return Math.sqrt(s * s + l * l);
  }, h = r(
    (e) => {
      if (!o || e.touches.length !== 2)
        return;
      const t = p(e.touches[0], e.touches[1]);
      c.current = t, e.preventDefault();
    },
    [o]
  ), v = r(() => {
    c.current = null;
  }, []), f = r(
    (e) => {
      if (!o || e.touches.length !== 2 || c.current === null)
        return;
      const t = p(e.touches[0], e.touches[1]), s = t - c.current, l = Math.abs(s) > 5, S = s > 0;
      l && (i(S), c.current = t, e.preventDefault());
    },
    [i, o]
  ), D = () => {
    document.activeElement instanceof HTMLElement && document.activeElement.blur();
  };
  u(() => {
    if (o) {
      document.body.style.touchAction = "pan-x pan-y";
      return;
    }
    document.body.style.touchAction = "";
  }, [o]), u(() => {
    const e = () => {
      const t = document.activeElement, s = !!(t != null && t.closest('[data-rp="container"]'));
      y(s);
    };
    return window.addEventListener("focusin", e), window.addEventListener("focusout", e), e(), () => {
      window.removeEventListener("focusin", e), window.removeEventListener("focusout", e);
    };
  }, []), u(() => {
    if (!n)
      return;
    const e = (t) => {
      n.contains(t.target) || D();
    };
    return document.addEventListener("scroll", e), () => {
      document.removeEventListener("scroll", e);
    };
  }, [n]), u(() => {
    if (n)
      return n.addEventListener("wheel", a, { passive: !1 }), n.addEventListener("touchstart", h, { passive: !1 }), n.addEventListener("touchmove", f, { passive: !1 }), n.addEventListener("touchend", v, { passive: !1 }), () => {
        n.removeEventListener("wheel", a), n.removeEventListener("touchstart", h), n.removeEventListener("touchmove", f), n.removeEventListener("touchend", v);
      };
  }, [n, a, h, f, v]);
};
export {
  I as usePinch
};