flex-image-viewer 1.0.0

package/dist/components/Image.js

@@ -0,0 +1,148 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { useImageSource } from "../hooks/useImageSource.js";
+const MIN_SCALE = 0.1;
+const MAX_SCALE = 8;
+const DEFAULT_WHEEL_ZOOM_STEP = 0.1;
+function Image(props) {
+    const { file, angle = 0, scale: oriScale = 1, getSrc, isAdapt = true, onAdapt, wheelZoom = true, wheelZoomStep = DEFAULT_WHEEL_ZOOM_STEP, onWheelZoom, onOrientation, disableRightClick = false, style } = props;
+    const containerRef = useRef(null);
+    const internalImgRef = useRef(null);
+    const scaleRef = useRef(oriScale);
+    const wheelZoomStepRef = useRef(wheelZoomStep);
+    const onWheelZoomRef = useRef(onWheelZoom);
+    const [scale, setScale] = useState(oriScale);
+    const [isLoaded, setIsLoaded] = useState(false);
+    const [hasError, setHasError] = useState(false);
+    const { src, loading, orientation } = useImageSource(file, getSrc);
+    useEffect(()=>{
+        setIsLoaded(false);
+        setHasError(false);
+    }, [
+        src
+    ]);
+    useEffect(()=>{
+        if (void 0 !== orientation) onOrientation?.(orientation);
+    }, [
+        orientation,
+        onOrientation
+    ]);
+    useEffect(()=>{
+        scaleRef.current = scale;
+    }, [
+        scale
+    ]);
+    useEffect(()=>{
+        wheelZoomStepRef.current = wheelZoomStep;
+    }, [
+        wheelZoomStep
+    ]);
+    useEffect(()=>{
+        onWheelZoomRef.current = onWheelZoom;
+    }, [
+        onWheelZoom
+    ]);
+    useEffect(()=>{
+        if (!isAdapt) return void setScale(oriScale);
+        const container = containerRef.current;
+        const img = internalImgRef.current;
+        const calculateScale = ()=>{
+            if (!img || !container) return;
+            const containerWidth = container.clientWidth;
+            const containerHeight = container.clientHeight;
+            const imgWidth = img.naturalWidth;
+            const imgHeight = img.naturalHeight;
+            if (!imgWidth || !imgHeight || !containerWidth || !containerHeight) return;
+            const normalizedAngle = Math.abs(angle % 360);
+            const isRotated90Or270 = 90 === normalizedAngle || 270 === normalizedAngle;
+            const effectiveImgWidth = isRotated90Or270 ? imgHeight : imgWidth;
+            const effectiveImgHeight = isRotated90Or270 ? imgWidth : imgHeight;
+            const scaleX = containerWidth / effectiveImgWidth;
+            const scaleY = containerHeight / effectiveImgHeight;
+            const newScale = Math.min(scaleX, scaleY);
+            setScale(newScale);
+            onAdapt?.(newScale);
+            setIsLoaded(true);
+        };
+        calculateScale();
+        let resizeObserver = null;
+        if (container && "u" > typeof ResizeObserver) {
+            resizeObserver = new ResizeObserver(calculateScale);
+            resizeObserver.observe(container);
+        }
+        if (img) img.addEventListener('load', calculateScale);
+        return ()=>{
+            if (resizeObserver) resizeObserver.disconnect();
+            if (img) img.removeEventListener('load', calculateScale);
+        };
+    }, [
+        angle,
+        src,
+        isAdapt,
+        oriScale,
+        onAdapt
+    ]);
+    useEffect(()=>{
+        const container = containerRef.current;
+        if (!container || !wheelZoom) return;
+        const handleWheel = (e)=>{
+            e.preventDefault();
+            const delta = e.deltaY < 0 ? 1 : -1;
+            const step = wheelZoomStepRef.current;
+            const nextScale = Math.max(MIN_SCALE, Math.min(MAX_SCALE, scaleRef.current + delta * step));
+            if (nextScale !== scaleRef.current) {
+                setScale(nextScale);
+                onWheelZoomRef.current?.(nextScale);
+            }
+        };
+        container.addEventListener('wheel', handleWheel, {
+            passive: false
+        });
+        return ()=>{
+            container.removeEventListener('wheel', handleWheel);
+        };
+    }, [
+        wheelZoom
+    ]);
+    const handleLoad = ()=>{
+        setIsLoaded(true);
+        setHasError(false);
+    };
+    const handleError = ()=>{
+        setHasError(true);
+        setIsLoaded(true);
+    };
+    return /*#__PURE__*/ jsxs("figure", {
+        ref: containerRef,
+        className: "flex-image-viewer-container",
+        style: style,
+        children: [
+            /*#__PURE__*/ jsx("img", {
+                ref: internalImgRef,
+                className: "flex-image-viewer-image",
+                src: src,
+                alt: file?.alt,
+                onLoad: handleLoad,
+                onError: handleError,
+                onContextMenu: (e)=>{
+                    if (disableRightClick) e.preventDefault();
+                },
+                style: {
+                    transform: `rotate(${angle}deg) scale(${scale})`,
+                    opacity: isLoaded && !hasError ? 1 : 0
+                }
+            }),
+            loading && /*#__PURE__*/ jsx("div", {
+                className: "flex-image-viewer-loading"
+            }),
+            hasError && /*#__PURE__*/ jsx("div", {
+                className: "flex-image-viewer-error",
+                style: {
+                    position: 'absolute'
+                }
+            })
+        ]
+    });
+}
+const components_Image = Image;
+export default components_Image;

package/dist/components/Modal.js

@@ -0,0 +1,98 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from "react";
+import react_dom from "react-dom";
+const getContainer = null;
+function getFocusableElements(container) {
+    const selector = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+    return Array.from(container.querySelectorAll(selector));
+}
+function Modal(props) {
+    const { visible, onClose, children, getContainer: getContainerProp } = props;
+    const modalRef = useRef(null);
+    const previousFocusRef = useRef(null);
+    const getContainerElement = useCallback(()=>{
+        if (!getContainerProp) return document.body;
+        if ('string' == typeof getContainerProp) {
+            const el = document.querySelector(getContainerProp);
+            if (!el || !(el instanceof HTMLElement)) {
+                console.warn(`Modal: 选择器 "${getContainerProp}" 未找到有效元素，已回退到 body`);
+                return document.body;
+            }
+            return el;
+        }
+        if ('function' == typeof getContainerProp) {
+            const result = getContainerProp();
+            if (result && 1 === result.nodeType) return result;
+            console.warn('Modal: getContainer 函数返回无效 DOM 元素，已回退到 body');
+            return document.body;
+        }
+        if (getContainerProp instanceof HTMLElement && 1 === getContainerProp.nodeType) return getContainerProp;
+        console.warn('Modal: getContainer 参数无效，已回退到 body');
+        return document.body;
+    }, [
+        getContainerProp
+    ]);
+    useEffect(()=>{
+        if (visible) {
+            previousFocusRef.current = document.activeElement;
+            document.body.style.overflow = 'hidden';
+            const timer = setTimeout(()=>{
+                if (modalRef.current) {
+                    const focusable = getFocusableElements(modalRef.current);
+                    if (focusable.length > 0) focusable[0].focus();
+                    else modalRef.current.focus();
+                }
+            }, 0);
+            return ()=>{
+                clearTimeout(timer);
+            };
+        }
+        document.body.style.overflow = '';
+        if (previousFocusRef.current) {
+            previousFocusRef.current.focus();
+            previousFocusRef.current = null;
+        }
+    }, [
+        visible
+    ]);
+    useEffect(()=>{
+        const handleKeyDown = (e)=>{
+            if ('Escape' === e.key && visible && onClose) return void onClose();
+            if ('Tab' === e.key && visible && modalRef.current) {
+                const focusable = getFocusableElements(modalRef.current);
+                if (0 === focusable.length) return void e.preventDefault();
+                const first = focusable[0];
+                const last = focusable[focusable.length - 1];
+                if (e.shiftKey) {
+                    if (document.activeElement === first) {
+                        e.preventDefault();
+                        last.focus();
+                    }
+                } else if (document.activeElement === last) {
+                    e.preventDefault();
+                    first.focus();
+                }
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return ()=>{
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [
+        visible,
+        onClose
+    ]);
+    if (!visible) return null;
+    const targetElement = getContainerElement();
+    const modalContent = /*#__PURE__*/ jsx("div", {
+        ref: modalRef,
+        className: "flex-image-viewer-modal",
+        role: "dialog",
+        "aria-modal": "true",
+        tabIndex: -1,
+        children: children
+    });
+    return /*#__PURE__*/ react_dom.createPortal(modalContent, targetElement);
+}
+export default Modal;
+export { getContainer };

package/dist/components/PercentSelect.js

@@ -0,0 +1,160 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { min } from "es-toolkit/compat";
+import { Icon } from "./index.js";
+const MAX_SCALE = 800;
+const DEFAULT_PERCENT_OPTIONS = Array.from({
+    length: 8
+}, (_, i)=>MAX_SCALE - 100 * i).concat([
+    75,
+    50,
+    25,
+    10
+]);
+const unit = MAX_SCALE / 100;
+const getScaleValue = (sliderValue)=>Math.round(sliderValue * unit);
+const getSliderValue = (scale)=>Math.round(scale / unit);
+function PercentSelect({ value = 100, onChange, disabled = false, className = '', style, options = DEFAULT_PERCENT_OPTIONS }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [inputValue, setInputValue] = useState(value.toString());
+    const [isEditing, setIsEditing] = useState(false);
+    const selectRef = useRef(null);
+    const inputRef = useRef(null);
+    const optionList = options.map((opt)=>({
+            value: opt,
+            label: `${opt}%`
+        }));
+    useEffect(()=>{
+        if (!isEditing) setInputValue(value.toString());
+    }, [
+        value,
+        isEditing
+    ]);
+    useEffect(()=>{
+        const handleClickOutside = (event)=>{
+            if (selectRef.current && !selectRef.current.contains(event.target)) {
+                setIsOpen(false);
+                if (isEditing) handleInputBlur();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return ()=>document.removeEventListener('mousedown', handleClickOutside);
+    }, [
+        isEditing,
+        inputValue,
+        value
+    ]);
+    const handleOptionClick = (optionValue)=>{
+        if (disabled) return;
+        onChange?.(optionValue);
+        setInputValue(optionValue.toString());
+        setIsOpen(false);
+        setIsEditing(false);
+    };
+    const handleInputChange = (e)=>{
+        const val = e.target.value;
+        if ('' === val || /^\d*\.?\d*$/.test(val)) {
+            const num = min([
+                parseFloat(val),
+                MAX_SCALE
+            ]);
+            setInputValue(void 0 === num ? value.toString() : num.toString());
+        }
+    };
+    const handleInputBlur = ()=>{
+        const num = min([
+            parseFloat(inputValue),
+            MAX_SCALE
+        ]);
+        if (void 0 === num || isNaN(num) || num <= 0 || '' === inputValue) setInputValue(value.toString());
+        else {
+            if (num !== value) onChange?.(num);
+            setInputValue(value.toString());
+        }
+        setIsEditing(false);
+    };
+    const handleInputKeyDown = (e)=>{
+        if ('Enter' === e.key) {
+            handleInputBlur();
+            inputRef.current?.blur();
+        }
+    };
+    const handleToggle = (e)=>{
+        if (disabled) return;
+        e.stopPropagation();
+        setIsOpen(!isOpen);
+    };
+    const handleInputClick = (e)=>{
+        if (disabled) return;
+        e.stopPropagation();
+        if (!isEditing) {
+            setIsEditing(true);
+            setTimeout(()=>{
+                inputRef.current?.select();
+            }, 0);
+        }
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        ref: selectRef,
+        className: `flex-image-viewer-percent-select ${isOpen ? 'flex-image-viewer-percent-select-open' : ''} ${disabled ? 'flex-image-viewer-percent-select-disabled' : ''} ${className}`,
+        style: style,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex-image-viewer-percent-select-control",
+                children: [
+                    /*#__PURE__*/ jsx("input", {
+                        ref: inputRef,
+                        type: "text",
+                        readOnly: !isEditing,
+                        className: `flex-image-viewer-percent-select-input ${isEditing ? 'flex-image-viewer-percent-select-input-editing' : ''}`,
+                        value: isEditing ? inputValue : value.toString(),
+                        onChange: handleInputChange,
+                        onBlur: handleInputBlur,
+                        onKeyDown: handleInputKeyDown,
+                        onClick: handleInputClick,
+                        disabled: disabled,
+                        placeholder: "缩放比例"
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: "flex-image-viewer-percent-select-suffix",
+                        children: "%"
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: `flex-image-viewer-percent-select-arrow ${isOpen ? 'flex-image-viewer-percent-select-arrow-open' : ''}`,
+                        onClick: handleToggle,
+                        children: /*#__PURE__*/ jsx(Icon, {
+                            className: "flex-image-viewer-percent-select-arrow-icon",
+                            name: "Down"
+                        })
+                    })
+                ]
+            }),
+            isOpen && /*#__PURE__*/ jsx("div", {
+                className: "flex-image-viewer-percent-select-dropdown flex-image-viewer-percent-select-dropdown-up",
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "flex-image-viewer-percent-select-options",
+                    children: optionList.map((option)=>{
+                        const isSelected = option.value === value;
+                        return /*#__PURE__*/ jsxs("div", {
+                            className: `flex-image-viewer-percent-select-option ${isSelected ? 'flex-image-viewer-percent-select-option-selected' : ''}`,
+                            onClick: ()=>handleOptionClick(option.value),
+                            children: [
+                                option.label,
+                                isSelected && /*#__PURE__*/ jsx("span", {
+                                    className: "flex-image-viewer-percent-select-check",
+                                    children: /*#__PURE__*/ jsx(Icon, {
+                                        className: "flex-image-viewer-percent-select-check-icon",
+                                        name: "Check"
+                                    })
+                                })
+                            ]
+                        }, option.value);
+                    })
+                })
+            })
+        ]
+    });
+}
+const components_PercentSelect = PercentSelect;
+export default components_PercentSelect;
+export { getScaleValue, getSliderValue };

package/dist/components/ThumbnailIamge.js

@@ -0,0 +1,65 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { useImageSource } from "../hooks/useImageSource.js";
+function ThumbnailImage(props) {
+    const { file, angle = 0, getThumbnail } = props;
+    const containerRef = useRef(null);
+    const imgRef = useRef(null);
+    const [scale, setScale] = useState(1);
+    const [isLoaded, setIsLoaded] = useState(false);
+    const { src, loading } = useImageSource(file, getThumbnail);
+    useEffect(()=>{
+        const img = imgRef.current;
+        if (!img || !containerRef.current) return;
+        const container = containerRef.current;
+        const calculateScale = ()=>{
+            const containerWidth = container.clientWidth;
+            const containerHeight = container.clientHeight;
+            const imgWidth = img.naturalWidth || img.width;
+            const imgHeight = img.naturalHeight || img.height;
+            if (!imgWidth || !imgHeight || !containerWidth || !containerHeight) return;
+            const normalizedAngle = Math.abs(angle % 360);
+            const isRotated90Or270 = 90 === normalizedAngle || 270 === normalizedAngle;
+            const effectiveImgWidth = isRotated90Or270 ? imgHeight : imgWidth;
+            const effectiveImgHeight = isRotated90Or270 ? imgWidth : imgHeight;
+            const scaleX = containerWidth / effectiveImgWidth;
+            const scaleY = containerHeight / effectiveImgHeight;
+            const newScale = Math.min(scaleX, scaleY);
+            setScale(newScale);
+            setIsLoaded(true);
+        };
+        calculateScale();
+        img.addEventListener('load', calculateScale);
+        return ()=>{
+            img.removeEventListener('load', calculateScale);
+        };
+    }, [
+        angle,
+        src
+    ]);
+    const handleError = ()=>{
+        setIsLoaded(true);
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        ref: containerRef,
+        className: "flex-image-viewer-thumbnail-container",
+        children: [
+            /*#__PURE__*/ jsx("img", {
+                ref: imgRef,
+                className: "flex-image-viewer-thumbnail-image",
+                src: src,
+                alt: file?.alt,
+                onError: handleError,
+                style: {
+                    transform: `rotate(${angle}deg) scale(${scale})`,
+                    opacity: isLoaded ? 1 : 0
+                }
+            }),
+            loading && /*#__PURE__*/ jsx("div", {
+                className: "flex-image-viewer-loading"
+            })
+        ]
+    });
+}
+const ThumbnailIamge = ThumbnailImage;
+export default ThumbnailIamge;

package/dist/components/index.js

@@ -0,0 +1,6 @@
+export { default as Icon } from "./Icon/index.js";
+export { default as Image } from "./Image.js";
+export { default as Modal } from "./Modal.js";
+export { default as PercentSelect } from "./PercentSelect.js";
+export { default as ActionItem } from "./ActionItem.js";
+export { default as BaseActions } from "./BaseActions.js";

package/dist/context/ViewerContext.js

@@ -0,0 +1,208 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useReducer } from "react";
+const ZOOM_STEP = 0.1;
+const MIN_SCALE = 0.1;
+const MAX_SCALE = 8;
+const ViewerStateContext = /*#__PURE__*/ createContext(null);
+const ViewerDispatchContext = /*#__PURE__*/ createContext(null);
+function useViewerState() {
+    const context = useContext(ViewerStateContext);
+    if (!context) throw new Error('useViewerState must be used within a ViewerProvider');
+    return context;
+}
+function useViewerDispatch() {
+    const context = useContext(ViewerDispatchContext);
+    if (!context) throw new Error('useViewerDispatch must be used within a ViewerProvider');
+    return context;
+}
+function viewerReducer(state, action) {
+    switch(action.type){
+        case 'SET_CURRENT_INDEX':
+            return {
+                ...state,
+                currentIndex: action.payload
+            };
+        case 'PREV_IMAGE':
+            {
+                const total = state.filesLength;
+                if (total <= 1) return state;
+                let index = state.currentIndex - 1;
+                if (state.loop && index < 1) index = total;
+                else if (index < 1) index = 1;
+                return {
+                    ...state,
+                    currentIndex: index
+                };
+            }
+        case 'NEXT_IMAGE':
+            {
+                const total = state.filesLength;
+                if (total <= 1) return state;
+                let index = state.currentIndex + 1;
+                if (state.loop && index > total) index = 1;
+                else if (index > total) index = total;
+                return {
+                    ...state,
+                    currentIndex: index
+                };
+            }
+        case 'SET_LOOP':
+            return {
+                ...state,
+                loop: action.payload
+            };
+        case 'ROTATE_LEFT':
+            {
+                const { index } = action.payload;
+                const newOptions = state.imageOptions.map((opt, i)=>i === index ? {
+                        ...opt,
+                        angle: (opt.angle - 90 + 360) % 360
+                    } : opt);
+                return {
+                    ...state,
+                    imageOptions: newOptions
+                };
+            }
+        case 'ROTATE_RIGHT':
+            {
+                const { index } = action.payload;
+                const newOptions = state.imageOptions.map((opt, i)=>i === index ? {
+                        ...opt,
+                        angle: (opt.angle + 90) % 360
+                    } : opt);
+                return {
+                    ...state,
+                    imageOptions: newOptions
+                };
+            }
+        case 'SET_ZOOM':
+            {
+                const { index, scale } = action.payload;
+                const newOptions = state.imageOptions.map((opt, i)=>i === index ? {
+                        ...opt,
+                        scale,
+                        isAdapt: false
+                    } : opt);
+                return {
+                    ...state,
+                    imageOptions: newOptions
+                };
+            }
+        case 'ZOOM_IN':
+            {
+                const { index, step = ZOOM_STEP } = action.payload;
+                const newOptions = state.imageOptions.map((opt, i)=>i === index ? {
+                        ...opt,
+                        scale: Math.min(MAX_SCALE, opt.scale + step),
+                        isAdapt: false
+                    } : opt);
+                return {
+                    ...state,
+                    imageOptions: newOptions
+                };
+            }
+        case 'ZOOM_OUT':
+            {
+                const { index, step = ZOOM_STEP } = action.payload;
+                const newOptions = state.imageOptions.map((opt, i)=>i === index ? {
+                        ...opt,
+                        scale: Math.max(MIN_SCALE, opt.scale - step),
+                        isAdapt: false
+                    } : opt);
+                return {
+                    ...state,
+                    imageOptions: newOptions
+                };
+            }
+        case 'ADAPT_ZOOM':
+            {
+                const { index, scale } = action.payload;
+                const newOptions = state.imageOptions.map((opt, i)=>i === index ? {
+                        ...opt,
+                        scale,
+                        isAdapt: true
+                    } : opt);
+                return {
+                    ...state,
+                    imageOptions: newOptions
+                };
+            }
+        case 'CLEAR_IMAGE':
+            {
+                const { index, angle, scale } = action.payload;
+                const newOptions = state.imageOptions.map((opt, i)=>i === index ? {
+                        ...opt,
+                        angle,
+                        scale,
+                        isAdapt: true
+                    } : opt);
+                return {
+                    ...state,
+                    imageOptions: newOptions
+                };
+            }
+        case 'TOGGLE_INFO':
+            return {
+                ...state,
+                infoVisible: !state.infoVisible
+            };
+        case 'TOGGLE_THUMBNAIL':
+            return {
+                ...state,
+                thumbnailVisible: !state.thumbnailVisible
+            };
+        case 'INITIALIZE_FILES':
+            {
+                const { files } = action.payload;
+                const count = files.length;
+                return {
+                    ...state,
+                    filesLength: count,
+                    files,
+                    imageOptions: Array.from({
+                        length: count
+                    }, (_, i)=>({
+                            angle: files[i]?.angle ?? 0,
+                            scale: files[i]?.scale ?? 1,
+                            isAdapt: true
+                        }))
+                };
+            }
+        case 'UPDATE_FILE':
+            {
+                const { index, file } = action.payload;
+                const newFiles = state.files.map((f, i)=>i === index ? {
+                        ...f,
+                        ...file
+                    } : f);
+                return {
+                    ...state,
+                    files: newFiles
+                };
+            }
+        default:
+            return state;
+    }
+}
+function createInitialState(initialCurrent = 1, initialFilesLength = 0) {
+    return {
+        currentIndex: initialCurrent,
+        filesLength: initialFilesLength,
+        imageOptions: [],
+        infoVisible: false,
+        thumbnailVisible: false,
+        loop: false,
+        files: []
+    };
+}
+function ViewerProvider({ children, initialCurrent = 1, initialFilesLength = 0 }) {
+    const [state, dispatch] = useReducer(viewerReducer, createInitialState(initialCurrent, initialFilesLength));
+    return /*#__PURE__*/ jsx(ViewerStateContext.Provider, {
+        value: state,
+        children: /*#__PURE__*/ jsx(ViewerDispatchContext.Provider, {
+            value: dispatch,
+            children: children
+        })
+    });
+}
+export { ViewerDispatchContext, ViewerProvider, ViewerStateContext, useViewerDispatch, useViewerState, viewerReducer };