@canlooks/can-ui 0.0.121 → 0.0.123

package/dist/cjs/components/gallery/gallery.d.ts

@@ -15,6 +15,8 @@ export interface ImagePreviewProps extends ModalProps {
     showClose?: boolean;
     /** 自定义渲染控制按钮 */
     renderControl?: ReactNode;
+    /** 拖拽至最边缘时，是否允许弹性溢出，默认为`true` */
+    allowEdgeBounce?: boolean;
     /** 元素弹性移动距离，默认为24 */
     bounceElementTranslate?: number;
     /** 手指弹性拖拽距离，默认为240 */
@@ -22,4 +24,4 @@ export interface ImagePreviewProps extends ModalProps {
     /** 滑动生效的速度，默认为450 (px/s) */
     effectiveSpeed?: number;
 }
-export declare const Gallery: import("react").MemoExoticComponent<({ src, defaultIndex, index, onIndexChange, defaultOpen, open, onOpenChange, showRotation, showZoom, showClose, renderControl, bounceElementTranslate, bounceDragDistance, effectiveSpeed, ...props }: ImagePreviewProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Gallery: import("react").MemoExoticComponent<({ src, defaultIndex, index, onIndexChange, defaultOpen, open, onOpenChange, showRotation, showZoom, showClose, renderControl, allowEdgeBounce, bounceElementTranslate, bounceDragDistance, effectiveSpeed, ...props }: ImagePreviewProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/gallery/gallery.js

@@ -24,94 +24,152 @@ const commonControlProps = {
     size: 'large',
     color: 'text'
 };
-const bounceBezier = (0, utils_1.cubicBezier)(0, 0, 0, 1);
-exports.Gallery = (0, react_1.memo)(({ src, defaultIndex = 0, index, onIndexChange, defaultOpen = false, open, onOpenChange, showRotation = true, showZoom = true, showClose = true, renderControl, bounceElementTranslate = 24, bounceDragDistance = 240, effectiveSpeed = 450, ...props }) => {
+const DOUBLE_CLICK_DELAY = 300;
+exports.Gallery = (0, react_1.memo)(({ src, defaultIndex = 0, index, onIndexChange, defaultOpen = false, open, onOpenChange, showRotation = true, showZoom = true, showClose = true, renderControl, allowEdgeBounce = true, bounceElementTranslate = 24, bounceDragDistance = 240, effectiveSpeed = 450, ...props }) => {
     const srcArr = (0, utils_1.useSync)((0, utils_1.toArray)(src || []));
     const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
     const close = () => {
         setInnerOpen(false);
     };
     const [innerIndex, setInnerIndex] = (0, utils_1.useControlled)(defaultIndex, index, onIndexChange);
+    const maskRef = (0, react_1.useRef)(null);
     const wrapperRef = (0, react_1.useRef)(null);
     const imageItemRefs = (0, react_1.useRef)([]);
     imageItemRefs.current = [];
+    const imgRefs = (0, react_1.useRef)([]);
+    imgRefs.current = [];
     /**
      * --------------------------------------------------------------
      * 左右滚动翻页
      */
+    const dragDirection = (0, react_1.useRef)(void 0);
     const draggableHandles = (0, utils_1.useDraggable)({
         onDragStart() {
-            wrapperRef.current.dataset.transition = 'drag';
+            maskRef.current.style.transition = 'none';
             return {
                 isFit: imageItemRefs.current[innerIndex.current].isFit(),
                 startLeft: -innerIndex.current * wrapperRef.current.offsetWidth
             };
         },
-        onDrag({ diff: [dx], data: { isFit: { left, right }, startLeft } }) {
-            if ((!left && dx > 0) || (!right && dx < 0)) {
+        onDrag({ diff: [dx, dy], data: { isFit: { left, right, top, bottom }, startLeft } }) {
+            if ((!left && dx > 0)
+                || (!right && dx < 0)
+                || (!top && dy > 0)
+                || (!bottom && dy < 0)) {
+                // 图片超出边缘时，无需触发Gallery的滑动翻页，此时拖拽效果由Pinchable处理
                 return;
             }
-            const min = -wrapperRef.current.offsetWidth * (srcArr.current.length - 1);
-            const max = 0;
-            let newLeft = (0, utils_1.range)(startLeft + dx, min - bounceDragDistance, max + bounceDragDistance);
-            if (newLeft < min) {
-                newLeft = min - bounceBezier(-(newLeft - min) / bounceDragDistance) * bounceElementTranslate;
+            if (!dragDirection.current) {
+                if (dx <= -5 || 5 <= dx) {
+                    dragDirection.current = 'horizontal';
+                    resetVerticalDrag();
+                }
+                if (dy <= -5 || 5 <= dy) {
+                    dragDirection.current = 'vertical';
+                }
             }
-            else if (newLeft > max) {
-                newLeft = max + bounceBezier((newLeft - max) / bounceDragDistance) * bounceElementTranslate;
+            if (dragDirection.current !== 'vertical') {
+                // 处理横向拖动
+                const min = -wrapperRef.current.offsetWidth * (srcArr.current.length - 1);
+                const max = 0;
+                const newLeft = (0, utils_1.edgeBounce)(startLeft + dx, { min, max, allowEdgeBounce, bounceElementTranslate, bounceDragDistance });
+                wrapperRef.current.style.left = newLeft + 'px';
             }
-            wrapperRef.current.style.left = newLeft + 'px';
-        },
-        onDragEnd({ diff: [dx], speed: [speedX], data: { isFit: { left, right } } }) {
-            wrapperRef.current.dataset.transition = '';
-            if (!dx) {
-                return;
+            if (dragDirection.current !== 'horizontal') {
+                // 处理纵向拖动
+                const rate = 1 - Math.abs(dy) / 2 / wrapperRef.current.offsetHeight;
+                imageItemRefs.current[innerIndex.current].style.transform = `translateY(${dy}px) scale(${rate})`;
+                maskRef.current.style.opacity = rate.toString();
             }
-            if ((!left && dx > 0) || (!right && dx < 0)) {
+        },
+        onDragEnd({ diff: [dx, dy], speed: [speedX, speedY], data: { isFit: { left, right, top, bottom } } }) {
+            if (!dx && !dy) {
                 return;
             }
-            allowSlideTransition();
-            const reset = () => {
-                wrapperRef.current.style.left = -innerIndex.current * wrapperRef.current.offsetWidth + 'px';
-            };
-            const goPrev = () => {
-                innerIndex.current === 0
-                    ? reset()
-                    : goPrevLoop();
-            };
-            const goNext = () => {
-                innerIndex.current === srcArr.current.length - 1
-                    ? reset()
-                    : goNextLoop();
-            };
-            if (effectiveSpeed && speedX * 1000 >= effectiveSpeed) {
-                dx > 0 ? goPrev() : goNext();
+            resetVerticalDrag(true);
+            if ((!left && dx > 0)
+                || (!right && dx < 0)
+                || (!top && dy > 0)
+                || (!bottom && dy < 0)) {
+                // 图片超出边缘时，无需触发Gallery的滑动翻页，此时拖拽效果由Pinchable处理
                 return;
             }
-            const halfWidth = wrapperRef.current.offsetWidth / 2;
-            if (dx > halfWidth) {
-                goPrev();
-            }
-            else if (dx < -halfWidth) {
-                goNext();
+            if (dragDirection.current === 'vertical') {
+                if ((effectiveSpeed && speedY * 1000 >= effectiveSpeed)
+                    || Math.abs(dy) > wrapperRef.current.offsetHeight / 2) {
+                    close();
+                }
             }
             else {
-                reset();
+                const goPrev = () => {
+                    innerIndex.current === 0
+                        ? resetHorizontalDrag()
+                        : goPrevLoop();
+                };
+                const goNext = () => {
+                    innerIndex.current === srcArr.current.length - 1
+                        ? resetHorizontalDrag()
+                        : goNextLoop();
+                };
+                // 满足速度要求
+                if (effectiveSpeed && speedX * 1000 >= effectiveSpeed) {
+                    dx > 0 ? goPrev() : goNext();
+                    return;
+                }
+                // 拖拽距离达到一半
+                const halfWidth = wrapperRef.current.offsetWidth / 2;
+                if (dx >= halfWidth) {
+                    goPrev();
+                }
+                else if (dx <= -halfWidth) {
+                    goNext();
+                }
+                else {
+                    resetHorizontalDrag();
+                }
             }
+            dragDirection.current = void 0;
         },
         onClick: () => {
-            doubleClicked.current = false;
             setTimeout(() => {
                 !doubleClicked.current && close();
-            }, 250);
+            }, DOUBLE_CLICK_DELAY);
         }
     });
+    const resetHorizontalDrag = () => {
+        allowSlideTransition('bounce');
+        wrapperRef.current.style.left = -innerIndex.current * wrapperRef.current.offsetWidth + 'px';
+    };
+    const resetVerticalDrag = (transition = false) => {
+        const imageItem = imageItemRefs.current[innerIndex.current];
+        const mask = maskRef.current;
+        if (transition) {
+            imageItem.dataset.transition = 'true';
+            // mask的css定义了transition，只需去掉style.transition即可实现过渡
+            mask.style.transition = '';
+        }
+        imageItem.style.transform = '';
+        mask.style.opacity = '';
+    };
     const doubleClicked = (0, react_1.useRef)(false);
     const doubleClickHandler = () => {
         doubleClicked.current = true;
+        setTimeout(() => doubleClicked.current = false, DOUBLE_CLICK_DELAY);
+    };
+    const allowSlideTransition = (transitionType = 'true') => {
+        if (wrapperRef.current) {
+            wrapperRef.current.dataset.transition = transitionType;
+        }
     };
-    const allowSlideTransition = () => {
-        wrapperRef.current && (wrapperRef.current.dataset.transition = 'set');
+    const clearTransition = () => {
+        if (wrapperRef.current) {
+            wrapperRef.current.dataset.transition = '';
+        }
+        const imageItem = imageItemRefs.current[innerIndex.current];
+        if (imageItem) {
+            imageItem.dataset.transition = '';
+        }
+        maskRef.current.style.transition = '';
     };
     const goPrevLoop = () => {
         allowSlideTransition();
@@ -153,13 +211,18 @@ exports.Gallery = (0, react_1.memo)(({ src, defaultIndex = 0, index, onIndexChan
     };
     return ((0, jsx_runtime_1.jsx)(modal_1.Modal, { ...props, css: gallery_style_1.style, className: (0, utils_1.clsx)(gallery_style_1.classes.root, props.className), open: innerOpen.current, onClosed: resetAll, maskProps: {
             ...props.maskProps,
+            ref: (0, utils_1.cloneRef)(maskRef, props.maskProps?.ref),
             children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: gallery_style_1.classes.control, children: [renderControl, showRotation &&
                                 (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u65CB\u8F6C-90\u00B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: rotateLeft, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faArrowRotateLeft_1.faArrowRotateLeft }) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u65CB\u8F6C90\u00B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: rotateRight, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faArrowRotateRight_1.faArrowRotateRight }) }) })] }), showZoom &&
                                 (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u7F29\u5C0F", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: zoomOut, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faMagnifyingGlassMinus_1.faMagnifyingGlassMinus }) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u653E\u5927", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: zoomIn, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faMagnifyingGlassPlus_1.faMagnifyingGlassPlus }) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u9002\u5E94\u5C4F\u5E55", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: reset, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faExpand_1.faExpand }) }) })] }), showClose &&
                                 (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: close, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faXmark_1.faXmark }) })] }), srcArr.current.length > 1 &&
                         (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: gallery_style_1.classes.swap, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: goPrevLoop, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faAngleLeft_1.faAngleLeft }) }), (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: goNextLoop, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faAngleRight_1.faAngleRight }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: gallery_style_1.classes.counter, children: [innerIndex.current + 1, " / ", srcArr.current.length] })] })] }))
         }, children: srcArr.current.length > 0 &&
-            (0, jsx_runtime_1.jsx)("div", { className: gallery_style_1.classes.galleryContainer, ...draggableHandles, onDoubleClick: doubleClickHandler, children: (0, jsx_runtime_1.jsx)("div", { ref: wrapperRef, className: gallery_style_1.classes.galleryWrapper, style: { left: -innerIndex.current * 100 + '%' }, onTransitionEnd: e => e.currentTarget.dataset.transition = '', children: srcArr.current.map((src, i) => (0, jsx_runtime_1.jsx)(imageItem_1.ImageItem, { ref: r => {
+            (0, jsx_runtime_1.jsx)("div", { className: gallery_style_1.classes.galleryContainer, ...draggableHandles, onDoubleClick: doubleClickHandler, children: (0, jsx_runtime_1.jsx)("div", { ref: wrapperRef, className: gallery_style_1.classes.galleryWrapper, style: { left: -innerIndex.current * 100 + '%' }, onTransitionEnd: clearTransition, children: srcArr.current.map((src, i) => (0, jsx_runtime_1.jsx)(imageItem_1.ImageItem, { ref: r => {
                             r && imageItemRefs.current.push(r);
+                        }, imgProps: {
+                            ref: r => {
+                                r && imgRefs.current.push(r);
+                            }
                         }, style: { left: i * 100 + '%' }, src: src }, i)) }) }) }));
 });

package/dist/cjs/components/gallery/gallery.style.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-exports.classes = (0, utils_1.defineInnerClasses)('image-preview', [
+exports.classes = (0, utils_1.defineInnerClasses)('gallery', [
     'button',
     'control',
     'swap',
@@ -82,14 +82,14 @@ exports.style = (0, utils_1.defineCss)(({ spacing, easing, breakpoints }) => (0,
                 &, .${exports.classes.imageItem} {
                     position: absolute;
                     top: 0;
-                }
 
-                &[data-transition=set] {
-                    transition: left .5s ${easing.bounce} 0s;
-                }
+                    &[data-transition=true] {
+                        transition: all .3s ${easing.easeOut};
+                    }
 
-                &[data-transition=drag] {
-                    transition: left .1s linear;
+                    &[data-transition=bounce] {
+                        transition: all .25s ${easing.bounce};
+                    }
                 }
 
                 .${exports.classes.imageItem} {
@@ -108,10 +108,6 @@ exports.style = (0, utils_1.defineCss)(({ spacing, easing, breakpoints }) => (0,
             }
 
             .${exports.classes.galleryContainer} .${exports.classes.galleryWrapper} {
-                &[data-transition=true] {
-                    transition: left .4s ${easing.ease};
-                }
-
                 .${exports.classes.imageItem} {
                     padding: 0;
                 }

package/dist/cjs/components/gallery/imageItem.d.ts

@@ -1,7 +1,9 @@
-import { Ref } from 'react';
+import { JSX, Ref } from 'react';
 import { PinchableProps, PinchableRef } from '../pinchable';
 export interface ImageItemRef extends PinchableRef {
     isFit(): {
+        top: boolean;
+        bottom: boolean;
         left: boolean;
         right: boolean;
     };
@@ -9,6 +11,7 @@ export interface ImageItemRef extends PinchableRef {
 interface ImageItemProps extends PinchableProps {
     ref?: Ref<ImageItemRef>;
     src?: string;
+    imgProps?: JSX.IntrinsicElements['img'];
 }
-export declare function ImageItem({ ref, src, ...props }: ImageItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function ImageItem({ ref, src, imgProps, ...props }: ImageItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/components/gallery/imageItem.js

@@ -6,13 +6,15 @@ const gallery_style_1 = require("./gallery.style");
 const react_1 = require("react");
 const utils_1 = require("../../utils");
 const pinchable_1 = require("../pinchable");
-function ImageItem({ ref, src, ...props }) {
+function ImageItem({ ref, src, imgProps, ...props }) {
     (0, react_1.useImperativeHandle)(ref, () => {
         if (pinchableRef.current) {
             pinchableRef.current.isFit = () => {
-                const { x: pinchableX, width: pinchableWidth } = pinchableRef.current.getBoundingClientRect();
-                const { x: imgX, width: imgWidth } = imgRef.current.getBoundingClientRect();
+                const { x: pinchableX, y: pinchableY, width: pinchableWidth, height: pinchableHeight } = pinchableRef.current.getBoundingClientRect();
+                const { x: imgX, y: imgY, width: imgWidth, height: imgHeight } = imgRef.current.getBoundingClientRect();
                 return {
+                    top: imgY >= pinchableY,
+                    bottom: imgY + imgHeight <= pinchableY + pinchableHeight,
                     left: imgX >= pinchableX,
                     right: imgX + imgWidth <= pinchableX + pinchableWidth
                 };
@@ -47,5 +49,5 @@ function ImageItem({ ref, src, ...props }) {
             resizeObserver.disconnect();
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)(pinchable_1.Pinchable, { ...props, ref: pinchableRef, className: (0, utils_1.clsx)(gallery_style_1.classes.imageItem, props.className), children: (0, jsx_runtime_1.jsx)("img", { ref: imgRef, className: gallery_style_1.classes.image, src: src, draggable: false, alt: "" }) }));
+    return ((0, jsx_runtime_1.jsx)(pinchable_1.Pinchable, { ...props, ref: pinchableRef, className: (0, utils_1.clsx)(gallery_style_1.classes.imageItem, props.className), allowEdgeBounce: false, children: (0, jsx_runtime_1.jsx)("img", { draggable: false, alt: "", src: src, ...imgProps, ref: (0, utils_1.cloneRef)(imgRef, imgProps?.ref), className: (0, utils_1.clsx)(gallery_style_1.classes.image, imgProps?.className) }) }));
 }

package/dist/cjs/components/pinchable/pinchable.d.ts

@@ -22,11 +22,17 @@ type PinchableOwnProps = {
     translate?: [number, number];
     onTranslateChange?(translate: [number, number]): void;
     /** 平移限制，`translate`非受控模式下有效 */
-    translateLimit?: (targetX: number, targetY: number, scale: number) => [number, number];
+    translateLimit?: (targetX: number, targetY: number, scale: number, rotateDeg: number) => [number, number];
     defaultRotate?: number;
     rotate?: number;
     onRotateChange?(rotate: number): void;
     children?: ReactElement;
+    /** 拖拽至最边缘时，是否允许弹性溢出，默认为`true` */
+    allowEdgeBounce?: boolean;
+    /** 元素弹性移动距离，默认为24 */
+    bounceElementTranslate?: number;
+    /** 手指弹性拖拽距离，默认为240 */
+    bounceDragDistance?: number;
 };
 export type PinchableProps<C extends ElementType = 'div'> = OverridableProps<PinchableOwnProps, C>;
 export declare const Pinchable: <C extends ElementType = "div">(props: PinchableProps<C>) => ReactElement;

package/dist/cjs/components/pinchable/pinchable.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("../../utils");
 const pinchable_style_1 = require("./pinchable.style");
-exports.Pinchable = (({ component: Component = 'div', ref, gestureOptions, defaultScale = 1, scale, onScaleChange, scaleLimit = [1, 6], defaultTranslate = [0, 0], translate, onTranslateChange, translateLimit, defaultRotate = 0, rotate, onRotateChange, children, ...props }) => {
+exports.Pinchable = (({ component: Component = 'div', ref, gestureOptions, defaultScale = 1, scale, onScaleChange, scaleLimit = [1, 6], defaultTranslate = [0, 0], translate, onTranslateChange, translateLimit, defaultRotate = 0, rotate, onRotateChange, children, allowEdgeBounce = true, bounceElementTranslate = 24, bounceDragDistance = 240, ...props }) => {
     (0, react_1.useImperativeHandle)(ref, () => {
         if (wrapperRef.current) {
             wrapperRef.current.zoomIn = () => {
@@ -41,6 +41,12 @@ exports.Pinchable = (({ component: Component = 'div', ref, gestureOptions, defau
         onDrag(info, e) {
             gestureOptions?.onDrag?.(info, e);
             const { diff: [dx, dy], data: [startX, startY] } = info;
+            setInnerTranslate(translateLimitFn(startX + dx, startY + dy, void 0, void 0, true));
+        },
+        onDragEnd(info) {
+            gestureOptions?.onDragEnd?.(info);
+            const { diff: [dx, dy], data: [startX, startY] } = info;
+            allowTransition('bounce');
             setInnerTranslate(translateLimitFn(startX + dx, startY + dy));
         },
         onPinchStart(info) {
@@ -78,9 +84,9 @@ exports.Pinchable = (({ component: Component = 'div', ref, gestureOptions, defau
     if (!children) {
         return;
     }
-    const translateLimitFn = (x, y, scale = innerScale.current, deg = innerRotate.current) => {
+    const translateLimitFn = (x, y, scale = innerScale.current, deg = innerRotate.current, bounce = false) => {
         if (translateLimit) {
-            return translateLimit(x, y, scale);
+            return translateLimit(x, y, scale, deg);
         }
         const { clientWidth: wrapperWidth, clientHeight: wrapperHeight } = wrapperRef.current;
         const { offsetWidth, offsetHeight } = contentRef.current;
@@ -89,14 +95,20 @@ exports.Pinchable = (({ component: Component = 'div', ref, gestureOptions, defau
         const contentHeight = (isRotated ? offsetWidth : offsetHeight) * scale;
         const limitX = contentWidth > wrapperWidth ? (contentWidth - wrapperWidth) / 2 : 0;
         const limitY = contentHeight > wrapperHeight ? (contentHeight - wrapperHeight) / 2 : 0;
+        if (!bounce) {
+            return [
+                (0, utils_1.range)(x, -limitX, limitX),
+                (0, utils_1.range)(y, -limitY, limitY)
+            ];
+        }
         return [
-            (0, utils_1.range)(x, -limitX, limitX),
-            (0, utils_1.range)(y, -limitY, limitY)
+            (0, utils_1.edgeBounce)(x, { min: -limitX, max: limitX, allowEdgeBounce, bounceElementTranslate, bounceDragDistance }),
+            (0, utils_1.edgeBounce)(y, { min: -limitY, max: limitY, allowEdgeBounce, bounceElementTranslate, bounceDragDistance })
         ];
     };
     const childrenProps = children.props;
-    const allowTransition = () => {
-        contentRef.current && (contentRef.current.dataset.transition = 'true');
+    const allowTransition = (transitionType = 'true') => {
+        contentRef.current && (contentRef.current.dataset.transition = transitionType);
     };
     const zoomFn = (targetScale, originX, originY) => {
         allowTransition();
@@ -150,7 +162,7 @@ exports.Pinchable = (({ component: Component = 'div', ref, gestureOptions, defau
             : zoomFn(innerScale.current * 1.2, e.clientX, e.clientY);
     };
     const onTransitionEnd = (e) => {
-        e.currentTarget.dataset.transition = 'false';
+        e.currentTarget.dataset.transition = '';
         setInnerRotate(innerRotate.current % 360);
     };
     return ((0, jsx_runtime_1.jsx)(Component, { ...props, ref: wrapperRef, css: pinchable_style_1.style, className: (0, utils_1.clsx)(pinchable_style_1.classes.root, props.className), ...pinchableHandles, children: (0, react_1.cloneElement)(children, {

package/dist/cjs/components/pinchable/pinchable.style.js

@@ -16,8 +16,14 @@ exports.style = (0, utils_1.defineCss)(({ easing }) => (0, react_1.css) `
             touch-action: none;
         }
 
-        .${exports.classes.content}[data-transition=true] {
-            transition: all .25s ${easing.easeOut};
+        .${exports.classes.content} {
+            &[data-transition=true] {
+                transition: all .25s ${easing.easeOut};
+            }
+
+            &[data-transition=bounce] {
+                transition: all .25s ${easing.bounce};
+            }
         }
     }
 `);

package/dist/cjs/utils/bezier.d.ts

@@ -1,13 +1,14 @@
+export type BezierFunc = (x: number) => number;
 /**
  * 创建一个Bezier曲线函数，默认从(0,0)到(1,1)
  * @param p1x
  * @param p1y
  * @param p2x
  * @param p2y
- * @returns {(x: number) => number} 返回一个函数，接收x返回y
+ * @returns {BezierFunc} 返回一个函数，接收x返回y
  */
-export declare function cubicBezier(p1x: number, p1y: number, p2x: number, p2y: number): (x: number) => number;
+export declare function cubicBezier(p1x: number, p1y: number, p2x: number, p2y: number): BezierFunc;
 export declare namespace cubicBezier {
-    var preset: (preset: Preset) => (x: number) => number;
+    var preset: (preset: Preset) => BezierFunc;
 }
 export type Preset = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';

package/dist/cjs/utils/bezier.js

@@ -7,7 +7,7 @@ exports.cubicBezier = cubicBezier;
  * @param p1y
  * @param p2x
  * @param p2y
- * @returns {(x: number) => number} 返回一个函数，接收x返回y
+ * @returns {BezierFunc} 返回一个函数，接收x返回y
  */
 function cubicBezier(p1x, p1y, p2x, p2y) {
     const ZERO_LIMIT = 1e-6;

package/dist/cjs/utils/dnd.d.ts

@@ -1,6 +1,7 @@
 import { DragEndEvent } from '@dnd-kit/core';
 import { Id, Obj } from '../types';
 import { NodeType, SortInfo } from '../components/tree';
+import { BezierFunc } from './bezier';
 /**
  * 默认提供给@dnd-kit的sensors属性
  */
@@ -19,3 +20,11 @@ export declare function onDndDragEnd<S extends Obj>(e: DragEndEvent, prevState:
  * @param primaryKey 索引用的主键，默认为`id`
  */
 export declare function onTreeNodeSort<N extends NodeType<V>, V extends Id = Id>(info: SortInfo<V>, treeNodes: N[], primaryKey?: string): N[];
+export declare function edgeBounce(value: number, { allowEdgeBounce, min, max, bounceElementTranslate, bounceDragDistance, bezierFn }: {
+    allowEdgeBounce: boolean;
+    min: number;
+    max: number;
+    bounceElementTranslate: number;
+    bounceDragDistance: number;
+    bezierFn?: BezierFunc;
+}): number;

package/dist/cjs/utils/dnd.js

@@ -3,8 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDndSensors = useDndSensors;
 exports.onDndDragEnd = onDndDragEnd;
 exports.onTreeNodeSort = onTreeNodeSort;
+exports.edgeBounce = edgeBounce;
 const core_1 = require("@dnd-kit/core");
 const sortable_1 = require("@dnd-kit/sortable");
+const utils_1 = require("./utils");
+const bezier_1 = require("./bezier");
 /**
  * 默认提供给@dnd-kit的sensors属性
  */
@@ -73,3 +76,16 @@ function onTreeNodeSort(info, treeNodes, primaryKey = 'id') {
     }
     return treeNodes;
 }
+function edgeBounce(value, { allowEdgeBounce, min, max, bounceElementTranslate, bounceDragDistance, bezierFn = (0, bezier_1.cubicBezier)(0, 0, 0, 1) }) {
+    if (allowEdgeBounce && bounceElementTranslate && bounceDragDistance > 0) {
+        value = (0, utils_1.range)(value, min - bounceDragDistance, max + bounceDragDistance);
+        if (value < min) {
+            value = min - bezierFn((min - value) / bounceDragDistance) * bounceElementTranslate;
+        }
+        else if (value > max) {
+            value = max + bezierFn((value - max) / bounceDragDistance) * bounceElementTranslate;
+        }
+        return value;
+    }
+    return (0, utils_1.range)(value, min, max);
+}

package/dist/cjs/utils/style.js

@@ -200,12 +200,14 @@ function useResponsiveValue(prop, disabled = false) {
     const syncBreakpoints = (0, hooks_1.useSync)(breakpoints);
     const fn = () => {
         let maxBreakpoint = 'xs';
-        for (const k in syncBreakpoints.current) {
-            if (window.innerWidth < syncBreakpoints.current[k]) {
-                break;
-            }
-            if (k in responsiveObj) {
-                maxBreakpoint = k;
+        if (typeof window !== 'undefined') {
+            for (const k in syncBreakpoints.current) {
+                if (window.innerWidth < syncBreakpoints.current[k]) {
+                    break;
+                }
+                if (k in responsiveObj) {
+                    maxBreakpoint = k;
+                }
             }
         }
         return responsiveObj[maxBreakpoint];

package/dist/esm/components/gallery/gallery.d.ts

@@ -15,6 +15,8 @@ export interface ImagePreviewProps extends ModalProps {
     showClose?: boolean;
     /** 自定义渲染控制按钮 */
     renderControl?: ReactNode;
+    /** 拖拽至最边缘时，是否允许弹性溢出，默认为`true` */
+    allowEdgeBounce?: boolean;
     /** 元素弹性移动距离，默认为24 */
     bounceElementTranslate?: number;
     /** 手指弹性拖拽距离，默认为240 */
@@ -22,4 +24,4 @@ export interface ImagePreviewProps extends ModalProps {
     /** 滑动生效的速度，默认为450 (px/s) */
     effectiveSpeed?: number;
 }
-export declare const Gallery: import("react").MemoExoticComponent<({ src, defaultIndex, index, onIndexChange, defaultOpen, open, onOpenChange, showRotation, showZoom, showClose, renderControl, bounceElementTranslate, bounceDragDistance, effectiveSpeed, ...props }: ImagePreviewProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Gallery: import("react").MemoExoticComponent<({ src, defaultIndex, index, onIndexChange, defaultOpen, open, onOpenChange, showRotation, showZoom, showClose, renderControl, allowEdgeBounce, bounceElementTranslate, bounceDragDistance, effectiveSpeed, ...props }: ImagePreviewProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/gallery/gallery.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo, useRef } from 'react';
 import { Modal } from '../modal';
-import { clsx, cubicBezier, range, toArray, useControlled, useDraggable, useSync } from '../../utils';
+import { cloneRef, clsx, edgeBounce, toArray, useControlled, useDraggable, useSync } from '../../utils';
 import { classes, style } from './gallery.style';
 import { Button } from '../button';
 import { Tooltip } from '../tooltip';
@@ -21,94 +21,152 @@ const commonControlProps = {
     size: 'large',
     color: 'text'
 };
-const bounceBezier = cubicBezier(0, 0, 0, 1);
-export const Gallery = memo(({ src, defaultIndex = 0, index, onIndexChange, defaultOpen = false, open, onOpenChange, showRotation = true, showZoom = true, showClose = true, renderControl, bounceElementTranslate = 24, bounceDragDistance = 240, effectiveSpeed = 450, ...props }) => {
+const DOUBLE_CLICK_DELAY = 300;
+export const Gallery = memo(({ src, defaultIndex = 0, index, onIndexChange, defaultOpen = false, open, onOpenChange, showRotation = true, showZoom = true, showClose = true, renderControl, allowEdgeBounce = true, bounceElementTranslate = 24, bounceDragDistance = 240, effectiveSpeed = 450, ...props }) => {
     const srcArr = useSync(toArray(src || []));
     const [innerOpen, setInnerOpen] = useControlled(defaultOpen, open, onOpenChange);
     const close = () => {
         setInnerOpen(false);
     };
     const [innerIndex, setInnerIndex] = useControlled(defaultIndex, index, onIndexChange);
+    const maskRef = useRef(null);
     const wrapperRef = useRef(null);
     const imageItemRefs = useRef([]);
     imageItemRefs.current = [];
+    const imgRefs = useRef([]);
+    imgRefs.current = [];
     /**
      * --------------------------------------------------------------
      * 左右滚动翻页
      */
+    const dragDirection = useRef(void 0);
     const draggableHandles = useDraggable({
         onDragStart() {
-            wrapperRef.current.dataset.transition = 'drag';
+            maskRef.current.style.transition = 'none';
             return {
                 isFit: imageItemRefs.current[innerIndex.current].isFit(),
                 startLeft: -innerIndex.current * wrapperRef.current.offsetWidth
             };
         },
-        onDrag({ diff: [dx], data: { isFit: { left, right }, startLeft } }) {
-            if ((!left && dx > 0) || (!right && dx < 0)) {
+        onDrag({ diff: [dx, dy], data: { isFit: { left, right, top, bottom }, startLeft } }) {
+            if ((!left && dx > 0)
+                || (!right && dx < 0)
+                || (!top && dy > 0)
+                || (!bottom && dy < 0)) {
+                // 图片超出边缘时，无需触发Gallery的滑动翻页，此时拖拽效果由Pinchable处理
                 return;
             }
-            const min = -wrapperRef.current.offsetWidth * (srcArr.current.length - 1);
-            const max = 0;
-            let newLeft = range(startLeft + dx, min - bounceDragDistance, max + bounceDragDistance);
-            if (newLeft < min) {
-                newLeft = min - bounceBezier(-(newLeft - min) / bounceDragDistance) * bounceElementTranslate;
+            if (!dragDirection.current) {
+                if (dx <= -5 || 5 <= dx) {
+                    dragDirection.current = 'horizontal';
+                    resetVerticalDrag();
+                }
+                if (dy <= -5 || 5 <= dy) {
+                    dragDirection.current = 'vertical';
+                }
             }
-            else if (newLeft > max) {
-                newLeft = max + bounceBezier((newLeft - max) / bounceDragDistance) * bounceElementTranslate;
+            if (dragDirection.current !== 'vertical') {
+                // 处理横向拖动
+                const min = -wrapperRef.current.offsetWidth * (srcArr.current.length - 1);
+                const max = 0;
+                const newLeft = edgeBounce(startLeft + dx, { min, max, allowEdgeBounce, bounceElementTranslate, bounceDragDistance });
+                wrapperRef.current.style.left = newLeft + 'px';
             }
-            wrapperRef.current.style.left = newLeft + 'px';
-        },
-        onDragEnd({ diff: [dx], speed: [speedX], data: { isFit: { left, right } } }) {
-            wrapperRef.current.dataset.transition = '';
-            if (!dx) {
-                return;
+            if (dragDirection.current !== 'horizontal') {
+                // 处理纵向拖动
+                const rate = 1 - Math.abs(dy) / 2 / wrapperRef.current.offsetHeight;
+                imageItemRefs.current[innerIndex.current].style.transform = `translateY(${dy}px) scale(${rate})`;
+                maskRef.current.style.opacity = rate.toString();
             }
-            if ((!left && dx > 0) || (!right && dx < 0)) {
+        },
+        onDragEnd({ diff: [dx, dy], speed: [speedX, speedY], data: { isFit: { left, right, top, bottom } } }) {
+            if (!dx && !dy) {
                 return;
             }
-            allowSlideTransition();
-            const reset = () => {
-                wrapperRef.current.style.left = -innerIndex.current * wrapperRef.current.offsetWidth + 'px';
-            };
-            const goPrev = () => {
-                innerIndex.current === 0
-                    ? reset()
-                    : goPrevLoop();
-            };
-            const goNext = () => {
-                innerIndex.current === srcArr.current.length - 1
-                    ? reset()
-                    : goNextLoop();
-            };
-            if (effectiveSpeed && speedX * 1000 >= effectiveSpeed) {
-                dx > 0 ? goPrev() : goNext();
+            resetVerticalDrag(true);
+            if ((!left && dx > 0)
+                || (!right && dx < 0)
+                || (!top && dy > 0)
+                || (!bottom && dy < 0)) {
+                // 图片超出边缘时，无需触发Gallery的滑动翻页，此时拖拽效果由Pinchable处理
                 return;
             }
-            const halfWidth = wrapperRef.current.offsetWidth / 2;
-            if (dx > halfWidth) {
-                goPrev();
-            }
-            else if (dx < -halfWidth) {
-                goNext();
+            if (dragDirection.current === 'vertical') {
+                if ((effectiveSpeed && speedY * 1000 >= effectiveSpeed)
+                    || Math.abs(dy) > wrapperRef.current.offsetHeight / 2) {
+                    close();
+                }
             }
             else {
-                reset();
+                const goPrev = () => {
+                    innerIndex.current === 0
+                        ? resetHorizontalDrag()
+                        : goPrevLoop();
+                };
+                const goNext = () => {
+                    innerIndex.current === srcArr.current.length - 1
+                        ? resetHorizontalDrag()
+                        : goNextLoop();
+                };
+                // 满足速度要求
+                if (effectiveSpeed && speedX * 1000 >= effectiveSpeed) {
+                    dx > 0 ? goPrev() : goNext();
+                    return;
+                }
+                // 拖拽距离达到一半
+                const halfWidth = wrapperRef.current.offsetWidth / 2;
+                if (dx >= halfWidth) {
+                    goPrev();
+                }
+                else if (dx <= -halfWidth) {
+                    goNext();
+                }
+                else {
+                    resetHorizontalDrag();
+                }
             }
+            dragDirection.current = void 0;
         },
         onClick: () => {
-            doubleClicked.current = false;
             setTimeout(() => {
                 !doubleClicked.current && close();
-            }, 250);
+            }, DOUBLE_CLICK_DELAY);
         }
     });
+    const resetHorizontalDrag = () => {
+        allowSlideTransition('bounce');
+        wrapperRef.current.style.left = -innerIndex.current * wrapperRef.current.offsetWidth + 'px';
+    };
+    const resetVerticalDrag = (transition = false) => {
+        const imageItem = imageItemRefs.current[innerIndex.current];
+        const mask = maskRef.current;
+        if (transition) {
+            imageItem.dataset.transition = 'true';
+            // mask的css定义了transition，只需去掉style.transition即可实现过渡
+            mask.style.transition = '';
+        }
+        imageItem.style.transform = '';
+        mask.style.opacity = '';
+    };
     const doubleClicked = useRef(false);
     const doubleClickHandler = () => {
         doubleClicked.current = true;
+        setTimeout(() => doubleClicked.current = false, DOUBLE_CLICK_DELAY);
+    };
+    const allowSlideTransition = (transitionType = 'true') => {
+        if (wrapperRef.current) {
+            wrapperRef.current.dataset.transition = transitionType;
+        }
     };
-    const allowSlideTransition = () => {
-        wrapperRef.current && (wrapperRef.current.dataset.transition = 'set');
+    const clearTransition = () => {
+        if (wrapperRef.current) {
+            wrapperRef.current.dataset.transition = '';
+        }
+        const imageItem = imageItemRefs.current[innerIndex.current];
+        if (imageItem) {
+            imageItem.dataset.transition = '';
+        }
+        maskRef.current.style.transition = '';
     };
     const goPrevLoop = () => {
         allowSlideTransition();
@@ -150,13 +208,18 @@ export const Gallery = memo(({ src, defaultIndex = 0, index, onIndexChange, defa
     };
     return (_jsx(Modal, { ...props, css: style, className: clsx(classes.root, props.className), open: innerOpen.current, onClosed: resetAll, maskProps: {
             ...props.maskProps,
+            ref: cloneRef(maskRef, props.maskProps?.ref),
             children: (_jsxs(_Fragment, { children: [_jsxs("div", { className: classes.control, children: [renderControl, showRotation &&
                                 _jsxs(_Fragment, { children: [_jsx(Tooltip, { title: "\u65CB\u8F6C-90\u00B0", children: _jsx(Button, { ...commonControlProps, onClick: rotateLeft, children: _jsx(Icon, { icon: faArrowRotateLeft }) }) }), _jsx(Tooltip, { title: "\u65CB\u8F6C90\u00B0", children: _jsx(Button, { ...commonControlProps, onClick: rotateRight, children: _jsx(Icon, { icon: faArrowRotateRight }) }) })] }), showZoom &&
                                 _jsxs(_Fragment, { children: [_jsx(Tooltip, { title: "\u7F29\u5C0F", children: _jsx(Button, { ...commonControlProps, onClick: zoomOut, children: _jsx(Icon, { icon: faMagnifyingGlassMinus }) }) }), _jsx(Tooltip, { title: "\u653E\u5927", children: _jsx(Button, { ...commonControlProps, onClick: zoomIn, children: _jsx(Icon, { icon: faMagnifyingGlassPlus }) }) }), _jsx(Tooltip, { title: "\u9002\u5E94\u5C4F\u5E55", children: _jsx(Button, { ...commonControlProps, onClick: reset, children: _jsx(Icon, { icon: faExpand }) }) })] }), showClose &&
                                 _jsx(Button, { ...commonControlProps, onClick: close, children: _jsx(Icon, { icon: faXmark }) })] }), srcArr.current.length > 1 &&
                         _jsxs(_Fragment, { children: [_jsxs("div", { className: classes.swap, children: [_jsx(Button, { ...commonControlProps, onClick: goPrevLoop, children: _jsx(Icon, { icon: faAngleLeft }) }), _jsx(Button, { ...commonControlProps, onClick: goNextLoop, children: _jsx(Icon, { icon: faAngleRight }) })] }), _jsxs("div", { className: classes.counter, children: [innerIndex.current + 1, " / ", srcArr.current.length] })] })] }))
         }, children: srcArr.current.length > 0 &&
-            _jsx("div", { className: classes.galleryContainer, ...draggableHandles, onDoubleClick: doubleClickHandler, children: _jsx("div", { ref: wrapperRef, className: classes.galleryWrapper, style: { left: -innerIndex.current * 100 + '%' }, onTransitionEnd: e => e.currentTarget.dataset.transition = '', children: srcArr.current.map((src, i) => _jsx(ImageItem, { ref: r => {
+            _jsx("div", { className: classes.galleryContainer, ...draggableHandles, onDoubleClick: doubleClickHandler, children: _jsx("div", { ref: wrapperRef, className: classes.galleryWrapper, style: { left: -innerIndex.current * 100 + '%' }, onTransitionEnd: clearTransition, children: srcArr.current.map((src, i) => _jsx(ImageItem, { ref: r => {
                             r && imageItemRefs.current.push(r);
+                        }, imgProps: {
+                            ref: r => {
+                                r && imgRefs.current.push(r);
+                            }
                         }, style: { left: i * 100 + '%' }, src: src }, i)) }) }) }));
 });

package/dist/esm/components/gallery/gallery.style.js

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import { defineInnerClasses, defineCss } from '../../utils';
-export const classes = defineInnerClasses('image-preview', [
+export const classes = defineInnerClasses('gallery', [
     'button',
     'control',
     'swap',
@@ -79,14 +79,14 @@ export const style = defineCss(({ spacing, easing, breakpoints }) => css `
                 &, .${classes.imageItem} {
                     position: absolute;
                     top: 0;
-                }
 
-                &[data-transition=set] {
-                    transition: left .5s ${easing.bounce} 0s;
-                }
+                    &[data-transition=true] {
+                        transition: all .3s ${easing.easeOut};
+                    }
 
-                &[data-transition=drag] {
-                    transition: left .1s linear;
+                    &[data-transition=bounce] {
+                        transition: all .25s ${easing.bounce};
+                    }
                 }
 
                 .${classes.imageItem} {
@@ -105,10 +105,6 @@ export const style = defineCss(({ spacing, easing, breakpoints }) => css `
             }
 
             .${classes.galleryContainer} .${classes.galleryWrapper} {
-                &[data-transition=true] {
-                    transition: left .4s ${easing.ease};
-                }
-
                 .${classes.imageItem} {
                     padding: 0;
                 }

package/dist/esm/components/gallery/imageItem.d.ts

@@ -1,7 +1,9 @@
-import { Ref } from 'react';
+import { JSX, Ref } from 'react';
 import { PinchableProps, PinchableRef } from '../pinchable';
 export interface ImageItemRef extends PinchableRef {
     isFit(): {
+        top: boolean;
+        bottom: boolean;
         left: boolean;
         right: boolean;
     };
@@ -9,6 +11,7 @@ export interface ImageItemRef extends PinchableRef {
 interface ImageItemProps extends PinchableProps {
     ref?: Ref<ImageItemRef>;
     src?: string;
+    imgProps?: JSX.IntrinsicElements['img'];
 }
-export declare function ImageItem({ ref, src, ...props }: ImageItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function ImageItem({ ref, src, imgProps, ...props }: ImageItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/gallery/imageItem.js

@@ -1,15 +1,17 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { classes } from './gallery.style';
 import { useEffect, useImperativeHandle, useRef } from 'react';
-import { clsx } from '../../utils';
+import { cloneRef, clsx } from '../../utils';
 import { Pinchable } from '../pinchable';
-export function ImageItem({ ref, src, ...props }) {
+export function ImageItem({ ref, src, imgProps, ...props }) {
     useImperativeHandle(ref, () => {
         if (pinchableRef.current) {
             pinchableRef.current.isFit = () => {
-                const { x: pinchableX, width: pinchableWidth } = pinchableRef.current.getBoundingClientRect();
-                const { x: imgX, width: imgWidth } = imgRef.current.getBoundingClientRect();
+                const { x: pinchableX, y: pinchableY, width: pinchableWidth, height: pinchableHeight } = pinchableRef.current.getBoundingClientRect();
+                const { x: imgX, y: imgY, width: imgWidth, height: imgHeight } = imgRef.current.getBoundingClientRect();
                 return {
+                    top: imgY >= pinchableY,
+                    bottom: imgY + imgHeight <= pinchableY + pinchableHeight,
                     left: imgX >= pinchableX,
                     right: imgX + imgWidth <= pinchableX + pinchableWidth
                 };
@@ -44,5 +46,5 @@ export function ImageItem({ ref, src, ...props }) {
             resizeObserver.disconnect();
         };
     }, []);
-    return (_jsx(Pinchable, { ...props, ref: pinchableRef, className: clsx(classes.imageItem, props.className), children: _jsx("img", { ref: imgRef, className: classes.image, src: src, draggable: false, alt: "" }) }));
+    return (_jsx(Pinchable, { ...props, ref: pinchableRef, className: clsx(classes.imageItem, props.className), allowEdgeBounce: false, children: _jsx("img", { draggable: false, alt: "", src: src, ...imgProps, ref: cloneRef(imgRef, imgProps?.ref), className: clsx(classes.image, imgProps?.className) }) }));
 }

package/dist/esm/components/pinchable/pinchable.d.ts

@@ -22,11 +22,17 @@ type PinchableOwnProps = {
     translate?: [number, number];
     onTranslateChange?(translate: [number, number]): void;
     /** 平移限制，`translate`非受控模式下有效 */
-    translateLimit?: (targetX: number, targetY: number, scale: number) => [number, number];
+    translateLimit?: (targetX: number, targetY: number, scale: number, rotateDeg: number) => [number, number];
     defaultRotate?: number;
     rotate?: number;
     onRotateChange?(rotate: number): void;
     children?: ReactElement;
+    /** 拖拽至最边缘时，是否允许弹性溢出，默认为`true` */
+    allowEdgeBounce?: boolean;
+    /** 元素弹性移动距离，默认为24 */
+    bounceElementTranslate?: number;
+    /** 手指弹性拖拽距离，默认为240 */
+    bounceDragDistance?: number;
 };
 export type PinchableProps<C extends ElementType = 'div'> = OverridableProps<PinchableOwnProps, C>;
 export declare const Pinchable: <C extends ElementType = "div">(props: PinchableProps<C>) => ReactElement;

package/dist/esm/components/pinchable/pinchable.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { cloneElement, useImperativeHandle, useRef } from 'react';
-import { cloneRef, clsx, range, useControlled, useGesture } from '../../utils';
+import { cloneRef, clsx, edgeBounce, range, useControlled, useGesture } from '../../utils';
 import { classes, style } from './pinchable.style';
-export const Pinchable = (({ component: Component = 'div', ref, gestureOptions, defaultScale = 1, scale, onScaleChange, scaleLimit = [1, 6], defaultTranslate = [0, 0], translate, onTranslateChange, translateLimit, defaultRotate = 0, rotate, onRotateChange, children, ...props }) => {
+export const Pinchable = (({ component: Component = 'div', ref, gestureOptions, defaultScale = 1, scale, onScaleChange, scaleLimit = [1, 6], defaultTranslate = [0, 0], translate, onTranslateChange, translateLimit, defaultRotate = 0, rotate, onRotateChange, children, allowEdgeBounce = true, bounceElementTranslate = 24, bounceDragDistance = 240, ...props }) => {
     useImperativeHandle(ref, () => {
         if (wrapperRef.current) {
             wrapperRef.current.zoomIn = () => {
@@ -38,6 +38,12 @@ export const Pinchable = (({ component: Component = 'div', ref, gestureOptions,
         onDrag(info, e) {
             gestureOptions?.onDrag?.(info, e);
             const { diff: [dx, dy], data: [startX, startY] } = info;
+            setInnerTranslate(translateLimitFn(startX + dx, startY + dy, void 0, void 0, true));
+        },
+        onDragEnd(info) {
+            gestureOptions?.onDragEnd?.(info);
+            const { diff: [dx, dy], data: [startX, startY] } = info;
+            allowTransition('bounce');
             setInnerTranslate(translateLimitFn(startX + dx, startY + dy));
         },
         onPinchStart(info) {
@@ -75,9 +81,9 @@ export const Pinchable = (({ component: Component = 'div', ref, gestureOptions,
     if (!children) {
         return;
     }
-    const translateLimitFn = (x, y, scale = innerScale.current, deg = innerRotate.current) => {
+    const translateLimitFn = (x, y, scale = innerScale.current, deg = innerRotate.current, bounce = false) => {
         if (translateLimit) {
-            return translateLimit(x, y, scale);
+            return translateLimit(x, y, scale, deg);
         }
         const { clientWidth: wrapperWidth, clientHeight: wrapperHeight } = wrapperRef.current;
         const { offsetWidth, offsetHeight } = contentRef.current;
@@ -86,14 +92,20 @@ export const Pinchable = (({ component: Component = 'div', ref, gestureOptions,
         const contentHeight = (isRotated ? offsetWidth : offsetHeight) * scale;
         const limitX = contentWidth > wrapperWidth ? (contentWidth - wrapperWidth) / 2 : 0;
         const limitY = contentHeight > wrapperHeight ? (contentHeight - wrapperHeight) / 2 : 0;
+        if (!bounce) {
+            return [
+                range(x, -limitX, limitX),
+                range(y, -limitY, limitY)
+            ];
+        }
         return [
-            range(x, -limitX, limitX),
-            range(y, -limitY, limitY)
+            edgeBounce(x, { min: -limitX, max: limitX, allowEdgeBounce, bounceElementTranslate, bounceDragDistance }),
+            edgeBounce(y, { min: -limitY, max: limitY, allowEdgeBounce, bounceElementTranslate, bounceDragDistance })
         ];
     };
     const childrenProps = children.props;
-    const allowTransition = () => {
-        contentRef.current && (contentRef.current.dataset.transition = 'true');
+    const allowTransition = (transitionType = 'true') => {
+        contentRef.current && (contentRef.current.dataset.transition = transitionType);
     };
     const zoomFn = (targetScale, originX, originY) => {
         allowTransition();
@@ -147,7 +159,7 @@ export const Pinchable = (({ component: Component = 'div', ref, gestureOptions,
             : zoomFn(innerScale.current * 1.2, e.clientX, e.clientY);
     };
     const onTransitionEnd = (e) => {
-        e.currentTarget.dataset.transition = 'false';
+        e.currentTarget.dataset.transition = '';
         setInnerRotate(innerRotate.current % 360);
     };
     return (_jsx(Component, { ...props, ref: wrapperRef, css: style, className: clsx(classes.root, props.className), ...pinchableHandles, children: cloneElement(children, {

package/dist/esm/components/pinchable/pinchable.style.js

@@ -13,8 +13,14 @@ export const style = defineCss(({ easing }) => css `
             touch-action: none;
         }
 
-        .${classes.content}[data-transition=true] {
-            transition: all .25s ${easing.easeOut};
+        .${classes.content} {
+            &[data-transition=true] {
+                transition: all .25s ${easing.easeOut};
+            }
+
+            &[data-transition=bounce] {
+                transition: all .25s ${easing.bounce};
+            }
         }
     }
 `);

package/dist/esm/utils/bezier.d.ts

@@ -1,13 +1,14 @@
+export type BezierFunc = (x: number) => number;
 /**
  * 创建一个Bezier曲线函数，默认从(0,0)到(1,1)
  * @param p1x
  * @param p1y
  * @param p2x
  * @param p2y
- * @returns {(x: number) => number} 返回一个函数，接收x返回y
+ * @returns {BezierFunc} 返回一个函数，接收x返回y
  */
-export declare function cubicBezier(p1x: number, p1y: number, p2x: number, p2y: number): (x: number) => number;
+export declare function cubicBezier(p1x: number, p1y: number, p2x: number, p2y: number): BezierFunc;
 export declare namespace cubicBezier {
-    var preset: (preset: Preset) => (x: number) => number;
+    var preset: (preset: Preset) => BezierFunc;
 }
 export type Preset = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';

package/dist/esm/utils/bezier.js

@@ -4,7 +4,7 @@
  * @param p1y
  * @param p2x
  * @param p2y
- * @returns {(x: number) => number} 返回一个函数，接收x返回y
+ * @returns {BezierFunc} 返回一个函数，接收x返回y
  */
 export function cubicBezier(p1x, p1y, p2x, p2y) {
     const ZERO_LIMIT = 1e-6;

package/dist/esm/utils/dnd.d.ts

@@ -1,6 +1,7 @@
 import { DragEndEvent } from '@dnd-kit/core';
 import { Id, Obj } from '../types';
 import { NodeType, SortInfo } from '../components/tree';
+import { BezierFunc } from './bezier';
 /**
  * 默认提供给@dnd-kit的sensors属性
  */
@@ -19,3 +20,11 @@ export declare function onDndDragEnd<S extends Obj>(e: DragEndEvent, prevState:
  * @param primaryKey 索引用的主键，默认为`id`
  */
 export declare function onTreeNodeSort<N extends NodeType<V>, V extends Id = Id>(info: SortInfo<V>, treeNodes: N[], primaryKey?: string): N[];
+export declare function edgeBounce(value: number, { allowEdgeBounce, min, max, bounceElementTranslate, bounceDragDistance, bezierFn }: {
+    allowEdgeBounce: boolean;
+    min: number;
+    max: number;
+    bounceElementTranslate: number;
+    bounceDragDistance: number;
+    bezierFn?: BezierFunc;
+}): number;

package/dist/esm/utils/dnd.js

@@ -1,5 +1,7 @@
 import { PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
 import { arrayMove } from '@dnd-kit/sortable';
+import { range } from './utils';
+import { cubicBezier } from './bezier';
 /**
  * 默认提供给@dnd-kit的sensors属性
  */
@@ -68,3 +70,16 @@ export function onTreeNodeSort(info, treeNodes, primaryKey = 'id') {
     }
     return treeNodes;
 }
+export function edgeBounce(value, { allowEdgeBounce, min, max, bounceElementTranslate, bounceDragDistance, bezierFn = cubicBezier(0, 0, 0, 1) }) {
+    if (allowEdgeBounce && bounceElementTranslate && bounceDragDistance > 0) {
+        value = range(value, min - bounceDragDistance, max + bounceDragDistance);
+        if (value < min) {
+            value = min - bezierFn((min - value) / bounceDragDistance) * bounceElementTranslate;
+        }
+        else if (value > max) {
+            value = max + bezierFn((value - max) / bounceDragDistance) * bounceElementTranslate;
+        }
+        return value;
+    }
+    return range(value, min, max);
+}

package/dist/esm/utils/style.js

@@ -184,12 +184,14 @@ export function useResponsiveValue(prop, disabled = false) {
     const syncBreakpoints = useSync(breakpoints);
     const fn = () => {
         let maxBreakpoint = 'xs';
-        for (const k in syncBreakpoints.current) {
-            if (window.innerWidth < syncBreakpoints.current[k]) {
-                break;
-            }
-            if (k in responsiveObj) {
-                maxBreakpoint = k;
+        if (typeof window !== 'undefined') {
+            for (const k in syncBreakpoints.current) {
+                if (window.innerWidth < syncBreakpoints.current[k]) {
+                    break;
+                }
+                if (k in responsiveObj) {
+                    maxBreakpoint = k;
+                }
             }
         }
         return responsiveObj[maxBreakpoint];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.121",
+  "version": "0.0.123",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",