tdesign-react/esm/image-viewer/hooks/useScale.js

TDesign Component for React

/**
 * tdesign v1.16.2
 * (c) 2025 tdesign
 * @license MIT
 */

import { _ as _slicedToArray } from '../../_chunks/dep-10d5731f.js';
import { useCallback, useRef, useState, useEffect } from 'react';
import '../../_chunks/dep-74a10cfb.js';

var useScale = function useScale(imageScale, visible) {
  var _imageScale$max = imageScale.max,
    max = _imageScale$max === void 0 ? Infinity : _imageScale$max,
    _imageScale$min = imageScale.min,
    min = _imageScale$min === void 0 ? 0 : _imageScale$min,
    _imageScale$step = imageScale.step,
    step = _imageScale$step === void 0 ? 0.1 : _imageScale$step,
    _imageScale$defaultSc = imageScale.defaultScale,
    defaultScale = _imageScale$defaultSc === void 0 ? 1 : _imageScale$defaultSc;
  var calcDefaultScale = useCallback(function () {
    return Math.max(Math.min(defaultScale, max), min);
  }, [defaultScale, max, min]);
  var distance = useRef(0);
  var _useState = useState(calcDefaultScale()),
    _useState2 = _slicedToArray(_useState, 2),
    scale = _useState2[0],
    setScale = _useState2[1];
  var onZoom = useCallback(function () {
    setScale(function (scale2) {
      var newScale = scale2 + step;
      if (newScale < min) return min;
      if (newScale > max) return max;
      return newScale;
    });
  }, [max, min, step]);
  var onZoomOut = useCallback(function () {
    setScale(function (scale2) {
      var newScale = scale2 - step;
      if (newScale < min) return min;
      if (newScale > max) return max;
      return newScale;
    });
  }, [max, min, step]);
  var onResetScale = useCallback(function () {
    setScale(calcDefaultScale());
  }, [calcDefaultScale]);
  var onWheel = useCallback(function (e) {
    e.preventDefault();
    e.deltaY < 0 ? onZoom() : onZoomOut();
  }, [onZoom, onZoomOut]);
  var onTouchStart = useCallback(function (e) {
    if (e.touches.length !== 2) return;
    e.preventDefault();
    var _Array$from = Array.from(e.touches),
      _Array$from2 = _slicedToArray(_Array$from, 2),
      touch1 = _Array$from2[0],
      touch2 = _Array$from2[1];
    distance.current = Math.hypot(touch2.pageX - touch1.pageX, touch2.pageY - touch1.pageY);
  }, []);
  var onTouchMove = useCallback(function (e) {
    if (e.touches.length !== 2) return;
    e.preventDefault();
    var _Array$from3 = Array.from(e.touches),
      _Array$from4 = _slicedToArray(_Array$from3, 2),
      touch1 = _Array$from4[0],
      touch2 = _Array$from4[1];
    var currentDistance = Math.hypot(touch2.pageX - touch1.pageX, touch2.pageY - touch1.pageY);
    if (currentDistance > distance.current) {
      onZoom();
    } else {
      onZoomOut();
    }
    distance.current = currentDistance;
  }, [onZoom, onZoomOut]);
  var onTouchEnd = useCallback(function () {
    distance.current = 0;
  }, []);
  useEffect(function () {
    if (!visible) return;
    document.addEventListener("wheel", onWheel, {
      passive: false
    });
    document.addEventListener("touchstart", onTouchStart, {
      passive: false
    });
    document.addEventListener("touchmove", onTouchMove, {
      passive: false
    });
    document.addEventListener("touchend", onTouchEnd);
    return function () {
      document.removeEventListener("wheel", onWheel);
      document.removeEventListener("touchstart", onTouchStart);
      document.removeEventListener("touchmove", onTouchMove);
      document.removeEventListener("touchend", onTouchEnd);
    };
  }, [visible, onWheel, onTouchStart, onTouchMove, onTouchEnd]);
  return {
    scale: scale,
    onZoom: onZoom,
    onZoomOut: onZoomOut,
    onResetScale: onResetScale
  };
};

export { useScale as default };
//# sourceMappingURL=useScale.js.map