@canlooks/can-ui 0.0.41 → 0.0.43

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

@@ -0,0 +1,165 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Gallery = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const modal_1 = require("../modal");
+const utils_1 = require("../../utils");
+const gallery_style_1 = require("./gallery.style");
+const button_1 = require("../button");
+const tooltip_1 = require("../tooltip");
+const __1 = require("../..");
+const faXmark_1 = require("@fortawesome/free-solid-svg-icons/faXmark");
+const faExpand_1 = require("@fortawesome/free-solid-svg-icons/faExpand");
+const faAngleLeft_1 = require("@fortawesome/free-solid-svg-icons/faAngleLeft");
+const faAngleRight_1 = require("@fortawesome/free-solid-svg-icons/faAngleRight");
+const faArrowRotateLeft_1 = require("@fortawesome/free-solid-svg-icons/faArrowRotateLeft");
+const faArrowRotateRight_1 = require("@fortawesome/free-solid-svg-icons/faArrowRotateRight");
+const faMagnifyingGlassPlus_1 = require("@fortawesome/free-solid-svg-icons/faMagnifyingGlassPlus");
+const faMagnifyingGlassMinus_1 = require("@fortawesome/free-solid-svg-icons/faMagnifyingGlassMinus");
+const imageItem_1 = require("./imageItem");
+const commonControlProps = {
+    className: gallery_style_1.classes.button,
+    shape: 'circular',
+    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 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 wrapperRef = (0, react_1.useRef)(null);
+    const imageItemRefs = (0, react_1.useRef)([]);
+    imageItemRefs.current = [];
+    /**
+     * --------------------------------------------------------------
+     * 左右滚动翻页
+     */
+    const draggableHandles = (0, utils_1.useDraggable)({
+        onDragStart() {
+            wrapperRef.current.dataset.transition = 'drag';
+            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)) {
+                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;
+            }
+            else if (newLeft > max) {
+                newLeft = max + bounceBezier((newLeft - max) / bounceDragDistance) * bounceElementTranslate;
+            }
+            wrapperRef.current.style.left = newLeft + 'px';
+        },
+        onDragEnd({ diff: [dx], speed: [speedX], data: { isFit: { left, right } } }) {
+            wrapperRef.current.dataset.transition = '';
+            if (!dx) {
+                return;
+            }
+            if ((!left && dx > 0) || (!right && dx < 0)) {
+                return;
+            }
+            alowSlideTransition();
+            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();
+                return;
+            }
+            const halfWidth = wrapperRef.current.offsetWidth / 2;
+            if (dx > halfWidth) {
+                goPrev();
+            }
+            else if (dx < -halfWidth) {
+                goNext();
+            }
+            else {
+                reset();
+            }
+        },
+        onClick: () => {
+            doubleClicked.current = false;
+            setTimeout(() => {
+                !doubleClicked.current && close();
+            }, 250);
+        }
+    });
+    const doubleClicked = (0, react_1.useRef)(false);
+    const doubleClickHandler = () => {
+        doubleClicked.current = true;
+    };
+    const alowSlideTransition = () => {
+        wrapperRef.current && (wrapperRef.current.dataset.transition = 'set');
+    };
+    const goPrevLoop = () => {
+        alowSlideTransition();
+        setInnerIndex(o => {
+            imageItemRefs.current[o].reset();
+            return (o + srcArr.current.length - 1) % srcArr.current.length;
+        });
+    };
+    const goNextLoop = () => {
+        alowSlideTransition();
+        setInnerIndex(o => {
+            imageItemRefs.current[o].reset();
+            return (o + 1) % srcArr.current.length;
+        });
+    };
+    /**
+     * -----------------------------------------------------------------------------
+     * 放大缩小与旋转
+     */
+    const rotateLeft = () => {
+        imageItemRefs.current[innerIndex.current].rotateLeft();
+    };
+    const rotateRight = () => {
+        imageItemRefs.current[innerIndex.current].rotateRight();
+    };
+    const zoomIn = () => {
+        imageItemRefs.current[innerIndex.current].zoomIn();
+    };
+    const zoomOut = () => {
+        imageItemRefs.current[innerIndex.current].zoomOut();
+    };
+    const reset = () => {
+        imageItemRefs.current[innerIndex.current].reset();
+    };
+    const resetAll = () => {
+        imageItemRefs.current.forEach(item => {
+            item.reset(false);
+        });
+    };
+    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,
+            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)(__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)(__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)(__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)(__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)(__1.Icon, { icon: faExpand_1.faExpand }) }) })] }), showClose &&
+                                (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: close, children: (0, jsx_runtime_1.jsx)(__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)(__1.Icon, { icon: faAngleLeft_1.faAngleLeft }) }), (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: goNextLoop, children: (0, jsx_runtime_1.jsx)(__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 => {
+                            r && imageItemRefs.current.push(r);
+                        }, style: { left: i * 100 + '%' }, src: src }, i)) }) }) }));
+});

package/dist/{esm/components/image/imagePreview.style.d.ts → cjs/components/gallery/gallery.style.d.ts}

@@ -4,7 +4,9 @@ export declare const classes: {
     counter: string;
     swap: string;
     control: string;
-    imageWrapper: string;
+    galleryContainer: string;
+    galleryWrapper: string;
+    imageItem: string;
 } & {
     root: string;
 };

package/dist/cjs/components/{image/imagePreview.style.js → gallery/gallery.style.js}

@@ -9,10 +9,12 @@ exports.classes = (0, utils_1.defineInnerClasses)('image-preview', [
     'control',
     'swap',
     'counter',
-    'imageWrapper',
+    'galleryContainer',
+    'galleryWrapper',
+    'imageItem',
     'image'
 ]);
-exports.style = (0, utils_1.defineCss)(({ spacing, easing }) => (0, react_1.css) `
+exports.style = (0, utils_1.defineCss)(({ spacing, easing, breakpoints }) => (0, react_1.css) `
     .${exports.classes.control} {
         display: flex;
         gap: ${spacing[4]}px;
@@ -52,11 +54,11 @@ exports.style = (0, utils_1.defineCss)(({ spacing, easing }) => (0, react_1.css)
         background-image: none !important;
         background-color: rgba(0, 0, 0, .4);
         transition: background-color .25s ${easing.easeOut};
-    
+
         &:hover {
             background-color: rgba(0, 0, 0, .3);
         }
-    
+
         &:active {
             transition: background-color 0s;
             background-color: rgba(0, 0, 0, .5);
@@ -71,17 +73,51 @@ exports.style = (0, utils_1.defineCss)(({ spacing, easing }) => (0, react_1.css)
         padding: 0;
     }
 
-    .${exports.classes.imageWrapper} {
-        width: 100%;
-        height: 100%;
+    .${exports.classes.galleryContainer} {
+        &, .${exports.classes.galleryWrapper}, .${exports.classes.imageItem}, .${exports.classes.image} {
+            width: 100%;
+            height: 100%;
+        }
+
+        overflow: hidden;
+        position: relative;
 
-        .${exports.classes.image} {
-            padding: 40px;
+        .${exports.classes.galleryWrapper} {
+            &, .${exports.classes.imageItem} {
+                position: absolute;
+                top: 0;
+            }
+            
+            &[data-transition=set] {
+                transition: left .5s ${easing.bounce} 0s;
+            }
+
+            &[data-transition=drag] {
+                transition: left .1s linear;
+            }
+
+            .${exports.classes.imageItem} {
+                padding: 90px;
+
+                .${exports.classes.image} {
+                    object-fit: contain;
+                }
+            }
+        }
+    }
+
+    @media (max-width: ${breakpoints.sm}px) {
+        .${exports.classes.control}, .${exports.classes.swap}, .${exports.classes.button} {
+            display: none;
+        }
+
+        .${exports.classes.galleryContainer} .${exports.classes.galleryWrapper} {
+            &[data-transition=true] {
+                transition: left .4s ${easing.ease};
+            }
             
-            img {
-                max-width: 100%;
-                max-height: 100%;
-                transition: rotate .4s ${easing.easeOut};
+            .${exports.classes.imageItem} {
+                padding: 0;
             }
         }
     }

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

@@ -0,0 +1,14 @@
+import { Ref } from 'react';
+import { PinchableProps, PinchableRef } from '../pinchable';
+export interface ImageItemRef extends PinchableRef {
+    isFit(): {
+        left: boolean;
+        right: boolean;
+    };
+}
+interface ImageItemProps extends PinchableProps {
+    ref?: Ref<ImageItemRef>;
+    src?: string;
+}
+export declare function ImageItem({ ref, src, ...props }: ImageItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageItem = ImageItem;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+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 }) {
+    (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();
+                return {
+                    left: imgX >= pinchableX,
+                    right: imgX + imgWidth <= pinchableX + pinchableWidth
+                };
+            };
+        }
+        return pinchableRef.current;
+    });
+    const pinchableRef = (0, react_1.useRef)(null);
+    const imgRef = (0, react_1.useRef)(null);
+    const fitSize = () => {
+        const img = imgRef.current;
+        const imgRatio = img.naturalWidth / img.naturalHeight;
+        const pinchableRatio = pinchableRef.current.clientWidth / pinchableRef.current.clientHeight;
+        if (imgRatio >= pinchableRatio) {
+            img.style.width = '100%';
+            img.style.height = 'auto';
+        }
+        else {
+            img.style.width = 'auto';
+            img.style.height = '100%';
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        !imgRef.current.complete && imgRef.current.addEventListener('load', fitSize, { once: true });
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const resizeObserver = new ResizeObserver(() => {
+            imgRef.current.complete && fitSize();
+        });
+        resizeObserver.observe(pinchableRef.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(pinchable_1.Pinchable, { ref: pinchableRef, className: (0, utils_1.clsx)(gallery_style_1.classes.imageItem, props.className), ...props, children: (0, jsx_runtime_1.jsx)("img", { ref: imgRef, className: gallery_style_1.classes.image, src: src, draggable: false, alt: "" }) }));
+}

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

@@ -0,0 +1 @@
+export * from './gallery';

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./gallery"), exports);

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

@@ -1,6 +1,6 @@
 import React, { CSSProperties, ReactNode, JSX, ReactElement } from 'react';
 import { DivProps } from '../../types';
-import { ImagePreview, ImagePreviewProps } from './imagePreview';
+import { Gallery, ImagePreviewProps } from '../gallery/gallery';
 export interface ImageProps extends DivProps {
     src?: string;
     fallback?: string;
@@ -20,5 +20,5 @@ export interface ImageProps extends DivProps {
 }
 export declare const Image: {
     (props: ImageProps): ReactElement;
-    Preview: typeof ImagePreview;
+    Gallery: typeof Gallery;
 };

package/dist/cjs/components/image/image.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const image_style_1 = require("./image.style");
 const utils_1 = require("../../utils");
-const imagePreview_1 = require("./imagePreview");
+const gallery_1 = require("../gallery/gallery");
 const __1 = require("../..");
 const faEye_1 = require("@fortawesome/free-regular-svg-icons/faEye");
 exports.Image = (0, react_1.memo)(({ src, fallback, onLoad, onError, renderLoading, alt = '', width, height, objectFit = 'cover', objectPosition = 'center', imgProps, actions, previewable = true, previewProps, onPreview, ...props }) => {
@@ -46,6 +46,6 @@ exports.Image = (0, react_1.memo)(({ src, fallback, onLoad, onError, renderLoadi
                 }, onLoad: loadHandler, onError: errorHandler }), loading.current &&
                 (renderLoading ?? (0, jsx_runtime_1.jsx)(__1.Skeleton, { className: image_style_1.classes.skeleton })), !!renderedActions && !failed.current &&
                 (0, jsx_runtime_1.jsx)("div", { className: image_style_1.classes.mask, children: renderedActions }), previewable && src &&
-                (0, jsx_runtime_1.jsx)(imagePreview_1.ImagePreview, { src: [src], ...previewProps, open: previewOpen.current, onOpenChange: setPreviewOpen })] }));
+                (0, jsx_runtime_1.jsx)(gallery_1.Gallery, { src: [src], ...previewProps, open: previewOpen.current, onOpenChange: setPreviewOpen })] }));
 });
-exports.Image.Preview = imagePreview_1.ImagePreview;
+exports.Image.Gallery = gallery_1.Gallery;

package/dist/cjs/components/image/index.d.ts

@@ -1,2 +1 @@
 export * from './image';
-export * from './imagePreview';

package/dist/cjs/components/image/index.js

@@ -2,4 +2,3 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./image"), exports);
-tslib_1.__exportStar(require("./imagePreview"), exports);

package/dist/cjs/components/overlayBase/overlayBase.js

@@ -40,5 +40,5 @@ function OverlayBase({ container, forceRender, open, onMaskClick, singleLayer, o
         onClosed?.();
         forceRender === false && setShouldRender(false);
     };
-    return shouldRender.current && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ...props, css: overlayBase_style_1.style, className: (0, utils_1.clsx)(overlayBase_style_1.classes.root, props.className), "data-open": open, "data-custom-container": typeof container !== 'undefined', children: [(0, jsx_runtime_1.jsx)(transitionBase_1.Fade, { timeout: exports.overlayBaseTransitionDuration, ...maskProps, in: open, className: (0, utils_1.clsx)(overlayBase_style_1.classes.mask, maskProps?.className), onClick: clickHandler, onEntered: onEntered, onExited: onExited }), props.children] }), containerEl);
+    return shouldRender.current && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ...props, css: overlayBase_style_1.style, className: (0, utils_1.clsx)(overlayBase_style_1.classes.root, props.className), "data-open": open, "data-custom-container": containerEl !== document.body, children: [(0, jsx_runtime_1.jsx)(transitionBase_1.Fade, { timeout: exports.overlayBaseTransitionDuration, ...maskProps, in: open, className: (0, utils_1.clsx)(overlayBase_style_1.classes.mask, maskProps?.className), onClick: clickHandler, onEntered: onEntered, onExited: onExited }), props.children] }), containerEl);
 }

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

@@ -1,10 +1,10 @@
 import { DivProps } from '../../types';
-import { DraggableOptions } from '../../utils';
+import { GestureOptions } from '../../utils';
 import { ColorInstance } from 'color';
 export interface PaletteProps extends Omit<DivProps, 'defaultValue' | 'onChange'> {
     defaultValue?: ColorInstance;
     value?: ColorInstance;
     onChange?(value: ColorInstance): void;
-    draggableOptions?: DraggableOptions<HTMLDivElement>;
+    gestureOptions?: GestureOptions;
 }
-export declare const Palette: import("react").MemoExoticComponent<({ defaultValue, value, onChange, draggableOptions, ...props }: PaletteProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Palette: import("react").MemoExoticComponent<({ defaultValue, value, onChange, gestureOptions, ...props }: PaletteProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/palette/palette.js

@@ -22,7 +22,7 @@ const sliderProps = {
     tooltipProps: { disabled: true }
 };
 const availableFormat = ['HEX', 'RGB', 'HSL', 'CMYK'];
-exports.Palette = (0, react_1.memo)(({ defaultValue, value, onChange, draggableOptions, ...props }) => {
+exports.Palette = (0, react_1.memo)(({ defaultValue, value, onChange, gestureOptions, ...props }) => {
     const { colors } = (0, theme_1.useTheme)();
     const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue ?? (0, color_1.default)(colors.primary.main, 'hex'), value, onChange);
     const colorObject = (0, react_1.useMemo)(() => {
@@ -52,10 +52,10 @@ exports.Palette = (0, react_1.memo)(({ defaultValue, value, onChange, draggableO
         setInnerValue(innerValue.current.black(newTop).saturationv(newLeft).hue(hue));
         return [newLeft, newTop];
     };
-    const draggableHandle = (0, utils_1.useDraggableHandle)({
-        ...draggableOptions,
+    const draggableHandles = (0, utils_1.useDraggable)({
+        ...gestureOptions,
         onDragStart(e) {
-            draggableOptions?.onDragStart?.(e);
+            gestureOptions?.onDragStart?.(e);
             const paletteWidth = paletteRef.current.clientWidth;
             const paletteHeight = paletteRef.current.clientHeight;
             const { hue } = colorObject;
@@ -74,9 +74,9 @@ exports.Palette = (0, react_1.memo)(({ defaultValue, value, onChange, draggableO
             };
         },
         onDrag(info, e) {
-            draggableOptions?.onDrag?.(info, e);
-            const { top, left, paletteWidth, paletteHeight, hue } = info.startData;
-            setHandlePosition(left + info.deltaX / paletteWidth * 100, top + info.deltaY / paletteHeight * 100, hue);
+            gestureOptions?.onDrag?.(info, e);
+            const { top, left, paletteWidth, paletteHeight, hue } = info.data;
+            setHandlePosition(left + info.diff[0] / paletteWidth * 100, top + info.diff[1] / paletteHeight * 100, hue);
         }
     });
     const fitHandlePosition = () => {
@@ -108,10 +108,10 @@ exports.Palette = (0, react_1.memo)(({ defaultValue, value, onChange, draggableO
                     }
                 })(), commonAlphaItem] }));
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: palette_style_1.style, className: (0, utils_1.clsx)(palette_style_1.classes.root, props.className), children: [(0, jsx_runtime_1.jsxs)("div", { ref: paletteRef, className: palette_style_1.classes.main, style: { backgroundImage: `linear-gradient(90deg, #ffffff, ${colorObject.saturated})` }, ...draggableHandle, children: [(0, jsx_runtime_1.jsx)("div", { className: palette_style_1.classes.mask }), (0, jsx_runtime_1.jsx)("div", { className: palette_style_1.classes.handle, style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: palette_style_1.style, className: (0, utils_1.clsx)(palette_style_1.classes.root, props.className), children: [(0, jsx_runtime_1.jsxs)("div", { ref: paletteRef, className: palette_style_1.classes.main, style: { backgroundImage: `linear-gradient(90deg, #ffffff, ${colorObject.saturated})` }, ...draggableHandles, children: [(0, jsx_runtime_1.jsx)("div", { className: palette_style_1.classes.mask }), (0, jsx_runtime_1.jsx)("div", { className: palette_style_1.classes.handle, style: {
                             left: handlePosition[0] + '%',
                             top: handlePosition[1] + '%'
-                        }, ...draggableHandle })] }), (0, jsx_runtime_1.jsxs)("div", { className: palette_style_1.classes.slidersRow, children: [(0, jsx_runtime_1.jsxs)("div", { className: palette_style_1.classes.sliders, children: [(0, jsx_runtime_1.jsx)(slider_1.Slider, { ...sliderProps, className: palette_style_1.classes.hue, value: colorObject.hue / 359 * 100, onChange: hueChangeHandler }), (0, jsx_runtime_1.jsx)(slider_1.Slider, { ...sliderProps, className: palette_style_1.classes.alpha, renderRail: (_, railProps) => (0, jsx_runtime_1.jsxs)("div", { ...railProps, children: [railProps.children, (0, jsx_runtime_1.jsx)("div", { className: palette_style_1.classes.alphaMask, style: { backgroundImage: `linear-gradient(90deg, transparent, ${colorObject.saturated})` } })] }), value: colorObject.alpha * 100, onChange: alphaChangeHandler })] }), (0, jsx_runtime_1.jsx)("div", { className: palette_style_1.classes.preview, children: (0, jsx_runtime_1.jsx)("div", { className: palette_style_1.classes.previewColor, style: {
+                        }, ...draggableHandles })] }), (0, jsx_runtime_1.jsxs)("div", { className: palette_style_1.classes.slidersRow, children: [(0, jsx_runtime_1.jsxs)("div", { className: palette_style_1.classes.sliders, children: [(0, jsx_runtime_1.jsx)(slider_1.Slider, { ...sliderProps, className: palette_style_1.classes.hue, value: colorObject.hue / 359 * 100, onChange: hueChangeHandler }), (0, jsx_runtime_1.jsx)(slider_1.Slider, { ...sliderProps, className: palette_style_1.classes.alpha, renderRail: (_, railProps) => (0, jsx_runtime_1.jsxs)("div", { ...railProps, children: [railProps.children, (0, jsx_runtime_1.jsx)("div", { className: palette_style_1.classes.alphaMask, style: { backgroundImage: `linear-gradient(90deg, transparent, ${colorObject.saturated})` } })] }), value: colorObject.alpha * 100, onChange: alphaChangeHandler })] }), (0, jsx_runtime_1.jsx)("div", { className: palette_style_1.classes.preview, children: (0, jsx_runtime_1.jsx)("div", { className: palette_style_1.classes.previewColor, style: {
                                 backgroundColor: colorObject.hex,
                                 opacity: colorObject.alpha
                             } }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: palette_style_1.classes.inputRow, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "plain", color: "text", suffix: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faChevronDown_1.faChevronDown }), onClick: formatChangeHandler, children: availableFormat[activeFormat] }), renderInputs()] })] }));

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

@@ -4,6 +4,7 @@ exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const divider_style_1 = require("../divider/divider.style");
+const alert_style_1 = require("../alert/alert.style");
 exports.classes = (0, utils_1.defineInnerClasses)('picker-dialog', [
     'content',
     'selectedArea',
@@ -17,6 +18,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing }) => (0, react_1.css) `
         max-height: 100%;
         display: flex;
         flex-direction: column;
+        gap: ${spacing[3]}px;
 
         .${exports.classes.count} {
             b {
@@ -32,6 +34,10 @@ exports.style = (0, utils_1.defineCss)(({ spacing }) => (0, react_1.css) `
         .${exports.classes.list} {
             flex: 1;
             overflow: hidden auto;
+            
+            .${alert_style_1.classes.description} {
+                margin-top: 0;
+            }
         }
 
         .${exports.classes.confirm} {

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

@@ -0,0 +1 @@
+export * from './pinchable';

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./pinchable"), exports);

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

@@ -0,0 +1,33 @@
+import { ElementType, ReactElement, Ref } from 'react';
+import { OverridableProps } from '../../types';
+import { GestureOptions } from '../../utils';
+export interface PinchableRef extends HTMLDivElement {
+    zoomIn(): void;
+    zoomOut(): void;
+    zoomTo(n?: number): void;
+    reset(transition?: boolean): void;
+    rotateLeft(): void;
+    rotateRight(): void;
+    rotate(deg: number): void;
+}
+type PinchableOwnProps = {
+    ref?: Ref<PinchableRef>;
+    gestureOptions?: GestureOptions;
+    defaultScale?: number;
+    scale?: number;
+    onScaleChange?(scale: number): void;
+    /** 缩放限制，`scale`非受控模式下有效，默认为1-6 */
+    scaleLimit?: [number, number];
+    defaultTranslate?: [number, number];
+    translate?: [number, number];
+    onTranslateChange?(translate: [number, number]): void;
+    /** 平移限制，`translate`非受控模式下有效 */
+    translateLimit?: (targetX: number, targetY: number, scale: number) => [number, number];
+    defaultRotate?: number;
+    rotate?: number;
+    onRotateChange?(rotate: number): void;
+    children?: ReactElement;
+};
+export type PinchableProps<C extends ElementType = 'div'> = OverridableProps<PinchableOwnProps, C>;
+export declare const Pinchable: <C extends ElementType = "div">(props: PinchableProps<C>) => ReactElement;
+export {};