pixuireactcomponents 1.5.48 → 1.5.50

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pixuireactcomponents",
-    "version": "1.5.48",
+    "version": "1.5.50",
     "description": "pixui react components",
     "main": "index.js",
     "sideEffects": false,

package/src/components/react/app/imageViewer/imageViewer.d.ts

@@ -2,24 +2,73 @@ import { Component, CSSProperties, h } from 'preact';
 interface ImageViewerProps {
     rootId?: string;
     rootClassName?: string;
-    src: string;
+    srcs: string[];
+    currentIndex?: number;
     onClose: Function;
+    onIndexChange?: (index: number) => void;
     backgroundStyle?: CSSProperties;
     imageBoxStyle?: CSSProperties;
     imageAreaStyle?: CSSProperties;
     imageStyle?: CSSProperties;
     closeOnClickOutside?: boolean;
+    showZoomControls?: boolean;
+    showSwipeButtons?: boolean;
+    scaleFactor?: number;
+    compRef?: any;
 }
 interface ImageViewerStates {
     imageHeight: number;
     imageWidth: number;
     reCalSize: boolean;
+    scale: number;
+    offset: {
+        x: number;
+        y: number;
+    };
+    isDragging: boolean;
+    isSwipping: boolean;
+    startX: number;
+    startY: number;
+    startOffset: {
+        x: number;
+        y: number;
+    };
+    touchStartDistance?: number;
+    touchStartScale?: number;
+    currentIndex: number;
+    touchStartX: number;
+    touchStartY: number;
+    swipingDirection: 'left' | 'right' | null;
+    swipeOffset: number;
+    isAtDefaultScale: boolean;
 }
 export declare class ImageViewer extends Component<ImageViewerProps, ImageViewerStates> {
+    private imageRef;
+    private isScaling;
+    private imageAreaPxWidth;
+    private imageAreaPxHeight;
+    private swipeThreshold;
+    private opreateEnd;
     constructor(props: ImageViewerProps);
+    componentWillReceiveProps(nextProps: ImageViewerProps): void;
+    componentDidMount(): void;
     onClose: () => void;
     onBlock: (event: any) => void;
     handleImageLoad: (event: any) => void;
+    goToIndex: (index: number) => void;
+    goPrevious: () => void;
+    goNext: () => void;
+    imageAutoDock: () => void;
+    handleMouseDown: (e: any) => void;
+    handleMouseMove: (e: any) => void;
+    handleMouseUp: () => void;
+    handleTouchStart: (e: any) => void;
+    handleTouchMove: (e: any) => void;
+    handleTouchEnd: (e: any) => void;
+    zoomOut: () => void;
+    zoomIn: () => void;
+    resetZoom: (e: any) => void;
+    getImageList: () => h.JSX.Element[];
     render(): h.JSX.Element;
 }
 export {};

package/src/components/react/app/imageViewer/imageViewer.js

@@ -13,94 +13,464 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-import { Component, h } from 'preact';
-{ /* {isViewerOpen && (
-        <ImageViewer
-          src={images}
-          currentIndex={currentImage}
-          onClose={closeImageViewer}
-          disableScroll={false}
-          backgroundStyle={{
-            backgroundColor: "rgba(0,0,0,0.9)"
-          }}
-          closeOnClickOutside={true}
-        />
-      )} */
-}
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { Component, createRef, h } from 'preact';
 var ImageViewer = /** @class */ (function (_super) {
     __extends(ImageViewer, _super);
+    // 在构造函数中初始化新状态
     function ImageViewer(props) {
         var _this = _super.call(this, props) || this;
+        _this.imageRef = createRef();
+        _this.isScaling = false;
+        _this.imageAreaPxWidth = 0;
+        _this.imageAreaPxHeight = 0;
+        _this.swipeThreshold = 400; // 滑动阈值
+        _this.opreateEnd = false;
         _this.onClose = function () {
             _this.props.onClose();
         };
         _this.onBlock = function (event) {
             event.stopPropagation();
         };
-        /* 这种方式无法获取到div宽高，获取到的值都是0 */
-        // componentDidMount(){
-        //     let imageArea = document.getElementById("imageArea");
-        //     let y = imageArea?.clientHeight;
-        //     let x = imageArea?.clientWidth;
-        //     console.log(x,y);
-        // }
         _this.handleImageLoad = function (event) {
-            // console.log(`img`, event.target.width, event.target.height);
             var imageX = event.target.width;
             var imageY = event.target.height;
-            var imageArea = document.getElementById("imageArea");
+            var imageArea = document.getElementById('imageArea');
             var imageAreaY = imageArea === null || imageArea === void 0 ? void 0 : imageArea.clientHeight;
             var imageAreaX = imageArea === null || imageArea === void 0 ? void 0 : imageArea.clientWidth;
-            if (typeof imageAreaY !== 'undefined' && typeof imageAreaX !== 'undefined')
+            if (imageAreaX && imageAreaY) {
                 if (imageAreaX < imageX || imageAreaY < imageY) {
                     var scaleFactorX = imageAreaX / imageX;
                     var scaleFactorY = imageAreaY / imageY;
-                    var scaleFactor = 1;
-                    if (scaleFactorX > scaleFactorY)
-                        scaleFactor = scaleFactorY;
-                    else
-                        scaleFactor = scaleFactorX;
-                    // console.log(`需要缩放，缩放系数为${scaleFactor}`);
+                    var scaleFactor = Math.min(scaleFactorX, scaleFactorY);
                     _this.setState({
                         imageHeight: imageY * scaleFactor,
                         imageWidth: imageX * scaleFactor,
                         reCalSize: true,
-                    }, function () {
-                        // console.log(`状态改变后${this.state.imageHeight},${this.state.imageWidth},${this.state.reCalSize}`)
                     });
                 }
+                else {
+                    _this.setState({
+                        imageHeight: imageY,
+                        imageWidth: imageX,
+                        reCalSize: true,
+                    });
+                }
+            }
+        };
+        // 新增：切换图片
+        _this.goToIndex = function (index) {
+            console.log("goToIndex swipOffset0:", _this.state.swipeOffset, index);
+            var validIndex = Math.max(0, Math.min(index, _this.props.srcs.length - 1));
+            _this.setState({
+                currentIndex: validIndex,
+                swipeOffset: -validIndex * _this.imageAreaPxWidth,
+                swipingDirection: null
+            }, function () {
+                console.log("goToIndex swipOffset:", _this.state.swipeOffset);
+                // 移动端测试时发现ue通过按钮切换图片会有无法切换的异常（pxIDE模拟器无）
+                // 故重复刷新一次swipeOffset状态，解决异常
+                _this.setState({
+                    scale: 1,
+                    offset: { x: 0, y: 0 },
+                    isAtDefaultScale: true,
+                    swipeOffset: -validIndex * _this.imageAreaPxWidth,
+                });
+            });
+            // 调用回调函数
+            if (_this.props.onIndexChange) {
+                _this.props.onIndexChange(index);
+            }
+        };
+        // 切换到上一张
+        _this.goPrevious = function () {
+            _this.goToIndex(_this.state.currentIndex - 1);
+        };
+        // 切换到下一张
+        _this.goNext = function () {
+            _this.goToIndex(_this.state.currentIndex + 1);
+        };
+        _this.imageAutoDock = function () {
+            // 计算图片的顶点位置判断是否不贴边
+            //获取image宽高
+            var element = document.getElementById("imageView_".concat(_this.state.currentIndex));
+            var imageWidth = 0, imageHeight = 0;
+            if (element) {
+                var rect = element.getBoundingClientRect();
+                imageWidth = rect.width;
+                imageHeight = rect.height;
+            }
+            // 只需要计算图片中心点到边界的距离即可判断是否越界
+            var centerX = 0.5 * _this.imageAreaPxWidth + _this.state.offset.x;
+            var centerY = 0.5 * _this.imageAreaPxHeight + _this.state.offset.y;
+            var halfWidth = 0.5 * imageWidth;
+            var halfHeight = 0.5 * imageHeight;
+            var targetX = _this.state.offset.x;
+            var targetY = _this.state.offset.y;
+            var isWidthLarger = imageWidth > _this.imageAreaPxWidth;
+            var isHeightLarger = imageHeight > _this.imageAreaPxHeight;
+            // 判断左右边界
+            if (centerX - halfWidth > 0 && isWidthLarger) {
+                targetX = (imageWidth - _this.imageAreaPxWidth) / 2;
+            }
+            else if (centerX + halfWidth < _this.imageAreaPxWidth && isWidthLarger) {
+                targetX = -(imageWidth - _this.imageAreaPxWidth) / 2;
+            }
+            // 判断上下边界
+            if (centerY - halfHeight > 0 && isHeightLarger) {
+                targetY = (imageHeight - _this.imageAreaPxHeight) / 2;
+            }
+            else if (centerY + halfHeight < _this.imageAreaPxHeight && isHeightLarger) {
+                targetY = -(imageHeight - _this.imageAreaPxHeight) / 2;
+            }
+            // 
+            if (!isWidthLarger || !isHeightLarger) {
+                targetX = 0;
+                targetY = 0;
+            }
+            if ((targetX != _this.state.offset.x || targetY != _this.state.offset.y) && _this.state.scale > 1) {
+                _this.setState({
+                    offset: {
+                        x: targetX,
+                        y: targetY,
+                    },
+                });
+            }
+        };
+        // 修改handleMouseDown：仅当放大时允许拖动
+        _this.handleMouseDown = function (e) {
+            console.log('handleMouseDown', _this.state.scale);
+            e.preventDefault();
+            // 防止开始拖动时，因时序问题误触发位移
+            setTimeout(function () {
+                _this.setState({
+                    isDragging: _this.state.scale > 1 ? true : false,
+                    isSwipping: _this.state.scale === 1 ? true : false,
+                    startX: e.clientX,
+                    startY: e.clientY,
+                    startOffset: __assign({}, _this.state.offset),
+                });
+            }, 50);
+        };
+        _this.handleMouseMove = function (e) {
+            if ((!_this.state.isDragging &&
+                !_this.state.isSwipping) ||
+                _this.isScaling)
+                return;
+            // console.log('handleMouseMove', this.isScaling);
+            var dx = e.clientX - _this.state.startX;
+            var dy = e.clientY - _this.state.startY;
+            // 如果主要水平移动，则视为滑动操作
+            if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 10 && _this.state.isSwipping) {
+                e.preventDefault();
+                _this.setState({
+                    swipingDirection: dx > 0 ? 'right' : 'left',
+                    swipeOffset: -_this.state.currentIndex * _this.imageAreaPxWidth + dx
+                });
+            }
+            else if (_this.state.isDragging) {
+                // 否则视为拖动操作
+                _this.setState({
+                    offset: {
+                        x: _this.state.startOffset.x + dx,
+                        y: _this.state.startOffset.y + dy,
+                    },
+                });
+            }
+        };
+        _this.handleMouseUp = function () {
+            console.log('handleMouseUp');
+            // 防止拖动结束后，因时序问题误触发位移
+            setTimeout(function () {
+                _this.isScaling = false;
+            }, 10);
+            _this.setState({
+                isDragging: false,
+                isSwipping: false,
+            });
+            // 如果正在进行滑动操作
+            if (_this.state.swipingDirection) {
+                // 如果滑动距离超过阈值，则切换到下一张/上一张
+                // 计算滑动距离：
+                var swipeDistance = _this.state.swipeOffset - (-_this.state.currentIndex * _this.imageAreaPxWidth);
+                console.log("handleMouseUp:swipeDistance", swipeDistance);
+                if (Math.abs(swipeDistance) > _this.swipeThreshold) {
+                    console.log("handleMouseUp:", _this.state.swipeOffset, _this.state.swipingDirection);
+                    if (_this.state.swipingDirection === 'left') {
+                        _this.goToIndex(_this.state.currentIndex + 1);
+                    }
+                    else {
+                        _this.goToIndex(_this.state.currentIndex - 1);
+                    }
+                    _this.opreateEnd = true;
+                    setTimeout(function () {
+                        _this.opreateEnd = false;
+                    }, 100);
+                    return;
+                }
+            }
+            _this.setState({
+                swipeOffset: -_this.state.currentIndex * _this.imageAreaPxWidth,
+                swipingDirection: null,
+            });
+            // 结束拖动后图片要自动返回边界位置
+            _this.imageAutoDock();
+        };
+        // 修改：处理触摸开始事件，支持滑动检测
+        _this.handleTouchStart = function (e) {
+            if (e.touches.length === 1) {
+                // e.preventDefault();
+                _this.handleMouseDown(e.touches[0]);
+            }
+            else if (e.touches.length === 2) {
+                _this.isScaling = true;
+                var touch1 = e.touches[0];
+                var touch2 = e.touches[1];
+                var distance = Math.sqrt(Math.pow(touch2.clientX - touch1.clientX, 2) + Math.pow(touch2.clientY - touch1.clientY, 2));
+                _this.setState({
+                    touchStartDistance: distance,
+                    touchStartScale: _this.state.scale,
+                });
+            }
+        };
+        // 修改handleTouchMove：添加滑动检测逻辑
+        _this.handleTouchMove = function (e) {
+            if (e.touches.length === 1) {
+                _this.handleMouseMove(e.touches[0]);
+            }
+            else if (e.touches.length === 2) {
+                var touch1 = e.touches[0];
+                var touch2 = e.touches[1];
+                var distance = Math.sqrt(Math.pow(touch2.clientX - touch1.clientX, 2) + Math.pow(touch2.clientY - touch1.clientY, 2));
+                if (_this.state.touchStartDistance && _this.state.touchStartScale && _this.isScaling && !_this.state.swipingDirection) {
+                    var scaleChange = distance / _this.state.touchStartDistance;
+                    var newScale = Math.max(0.1, Math.min(_this.state.touchStartScale * scaleChange, 5));
+                    _this.setState({ scale: newScale });
+                }
+            }
+        };
+        // 修改handleTouchEnd：添加自动回弹和滑动检测
+        _this.handleTouchEnd = function (e) {
+            if (e.touches.length === 0) {
+                _this.handleMouseUp();
+                // 自动回弹逻辑：当缩放小于0.9时自动回到默认尺寸
+                setTimeout(function () {
+                    if (_this.state.scale < 0.9) {
+                        _this.setState({
+                            scale: 1,
+                            offset: { x: 0, y: 0 },
+                            isAtDefaultScale: true
+                        });
+                    }
+                }, 10);
+            }
+        };
+        // 修改zoomOut：添加缩放限制
+        _this.zoomOut = function () {
+            // 默认尺寸时禁用缩小
+            if (_this.state.isAtDefaultScale)
+                return;
+            var isDefaultSize = true;
+            _this.setState(function (prevState) {
+                var newScale = Math.max(prevState.scale - _this.props.scaleFactor, 0.1);
+                // 检测是否回到默认尺寸
+                var isNowDefault = Math.abs(newScale - 1) < 0.05;
+                isDefaultSize = isNowDefault;
+                var nextState;
+                if (isNowDefault) {
+                    nextState = {
+                        scale: 1,
+                        offset: { x: 0, y: 0 },
+                        isAtDefaultScale: true
+                    };
+                }
+                else {
+                    nextState = {
+                        scale: newScale,
+                        isAtDefaultScale: isNowDefault
+                    };
+                }
+                return nextState;
+            }, function () {
+                if (!isDefaultSize) {
+                    _this.imageAutoDock();
+                }
+            });
+        };
+        // 修改zoomIn：更新状态标记
+        _this.zoomIn = function () {
+            _this.setState(function (prevState) { return ({
+                scale: Math.min(prevState.scale + _this.props.scaleFactor, 5),
+                isAtDefaultScale: false // 放大后不再是默认尺寸
+            }); });
+        };
+        // 修改resetZoom：更新状态标记
+        _this.resetZoom = function (e) {
+            e.stopPropagation();
+            _this.setState({
+                scale: 1,
+                offset: { x: 0, y: 0 },
+                isAtDefaultScale: true
+            }, function () {
+                // 重复设置一次状态，解决偶现重置后图片位置漂移
+                _this.setState({
+                    scale: 1,
+                    offset: { x: 0, y: 0 },
+                    isAtDefaultScale: true
+                });
+            });
+        };
+        _this.getImageList = function () {
+            // 滑动动画
+            var swipeStyle = {
+                transform: "translateX(".concat(_this.state.swipeOffset, "px)"),
+                transition: (_this.state.isSwipping) ? 'none' : 'transform 0.3s ease',
+            };
+            return _this.props.srcs.map(function (src, index) {
+                var currentSrc = _this.props.srcs[index];
+                return (h("div", { id: "imageArea", style: __assign(__assign({ overflow: 'hidden' }, _this.props.imageAreaStyle), swipeStyle) },
+                    _this.state.reCalSize && (h("img", { ref: _this.imageRef, id: "imageView_".concat(_this.state.currentIndex), style: __assign({ transform: "translate(".concat(_this.state.offset.x, "px, ").concat(_this.state.offset.y, "px) scale(").concat(_this.state.scale, ")"), transition: (_this.state.isDragging) ? 'none' : 'transform 0.3s ease' }, _this.props.imageStyle), src: currentSrc, width: _this.state.imageWidth, height: _this.state.imageHeight, onClick: _this.onBlock, onDragStart: function (e) { return e.preventDefault(); } })),
+                    !_this.state.reCalSize && (h("img", { onLoad: _this.handleImageLoad, style: { display: 'none' }, src: currentSrc }))));
+            });
         };
         _this.state = {
             imageHeight: 0,
             imageWidth: 0,
             reCalSize: false,
+            scale: 1,
+            offset: { x: 0, y: 0 },
+            isDragging: false,
+            isSwipping: false,
+            startX: 0,
+            startY: 0,
+            startOffset: { x: 0, y: 0 },
+            currentIndex: props.currentIndex || 0, // 初始化为传入的索引或0
+            touchStartX: 0,
+            touchStartY: 0,
+            swipingDirection: null,
+            swipeOffset: 0,
+            isAtDefaultScale: true, // 初始为默认尺寸
         };
         return _this;
     }
+    ImageViewer.prototype.componentWillReceiveProps = function (nextProps) {
+        // 如果传入的索引变化，更新当前索引
+        if (typeof nextProps.currentIndex !== 'undefined' &&
+            nextProps.currentIndex !== this.state.currentIndex) {
+            this.setState({
+                currentIndex: nextProps.currentIndex,
+                reCalSize: false, // 触发重新计算尺寸
+                scale: 1, // 重置缩放
+                offset: { x: 0, y: 0 } // 重置偏移
+            });
+        }
+    };
+    ImageViewer.prototype.componentDidMount = function () {
+        var _this = this;
+        //获取imageArea宽度
+        var element = document.getElementById('imageArea');
+        if (element) {
+            var rect = element.getBoundingClientRect();
+            console.log('宽度:', rect.width);
+            this.imageAreaPxWidth = rect.width;
+            this.imageAreaPxHeight = rect.height;
+            this.swipeThreshold = this.imageAreaPxWidth * 0.4;
+        }
+        if (this.props.compRef) {
+            this.props.compRef.current = {
+                zoomIn: function () { _this.zoomIn(); },
+                zoomOut: function () { _this.zoomOut(); },
+                goNext: function () { _this.goNext(); },
+                goPrevious: function () { _this.goPrevious(); },
+            };
+        }
+    };
+    // 在render方法中，根据状态禁用缩小按钮
     ImageViewer.prototype.render = function () {
-        //@ts-ignore
-        // this.props.imageAreaStyle.backgroundImage=`url(${this.props.src})`; //为backgroundimage选择src
-        // //@ts-ignore
-        // this.props.imageStyle.width=this.state.imageWidth;
-        // //@ts-ignore
-        // this.props.imageStyle.height=this.state.imageHeight;
-        // if (this.state.reCalSize == true && this.state.forceupdate == true) {
-        //     console.log('强制刷新')
-        //     this.setState({
-        //         forceupdate: false,
-        //     })
-        // }
-        return (h("div", { style: this.props.backgroundStyle, onClick: this.onClose, id: this.props.rootId, className: this.props.rootClassName },
-            h("div", { style: this.props.imageBoxStyle },
-                h("div", { id: "imageArea", style: this.props.imageAreaStyle },
-                    this.state.reCalSize &&
-                        h("img", { style: this.props.imageStyle, src: this.props.src, width: this.state.imageWidth, height: this.state.imageHeight, onClick: this.onBlock }), /* 用于获取原图片大小 */
-                    !this.state.reCalSize &&
-                        h("img", { onLoad: this.handleImageLoad, style: { display: 'hidden' }, src: this.props.src })))));
+        var _a = this.props, _b = _a.showZoomControls, showZoomControls = _b === void 0 ? true : _b, _c = _a.showSwipeButtons, showSwipeButtons = _c === void 0 ? true : _c, srcs = _a.srcs;
+        var _d = this.state, currentIndex = _d.currentIndex, swipeOffset = _d.swipeOffset;
+        var showLeftButton = showSwipeButtons && currentIndex > 0;
+        var showRightButton = showSwipeButtons && currentIndex < srcs.length - 1;
+        // 根据是否默认尺寸禁用缩小按钮
+        var disableZoomOut = this.state.isAtDefaultScale;
+        return (h("div", { style: __assign({ overflow: 'hidden' }, this.props.backgroundStyle), onClick: this.props.closeOnClickOutside ? this.onClose : undefined, id: this.props.rootId, className: this.props.rootClassName, onTouchStart: this.handleTouchStart, onTouchMove: this.handleTouchMove, onTouchEnd: this.handleTouchEnd, onMouseDown: this.handleMouseDown, onMouseMove: this.handleMouseMove, onMouseUp: this.handleMouseUp, onMouseLeave: this.handleMouseUp },
+            h("div", { style: __assign({ overflow: 'hidden' }, this.props.imageBoxStyle) }, this.getImageList()),
+            showZoomControls && (h("div", { style: zoomControlsStyle },
+                h("div", { style: zoomButtonStyle, onClick: this.zoomIn }, "+"),
+                h("div", { style: __assign(__assign({}, zoomButtonStyle), { opacity: disableZoomOut ? 0.5 : 1 }), onClick: disableZoomOut ? undefined : this.zoomOut }, "-"),
+                h("div", { style: zoomButtonStyle, onClick: this.resetZoom }, "\u21BA"))),
+            showLeftButton && (h("div", { style: leftSwipeButtonStyle, onClick: this.goPrevious }, "<")),
+            showRightButton && (h("div", { style: rightSwipeButtonStyle, onClick: this.goNext }, ">"))));
     };
     return ImageViewer;
 }(Component));
 export { ImageViewer };
+// 左右滑动按钮样式
+var swipeButtonStyle = {
+    position: 'absolute',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    width: '50px',
+    height: '50px',
+    borderRadius: '50%',
+    background: 'rgba(0,0,0,0.5)',
+    color: 'white',
+    border: 'none',
+    fontSize: '24px',
+    cursor: 'pointer',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 100,
+};
+var leftSwipeButtonStyle = __assign(__assign({}, swipeButtonStyle), { left: '20px' });
+var rightSwipeButtonStyle = __assign(__assign({}, swipeButtonStyle), { right: '20px' });
+// 图片计数器样式
+var counterStyle = {
+    position: 'absolute',
+    top: '20px',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    background: 'rgba(0,0,0,0.5)',
+    color: 'white',
+    padding: '5px 15px',
+    borderRadius: '20px',
+    fontSize: '16px',
+    zIndex: 100,
+};
+// 缩放控制按钮样式
+var zoomControlsStyle = {
+    position: 'absolute',
+    bottom: '20px',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    display: 'flex',
+    gap: '10px',
+    zIndex: 100,
+};
+var zoomButtonStyle = {
+    width: '40px',
+    height: '40px',
+    borderRadius: '50%',
+    background: 'rgba(0,0,0,0.5)',
+    color: 'white',
+    border: 'none',
+    fontSize: '20px',
+    cursor: 'pointer',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+};
 var backgroundStyleDefault = {
     position: 'absolute',
     width: '100%',
@@ -110,40 +480,42 @@ var backgroundStyleDefault = {
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    zIndex: 99,
-    // top: 0,
-    // right: 0,
-    // bottom: 0,
-    // left: 0,
+    zIndex: 50,
 };
 var imageBoxStyleDefault = {
-    width: '100%',
-    height: '100%',
+    width: '80%',
+    height: '80%',
     display: 'flex',
     flexDirection: 'row',
-    justifyContent: 'center',
+    justifyContent: 'start',
     alignItems: 'center',
+    backgroundColor: 'rgba(0,0,255,0.5)'
 };
 var imageAreaStyleDefault = {
-    width: '80%',
+    // 使用max-min夹逼，防止父级flex布局压缩宽度
+    minWidth: '100%',
+    maxWidth: '100%',
     height: '80%',
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    // backgroundSize: 'contain',
-    // backgroundRepeat:'no-repeat',
-    // backgroundPosition:'center'
+    backgroundColor: 'rgba(255,0,0,0.5)',
+    border: '1px solid black',
 };
 var imageStyleDefault = {
     maxWidth: '100%',
     maxHeight: '100%',
-    // objectFit: 'contain', //pixui不支持object-fit属性
+    transition: 'transform 0.1s ease',
 };
 ImageViewer.defaultProps = {
     backgroundStyle: backgroundStyleDefault,
     imageBoxStyle: imageBoxStyleDefault,
     imageAreaStyle: imageAreaStyleDefault,
     imageStyle: imageStyleDefault,
-    closeOnClickOutside: true,
+    closeOnClickOutside: false,
+    showZoomControls: false,
+    showSwipeButtons: false, // 默认显示滑动按钮
+    srcs: [], // 默认空数组
+    scaleFactor: 0.5,
 };

package/src/components/react/app/slider/Slider.d.ts

@@ -18,7 +18,7 @@ export interface SliderProps {
     vertical?: boolean;
     range?: boolean | range;
     onChangeStart?: (value: any) => void;
-    onChange?: (value: any) => void;
+    onChange?: (value: any, isClick?: any) => void;
     onChangeComplete?: (value: any) => void;
     element?: sliderElement;
 }

package/src/components/react/app/slider/Slider.js

@@ -39,21 +39,21 @@ var defaultVerticalRail = {
     height: '400',
     border: '0px solid #000',
     borderRadius: '5',
-    top: 200
+    top: 200,
 };
 var defaultTrack = {
     backgroundColor: '#91caff',
     width: '400',
     height: '10',
     border: '0px solid #000',
-    borderRadius: '5'
+    borderRadius: '5',
 };
 var defaultVerticalTrack = {
     backgroundColor: '#91caff',
     width: '10',
     height: '400',
     border: '0px solid #000',
-    borderRadius: '5'
+    borderRadius: '5',
 };
 var defaultHandle = {
     backgroundColor: '#1677ff',
@@ -68,7 +68,7 @@ export var Slider = function (props) {
             return {
                 rail: vertical ? defaultVerticalRail : defaultRail,
                 track: vertical ? defaultVerticalTrack : defaultTrack,
-                handle: defaultHandle
+                handle: defaultHandle,
             };
         }
         else {
@@ -126,13 +126,18 @@ export var Slider = function (props) {
     var setValueByPos = function (x, y, status) {
         if (refRail.current) {
             var rect = refRail.current.getBoundingClientRect();
-            var newPercent = vertical ? ((rect.y + refRail.current.clientHeight - y) / refRail.current.clientHeight) : (x - rect.x) / refRail.current.clientWidth;
+            var newPercent = vertical
+                ? (rect.y + refRail.current.clientHeight - y) / refRail.current.clientHeight
+                : (x - rect.x) / refRail.current.clientWidth;
             var newValue = trimValue(newPercent * (max - min));
             if (newPercent != percent) {
                 setPercent(newValue / (max - min));
                 if (status == 'move') {
                     onChange && onChange(newValue);
                 }
+                if (status == 'click') {
+                    onChange && onChange(newValue, true);
+                }
             }
             // start和end一定要发
             if (status == 'start') {
@@ -143,6 +148,20 @@ export var Slider = function (props) {
             }
         }
     };
+    var handleRailClick = function (event) {
+        if (!draging.current && refRail.current) {
+            var rect = refRail.current.getBoundingClientRect();
+            var newPercent = vertical
+                ? (rect.y + refRail.current.clientHeight - event.clientY) / refRail.current.clientHeight
+                : (event.clientX - rect.x) / refRail.current.clientWidth;
+            var newValue = trimValue(newPercent * (max - min));
+            // 触发事件
+            onChangeStart && onChangeStart(newValue);
+            setPercent(newValue / (max - min));
+            onChange && onChange(newValue);
+            onChangeComplete && onChangeComplete(newValue);
+        }
+    };
     var trimValue = function (value) {
         var newValue = Math.max(min, Math.min(value, max));
         if (range !== null && typeof range !== 'boolean') {
@@ -150,11 +169,17 @@ export var Slider = function (props) {
             newValue = Math.max(minCount, Math.min(newValue, maxCount));
         }
         if (step !== undefined) {
-            var beforeCalcuValue = (Math.round((newValue - min) / step) * step) + min;
+            var beforeCalcuValue = Math.round((newValue - min) / step) * step + min;
             newValue = parseFloat(beforeCalcuValue.toFixed(decimalPlaces));
         }
         return newValue;
     };
+    var onRailClick = function (event) {
+        event.stopPropagation();
+        if (!draging.current) { // 避免与drag冲突
+            setValueByPos(event.clientX, event.clientY, 'click');
+        }
+    };
     var onDragStart = function (event) {
         event.stopPropagation();
         draging.current = true;
@@ -179,7 +204,7 @@ export var Slider = function (props) {
     var elementStyleOrClass = getElementStyleOrClass();
     var handleStyle = __assign(__assign({}, (typeof elementStyleOrClass.handle === 'object' ? elementStyleOrClass.handle : undefined)), (vertical ? { top: -handleSize / 2 } : { left: '100%', marginLeft: -handleSize / 2 }));
     return (h("div", { id: id, className: rootClassName, style: __assign({}, rowCenterCenter) },
-        h("div", { ref: refRail, className: typeof elementStyleOrClass.rail === 'string' ? elementStyleOrClass.rail : '', style: __assign({}, (typeof elementStyleOrClass.rail === 'object' ? elementStyleOrClass.rail : undefined)), draggable: true, onDragStart: onDragStart, onDrag: onDrag, onDragEnd: onDragEnd }, refRail.current &&
+        h("div", { ref: refRail, className: typeof elementStyleOrClass.rail === 'string' ? elementStyleOrClass.rail : '', style: __assign({}, (typeof elementStyleOrClass.rail === 'object' ? elementStyleOrClass.rail : undefined)), draggable: true, onDragStart: onDragStart, onDrag: onDrag, onDragEnd: onDragEnd, onClick: onRailClick }, refRail.current &&
             h("div", { className: typeof elementStyleOrClass.track === 'string' ? elementStyleOrClass.track : '', style: trackStyle },
                 h("div", { ref: handleRef, className: typeof elementStyleOrClass.handle === 'string' ? elementStyleOrClass.handle : '', style: __assign(__assign({}, handleStyle), { position: 'absolute' }) })))));
 };

package/src/components/react/app/videoPlayer/VideoPlayer.d.ts

@@ -26,5 +26,7 @@ export interface VideoPlayerProps {
     videoDuration?: number;
     compRef?: any;
     maskComponent?: preact.ComponentChild | (() => preact.ComponentChild);
+    onClick?: (showUI: boolean) => void;
+    openLog?: boolean;
 }
 export declare const VideoPlayer: (props: VideoPlayerProps) => h.JSX.Element;

package/src/components/react/app/videoPlayer/VideoPlayer.js

@@ -39,17 +39,35 @@ var VideoStatus;
 })(VideoStatus || (VideoStatus = {}));
 var defaultIconStyle = [
     {
-        position: 'relative', left: '-45%', top: '42%', width: '5%', paddingTop: '5%', backgroundImage: 'url(https://game.gtimg.cn/images/gamelet/cp/pixui-components/new_video_play.png)', backgroundSize: '100% 100%'
+        position: 'relative',
+        left: '-45%',
+        top: '42%',
+        width: '5%',
+        paddingTop: '5%',
+        backgroundImage: 'url(https://game.gtimg.cn/images/gamelet/cp/pixui-components/new_video_play.png)',
+        backgroundSize: '100% 100%',
     },
     {
-        position: 'relative', left: '-45%', top: '42%', width: '5%', paddingTop: '5%', backgroundImage: 'url(https://game.gtimg.cn/images/gamelet/cp/pixui-components/new_video_pause.png)', backgroundSize: '100% 100%'
+        position: 'relative',
+        left: '-45%',
+        top: '42%',
+        width: '5%',
+        paddingTop: '5%',
+        backgroundImage: 'url(https://game.gtimg.cn/images/gamelet/cp/pixui-components/new_video_pause.png)',
+        backgroundSize: '100% 100%',
     },
     {
-        position: 'relative', left: '-45%', top: '42%', width: '5%', paddingTop: '5%', backgroundImage: 'url(https://game.gtimg.cn/images/gamelet/cp/pixui-components/video_loading.png)', backgroundSize: '100% 100%'
+        position: 'relative', left: '-45%', top: '42%', width: '5%', paddingTop: '5%', backgroundImage: 'url(https://game.gtimg.cn/images/gamelet/cp/pixui-components/new_video_loading.png)', backgroundSize: '100% 100%'
     },
     {
-        position: 'relative', left: '-45%', top: '42%', width: '5%', paddingTop: '5%', backgroundImage: 'url(https://game.gtimg.cn/images/gamelet/cp/pixui-components/new_video_reload.png)', backgroundSize: '100% 100%'
-    }
+        position: 'relative',
+        left: '-45%',
+        top: '42%',
+        width: '5%',
+        paddingTop: '5%',
+        backgroundImage: 'url(https://game.gtimg.cn/images/gamelet/cp/pixui-components/new_video_reload.png)',
+        backgroundSize: '100% 100%',
+    },
 ];
 var defaultSliderStyle = {
     rail: {
@@ -58,7 +76,7 @@ var defaultSliderStyle = {
         height: '30%',
         border: '0px solid #000',
         borderRadius: '10',
-        left: '0%'
+        left: '0%',
     },
     track: {
         position: 'relative',
@@ -66,7 +84,7 @@ var defaultSliderStyle = {
         width: '100%',
         height: '100%',
         border: '0px solid #000',
-        borderRadius: '10'
+        borderRadius: '10',
     },
     handle: {
         position: 'absolute',
@@ -76,29 +94,28 @@ var defaultSliderStyle = {
         height: '200%',
     },
 };
-var openLog = false;
-var videoLog = function () {
-    var msg = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        msg[_i] = arguments[_i];
-    }
-    if (openLog) {
-        console.log.apply(console, __spreadArray(['VideoPlayer: '], msg, false));
-    }
-};
 export var VideoPlayer = function (props) {
-    var rootId = props.rootId, rootClassName = props.rootClassName, _a = props.playUrl, playUrl = _a === void 0 ? '' : _a, _b = props.autoPlay, autoPlay = _b === void 0 ? true : _b, playEvent = props.playEvent, iconElement = props.iconElement, _c = props.hideSliderDuration, hideSliderDuration = _c === void 0 ? 3000 : _c, sliderElement = props.sliderElement, videoDuration = props.videoDuration, compRef = props.compRef;
+    var rootId = props.rootId, rootClassName = props.rootClassName, _a = props.playUrl, playUrl = _a === void 0 ? '' : _a, _b = props.autoPlay, autoPlay = _b === void 0 ? true : _b, playEvent = props.playEvent, iconElement = props.iconElement, _c = props.hideSliderDuration, hideSliderDuration = _c === void 0 ? 3000 : _c, sliderElement = props.sliderElement, videoDuration = props.videoDuration, compRef = props.compRef, onClick = props.onClick, _d = props.openLog, openLog = _d === void 0 ? false : _d;
     var isStreaming = !playUrl.split('?')[0].endsWith('.mp4');
     var refVideo = useRef(null);
-    var _d = useState(VideoStatus.Loading), videoStatus = _d[0], setVideoStatus = _d[1];
-    var _e = useState(0), currentTime = _e[0], setCurrentTime = _e[1];
-    var _f = useState(0), totalTime = _f[0], setTotalTime = _f[1];
-    var _g = useState(false), showSlider = _g[0], setShowSlider = _g[1];
-    var _h = useState(1.0), currentVolume = _h[0], setCurrentVolume = _h[1]; //视频音量范围0.0~1.0
-    var _j = useState(false), isMuted = _j[0], setIsMuted = _j[1];
+    var _e = useState(VideoStatus.Loading), videoStatus = _e[0], setVideoStatus = _e[1];
+    var _f = useState(0), currentTime = _f[0], setCurrentTime = _f[1];
+    var _g = useState(0), totalTime = _g[0], setTotalTime = _g[1];
+    var _h = useState(false), showSlider = _h[0], setShowSlider = _h[1];
+    var _j = useState(1.0), currentVolume = _j[0], setCurrentVolume = _j[1]; //视频音量范围0.0~1.0
+    var _k = useState(false), isMuted = _k[0], setIsMuted = _k[1];
     var sliderTimmer = useRef(null);
     var rootRef = useRef();
     var isDragingRef = useRef(false);
+    var videoLog = function () {
+        var msg = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            msg[_i] = arguments[_i];
+        }
+        if (openLog) {
+            console.log.apply(console, __spreadArray(['VideoPlayer: '], msg, false));
+        }
+    };
     // 在开发setCurrentTime功能时，发现seek视频后立刻pause, 视频会在onpause回调执行后，
     // 又执行一遍onwating, onplaying回调，导致videoStatus被错误设置成播放状态。
     // 暂时使用isPauseSeekingRef来标记是否在暂停状态下setCurrentTime触发，在onplaying中将状态设回Pause
@@ -135,6 +152,8 @@ export var VideoPlayer = function (props) {
         updatePlayTimeFunRef.current = updatePlayTime;
     });
     useEffect(function () {
+        // refVideo.current.muted = true;
+        // refVideo.current.volume = 0.0;
         // 如果是直播流则不需要处理进度条
         if (!isStreaming) {
             updatePlayTimeFunRef.current = updatePlayTime;
@@ -163,14 +182,20 @@ export var VideoPlayer = function (props) {
         clearTimeout(sliderTimmer.current);
         refVideo.current.pause();
     };
-    var onSliderDrag = function (value) {
-        // console.warn('isDragingRef: ', isDragingRef.current)
+    var onSliderDrag = function (value, isClick) {
+        if (isClick && !isDragingRef.current) {
+            onSliderDragStart();
+        }
         if (isDragingRef.current) {
-            console.log('value: ', value, getDuration());
+            videoLog('value: ', value, getDuration());
             var totalTime_1 = value * getDuration();
             var playSeconds = Math.floor(totalTime_1 / 1000 + 0.5);
             videoLog('onSliderDrag, set currentTime:', playSeconds);
             setCurrentTime(playSeconds);
+            // 如果是点击操作，立即完成
+            if (isClick) {
+                completeSliderAction(playSeconds);
+            }
         }
     };
     var setShowUI = function (show, direct) {
@@ -182,18 +207,25 @@ export var VideoPlayer = function (props) {
     };
     // 结束拖就3秒隐藏Bar
     var onSliderDragEnd = function (value) {
-        console.log('onSliderDragEnd======');
+        videoLog('onSliderDragEnd======');
         if (isDragingRef.current) {
-            isDragingRef.current = false;
-            videoLog('onDragEnd-----------------, ', value * getDuration());
-            if (hideSliderDuration > 0) {
-                clearTimeout(sliderTimmer.current);
-                sliderTimmer.current = setTimeout(function () {
-                    setShowUI(false);
-                }, hideSliderDuration);
-            }
-            refVideo.current.seek(currentTime);
-            refVideo.current.play();
+            var totalTime_2 = value * getDuration();
+            var playSeconds = Math.floor(totalTime_2 / 1000 + 0.5);
+            completeSliderAction(playSeconds);
+        }
+    };
+    var completeSliderAction = function (targetSeconds) {
+        videoLog('完成动作, 跳转到:', targetSeconds);
+        refVideo.current.seek(targetSeconds);
+        refVideo.current.play();
+        // 重置拖拽状态
+        isDragingRef.current = false;
+        // 设置UI隐藏计时器
+        if (hideSliderDuration > 0) {
+            clearTimeout(sliderTimmer.current);
+            sliderTimmer.current = setTimeout(function () {
+                setShowUI(false);
+            }, hideSliderDuration);
         }
     };
     var onplaying = function () {
@@ -213,6 +245,7 @@ export var VideoPlayer = function (props) {
     };
     var onpause = function () {
         videoLog('-----------onpause');
+        console.log('-----------onPause');
         setVideoStatus(VideoStatus.Pause);
         (playEvent === null || playEvent === void 0 ? void 0 : playEvent.onPause) && playEvent.onPause();
     };
@@ -246,9 +279,12 @@ export var VideoPlayer = function (props) {
             setShowUI(true, true);
         }
         updateSliderHideTimmer();
+        if (props.onClick) {
+            props.onClick(showSlider);
+        }
     };
     var onFirstFrame = function () {
-        console.warn('onFirstFrame');
+        videoLog('onFirstFrame');
         (playEvent === null || playEvent === void 0 ? void 0 : playEvent.onFirstFrame) && playEvent.onFirstFrame();
     };
     var switchPlayState = function () {
@@ -309,7 +345,7 @@ export var VideoPlayer = function (props) {
             totalTime: totalTime,
             isUIShow: showSlider,
             currentVolume: currentVolume,
-            isMuted: isMuted
+            isMuted: isMuted,
         };
     }
     // videoLog('currentTime', currentTime, 'totalTime', totalTime);
@@ -344,20 +380,21 @@ export var VideoPlayer = function (props) {
         }
     };
     var iconStyleOrClass = getIconStyleOrClass(videoStatus);
+    console.log('refresh iconStyleOrClass ' + videoStatus);
     return (h("div", { id: rootId, className: rootClassName, ref: rootRef },
         h("video", { ref: refVideo, src: playUrl, "object-fit": "no", autoPlay: autoPlay, style: { width: '100%', height: '100%' }, onPlaying: onplaying, onPlay: onplaying, onError: onerror, onEnded: onended, onPause: onpause, onWaiting: onwaiting, onLoadStart: function () {
-                console.warn('onloadstart');
+                videoLog('onloadstart');
             }, onLoadedData: function () {
-                console.warn('onloadeddata');
+                videoLog('onloadeddata');
             }, onCanPlay: onplaying, 
             //@ts-ignore
             onfirstframe: onFirstFrame, controls: true }),
-        props.maskComponent && (typeof props.maskComponent === 'function' ? props.maskComponent() : props.maskComponent),
         h("div", { style: screenClickerStyle, onClick: function (e) {
                 videoLog('screenClickerStyle click');
                 e.stopPropagation();
                 onScreenClick();
             } },
+            props.maskComponent && (typeof props.maskComponent === 'function' ? props.maskComponent() : props.maskComponent),
             h("div", { className: typeof iconStyleOrClass === 'string' ? iconStyleOrClass : '', style: __assign(__assign({}, (typeof iconStyleOrClass === 'object' ? iconStyleOrClass : undefined)), { visibility: showSlider ? 'visible' : 'hidden' }), onClick: function (e) {
                     e.stopPropagation();
                     switchPlayState();
@@ -373,7 +410,7 @@ export var VideoPlayer = function (props) {
                 position: 'absolute',
                 bottom: '3%',
                 right: '2%',
-                visibility: showSlider ? 'visible' : 'hidden'
+                visibility: showSlider ? 'visible' : 'hidden',
             } },
             h(Slider, { element: sliderElement != undefined ? sliderElement : defaultSliderStyle, min: 0, max: 1, step: 0.001, value: totalTime > 0 ? currentTime / totalTime : 0, onChangeStart: onSliderDragStart, onChange: onSliderDrag, onChangeComplete: onSliderDragEnd }),
             h("div", { className: typeof (sliderElement === null || sliderElement === void 0 ? void 0 : sliderElement.time) === 'string' ? sliderElement.time : '', style: __assign(__assign({}, (typeof (sliderElement === null || sliderElement === void 0 ? void 0 : sliderElement.time) === 'object' ? sliderElement.time : null)), { flexShrink: 0, right: '1%' }) },