@laser-ui/components 1.5.1 → 1.6.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.6.0](https://github.com/laser-ui/laser-ui/compare/v1.5.1...v1.6.0) (2024-11-16)
+
+### Features
+
+- **components:** add `ImageLoader` ([e1f7fef](https://github.com/laser-ui/laser-ui/commit/e1f7fef8749872f9ba9769bdab3b2a0a20f41044))
+- **components:** image preview support more user-friendly gesture operation ([1993a3b](https://github.com/laser-ui/laser-ui/commit/1993a3b2d24a75270c4618114293fb33764e773f))
+
 ## [1.5.1](https://github.com/laser-ui/laser-ui/compare/v1.5.0...v1.5.1) (2024-11-01)
 
 ### Bug Fixes

package/image/Image.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
 import type { ImageProps } from './types';
 import { ImageAction } from './ImageAction';
+import { ImageLoader } from './ImageLoader';
 import { ImagePreview } from './ImagePreview';
 export declare const Image: {
     (props: ImageProps): JSX.Element | null;
+    Loader: typeof ImageLoader;
     Action: typeof ImageAction;
     Preview: typeof ImagePreview;
 };

package/image/Image.js

@@ -4,6 +4,7 @@ import { useForceUpdate } from '@laser-ui/hooks';
 import { checkNodeExist } from '@laser-ui/utils';
 import { Children, useRef } from 'react';
 import { ImageAction } from './ImageAction';
+import { ImageLoader } from './ImageLoader';
 import { ImagePreview } from './ImagePreview';
 import { CLASSES } from './vars';
 import { useComponentProps, useStyled } from '../hooks';
@@ -46,5 +47,6 @@ export const Image = (props) => {
                     forceUpdate();
                 } }))] })));
 };
+Image.Loader = ImageLoader;
 Image.Action = ImageAction;
 Image.Preview = ImagePreview;

package/image/ImageLoader.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { ImageLoaderProps } from './types';
+export declare const ImageLoader: {
+    (props: ImageLoaderProps): JSX.Element | null;
+    KEYS: (keyof HTMLImageElement)[];
+};

package/image/ImageLoader.js

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react';
+const IMGS = new Map();
+export const ImageLoader = (props) => {
+    var _a;
+    const { src, keys = ImageLoader.KEYS, children } = props;
+    const [img, setImg] = useState((_a = IMGS.get(src)) !== null && _a !== void 0 ? _a : null);
+    useEffect(() => {
+        const img = new Image();
+        img.src = src;
+        const handleLoad = () => {
+            var _a;
+            const oldImg = (_a = IMGS.get(src)) !== null && _a !== void 0 ? _a : {};
+            const newImg = {};
+            let update = false;
+            for (const key of keys) {
+                newImg[key] = img[key];
+                if (!Object.is(newImg[key], oldImg[key])) {
+                    update = true;
+                }
+            }
+            if (update) {
+                setImg(newImg);
+            }
+        };
+        if (img.complete) {
+            handleLoad();
+        }
+        else {
+            img.onload = () => {
+                handleLoad();
+            };
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [src]);
+    return img ? children(img) : null;
+};
+ImageLoader.KEYS = ['naturalWidth', 'naturalHeight'];

package/image/ImagePreview.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEvent, useImmer, useRefExtra } from '@laser-ui/hooks';
+import { useEvent, useRefExtra } from '@laser-ui/hooks';
 import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
 import KeyboardArrowLeftOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg?react';
 import KeyboardArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg?react';
@@ -22,18 +22,19 @@ import { ROOT_DATA } from '../root/vars';
 import { mergeCS } from '../utils';
 import { TTANSITION_DURING_BASE } from '../vars';
 export function ImagePreview(props) {
-    var _a, _b, _c;
-    const _d = useComponentProps('ImagePreview', props), { styleOverrides, styleProvider, list, visible, active: activeProp, defaultActive, escClosable = true, zIndex: zIndexProp, onActiveChange, onClose, afterVisibleChange } = _d, restProps = __rest(_d, ["styleOverrides", "styleProvider", "list", "visible", "active", "defaultActive", "escClosable", "zIndex", "onActiveChange", "onClose", "afterVisibleChange"]);
+    const _a = useComponentProps('ImagePreview', props), { styleOverrides, styleProvider, list, visible, active: activeProp, defaultActive, escClosable = true, zIndex: zIndexProp, onActiveChange, onClose, afterVisibleChange } = _a, restProps = __rest(_a, ["styleOverrides", "styleProvider", "list", "visible", "active", "defaultActive", "escClosable", "zIndex", "onActiveChange", "onClose", "afterVisibleChange"]);
     const namespace = useNamespace();
     const styled = useStyled(PREVIEW_CLASSES, { 'image-preview': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['image-preview'] }, styleOverrides);
     const previewRef = useRef(null);
     const windowRef = useRefExtra(() => window);
     const dataRef = useRef({
+        transform: new Map(),
+        initialScale: 1,
         prevActiveEl: null,
         eventData: {},
+        mouse: { x: 0, y: 0 },
     });
     const [active, changeActive] = useControlled(defaultActive !== null && defaultActive !== void 0 ? defaultActive : 0, activeProp, onActiveChange);
-    const activeSrc = list[active].src;
     const [offset, setOffset] = useState(() => {
         if (ROOT_DATA.windowSize.width) {
             return ~~((ROOT_DATA.windowSize.width - 108) / 120);
@@ -48,68 +49,88 @@ export function ImagePreview(props) {
     startIndex = Math.max(endIndex - offset * 2, 0);
     const [isDragging, setIsDragging] = useState(false);
     const listenDragEvent = visible && isDragging;
-    const [position, setPosition] = useImmer(new Map());
-    const activePosition = (_a = position.get(activeSrc)) !== null && _a !== void 0 ? _a : { top: 0, left: 0 };
-    const [rotate, setRotate] = useImmer(new Map());
-    const activeRotate = (_b = rotate.get(activeSrc)) !== null && _b !== void 0 ? _b : 0;
-    const [scale, setScale] = useImmer(new Map());
-    const activeScale = (_c = scale.get(activeSrc)) !== null && _c !== void 0 ? _c : 1;
     const maxZIndex = useMaxIndex(visible);
     const zIndex = !isUndefined(zIndexProp) ? zIndexProp : `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})`;
     useLockScroll(visible);
+    const setTransform = (update, scaleByClick = false) => {
+        var _a, _b;
+        const transform = (_a = dataRef.current.transform.get(active)) !== null && _a !== void 0 ? _a : { top: 0, left: 0, scale: 1, rotate: 0 };
+        const prevScale = transform.scale;
+        const prevRotate = transform.rotate;
+        update(transform);
+        dataRef.current.transform.set(active, transform);
+        if (previewRef.current) {
+            const img = document.querySelector(`[data-index="${active}"]`);
+            const imgWrapper = img.parentElement;
+            const transform = (_b = dataRef.current.transform.get(active)) !== null && _b !== void 0 ? _b : { top: 0, left: 0, scale: 1, rotate: 0 };
+            if (transform.rotate !== prevRotate) {
+                transform.top = 0;
+                transform.left = 0;
+                transform.scale = 1;
+            }
+            else if (transform.scale !== prevScale) {
+                const rect = imgWrapper.getBoundingClientRect();
+                const offsetScale = transform.scale - prevScale;
+                const offsetWidth = ((scaleByClick ? window.innerWidth / 2 : dataRef.current.mouse.x) - rect.x) / prevScale;
+                const offsetHeight = ((scaleByClick ? window.innerHeight / 2 : dataRef.current.mouse.y) - rect.y) / prevScale;
+                transform.left = transform.left - offsetScale * offsetWidth;
+                transform.top = transform.top - offsetScale * offsetHeight;
+            }
+            imgWrapper.style.transform = `translate(${transform.left}px, ${transform.top}px) scale(${transform.scale})`;
+            img.style.transform = `rotate(${transform.rotate}deg)`;
+        }
+    };
     const handleMove = () => {
-        const { initMove, currentMove, initScale, currentScale } = dataRef.current.eventData;
-        if (initMove && currentMove) {
-            const movementX = currentMove.x - initMove.x;
-            const movementY = currentMove.y - initMove.y;
-            setPosition((draft) => {
-                var _a;
-                const oldPosition = (_a = draft.get(activeSrc)) !== null && _a !== void 0 ? _a : { top: 0, left: 0 };
-                draft.set(activeSrc, {
-                    top: oldPosition.top + movementY,
-                    left: oldPosition.left + movementX,
-                });
+        const { initialMove, currentMove, initialTouches, currentTouches } = dataRef.current.eventData;
+        const updates = [];
+        if (initialMove && currentMove) {
+            const movementX = currentMove.x - initialMove.x;
+            const movementY = currentMove.y - initialMove.y;
+            updates.push((transform) => {
+                transform.top = transform.top + movementY;
+                transform.left = transform.left + movementX;
             });
-            dataRef.current.eventData.initMove = currentMove;
+            dataRef.current.eventData.initialMove = currentMove;
             dataRef.current.eventData.currentMove = undefined;
         }
-        if (initScale && currentScale) {
-            const initLength = Math.sqrt(Math.pow(initScale.x0 - initScale.x1, 2) + Math.pow(initScale.y0 - initScale.y1, 2));
-            const currentLength = Math.sqrt(Math.pow(currentScale.x0 - currentScale.x1, 2) + Math.pow(currentScale.y0 - currentScale.y1, 2));
-            setScale((draft) => {
-                var _a;
-                const oldScale = (_a = draft.get(activeSrc)) !== null && _a !== void 0 ? _a : 1;
-                draft.set(activeSrc, Math.max(oldScale + (currentLength - initLength) / 100, 1));
+        if (initialTouches && currentTouches) {
+            const initialLength = Math.sqrt(Math.pow(initialTouches.x0 - initialTouches.x1, 2) + Math.pow(initialTouches.y0 - initialTouches.y1, 2));
+            const currentLength = Math.sqrt(Math.pow(currentTouches.x0 - currentTouches.x1, 2) + Math.pow(currentTouches.y0 - currentTouches.y1, 2));
+            updates.push((transform) => {
+                transform.scale = Math.max(dataRef.current.initialScale * (currentLength / initialLength), 1);
             });
-            dataRef.current.eventData.initScale = currentScale;
-            dataRef.current.eventData.currentScale = undefined;
+            dataRef.current.eventData.currentTouches = undefined;
         }
+        setTransform((transform) => {
+            for (const update of updates) {
+                update(transform);
+            }
+        });
     };
     useEvent(windowRef, 'touchmove', (e) => {
         e.preventDefault();
         if (e.touches.length === 2) {
-            dataRef.current.eventData.initMove = dataRef.current.eventData.currentMove = undefined;
-            const newScale = {
+            dataRef.current.eventData.initialMove = dataRef.current.eventData.currentMove = undefined;
+            const touches = {
                 x0: e.touches[0].clientX,
                 y0: e.touches[0].clientY,
                 x1: e.touches[1].clientX,
                 y1: e.touches[1].clientY,
             };
-            if (isUndefined(dataRef.current.eventData.initScale)) {
-                dataRef.current.eventData.initScale = newScale;
+            if (isUndefined(dataRef.current.eventData.initialTouches)) {
+                dataRef.current.eventData.initialTouches = touches;
             }
             else {
-                dataRef.current.eventData.currentScale = newScale;
+                dataRef.current.eventData.currentTouches = touches;
             }
         }
         else {
-            dataRef.current.eventData.initScale = dataRef.current.eventData.currentScale = undefined;
             const newMove = {
                 x: e.touches[0].clientX,
                 y: e.touches[0].clientY,
             };
-            if (isUndefined(dataRef.current.eventData.initMove)) {
-                dataRef.current.eventData.initMove = newMove;
+            if (isUndefined(dataRef.current.eventData.initialMove)) {
+                dataRef.current.eventData.initialMove = newMove;
             }
             else {
                 dataRef.current.eventData.currentMove = newMove;
@@ -118,19 +139,22 @@ export function ImagePreview(props) {
         handleMove();
     }, { passive: false }, !listenDragEvent);
     useEvent(windowRef, 'mousemove', (e) => {
-        e.preventDefault();
         const newMove = {
             x: e.clientX,
             y: e.clientY,
         };
-        if (isUndefined(dataRef.current.eventData.initMove)) {
-            dataRef.current.eventData.initMove = newMove;
-        }
-        else {
-            dataRef.current.eventData.currentMove = newMove;
+        dataRef.current.mouse = newMove;
+        if (isDragging) {
+            e.preventDefault();
+            if (isUndefined(dataRef.current.eventData.initialMove)) {
+                dataRef.current.eventData.initialMove = newMove;
+            }
+            else {
+                dataRef.current.eventData.currentMove = newMove;
+            }
+            handleMove();
         }
-        handleMove();
-    }, {}, !listenDragEvent);
+    });
     useEvent(windowRef, 'mouseup', () => {
         setIsDragging(false);
     }, {}, !listenDragEvent);
@@ -198,59 +222,61 @@ export function ImagePreview(props) {
                                                     changeActive(val - 1);
                                                 }
                                             } })), _jsx("span", { children: "/" }), _jsx("span", { children: list.length })] })), _jsx("li", Object.assign({}, styled('image-preview__toolbar-rotate'), { children: _jsx(Button, { pattern: "text", icon: _jsx(Icon, { children: _jsx(Rotate90DegreesCwOutlined, {}) }), onClick: () => {
-                                            setRotate((draft) => {
-                                                var _a;
-                                                const oldRotate = (_a = draft.get(activeSrc)) !== null && _a !== void 0 ? _a : 0;
-                                                draft.set(activeSrc, oldRotate + 90);
+                                            setTransform((transform) => {
+                                                transform.rotate = transform.rotate + 90;
                                             });
                                         } }) })), _jsx("li", Object.assign({}, styled('image-preview__toolbar-zoom-out'), { children: _jsx(Button, { pattern: "text", icon: _jsx(Icon, { children: _jsx(ZoomOutOutlined, {}) }), onClick: () => {
-                                            setScale((draft) => {
-                                                var _a;
-                                                const oldScale = (_a = draft.get(activeSrc)) !== null && _a !== void 0 ? _a : 1;
-                                                draft.set(activeSrc, Math.max(oldScale / 1.3, 1));
-                                            });
-                                        } }) })), _jsx("li", Object.assign({}, styled('image-preview__toolbar-zoom'), { children: _jsx(Input.Number, Object.assign({}, styled('image-preview__toolbar-zoom-input'), { model: Math.round(activeScale * 100), min: 100, step: 10, integer: true, onModelChange: (val) => {
-                                            if (!isNull(val)) {
-                                                setScale((draft) => {
-                                                    draft.set(activeSrc, val / 100);
-                                                });
-                                            }
-                                        } })) })), _jsx("li", Object.assign({}, styled('image-preview__toolbar-zoom-in'), { children: _jsx(Button, { pattern: "text", icon: _jsx(Icon, { children: _jsx(ZoomInOutlined, {}) }), onClick: () => {
-                                            setScale((draft) => {
-                                                var _a;
-                                                const oldScale = (_a = draft.get(activeSrc)) !== null && _a !== void 0 ? _a : 1;
-                                                draft.set(activeSrc, oldScale * 1.3);
-                                            });
+                                            setTransform((transform) => {
+                                                transform.scale = Math.max(transform.scale / 1.3, 1);
+                                            }, true);
+                                        } }) })), _jsx("li", Object.assign({}, styled('image-preview__toolbar-zoom-in'), { children: _jsx(Button, { pattern: "text", icon: _jsx(Icon, { children: _jsx(ZoomInOutlined, {}) }), onClick: () => {
+                                            setTransform((transform) => {
+                                                transform.scale = transform.scale * 1.3;
+                                            }, true);
                                         } }) })), _jsx("li", Object.assign({}, styled('image-preview__toolbar-close'), { children: _jsx(Button, { pattern: "text", icon: _jsx(Icon, { children: _jsx(CloseOutlined, {}) }), onClick: () => {
                                             onClose === null || onClose === void 0 ? void 0 : onClose();
-                                        } }) }))] })), _jsx("img", Object.assign({}, list[active], mergeCS(styled('image-preview__img'), {
+                                        } }) }))] })), list.map((img, index) => (_jsx("div", Object.assign({}, mergeCS(styled('image-preview__img-wrapper'), {
                             style: {
-                                transform: `translate(${activePosition.left}px, ${activePosition.top}px) rotate(${activeRotate}deg) scale(${activeScale})`,
+                                display: index === active ? undefined : 'none',
                             },
-                        }), { tabIndex: -1, onMouseDown: (e) => {
-                                if (e.button === 0) {
-                                    e.preventDefault();
+                        }), { children: _jsx("img", Object.assign({}, img, styled('image-preview__img'), { tabIndex: -1, "data-index": index, onMouseDown: (e) => {
+                                    if (e.button === 0) {
+                                        e.preventDefault();
+                                        e.currentTarget.focus({ preventScroll: true });
+                                        dataRef.current.eventData = {};
+                                        setIsDragging(true);
+                                    }
+                                }, onMouseUp: (e) => {
+                                    if (e.button === 0) {
+                                        e.preventDefault();
+                                    }
+                                }, onTouchStart: (e) => {
+                                    var _a, _b;
                                     e.currentTarget.focus({ preventScroll: true });
                                     dataRef.current.eventData = {};
-                                    setIsDragging(true);
-                                }
-                            }, onMouseUp: (e) => {
-                                if (e.button === 0) {
-                                    e.preventDefault();
-                                }
-                            }, onTouchStart: (e) => {
-                                e.currentTarget.focus({ preventScroll: true });
-                                dataRef.current.eventData = {};
-                                setIsDragging(true);
-                            }, onTouchEnd: () => {
-                                setIsDragging(false);
-                            }, onWheel: (e) => {
-                                setScale((draft) => {
-                                    var _a;
-                                    const oldScale = (_a = draft.get(activeSrc)) !== null && _a !== void 0 ? _a : 1;
-                                    draft.set(activeSrc, e.deltaY < 0 ? oldScale + 0.1 : Math.max(oldScale - 0.1, 1));
-                                });
-                            } })), _jsx("ul", Object.assign({}, styled('image-preview__thumbnail-list'), { children: list.map((imgProps, index) => index >= startIndex &&
+                                    if (e.touches.length === 1) {
+                                        setIsDragging(true);
+                                    }
+                                    else if (e.touches.length === 2) {
+                                        dataRef.current.initialScale = (_b = (_a = dataRef.current.transform.get(active)) === null || _a === void 0 ? void 0 : _a.scale) !== null && _b !== void 0 ? _b : 1;
+                                        dataRef.current.mouse = {
+                                            x: Math.min(e.touches[0].clientX, e.touches[1].clientX) + Math.abs(e.touches[0].clientX - e.touches[1].clientX),
+                                            y: Math.min(e.touches[0].clientY, e.touches[1].clientY) + Math.abs(e.touches[0].clientY - e.touches[1].clientY),
+                                        };
+                                    }
+                                }, onTouchEnd: (e) => {
+                                    if (e.touches.length === 1) {
+                                        dataRef.current.eventData.initialTouches = dataRef.current.eventData.currentTouches = undefined;
+                                    }
+                                    else {
+                                        setIsDragging(false);
+                                    }
+                                }, onWheel: (e) => {
+                                    setTransform((transform) => {
+                                        transform.scale =
+                                            e.deltaY < 0 ? transform.scale + transform.scale * 0.1 : Math.max(transform.scale - transform.scale * 0.1, 1);
+                                    });
+                                } })) }), index))), _jsx("ul", Object.assign({}, styled('image-preview__thumbnail-list'), { children: list.map((imgProps, index) => index >= startIndex &&
                                 index <= endIndex && (_createElement("li", Object.assign({}, styled('image-preview__thumbnail', {
                                 'image-preview__thumbnail.is-active': active === index,
                             }), { key: index, onClick: () => {

package/image/types.d.ts

@@ -8,6 +8,11 @@ export interface ImageProps extends BaseProps<'image', typeof CLASSES>, Omit<Rea
     error?: React.ReactNode;
     actions?: React.ReactElement[];
 }
+export interface ImageLoaderProps<K extends keyof HTMLImageElement = 'naturalWidth' | 'naturalHeight'> {
+    src: string;
+    keys?: K[];
+    children: (img: Pick<HTMLImageElement, K>) => JSX.Element | null;
+}
 export interface ImageActionProps extends BaseProps<'image', typeof CLASSES>, React.ButtonHTMLAttributes<HTMLButtonElement> {
 }
 export interface ImagePreviewProps extends BaseProps<'image-preview', typeof PREVIEW_CLASSES>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {

package/image/vars.d.ts

@@ -14,10 +14,9 @@ export declare const PREVIEW_CLASSES: {
     'image-preview__toolbar-page-input': string;
     'image-preview__toolbar-rotate': string;
     'image-preview__toolbar-zoom-out': string;
-    'image-preview__toolbar-zoom': string;
-    'image-preview__toolbar-zoom-input': string;
     'image-preview__toolbar-zoom-in': string;
     'image-preview__toolbar-close': string;
+    'image-preview__img-wrapper': string;
     'image-preview__img': string;
     'image-preview__thumbnail-list': string;
     'image-preview__thumbnail': string;

package/image/vars.js

@@ -14,10 +14,9 @@ export const PREVIEW_CLASSES = {
     'image-preview__toolbar-page-input': '^image-preview__toolbar-page-input',
     'image-preview__toolbar-rotate': '^image-preview__toolbar-rotate',
     'image-preview__toolbar-zoom-out': '^image-preview__toolbar-zoom-out',
-    'image-preview__toolbar-zoom': '^image-preview__toolbar-zoom',
-    'image-preview__toolbar-zoom-input': '^image-preview__toolbar-zoom-input',
     'image-preview__toolbar-zoom-in': '^image-preview__toolbar-zoom-in',
     'image-preview__toolbar-close': '^image-preview__toolbar-close',
+    'image-preview__img-wrapper': '^image-preview__img-wrapper',
     'image-preview__img': '^image-preview__img',
     'image-preview__thumbnail-list': '^image-preview__thumbnail-list',
     'image-preview__thumbnail': '^image-preview__thumbnail',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laser-ui/components",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "description": "React components.",
   "keywords": [
     "ui",
@@ -40,5 +40,5 @@
     "access": "public",
     "directory": "../../dist/libs/components"
   },
-  "gitHead": "4867e61f312f16adc087c0a4ed0c3b9bdbf83afe"
+  "gitHead": "d370cebd8849f88aec086791221e6d08fbe27192"
 }