first commit

frontend/node_modules/rc-image/lib/hooks/useImageTransform.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+export type TransformType = {
+    x: number;
+    y: number;
+    rotate: number;
+    scale: number;
+    flipX: boolean;
+    flipY: boolean;
+};
+export type TransformAction = 'flipY' | 'flipX' | 'rotateLeft' | 'rotateRight' | 'zoomIn' | 'zoomOut' | 'close' | 'prev' | 'next' | 'wheel' | 'doubleClick' | 'move' | 'dragRebound' | 'touchZoom' | 'reset';
+export type UpdateTransformFunc = (newTransform: Partial<TransformType>, action: TransformAction) => void;
+export type DispatchZoomChangeFunc = (ratio: number, action: TransformAction, centerX?: number, centerY?: number, isTouch?: boolean) => void;
+export default function useImageTransform(imgRef: React.MutableRefObject<HTMLImageElement>, minScale: number, maxScale: number, onTransform: (info: {
+    transform: TransformType;
+    action: TransformAction;
+}) => void): {
+    transform: {
+        x: number;
+        y: number;
+        rotate: number;
+        scale: number;
+        flipX: boolean;
+        flipY: boolean;
+    };
+    resetTransform: (action: TransformAction) => void;
+    updateTransform: UpdateTransformFunc;
+    dispatchZoomChange: DispatchZoomChangeFunc;
+};

frontend/node_modules/rc-image/lib/hooks/useImageTransform.js

@@ -0,0 +1,122 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useImageTransform;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _css = require("rc-util/lib/Dom/css");
+var _isEqual = _interopRequireDefault(require("rc-util/lib/isEqual"));
+var _raf = _interopRequireDefault(require("rc-util/lib/raf"));
+var _react = require("react");
+var initialTransform = {
+  x: 0,
+  y: 0,
+  rotate: 0,
+  scale: 1,
+  flipX: false,
+  flipY: false
+};
+function useImageTransform(imgRef, minScale, maxScale, onTransform) {
+  var frame = (0, _react.useRef)(null);
+  var queue = (0, _react.useRef)([]);
+  var _useState = (0, _react.useState)(initialTransform),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    transform = _useState2[0],
+    setTransform = _useState2[1];
+  var resetTransform = function resetTransform(action) {
+    setTransform(initialTransform);
+    if (!(0, _isEqual.default)(initialTransform, transform)) {
+      onTransform === null || onTransform === void 0 || onTransform({
+        transform: initialTransform,
+        action: action
+      });
+    }
+  };
+
+  /** Direct update transform */
+  var updateTransform = function updateTransform(newTransform, action) {
+    if (frame.current === null) {
+      queue.current = [];
+      frame.current = (0, _raf.default)(function () {
+        setTransform(function (preState) {
+          var memoState = preState;
+          queue.current.forEach(function (queueState) {
+            memoState = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, memoState), queueState);
+          });
+          frame.current = null;
+          onTransform === null || onTransform === void 0 || onTransform({
+            transform: memoState,
+            action: action
+          });
+          return memoState;
+        });
+      });
+    }
+    queue.current.push((0, _objectSpread2.default)((0, _objectSpread2.default)({}, transform), newTransform));
+  };
+
+  /** Scale according to the position of centerX and centerY */
+  var dispatchZoomChange = function dispatchZoomChange(ratio, action, centerX, centerY, isTouch) {
+    var _imgRef$current = imgRef.current,
+      width = _imgRef$current.width,
+      height = _imgRef$current.height,
+      offsetWidth = _imgRef$current.offsetWidth,
+      offsetHeight = _imgRef$current.offsetHeight,
+      offsetLeft = _imgRef$current.offsetLeft,
+      offsetTop = _imgRef$current.offsetTop;
+    var newRatio = ratio;
+    var newScale = transform.scale * ratio;
+    if (newScale > maxScale) {
+      newScale = maxScale;
+      newRatio = maxScale / transform.scale;
+    } else if (newScale < minScale) {
+      // For mobile interactions, allow scaling down to the minimum scale.
+      newScale = isTouch ? newScale : minScale;
+      newRatio = newScale / transform.scale;
+    }
+
+    /** Default center point scaling */
+    var mergedCenterX = centerX !== null && centerX !== void 0 ? centerX : innerWidth / 2;
+    var mergedCenterY = centerY !== null && centerY !== void 0 ? centerY : innerHeight / 2;
+    var diffRatio = newRatio - 1;
+    /** Deviation calculated from image size */
+    var diffImgX = diffRatio * width * 0.5;
+    var diffImgY = diffRatio * height * 0.5;
+    /** The difference between the click position and the edge of the document */
+    var diffOffsetLeft = diffRatio * (mergedCenterX - transform.x - offsetLeft);
+    var diffOffsetTop = diffRatio * (mergedCenterY - transform.y - offsetTop);
+    /** Final positioning */
+    var newX = transform.x - (diffOffsetLeft - diffImgX);
+    var newY = transform.y - (diffOffsetTop - diffImgY);
+
+    /**
+     * When zooming the image
+     * When the image size is smaller than the width and height of the window, the position is initialized
+     */
+    if (ratio < 1 && newScale === 1) {
+      var mergedWidth = offsetWidth * newScale;
+      var mergedHeight = offsetHeight * newScale;
+      var _getClientSize = (0, _css.getClientSize)(),
+        clientWidth = _getClientSize.width,
+        clientHeight = _getClientSize.height;
+      if (mergedWidth <= clientWidth && mergedHeight <= clientHeight) {
+        newX = 0;
+        newY = 0;
+      }
+    }
+    updateTransform({
+      x: newX,
+      y: newY,
+      scale: newScale
+    }, action);
+  };
+  return {
+    transform: transform,
+    resetTransform: resetTransform,
+    updateTransform: updateTransform,
+    dispatchZoomChange: dispatchZoomChange
+  };
+}

frontend/node_modules/rc-image/lib/hooks/useMouseEvent.d.ts

@@ -0,0 +1,9 @@
+import type React from 'react';
+import type { DispatchZoomChangeFunc, TransformType, UpdateTransformFunc } from './useImageTransform';
+export default function useMouseEvent(imgRef: React.MutableRefObject<HTMLImageElement>, movable: boolean, visible: boolean, scaleStep: number, transform: TransformType, updateTransform: UpdateTransformFunc, dispatchZoomChange: DispatchZoomChangeFunc): {
+    isMoving: boolean;
+    onMouseDown: React.MouseEventHandler<HTMLDivElement>;
+    onMouseMove: React.MouseEventHandler<HTMLBodyElement>;
+    onMouseUp: React.MouseEventHandler<HTMLBodyElement>;
+    onWheel: (event: React.WheelEvent<HTMLImageElement>) => void;
+};

frontend/node_modules/rc-image/lib/hooks/useMouseEvent.js

@@ -0,0 +1,124 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useMouseEvent;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _addEventListener = _interopRequireDefault(require("rc-util/lib/Dom/addEventListener"));
+var _warning = require("rc-util/lib/warning");
+var _react = require("react");
+var _getFixScaleEleTransPosition = _interopRequireDefault(require("../getFixScaleEleTransPosition"));
+var _previewConfig = require("../previewConfig");
+function useMouseEvent(imgRef, movable, visible, scaleStep, transform, updateTransform, dispatchZoomChange) {
+  var rotate = transform.rotate,
+    scale = transform.scale,
+    x = transform.x,
+    y = transform.y;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isMoving = _useState2[0],
+    setMoving = _useState2[1];
+  var startPositionInfo = (0, _react.useRef)({
+    diffX: 0,
+    diffY: 0,
+    transformX: 0,
+    transformY: 0
+  });
+  var onMouseDown = function onMouseDown(event) {
+    // Only allow main button
+    if (!movable || event.button !== 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+    startPositionInfo.current = {
+      diffX: event.pageX - x,
+      diffY: event.pageY - y,
+      transformX: x,
+      transformY: y
+    };
+    setMoving(true);
+  };
+  var onMouseMove = function onMouseMove(event) {
+    if (visible && isMoving) {
+      updateTransform({
+        x: event.pageX - startPositionInfo.current.diffX,
+        y: event.pageY - startPositionInfo.current.diffY
+      }, 'move');
+    }
+  };
+  var onMouseUp = function onMouseUp() {
+    if (visible && isMoving) {
+      setMoving(false);
+
+      /** No need to restore the position when the picture is not moved, So as not to interfere with the click */
+      var _startPositionInfo$cu = startPositionInfo.current,
+        transformX = _startPositionInfo$cu.transformX,
+        transformY = _startPositionInfo$cu.transformY;
+      var hasChangedPosition = x !== transformX && y !== transformY;
+      if (!hasChangedPosition) return;
+      var width = imgRef.current.offsetWidth * scale;
+      var height = imgRef.current.offsetHeight * scale;
+      // eslint-disable-next-line @typescript-eslint/no-shadow
+      var _imgRef$current$getBo = imgRef.current.getBoundingClientRect(),
+        left = _imgRef$current$getBo.left,
+        top = _imgRef$current$getBo.top;
+      var isRotate = rotate % 180 !== 0;
+      var fixState = (0, _getFixScaleEleTransPosition.default)(isRotate ? height : width, isRotate ? width : height, left, top);
+      if (fixState) {
+        updateTransform((0, _objectSpread2.default)({}, fixState), 'dragRebound');
+      }
+    }
+  };
+  var onWheel = function onWheel(event) {
+    if (!visible || event.deltaY == 0) return;
+    // Scale ratio depends on the deltaY size
+    var scaleRatio = Math.abs(event.deltaY / 100);
+    // Limit the maximum scale ratio
+    var mergedScaleRatio = Math.min(scaleRatio, _previewConfig.WHEEL_MAX_SCALE_RATIO);
+    // Scale the ratio each time
+    var ratio = _previewConfig.BASE_SCALE_RATIO + mergedScaleRatio * scaleStep;
+    if (event.deltaY > 0) {
+      ratio = _previewConfig.BASE_SCALE_RATIO / ratio;
+    }
+    dispatchZoomChange(ratio, 'wheel', event.clientX, event.clientY);
+  };
+  (0, _react.useEffect)(function () {
+    var onTopMouseUpListener;
+    var onTopMouseMoveListener;
+    var onMouseUpListener;
+    var onMouseMoveListener;
+    if (movable) {
+      onMouseUpListener = (0, _addEventListener.default)(window, 'mouseup', onMouseUp, false);
+      onMouseMoveListener = (0, _addEventListener.default)(window, 'mousemove', onMouseMove, false);
+      try {
+        // Resolve if in iframe lost event
+        /* istanbul ignore next */
+        if (window.top !== window.self) {
+          onTopMouseUpListener = (0, _addEventListener.default)(window.top, 'mouseup', onMouseUp, false);
+          onTopMouseMoveListener = (0, _addEventListener.default)(window.top, 'mousemove', onMouseMove, false);
+        }
+      } catch (error) {
+        /* istanbul ignore next */
+        (0, _warning.warning)(false, "[rc-image] ".concat(error));
+      }
+    }
+    return function () {
+      var _onMouseUpListener, _onMouseMoveListener, _onTopMouseUpListener, _onTopMouseMoveListen;
+      (_onMouseUpListener = onMouseUpListener) === null || _onMouseUpListener === void 0 || _onMouseUpListener.remove();
+      (_onMouseMoveListener = onMouseMoveListener) === null || _onMouseMoveListener === void 0 || _onMouseMoveListener.remove();
+      /* istanbul ignore next */
+      (_onTopMouseUpListener = onTopMouseUpListener) === null || _onTopMouseUpListener === void 0 || _onTopMouseUpListener.remove();
+      /* istanbul ignore next */
+      (_onTopMouseMoveListen = onTopMouseMoveListener) === null || _onTopMouseMoveListen === void 0 || _onTopMouseMoveListen.remove();
+    };
+  }, [visible, isMoving, x, y, rotate, movable]);
+  return {
+    isMoving: isMoving,
+    onMouseDown: onMouseDown,
+    onMouseMove: onMouseMove,
+    onMouseUp: onMouseUp,
+    onWheel: onWheel
+  };
+}

frontend/node_modules/rc-image/lib/hooks/usePreviewItems.d.ts

@@ -0,0 +1,7 @@
+import type { GroupConsumerProps } from '../PreviewGroup';
+import type { InternalItem, RegisterImage } from '../interface';
+export type Items = Omit<InternalItem, 'canPreview'>[];
+/**
+ * Merge props provided `items` or context collected images
+ */
+export default function usePreviewItems(items?: GroupConsumerProps['items']): [items: Items, registerImage: RegisterImage, fromItems: boolean];

frontend/node_modules/rc-image/lib/hooks/usePreviewItems.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = usePreviewItems;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var React = _interopRequireWildcard(require("react"));
+var _common = require("../common");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * Merge props provided `items` or context collected images
+ */
+function usePreviewItems(items) {
+  // Context collection image data
+  var _React$useState = React.useState({}),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    images = _React$useState2[0],
+    setImages = _React$useState2[1];
+  var registerImage = React.useCallback(function (id, data) {
+    setImages(function (imgs) {
+      return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, imgs), {}, (0, _defineProperty2.default)({}, id, data));
+    });
+    return function () {
+      setImages(function (imgs) {
+        var cloneImgs = (0, _objectSpread3.default)({}, imgs);
+        delete cloneImgs[id];
+        return cloneImgs;
+      });
+    };
+  }, []);
+
+  // items
+  var mergedItems = React.useMemo(function () {
+    // use `items` first
+    if (items) {
+      return items.map(function (item) {
+        if (typeof item === 'string') {
+          return {
+            data: {
+              src: item
+            }
+          };
+        }
+        var data = {};
+        Object.keys(item).forEach(function (key) {
+          if (['src'].concat((0, _toConsumableArray2.default)(_common.COMMON_PROPS)).includes(key)) {
+            data[key] = item[key];
+          }
+        });
+        return {
+          data: data
+        };
+      });
+    }
+
+    // use registered images secondly
+    return Object.keys(images).reduce(function (total, id) {
+      var _images$id = images[id],
+        canPreview = _images$id.canPreview,
+        data = _images$id.data;
+      if (canPreview) {
+        total.push({
+          data: data,
+          id: id
+        });
+      }
+      return total;
+    }, []);
+  }, [items, images]);
+  return [mergedItems, registerImage, !!items];
+}

frontend/node_modules/rc-image/lib/hooks/useRegisterImage.d.ts

@@ -0,0 +1,2 @@
+import type { ImageElementProps } from '../interface';
+export default function useRegisterImage(canPreview: boolean, data: ImageElementProps): string;

frontend/node_modules/rc-image/lib/hooks/useRegisterImage.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useRegisterImage;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var React = _interopRequireWildcard(require("react"));
+var _context = require("../context");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var uid = 0;
+function useRegisterImage(canPreview, data) {
+  var _React$useState = React.useState(function () {
+      uid += 1;
+      return String(uid);
+    }),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 1),
+    id = _React$useState2[0];
+  var groupContext = React.useContext(_context.PreviewGroupContext);
+  var registerData = {
+    data: data,
+    canPreview: canPreview
+  };
+
+  // Keep order start
+  // Resolve https://github.com/ant-design/ant-design/issues/28881
+  // Only need unRegister when component unMount
+  React.useEffect(function () {
+    if (groupContext) {
+      return groupContext.register(id, registerData);
+    }
+  }, []);
+  React.useEffect(function () {
+    if (groupContext) {
+      groupContext.register(id, registerData);
+    }
+  }, [canPreview, data]);
+  return id;
+}

frontend/node_modules/rc-image/lib/hooks/useStatus.d.ts

@@ -0,0 +1,13 @@
+type ImageStatus = 'normal' | 'error' | 'loading';
+export default function useStatus({ src, isCustomPlaceholder, fallback, }: {
+    src: string;
+    isCustomPlaceholder?: boolean;
+    fallback?: string;
+}): readonly [(img?: HTMLImageElement) => void, {
+    src: string;
+    onLoad?: undefined;
+} | {
+    onLoad: () => void;
+    src: string;
+}, ImageStatus];
+export {};

frontend/node_modules/rc-image/lib/hooks/useStatus.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useStatus;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _util = require("../util");
+function useStatus(_ref) {
+  var src = _ref.src,
+    isCustomPlaceholder = _ref.isCustomPlaceholder,
+    fallback = _ref.fallback;
+  var _useState = (0, _react.useState)(isCustomPlaceholder ? 'loading' : 'normal'),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    status = _useState2[0],
+    setStatus = _useState2[1];
+  var isLoaded = (0, _react.useRef)(false);
+  var isError = status === 'error';
+
+  // https://github.com/react-component/image/pull/187
+  (0, _react.useEffect)(function () {
+    var isCurrentSrc = true;
+    (0, _util.isImageValid)(src).then(function (isValid) {
+      // https://github.com/ant-design/ant-design/issues/44948
+      // If src changes, the previous setStatus should not be triggered
+      if (!isValid && isCurrentSrc) {
+        setStatus('error');
+      }
+    });
+    return function () {
+      isCurrentSrc = false;
+    };
+  }, [src]);
+  (0, _react.useEffect)(function () {
+    if (isCustomPlaceholder && !isLoaded.current) {
+      setStatus('loading');
+    } else if (isError) {
+      setStatus('normal');
+    }
+  }, [src]);
+  var onLoad = function onLoad() {
+    setStatus('normal');
+  };
+  var getImgRef = function getImgRef(img) {
+    isLoaded.current = false;
+    if (status === 'loading' && img !== null && img !== void 0 && img.complete && (img.naturalWidth || img.naturalHeight)) {
+      isLoaded.current = true;
+      onLoad();
+    }
+  };
+  var srcAndOnload = isError && fallback ? {
+    src: fallback
+  } : {
+    onLoad: onLoad,
+    src: src
+  };
+  return [getImgRef, srcAndOnload, status];
+}

frontend/node_modules/rc-image/lib/hooks/useTouchEvent.d.ts

@@ -0,0 +1,8 @@
+import type React from 'react';
+import type { DispatchZoomChangeFunc, TransformType, UpdateTransformFunc } from './useImageTransform';
+export default function useTouchEvent(imgRef: React.MutableRefObject<HTMLImageElement>, movable: boolean, visible: boolean, minScale: number, transform: TransformType, updateTransform: UpdateTransformFunc, dispatchZoomChange: DispatchZoomChangeFunc): {
+    isTouching: boolean;
+    onTouchStart: (event: React.TouchEvent<HTMLImageElement>) => void;
+    onTouchMove: (event: React.TouchEvent<HTMLImageElement>) => void;
+    onTouchEnd: () => void;
+};

frontend/node_modules/rc-image/lib/hooks/useTouchEvent.js

@@ -0,0 +1,176 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useTouchEvent;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _addEventListener = _interopRequireDefault(require("rc-util/lib/Dom/addEventListener"));
+var _react = require("react");
+var _getFixScaleEleTransPosition = _interopRequireDefault(require("../getFixScaleEleTransPosition"));
+function getDistance(a, b) {
+  var x = a.x - b.x;
+  var y = a.y - b.y;
+  return Math.hypot(x, y);
+}
+function getCenter(oldPoint1, oldPoint2, newPoint1, newPoint2) {
+  // Calculate the distance each point has moved
+  var distance1 = getDistance(oldPoint1, newPoint1);
+  var distance2 = getDistance(oldPoint2, newPoint2);
+
+  // If both distances are 0, return the original points
+  if (distance1 === 0 && distance2 === 0) {
+    return [oldPoint1.x, oldPoint1.y];
+  }
+
+  // Calculate the ratio of the distances
+  var ratio = distance1 / (distance1 + distance2);
+
+  // Calculate the new center point based on the ratio
+  var x = oldPoint1.x + ratio * (oldPoint2.x - oldPoint1.x);
+  var y = oldPoint1.y + ratio * (oldPoint2.y - oldPoint1.y);
+  return [x, y];
+}
+function useTouchEvent(imgRef, movable, visible, minScale, transform, updateTransform, dispatchZoomChange) {
+  var rotate = transform.rotate,
+    scale = transform.scale,
+    x = transform.x,
+    y = transform.y;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isTouching = _useState2[0],
+    setIsTouching = _useState2[1];
+  var touchPointInfo = (0, _react.useRef)({
+    point1: {
+      x: 0,
+      y: 0
+    },
+    point2: {
+      x: 0,
+      y: 0
+    },
+    eventType: 'none'
+  });
+  var updateTouchPointInfo = function updateTouchPointInfo(values) {
+    touchPointInfo.current = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, touchPointInfo.current), values);
+  };
+  var onTouchStart = function onTouchStart(event) {
+    if (!movable) return;
+    event.stopPropagation();
+    setIsTouching(true);
+    var _event$touches = event.touches,
+      touches = _event$touches === void 0 ? [] : _event$touches;
+    if (touches.length > 1) {
+      // touch zoom
+      updateTouchPointInfo({
+        point1: {
+          x: touches[0].clientX,
+          y: touches[0].clientY
+        },
+        point2: {
+          x: touches[1].clientX,
+          y: touches[1].clientY
+        },
+        eventType: 'touchZoom'
+      });
+    } else {
+      // touch move
+      updateTouchPointInfo({
+        point1: {
+          x: touches[0].clientX - x,
+          y: touches[0].clientY - y
+        },
+        eventType: 'move'
+      });
+    }
+  };
+  var onTouchMove = function onTouchMove(event) {
+    var _event$touches2 = event.touches,
+      touches = _event$touches2 === void 0 ? [] : _event$touches2;
+    var _touchPointInfo$curre = touchPointInfo.current,
+      point1 = _touchPointInfo$curre.point1,
+      point2 = _touchPointInfo$curre.point2,
+      eventType = _touchPointInfo$curre.eventType;
+    if (touches.length > 1 && eventType === 'touchZoom') {
+      // touch zoom
+      var newPoint1 = {
+        x: touches[0].clientX,
+        y: touches[0].clientY
+      };
+      var newPoint2 = {
+        x: touches[1].clientX,
+        y: touches[1].clientY
+      };
+      var _getCenter = getCenter(point1, point2, newPoint1, newPoint2),
+        _getCenter2 = (0, _slicedToArray2.default)(_getCenter, 2),
+        centerX = _getCenter2[0],
+        centerY = _getCenter2[1];
+      var ratio = getDistance(newPoint1, newPoint2) / getDistance(point1, point2);
+      dispatchZoomChange(ratio, 'touchZoom', centerX, centerY, true);
+      updateTouchPointInfo({
+        point1: newPoint1,
+        point2: newPoint2,
+        eventType: 'touchZoom'
+      });
+    } else if (eventType === 'move') {
+      // touch move
+      updateTransform({
+        x: touches[0].clientX - point1.x,
+        y: touches[0].clientY - point1.y
+      }, 'move');
+      updateTouchPointInfo({
+        eventType: 'move'
+      });
+    }
+  };
+  var onTouchEnd = function onTouchEnd() {
+    if (!visible) return;
+    if (isTouching) {
+      setIsTouching(false);
+    }
+    updateTouchPointInfo({
+      eventType: 'none'
+    });
+    if (minScale > scale) {
+      /** When the scaling ratio is less than the minimum scaling ratio, reset the scaling ratio */
+      return updateTransform({
+        x: 0,
+        y: 0,
+        scale: minScale
+      }, 'touchZoom');
+    }
+    var width = imgRef.current.offsetWidth * scale;
+    var height = imgRef.current.offsetHeight * scale;
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    var _imgRef$current$getBo = imgRef.current.getBoundingClientRect(),
+      left = _imgRef$current$getBo.left,
+      top = _imgRef$current$getBo.top;
+    var isRotate = rotate % 180 !== 0;
+    var fixState = (0, _getFixScaleEleTransPosition.default)(isRotate ? height : width, isRotate ? width : height, left, top);
+    if (fixState) {
+      updateTransform((0, _objectSpread2.default)({}, fixState), 'dragRebound');
+    }
+  };
+  (0, _react.useEffect)(function () {
+    var onTouchMoveListener;
+    if (visible && movable) {
+      onTouchMoveListener = (0, _addEventListener.default)(window, 'touchmove', function (e) {
+        return e.preventDefault();
+      }, {
+        passive: false
+      });
+    }
+    return function () {
+      var _onTouchMoveListener;
+      (_onTouchMoveListener = onTouchMoveListener) === null || _onTouchMoveListener === void 0 || _onTouchMoveListener.remove();
+    };
+  }, [visible, movable]);
+  return {
+    isTouching: isTouching,
+    onTouchStart: onTouchStart,
+    onTouchMove: onTouchMove,
+    onTouchEnd: onTouchEnd
+  };
+}