first commit
This commit is contained in:
28
frontend/node_modules/rc-image/es/hooks/useImageTransform.d.ts
generated
vendored
Normal file
28
frontend/node_modules/rc-image/es/hooks/useImageTransform.d.ts
generated
vendored
Normal file
@@ -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;
|
||||
};
|
||||
115
frontend/node_modules/rc-image/es/hooks/useImageTransform.js
generated
vendored
Normal file
115
frontend/node_modules/rc-image/es/hooks/useImageTransform.js
generated
vendored
Normal file
@@ -0,0 +1,115 @@
|
||||
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
||||
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
||||
import { getClientSize } from "rc-util/es/Dom/css";
|
||||
import isEqual from "rc-util/es/isEqual";
|
||||
import raf from "rc-util/es/raf";
|
||||
import { useRef, useState } from 'react';
|
||||
var initialTransform = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
rotate: 0,
|
||||
scale: 1,
|
||||
flipX: false,
|
||||
flipY: false
|
||||
};
|
||||
export default function useImageTransform(imgRef, minScale, maxScale, onTransform) {
|
||||
var frame = useRef(null);
|
||||
var queue = useRef([]);
|
||||
var _useState = useState(initialTransform),
|
||||
_useState2 = _slicedToArray(_useState, 2),
|
||||
transform = _useState2[0],
|
||||
setTransform = _useState2[1];
|
||||
var resetTransform = function resetTransform(action) {
|
||||
setTransform(initialTransform);
|
||||
if (!isEqual(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 = raf(function () {
|
||||
setTransform(function (preState) {
|
||||
var memoState = preState;
|
||||
queue.current.forEach(function (queueState) {
|
||||
memoState = _objectSpread(_objectSpread({}, memoState), queueState);
|
||||
});
|
||||
frame.current = null;
|
||||
onTransform === null || onTransform === void 0 || onTransform({
|
||||
transform: memoState,
|
||||
action: action
|
||||
});
|
||||
return memoState;
|
||||
});
|
||||
});
|
||||
}
|
||||
queue.current.push(_objectSpread(_objectSpread({}, 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 = 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
|
||||
};
|
||||
}
|
||||
9
frontend/node_modules/rc-image/es/hooks/useMouseEvent.d.ts
generated
vendored
Normal file
9
frontend/node_modules/rc-image/es/hooks/useMouseEvent.d.ts
generated
vendored
Normal file
@@ -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;
|
||||
};
|
||||
117
frontend/node_modules/rc-image/es/hooks/useMouseEvent.js
generated
vendored
Normal file
117
frontend/node_modules/rc-image/es/hooks/useMouseEvent.js
generated
vendored
Normal file
@@ -0,0 +1,117 @@
|
||||
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
||||
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
||||
import addEventListener from "rc-util/es/Dom/addEventListener";
|
||||
import { warning } from "rc-util/es/warning";
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import getFixScaleEleTransPosition from "../getFixScaleEleTransPosition";
|
||||
import { BASE_SCALE_RATIO, WHEEL_MAX_SCALE_RATIO } from "../previewConfig";
|
||||
export default function useMouseEvent(imgRef, movable, visible, scaleStep, transform, updateTransform, dispatchZoomChange) {
|
||||
var rotate = transform.rotate,
|
||||
scale = transform.scale,
|
||||
x = transform.x,
|
||||
y = transform.y;
|
||||
var _useState = useState(false),
|
||||
_useState2 = _slicedToArray(_useState, 2),
|
||||
isMoving = _useState2[0],
|
||||
setMoving = _useState2[1];
|
||||
var startPositionInfo = 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 = getFixScaleEleTransPosition(isRotate ? height : width, isRotate ? width : height, left, top);
|
||||
if (fixState) {
|
||||
updateTransform(_objectSpread({}, 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, WHEEL_MAX_SCALE_RATIO);
|
||||
// Scale the ratio each time
|
||||
var ratio = BASE_SCALE_RATIO + mergedScaleRatio * scaleStep;
|
||||
if (event.deltaY > 0) {
|
||||
ratio = BASE_SCALE_RATIO / ratio;
|
||||
}
|
||||
dispatchZoomChange(ratio, 'wheel', event.clientX, event.clientY);
|
||||
};
|
||||
useEffect(function () {
|
||||
var onTopMouseUpListener;
|
||||
var onTopMouseMoveListener;
|
||||
var onMouseUpListener;
|
||||
var onMouseMoveListener;
|
||||
if (movable) {
|
||||
onMouseUpListener = addEventListener(window, 'mouseup', onMouseUp, false);
|
||||
onMouseMoveListener = addEventListener(window, 'mousemove', onMouseMove, false);
|
||||
try {
|
||||
// Resolve if in iframe lost event
|
||||
/* istanbul ignore next */
|
||||
if (window.top !== window.self) {
|
||||
onTopMouseUpListener = addEventListener(window.top, 'mouseup', onMouseUp, false);
|
||||
onTopMouseMoveListener = addEventListener(window.top, 'mousemove', onMouseMove, false);
|
||||
}
|
||||
} catch (error) {
|
||||
/* istanbul ignore next */
|
||||
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
|
||||
};
|
||||
}
|
||||
7
frontend/node_modules/rc-image/es/hooks/usePreviewItems.d.ts
generated
vendored
Normal file
7
frontend/node_modules/rc-image/es/hooks/usePreviewItems.d.ts
generated
vendored
Normal file
@@ -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];
|
||||
68
frontend/node_modules/rc-image/es/hooks/usePreviewItems.js
generated
vendored
Normal file
68
frontend/node_modules/rc-image/es/hooks/usePreviewItems.js
generated
vendored
Normal file
@@ -0,0 +1,68 @@
|
||||
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
||||
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
||||
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
||||
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
||||
import * as React from 'react';
|
||||
import { COMMON_PROPS } from "../common";
|
||||
/**
|
||||
* Merge props provided `items` or context collected images
|
||||
*/
|
||||
export default function usePreviewItems(items) {
|
||||
// Context collection image data
|
||||
var _React$useState = React.useState({}),
|
||||
_React$useState2 = _slicedToArray(_React$useState, 2),
|
||||
images = _React$useState2[0],
|
||||
setImages = _React$useState2[1];
|
||||
var registerImage = React.useCallback(function (id, data) {
|
||||
setImages(function (imgs) {
|
||||
return _objectSpread(_objectSpread({}, imgs), {}, _defineProperty({}, id, data));
|
||||
});
|
||||
return function () {
|
||||
setImages(function (imgs) {
|
||||
var cloneImgs = _objectSpread({}, 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(_toConsumableArray(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];
|
||||
}
|
||||
2
frontend/node_modules/rc-image/es/hooks/useRegisterImage.d.ts
generated
vendored
Normal file
2
frontend/node_modules/rc-image/es/hooks/useRegisterImage.d.ts
generated
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
import type { ImageElementProps } from '../interface';
|
||||
export default function useRegisterImage(canPreview: boolean, data: ImageElementProps): string;
|
||||
32
frontend/node_modules/rc-image/es/hooks/useRegisterImage.js
generated
vendored
Normal file
32
frontend/node_modules/rc-image/es/hooks/useRegisterImage.js
generated
vendored
Normal file
@@ -0,0 +1,32 @@
|
||||
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
||||
import * as React from 'react';
|
||||
import { PreviewGroupContext } from "../context";
|
||||
var uid = 0;
|
||||
export default function useRegisterImage(canPreview, data) {
|
||||
var _React$useState = React.useState(function () {
|
||||
uid += 1;
|
||||
return String(uid);
|
||||
}),
|
||||
_React$useState2 = _slicedToArray(_React$useState, 1),
|
||||
id = _React$useState2[0];
|
||||
var groupContext = React.useContext(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;
|
||||
}
|
||||
13
frontend/node_modules/rc-image/es/hooks/useStatus.d.ts
generated
vendored
Normal file
13
frontend/node_modules/rc-image/es/hooks/useStatus.d.ts
generated
vendored
Normal file
@@ -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 {};
|
||||
53
frontend/node_modules/rc-image/es/hooks/useStatus.js
generated
vendored
Normal file
53
frontend/node_modules/rc-image/es/hooks/useStatus.js
generated
vendored
Normal file
@@ -0,0 +1,53 @@
|
||||
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { isImageValid } from "../util";
|
||||
export default function useStatus(_ref) {
|
||||
var src = _ref.src,
|
||||
isCustomPlaceholder = _ref.isCustomPlaceholder,
|
||||
fallback = _ref.fallback;
|
||||
var _useState = useState(isCustomPlaceholder ? 'loading' : 'normal'),
|
||||
_useState2 = _slicedToArray(_useState, 2),
|
||||
status = _useState2[0],
|
||||
setStatus = _useState2[1];
|
||||
var isLoaded = useRef(false);
|
||||
var isError = status === 'error';
|
||||
|
||||
// https://github.com/react-component/image/pull/187
|
||||
useEffect(function () {
|
||||
var isCurrentSrc = true;
|
||||
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]);
|
||||
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];
|
||||
}
|
||||
8
frontend/node_modules/rc-image/es/hooks/useTouchEvent.d.ts
generated
vendored
Normal file
8
frontend/node_modules/rc-image/es/hooks/useTouchEvent.d.ts
generated
vendored
Normal file
@@ -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;
|
||||
};
|
||||
169
frontend/node_modules/rc-image/es/hooks/useTouchEvent.js
generated
vendored
Normal file
169
frontend/node_modules/rc-image/es/hooks/useTouchEvent.js
generated
vendored
Normal file
@@ -0,0 +1,169 @@
|
||||
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
||||
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
||||
import addEventListener from "rc-util/es/Dom/addEventListener";
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import getFixScaleEleTransPosition from "../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];
|
||||
}
|
||||
export default function useTouchEvent(imgRef, movable, visible, minScale, transform, updateTransform, dispatchZoomChange) {
|
||||
var rotate = transform.rotate,
|
||||
scale = transform.scale,
|
||||
x = transform.x,
|
||||
y = transform.y;
|
||||
var _useState = useState(false),
|
||||
_useState2 = _slicedToArray(_useState, 2),
|
||||
isTouching = _useState2[0],
|
||||
setIsTouching = _useState2[1];
|
||||
var touchPointInfo = useRef({
|
||||
point1: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
point2: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
eventType: 'none'
|
||||
});
|
||||
var updateTouchPointInfo = function updateTouchPointInfo(values) {
|
||||
touchPointInfo.current = _objectSpread(_objectSpread({}, 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 = _slicedToArray(_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 = getFixScaleEleTransPosition(isRotate ? height : width, isRotate ? width : height, left, top);
|
||||
if (fixState) {
|
||||
updateTransform(_objectSpread({}, fixState), 'dragRebound');
|
||||
}
|
||||
};
|
||||
useEffect(function () {
|
||||
var onTouchMoveListener;
|
||||
if (visible && movable) {
|
||||
onTouchMoveListener = addEventListener(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
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user