react-photo-view - npm Package Compare versions

Comparing version 0.1.2 to 0.1.4

lib/components/Spinner.d.ts

@@ -1,2 +0,2 @@
-declare const _default: import("../../../../../../../Users/liumy/Documents/workspace/react-photo-view/node_modules/styled-components").StyledComponentClass<{
+declare const _default: import("../../node_modules/styled-components").StyledComponentClass<{
     className?: string | undefined;
@@ -3,0 +3,0 @@ }, any, Pick<{

lib/Photo.js

@@ -31,3 +31,3 @@ 'use strict';
 
-var _templateObject = (0, _taggedTemplateLiteral3['default'])(['\n  will-change: transform;\n  cursor: -webkit-grab;\n\n  &:active {\n    cursor: -webkit-grabbing;\n  }\n'], ['\n  will-change: transform;\n  cursor: -webkit-grab;\n\n  &:active {\n    cursor: -webkit-grabbing;\n  }\n']);
+var _templateObject = (0, _taggedTemplateLiteral3['default'])(['\n  will-change: transform;\n  cursor: grab;\n\n  &:active {\n    cursor: grabbing;\n  }\n'], ['\n  will-change: transform;\n  cursor: grab;\n\n  &:active {\n    cursor: grabbing;\n  }\n']);
 
@@ -34,0 +34,0 @@ var _react = require('react');

lib/PhotoSlider.d.ts

@@ -21,4 +21,4 @@ import React from 'react';
     touched: boolean;
-    lastPageX: number | undefined;
-    lastPageY: number | undefined;
+    lastClientX: number | undefined;
+    lastClientY: number | undefined;
     backdropOpacity: number;
@@ -37,7 +37,7 @@ photoScale: number;
     handleResize: () => void;
-    handleReachVerticalMove: (pageX: any, pageY: any) => void;
-    handleReachHorizontalMove: (pageX: any) => void;
-    handleReachUp: (pageX: any, pageY: any) => void;
+    handleReachVerticalMove: (clientX: any, clientY: any) => void;
+    handleReachHorizontalMove: (clientX: any) => void;
+    handleReachUp: (clientX: any, clientY: any) => void;
     render(): JSX.Element | null;
 }
 export {};

lib/PhotoSlider.js

@@ -60,16 +60,16 @@ 'use strict';
                     translateX: -(innerWidth + _variables.horizontalOffset) * photoIndex,
-                    lastPageX: undefined,
-                    lastPageY: undefined
+                    lastClientX: undefined,
+                    lastClientY: undefined
                 };
             });
         };
-        _this.handleReachVerticalMove = function (pageX, pageY) {
+        _this.handleReachVerticalMove = function (clientX, clientY) {
             _this.setState(function (_ref2) {
-                var lastPageY = _ref2.lastPageY,
+                var lastClientY = _ref2.lastClientY,
                     backdropOpacity = _ref2.backdropOpacity;
 
-                if (lastPageY === undefined) {
+                if (lastClientY === undefined) {
                     return {
                         touched: true,
-                        lastPageY: pageY,
+                        lastClientY: clientY,
                         backdropOpacity: backdropOpacity,
@@ -79,12 +79,12 @@ photoScale: 1
                 }
-                var offsetPageY = Math.abs(pageY - lastPageY);
+                var offsetClientY = Math.abs(clientY - lastClientY);
                 return {
                     touched: true,
-                    lastPageY: lastPageY,
-                    backdropOpacity: Math.max(Math.min(_variables.defaultOpacity, _variables.defaultOpacity - offsetPageY / 100 / 2), 0),
-                    photoScale: Math.max(Math.min(1, 1 - offsetPageY / 100 / 10), 0.6)
+                    lastClientY: lastClientY,
+                    backdropOpacity: Math.max(Math.min(_variables.defaultOpacity, _variables.defaultOpacity - offsetClientY / 100 / 2), 0),
+                    photoScale: Math.max(Math.min(1, 1 - offsetClientY / 100 / 10), 0.6)
                 };
             });
         };
-        _this.handleReachHorizontalMove = function (pageX) {
+        _this.handleReachHorizontalMove = function (clientX) {
             var _window2 = window,
@@ -94,22 +94,22 @@ innerWidth = _window2.innerWidth;
             _this.setState(function (_ref3) {
-                var lastPageX = _ref3.lastPageX,
+                var lastClientX = _ref3.lastClientX,
                     translateX = _ref3.translateX,
                     photoIndex = _ref3.photoIndex;
 
-                if (lastPageX === undefined) {
+                if (lastClientX === undefined) {
                     return {
                         touched: true,
-                        lastPageX: pageX,
+                        lastClientX: clientX,
                         translateX: translateX
                     };
                 }
-                var offsetPageX = pageX - lastPageX;
+                var offsetClientX = clientX - lastClientX;
                 return {
                     touched: true,
-                    lastPageX: lastPageX,
-                    translateX: -(innerWidth + _variables.horizontalOffset) * photoIndex + offsetPageX
+                    lastClientX: lastClientX,
+                    translateX: -(innerWidth + _variables.horizontalOffset) * photoIndex + offsetClientX
                 };
             });
         };
-        _this.handleReachUp = function (pageX, pageY) {
+        _this.handleReachUp = function (clientX, clientY) {
             var _window3 = window,
@@ -123,10 +123,10 @@ innerWidth = _window3.innerWidth,
             var _this$state = _this.state,
-                _this$state$lastPageX = _this$state.lastPageX,
-                lastPageX = _this$state$lastPageX === undefined ? pageX : _this$state$lastPageX,
-                _this$state$lastPageY = _this$state.lastPageY,
-                lastPageY = _this$state$lastPageY === undefined ? pageY : _this$state$lastPageY,
+                _this$state$lastClien = _this$state.lastClientX,
+                lastClientX = _this$state$lastClien === undefined ? clientX : _this$state$lastClien,
+                _this$state$lastClien2 = _this$state.lastClientY,
+                lastClientY = _this$state$lastClien2 === undefined ? clientY : _this$state$lastClien2,
                 photoIndex = _this$state.photoIndex;
 
-            var offsetPageX = pageX - lastPageX;
-            var offsetPageY = pageY - lastPageY;
+            var offsetClientX = clientX - lastClientX;
+            var offsetClientY = clientY - lastClientY;
             var singlePageWidth = innerWidth + _variables.horizontalOffset;
@@ -136,6 +136,6 @@ // 当前偏移
             var currentPhotoIndex = photoIndex;
-            if (Math.abs(offsetPageY) > innerHeight * 0.14) {
+            if (Math.abs(offsetClientY) > innerHeight * 0.14) {
                 onClose();
                 // 下一张
-            } else if (offsetPageX < -_variables.maxMoveOffset && photoIndex < images.length - 1) {
+            } else if (offsetClientX < -_variables.maxMoveOffset && photoIndex < images.length - 1) {
                 currentPhotoIndex = photoIndex + 1;
@@ -147,3 +147,3 @@ currentTranslateX = -singlePageWidth * currentPhotoIndex;
                 // 上一张
-            } else if (offsetPageX > _variables.maxMoveOffset && photoIndex > 0) {
+            } else if (offsetClientX > _variables.maxMoveOffset && photoIndex > 0) {
                 currentPhotoIndex = photoIndex - 1;
@@ -159,4 +159,4 @@ currentTranslateX = -singlePageWidth * currentPhotoIndex;
                 photoIndex: currentPhotoIndex,
-                lastPageX: undefined,
-                lastPageY: undefined,
+                lastClientX: undefined,
+                lastClientY: undefined,
                 backdropOpacity: _variables.defaultOpacity,
@@ -170,4 +170,4 @@ photoScale: 1
             touched: false,
-            lastPageX: undefined,
-            lastPageY: undefined,
+            lastClientX: undefined,
+            lastClientY: undefined,
             backdropOpacity: _variables.defaultOpacity,
@@ -174,0 +174,0 @@ photoScale: 1

lib/PhotoView.d.ts

 import React from 'react';
-declare type ReachFunction = (pageX: number, pageY: number) => void;
+declare type ReachFunction = (clientX: number, clientY: number) => void;
 interface IPhotoViewProps {
@@ -24,4 +24,4 @@ src: string;
     maskTouched: boolean;
-    pageX: number;
-    pageY: number;
+    clientX: number;
+    clientY: number;
     lastX: number;
@@ -31,3 +31,2 @@ lastY: number;
     lastTouchLength: number;
-    animation: import("../../../../../../Users/liumy/Documents/workspace/react-photo-view/src/types").springType;
     reachState: number;
@@ -43,4 +42,4 @@ };
         maskTouched: boolean;
-        pageX: number;
-        pageY: number;
+        clientX: number;
+        clientY: number;
         lastX: number;
@@ -50,3 +49,2 @@ lastY: number;
         lastTouchLength: number;
-        animation: import("../../../../../../Users/liumy/Documents/workspace/react-photo-view/src/types").springType;
         reachState: number;
@@ -58,7 +56,7 @@ };
     componentWillUnmount(): void;
-    handleStart: (pageX: number, pageY: number, touchLength?: number) => void;
-    handleMove: (newPageX: number, newPageY: number, touchLength?: number) => void;
+    handleStart: (clientX: number, clientY: number, touchLength?: number) => void;
+    handleMove: (newClientX: number, newClientY: number, touchLength?: number) => void;
     handleDoubleClick: (e: any) => void;
     handleWheel: (e: any) => void;
-    handleMaskStart: (pageX: number, pageY: number) => void;
+    handleMaskStart: (clientX: number, clientY: number) => void;
     handleMaskMouseDown: (e: any) => void;
@@ -70,7 +68,7 @@ handleMaskTouchStart: (e: any) => void;
     handleMouseMove: (e: any) => void;
-    handleUp: (newPageX: number, newPageY: number) => void;
+    handleUp: (newClientX: number, newClientY: number) => void;
     handleTouchEnd: (e: any) => void;
     handleMouseUp: (e: any) => void;
     handleResize: () => void;
-    handleReachCallback: (x: number, y: number, scale: number, newPageX: number, newPageY: number, reachState: number) => number;
+    handleReachCallback: (x: number, y: number, scale: number, newClientX: number, newClientY: number, reachState: number) => number;
     handlePhotoRef: (ref: any) => void;
@@ -77,0 +75,0 @@ render(): JSX.Element;

lib/PhotoView.js

@@ -31,4 +31,2 @@ 'use strict';
 
-var _reactMotion = require('react-motion');
-
 var _lodash = require('lodash.throttle');
@@ -84,5 +82,5 @@
     // 触摸开始时 x 原始坐标
-    pageX: 0,
+    clientX: 0,
     // 触摸开始时 y 原始坐标
-    pageY: 0,
+    clientY: 0,
     // 触摸开始时图片 x 偏移量
@@ -96,4 +94,2 @@ lastX: 0,
     lastTouchLength: 0,
-    // 动画类型
-    animation: _variables.defaultAnimationConfig,
     // 当前边缘触发状态，0: 未触发，1: x 轴，2: y 轴
@@ -112,3 +108,3 @@ reachState: 0
         _this.state = initialState;
-        _this.handleStart = function (pageX, pageY) {
+        _this.handleStart = function (clientX, clientY) {
             var touchLength = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
@@ -119,4 +115,4 @@
                     touched: true,
-                    pageX: pageX,
-                    pageY: pageY,
+                    clientX: clientX,
+                    clientY: clientY,
                     lastX: prevState.x,
@@ -129,3 +125,3 @@ lastY: prevState.y,
         };
-        _this.handleMove = function (newPageX, newPageY) {
+        _this.handleMove = function (newClientX, newClientY) {
             var touchLength = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
@@ -143,4 +139,4 @@ var _this$state = _this.state,
                     y = _this$state2.y,
-                    pageX = _this$state2.pageX,
-                    pageY = _this$state2.pageY,
+                    clientX = _this$state2.clientX,
+                    clientY = _this$state2.clientY,
                     lastX = _this$state2.lastX,
@@ -157,6 +153,6 @@ lastY = _this$state2.lastY,
                 if (touchLength === 0) {
-                    currentX = newPageX - pageX + lastX;
-                    currentY = newPageY - pageY + lastY;
+                    currentX = newClientX - clientX + lastX;
+                    currentY = newClientY - clientY + lastY;
                     // 边缘触发检测
-                    currentReachState = _this.handleReachCallback(currentX, currentY, scale, newPageX, newPageY, reachState);
+                    currentReachState = _this.handleReachCallback(currentX, currentY, scale, newClientX, newClientY, reachState);
                 }
@@ -176,4 +172,4 @@ // 横向边缘触发、背景触发禁用当前滑动
                         y: currentY,
-                        pageX: newPageX,
-                        pageY: newPageY,
+                        clientX: newClientX,
+                        clientY: newClientY,
                         fromScale: scale,
@@ -187,4 +183,4 @@ toScale: toScale
             e.preventDefault();
-            var pageX = e.pageX,
-                pageY = e.pageY;
+            var clientX = e.clientX,
+                clientY = e.clientY;
             var _this$photoRef$state2 = _this.photoRef.state,
@@ -199,12 +195,12 @@ width = _this$photoRef$state2.width,
 
-                return (0, _extends3['default'])({ pageX: pageX,
-                    pageY: pageY }, (0, _getPositionOnMoveOrScale2['default'])({
+                return (0, _extends3['default'])({ clientX: clientX,
+                    clientY: clientY }, (0, _getPositionOnMoveOrScale2['default'])({
                     x: x,
                     y: y,
-                    pageX: pageX,
-                    pageY: pageY,
+                    clientX: clientX,
+                    clientY: clientY,
                     fromScale: scale,
                     // 若图片足够大，则放大适应的倍数
                     toScale: scale !== 1 ? 1 : Math.max(2, naturalWidth / width)
-                }), { animation: _variables.defaultAnimationConfig });
+                }));
             });
@@ -214,4 +210,4 @@ };
             e.preventDefault();
-            var pageX = e.pageX,
-                pageY = e.pageY,
+            var clientX = e.clientX,
+                clientY = e.clientY,
                 deltaY = e.deltaY;
@@ -230,19 +226,19 @@ var _this$photoRef$state3 = _this.photoRef.state,
                 var toScale = Math.max(Math.min(endScale, Math.max(_variables.maxScale, naturalWidth / width)), _variables.minScale);
-                return (0, _extends3['default'])({ pageX: pageX,
-                    pageY: pageY }, (0, _getPositionOnMoveOrScale2['default'])({
+                return (0, _extends3['default'])({ clientX: clientX,
+                    clientY: clientY }, (0, _getPositionOnMoveOrScale2['default'])({
                     x: x,
                     y: y,
-                    pageX: pageX,
-                    pageY: pageY,
+                    clientX: clientX,
+                    clientY: clientY,
                     fromScale: scale,
                     toScale: toScale
-                }), { animation: _variables.defaultAnimationConfig });
+                }));
             });
         };
-        _this.handleMaskStart = function (pageX, pageY) {
+        _this.handleMaskStart = function (clientX, clientY) {
             _this.setState(function (prevState) {
                 return {
                     maskTouched: true,
-                    pageX: pageX,
-                    pageY: pageY,
+                    clientX: clientX,
+                    clientY: clientY,
                     lastX: prevState.x,
@@ -255,10 +251,10 @@ lastY: prevState.y,
         _this.handleMaskMouseDown = function (e) {
-            _this.handleMaskStart(e.pageX, e.pageY);
+            _this.handleMaskStart(e.clientX, e.clientY);
         };
         _this.handleMaskTouchStart = function (e) {
             var _e$touches$ = e.touches[0],
-                pageX = _e$touches$.pageX,
-                pageY = _e$touches$.pageY;
+                clientX = _e$touches$.clientX,
+                clientY = _e$touches$.clientY;
 
-            _this.handleMaskStart(pageX, pageY);
+            _this.handleMaskStart(clientX, clientY);
         };
@@ -268,13 +264,13 @@ _this.handleTouchStart = function (e) {
                 var _getMultipleTouchPosi = (0, _getMultipleTouchPosition2['default'])(e),
-                    pageX = _getMultipleTouchPosi.pageX,
-                    pageY = _getMultipleTouchPosi.pageY,
+                    clientX = _getMultipleTouchPosi.clientX,
+                    clientY = _getMultipleTouchPosi.clientY,
                     touchLength = _getMultipleTouchPosi.touchLength;
 
-                _this.handleStart(pageX, pageY, touchLength);
+                _this.handleStart(clientX, clientY, touchLength);
             } else {
                 var _e$touches$2 = e.touches[0],
-                    _pageX = _e$touches$2.pageX,
-                    _pageY = _e$touches$2.pageY;
+                    _clientX = _e$touches$2.clientX,
+                    _clientY = _e$touches$2.clientY;
 
-                _this.handleStart(_pageX, _pageY);
+                _this.handleStart(_clientX, _clientY);
             }
@@ -284,3 +280,3 @@ };
             e.preventDefault();
-            _this.handleStart(e.pageX, e.pageY);
+            _this.handleStart(e.clientX, e.clientY);
         };
@@ -291,13 +287,13 @@ _this.handleTouchMove = function (e) {
                 var _getMultipleTouchPosi2 = (0, _getMultipleTouchPosition2['default'])(e),
-                    pageX = _getMultipleTouchPosi2.pageX,
-                    pageY = _getMultipleTouchPosi2.pageY,
+                    clientX = _getMultipleTouchPosi2.clientX,
+                    clientY = _getMultipleTouchPosi2.clientY,
                     touchLength = _getMultipleTouchPosi2.touchLength;
 
-                _this.handleMove(pageX, pageY, touchLength);
+                _this.handleMove(clientX, clientY, touchLength);
             } else {
                 var _e$touches$3 = e.touches[0],
-                    _pageX2 = _e$touches$3.pageX,
-                    _pageY2 = _e$touches$3.pageY;
+                    _clientX2 = _e$touches$3.clientX,
+                    _clientY2 = _e$touches$3.clientY;
 
-                _this.handleMove(_pageX2, _pageY2);
+                _this.handleMove(_clientX2, _clientY2);
             }
@@ -307,5 +303,5 @@ };
             e.preventDefault();
-            _this.handleMove(e.pageX, e.pageY);
+            _this.handleMove(e.clientX, e.clientY);
         };
-        _this.handleUp = function (newPageX, newPageY) {
+        _this.handleUp = function (newClientX, newClientY) {
             var _this$state3 = _this.state,
@@ -329,9 +325,9 @@ touched = _this$state3.touched,
                         touchedTime = _ref3.touchedTime,
-                        pageX = _ref3.pageX,
-                        pageY = _ref3.pageY;
+                        clientX = _ref3.clientX,
+                        clientY = _ref3.clientY;
 
                     if (onReachUp) {
-                        onReachUp(newPageX, newPageY);
+                        onReachUp(newClientX, newClientY);
                     }
-                    var hasMove = pageX !== newPageX || pageY !== newPageY;
+                    var hasMove = clientX !== newClientX || clientY !== newClientY;
                     // 缩放弹性效果
@@ -350,4 +346,3 @@ var toScale = Math.max(Math.min(scale, Math.max(_variables.maxScale, naturalWidth / width)), _variables.minScale);
                         x: x,
-                        y: y,
-                        animation: _variables.defaultAnimationConfig
+                        y: y
                     });
@@ -359,12 +354,12 @@ });
             var _e$changedTouches$ = e.changedTouches[0],
-                pageX = _e$changedTouches$.pageX,
-                pageY = _e$changedTouches$.pageY;
+                clientX = _e$changedTouches$.clientX,
+                clientY = _e$changedTouches$.clientY;
 
-            _this.handleUp(pageX, pageY);
+            _this.handleUp(clientX, clientY);
         };
         _this.handleMouseUp = function (e) {
-            var pageX = e.pageX,
-                pageY = e.pageY;
+            var clientX = e.clientX,
+                clientY = e.clientY;
 
-            _this.handleUp(pageX, pageY);
+            _this.handleUp(clientX, clientY);
         };
@@ -379,3 +374,3 @@ _this.handleResize = function () {
         };
-        _this.handleReachCallback = function (x, y, scale, newPageX, newPageY, reachState) {
+        _this.handleReachCallback = function (x, y, scale, newClientX, newClientY, reachState) {
             var _this$photoRef$state5 = _this.photoRef.state,
@@ -395,12 +390,12 @@ width = _this$photoRef$state5.width,
             if (onReachLeftMove && (horizontalType && x > _variables.minReachOffset && reachState === 0 || reachState === 1)) {
-                onReachLeftMove(newPageX, newPageY);
+                onReachLeftMove(newClientX, newClientY);
                 return 1;
             } else if (onReachRightMove && (horizontalType && x < -_variables.minReachOffset && reachState === 0 || reachState === 1)) {
-                onReachRightMove(newPageX, newPageY);
+                onReachRightMove(newClientX, newClientY);
                 return 1;
             } else if (onReachTopMove && (verticalType && y > _variables.minReachOffset && reachState === 0 || reachState === 2)) {
-                onReachTopMove(newPageX, newPageY);
+                onReachTopMove(newClientX, newClientY);
                 return 2;
             } else if (onReachBottomMove && (verticalType && y < -_variables.minReachOffset && reachState === 0 || reachState === 2)) {
-                onReachBottomMove(newPageX, newPageY);
+                onReachBottomMove(newClientX, newClientY);
                 return 2;
@@ -442,4 +437,2 @@ }
         value: function render() {
-            var _this2 = this;
-
             var _props = this.props,
@@ -458,5 +451,5 @@ src = _props.src,
                 scale = _state.scale,
-                touched = _state.touched,
-                animation = _state.animation;
+                touched = _state.touched;
 
+            var transform = 'translate3d(' + x + 'px, ' + y + 'px, 0) scale(' + scale * photoScale + ')';
             return _react2['default'].createElement(
@@ -466,21 +459,7 @@ _PhotoWrap2['default'],
                 _react2['default'].createElement(_PhotoMask2['default'], { onMouseDown: _isMobile2['default'] ? undefined : this.handleMaskMouseDown, onTouchStart: _isMobile2['default'] ? this.handleMaskTouchStart : undefined }),
-                _react2['default'].createElement(
-                    _reactMotion.Motion,
-                    { style: {
-                            currX: touched ? x : (0, _reactMotion.spring)(x, animation),
-                            currY: touched ? y : (0, _reactMotion.spring)(y, animation),
-                            currScale: touched ? scale : (0, _reactMotion.spring)(scale, animation)
-                        } },
-                    function (_ref4) {
-                        var currX = _ref4.currX,
-                            currY = _ref4.currY,
-                            currScale = _ref4.currScale;
-
-                        var transform = 'translate3d(' + currX + 'px, ' + currY + 'px, 0) scale(' + currScale * photoScale + ')';
-                        return _react2['default'].createElement(_Photo2['default'], { className: className, src: src, ref: _this2.handlePhotoRef, onDoubleClick: _this2.handleDoubleClick, onMouseDown: _isMobile2['default'] ? undefined : _this2.handleMouseDown, onTouchStart: _isMobile2['default'] ? _this2.handleTouchStart : undefined, onWheel: _this2.handleWheel, onPhotoResize: _this2.handleResize, style: {
-                                WebkitTransform: transform,
-                                transform: transform
-                            }, loadingElement: loadingElement, brokenElement: brokenElement });
-                    }
-                )
+                _react2['default'].createElement(_Photo2['default'], { className: className, src: src, ref: this.handlePhotoRef, onDoubleClick: this.handleDoubleClick, onMouseDown: _isMobile2['default'] ? undefined : this.handleMouseDown, onTouchStart: _isMobile2['default'] ? this.handleTouchStart : undefined, onWheel: this.handleWheel, onPhotoResize: this.handleResize, style: {
+                        WebkitTransform: transform,
+                        transform: transform,
+                        transition: touched ? undefined : 'transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1)'
+                    }, loadingElement: loadingElement, brokenElement: brokenElement })
             );
@@ -487,0 +466,0 @@ }

lib/types.d.ts

@@ -1,8 +0,1 @@
-export declare type springType = {
-    stiffness: number;
-    damping: number;
-};
-export declare type animationType = {
-    animation: springType;
-};
 /**
@@ -9,0 +2,0 @@ * 图片 item 类型

lib/utils/getMultipleTouchPosition.d.ts

@@ -6,6 +6,6 @@ import React from 'react';
 declare const getMultipleTouchPosition: (evt: React.TouchEvent<Element>) => {
-    pageX: number;
-    pageY: number;
+    clientX: number;
+    clientY: number;
     touchLength: number;
 };
 export default getMultipleTouchPosition;

lib/utils/getMultipleTouchPosition.js

@@ -11,12 +11,12 @@ "use strict";
     var _evt$touches$ = evt.touches[0],
-        pageX = _evt$touches$.pageX,
-        pageY = _evt$touches$.pageY;
+        clientX = _evt$touches$.clientX,
+        clientY = _evt$touches$.clientY;
     var _evt$touches$2 = evt.touches[1],
-        nextPageX = _evt$touches$2.pageX,
-        nextPageY = _evt$touches$2.pageY;
+        nextClientX = _evt$touches$2.clientX,
+        nextClientY = _evt$touches$2.clientY;
 
     return {
-        pageX: (pageX + nextPageX) / 2,
-        pageY: (pageY + nextPageY) / 2,
-        touchLength: Math.sqrt(Math.pow(nextPageX - pageX, 2) + Math.pow(nextPageY - pageY, 2))
+        clientX: (clientX + nextClientX) / 2,
+        clientY: (clientY + nextClientY) / 2,
+        touchLength: Math.sqrt(Math.pow(nextClientX - clientX, 2) + Math.pow(nextClientY - clientY, 2))
     };
@@ -23,0 +23,0 @@ };

lib/utils/getPositionOnMoveOrScale.d.ts

 /**
  * 获取移动或缩放之后的中心点
  */
-declare const getPositionOnMoveOrScale: ({ x, y, pageX, pageY, fromScale, toScale, }: {
+declare const getPositionOnMoveOrScale: ({ x, y, clientX, clientY, fromScale, toScale, }: {
     x: number;
     y: number;
-    pageX: number;
-    pageY: number;
+    clientX: number;
+    clientY: number;
     fromScale: number;
@@ -10,0 +10,0 @@ toScale: number;

lib/utils/getPositionOnMoveOrScale.js

@@ -12,4 +12,4 @@ "use strict";
         y = _ref.y,
-        pageX = _ref.pageX,
-        pageY = _ref.pageY,
+        clientX = _ref.clientX,
+        clientY = _ref.clientY,
         fromScale = _ref.fromScale,
@@ -21,12 +21,12 @@ toScale = _ref.toScale;
 
-    var centerPageX = innerWidth / 2;
-    var centerPageY = innerHeight / 2;
+    var centerClientX = innerWidth / 2;
+    var centerClientY = innerHeight / 2;
     // 坐标偏移
-    var lastPositionX = centerPageX + x;
-    var lastPositionY = centerPageY + y;
+    var lastPositionX = centerClientX + x;
+    var lastPositionY = centerClientY + y;
     // 放大偏移量
     var offsetScale = toScale / fromScale;
     // 偏移位置
-    var originX = pageX - (pageX - lastPositionX) * offsetScale - centerPageX;
-    var originY = pageY - (pageY - lastPositionY) * offsetScale - centerPageY;
+    var originX = clientX - (clientX - lastPositionX) * offsetScale - centerClientX;
+    var originY = clientY - (clientY - lastPositionY) * offsetScale - centerClientY;
     return {
@@ -33,0 +33,0 @@ x: originX,

lib/utils/slideToPosition.d.ts

@@ -1,2 +0,1 @@
-import { animationType } from '../types';
 /**
@@ -14,3 +13,3 @@ * 根据速度滑动至目标位置
     endY: number;
-} & animationType;
+};
 export default slideToPosition;

lib/utils/slideToPosition.js

@@ -26,4 +26,3 @@ 'use strict';
         endX: Math.floor(x + speedX * slideTime),
-        endY: Math.floor(y + speedY * slideTime),
-        animation: _variables.slideAnimationConfig
+        endY: Math.floor(y + speedY * slideTime)
     };
@@ -30,0 +29,0 @@ };

lib/utils/slideToSuitableOffset.d.ts

@@ -1,2 +0,1 @@
-import { animationType } from '../types';
 /**
@@ -17,3 +16,3 @@ * 适应到合适的图片偏移量
     y: number;
-} & animationType;
+};
 export default slideToSuitableOffset;

lib/utils/slideToSuitableOffset.js

@@ -7,4 +7,2 @@ 'use strict';
 
-var _variables = require('../variables');
-
 var _slideToPosition2 = require('./slideToPosition');
@@ -40,4 +38,3 @@
         endX = _slideToPosition.endX,
-        endY = _slideToPosition.endY,
-        animation = _slideToPosition.animation;
+        endY = _slideToPosition.endY;
 
@@ -71,7 +68,5 @@ var currentX = endX;
     }
-    var isClosedEdge = horizontalType !== 0 || verticalType !== 0;
     return {
         x: currentX,
-        y: currentY,
-        animation: isClosedEdge ? _variables.defaultAnimationConfig : animation
+        y: currentY
     };
@@ -78,0 +73,0 @@ };

lib/variables.d.ts

@@ -1,2 +0,1 @@
-import { springType } from './types';
 /**
@@ -27,3 +26,3 @@ * 最大触摸时间
 /**
- * 最大缩放度（若图片足够大，则会被忽略）
+ * 最大缩放度（若图片足够大，则会超出）
  */
@@ -35,9 +34,1 @@ export declare const maxScale: number;
 export declare const scaleBuffer = 0.2;
-/**
- * 默认动画参数
- */
-export declare const defaultAnimationConfig: springType;
-/**
- * 滑动时动画参数
- */
-export declare const slideAnimationConfig: springType;

lib/variables.js

@@ -31,3 +31,3 @@ "use strict";
 /**
- * 最大缩放度（若图片足够大，则会被忽略）
+ * 最大缩放度（若图片足够大，则会超出）
  */
@@ -38,16 +38,2 @@ var maxScale = exports.maxScale = 6;
  */
-var scaleBuffer = exports.scaleBuffer = 0.2;
-/**
- * 默认动画参数
- */
-var defaultAnimationConfig = exports.defaultAnimationConfig = {
-  stiffness: 240,
-  damping: 30
-};
-/**
- * 滑动时动画参数
- */
-var slideAnimationConfig = exports.slideAnimationConfig = {
-  stiffness: 170,
-  damping: 32
-};
+var scaleBuffer = exports.scaleBuffer = 0.2;

package.json

 {
   "name": "react-photo-view",
-  "version": "0.1.2",
-  "description": "React photo preview",
+  "version": "0.1.4",
+  "description": "React photo preview.",
+  "main": "./lib",
+  "module": "./es",
   "keywords": [
@@ -33,4 +35,2 @@ "react",
   ],
-  "main": "lib/index.js",
-  "module": "./es",
   "author": "LMY",
@@ -51,5 +51,4 @@ "license": "MIT",
     "lodash.uniqueid": "^4.0.1",
-    "react-motion": "^0.5.2",
     "styled-components": "^3.0.1"
   }
 }

No alert changes

Improved metrics

Dependency count

3

decreased by-25%

Worsened metrics

Total package byte prevSize

73724

decreased by-2.54%

Lines of code

1716

decreased by-3.21%

Dependency changes

• - Removedreact-motion@^0.5.2

• - Removedperformance-now@0.2.02.1.0(transitive)

• - Removedraf@3.4.1(transitive)

• - Removedreact-motion@0.5.2(transitive)