完善多指触控体验

example/stories/Index.stories.js

@@ -3,14 +3,26 @@ import styled from 'styled-components';
 import { storiesOf } from '@storybook/react';
 import { PhotoProvider, PhotoConsumer } from 'react-photo-view';
 import 'react-photo-view/dist/index.css';
-import image1 from './static/1.png';
+import image1 from './static/1.jpg';
 import image2 from './static/2.jpg';
 import image3 from './static/3.jpg';
 import image4 from './static/4.jpg';
 import image5 from './static/5.jpg';
+import image6 from './static/6.jpg';
+import image7 from './static/7.jpg';
+import image8 from './static/8.jpg';
 import defaultPhoto from './static/default-photo.svg';
 
-const photoImages = [image1, image2, image3, image4, image5];
+const photoImages = [
+  image1,
+  image2,
+  image3,
+  image4,
+  image5,
+  image6,
+  image7,
+  image8,
+];
 
 const ImageList = styled.div`
   padding: 40px;
@@ -19,12 +31,14 @@ const ImageList = styled.div`
   align-items: center;
 `;
 
-const SmallImage = styled.img`
+const ViewBox = styled.div`
   margin-right: 20px;
   margin-bottom: 20px;
   width: 100px;
   height: 100px;
   cursor: pointer;
+  background: url('${props => props.viewImage}') no-repeat center;
+  background-size: cover;
 `;
 
 const Button = styled.button`
@@ -43,30 +57,30 @@ const DefaultImage = styled.img`
   height: 100px;
 `;
 
-storiesOf('基本操作', module)
-  .add('默认预览', () => (
+storiesOf('react-photo-view', module)
+  .add('默认展示', () => (
     <PhotoProvider>
       <ImageList>
         {photoImages.map((item, index) => (
           <PhotoConsumer key={index} src={item} intro={item}>
-            <SmallImage src={item} />
+            <ViewBox viewImage={item} />
           </PhotoConsumer>
         ))}
       </ImageList>
     </PhotoProvider>
   ))
-  .add('只展示两张', () => (
+  .add('两张预览', () => (
     <PhotoProvider>
       <ImageList>
         {photoImages.map((item, index) => (
           <PhotoConsumer key={index} src={item} intro={item}>
-            {index < 2 ? <SmallImage src={item} /> : undefined}
+            {index < 2 ? <ViewBox viewImage={item} /> : undefined}
           </PhotoConsumer>
         ))}
       </ImageList>
     </PhotoProvider>
   ))
-  .add('按钮触发', () => (
+  .add('通过按钮触发', () => (
     <PhotoProvider>
       <ImageList>
         <PhotoConsumer src={image4}>
@@ -75,7 +89,7 @@ storiesOf('基本操作', module)
       </ImageList>
     </PhotoProvider>
   ))
-  .add('错误图片地址', () => (
+  .add('自定义加载失败', () => (
     <ImageList>
       <PhotoProvider>
         <PhotoConsumer src={null}>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-photo-view",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "React photo preview.",
   "author": "MinJieLiu",
   "license": "MIT",
@@ -27,9 +27,7 @@
     "test:watch": "react-scripts-ts test --env=jsdom",
     "build": "rollup -c",
     "start": "rollup -c -w",
-    "prepare": "npm run build",
-    "predeploy": "cd example && npm install && npm run build",
-    "deploy": "gh-pages -d example/build"
+    "prepare": "npm run build"
   },
   "dependencies": {
     "lodash.debounce": "^4.0.8",
@@ -53,7 +51,6 @@
     "babel-runtime": "^6.26.0",
     "classnames": "^2.2.6",
     "cross-env": "^6.0.3",
-    "gh-pages": "^2.1.1",
     "less": "^3.10.3",
     "prettier": "^1.18.2",
     "react": "^16.11.0",

src/PhotoView.tsx

@@ -6,7 +6,7 @@ import isMobile from './utils/isMobile';
 import getMultipleTouchPosition from './utils/getMultipleTouchPosition';
 import getPositionOnMoveOrScale from './utils/getPositionOnMoveOrScale';
 import slideToPosition from './utils/slideToPosition';
-import { getReachType, getCloseEdgeResult } from './utils/getCloseEdge';
+import { getReachType, getClosedHorizontal, getClosedVertical } from './utils/getCloseEdge';
 import withContinuousTap, { TapFuncType } from './utils/withContinuousTap';
 import getAnimateOrigin from './utils/getAnimateOrigin';
 import {
@@ -234,16 +234,15 @@ export default class PhotoView extends React.Component<
       let currentReachState = ReachTypeEnum.Normal;
       if (touchLength === 0) {
         // 边缘超出状态
-        const { horizontalCloseEdge, verticalCloseEdge } = getCloseEdgeResult({
+        const horizontalCloseEdge = getClosedHorizontal(offsetX + lastX, scale, width);
+        const verticalCloseEdge = getClosedVertical(offsetY + lastY, scale, height);
+        // 边缘触发检测
+        currentReachState = getReachType({
           initialTouchState: this.initialTouchState,
-          planX: offsetX + lastX,
-          planY: offsetY + lastY,
-          scale,
-          width,
-          height,
+          horizontalCloseEdge,
+          verticalCloseEdge,
+          reachState,
         });
-        // 边缘触发检测
-        currentReachState = getReachType({ horizontalCloseEdge, verticalCloseEdge, reachState });
 
         // 接触边缘
         if (currentReachState != ReachTypeEnum.Normal) {
@@ -456,7 +455,6 @@ export default class PhotoView extends React.Component<
       loadingElement,
       brokenElement,
       isActive,
-
       showAnimateType,
       originRect,
     } = this.props;

src/utils/getCloseEdge.ts

@@ -55,76 +55,35 @@ export function getClosedVertical(
 
 /**
  * 获取接触边缘类型
+ * @param initialTouchState
  * @param horizontalCloseEdge
  * @param verticalCloseEdge
  * @param reachState
  */
 export function getReachType({
+  initialTouchState,
   horizontalCloseEdge,
   verticalCloseEdge,
   reachState,
 }: {
+  initialTouchState: TouchStartEnum;
   horizontalCloseEdge: CloseEdgeEnum;
   verticalCloseEdge: CloseEdgeEnum;
   reachState: ReachTypeEnum;
 }): ReachTypeEnum {
   if (
-    (horizontalCloseEdge && reachState === ReachTypeEnum.Normal) ||
+    (horizontalCloseEdge > 0 &&
+      initialTouchState === TouchStartEnum.X) ||
     reachState === ReachTypeEnum.XReach
   ) {
     return ReachTypeEnum.XReach;
   } else if (
-    (verticalCloseEdge && reachState === ReachTypeEnum.Normal) ||
+    (verticalCloseEdge > 0 &&
+      (initialTouchState === TouchStartEnum.YPull ||
+        initialTouchState === TouchStartEnum.YPush)) ||
     reachState === ReachTypeEnum.YReach
   ) {
     return ReachTypeEnum.YReach;
   }
   return ReachTypeEnum.Normal;
 }
-
-/**
- * 边缘超出状态
- * @param initialTouchState
- * @param planX
- * @param planY
- * @param scale
- * @param width
- * @param height
- */
-export function getCloseEdgeResult({
-  initialTouchState,
-  planX,
-  planY,
-  scale,
-  width,
-  height,
-}: {
-  initialTouchState: TouchStartEnum;
-  planX: number;
-  planY: number;
-  scale: number;
-  width: number;
-  height: number;
-}): {
-  horizontalCloseEdge: CloseEdgeEnum;
-  verticalCloseEdge: CloseEdgeEnum;
-} {
-  if (initialTouchState !== TouchStartEnum.Normal) {
-    const isHorizontal = initialTouchState === TouchStartEnum.X;
-    return {
-      horizontalCloseEdge:
-        isHorizontal
-          ? CloseEdgeEnum.Small
-          : CloseEdgeEnum.Normal,
-      verticalCloseEdge:
-        !isHorizontal
-          ? CloseEdgeEnum.Small
-          : CloseEdgeEnum.Normal,
-    };
-  }
-
-  return {
-    horizontalCloseEdge: getClosedHorizontal(planX, scale, width),
-    verticalCloseEdge: getClosedVertical(planY, scale, height),
-  };
-}

yarn.lock

@@ -1271,7 +1271,7 @@ async-limiter@~1.0.0:
   resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
   integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
 
-async@^2.1.2, async@^2.1.4, async@^2.4.1, async@^2.5.0, async@^2.6.1, async@^2.6.2:
+async@^2.1.2, async@^2.1.4, async@^2.4.1, async@^2.5.0, async@^2.6.2:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
   integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
@@ -2782,7 +2782,7 @@ commander@2.17.x:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
   integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
 
-commander@^2.12.1, commander@^2.18.0, commander@~2.20.3:
+commander@^2.12.1, commander@~2.20.3:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -3709,11 +3709,6 @@ elliptic@^6.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.0"
 
-email-addresses@^3.0.1:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/email-addresses/-/email-addresses-3.1.0.tgz#cabf7e085cbdb63008a70319a74e6136188812fb"
-  integrity sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==
-
 emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
@@ -4226,28 +4221,6 @@ filename-regex@^2.0.0:
   resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
   integrity sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=
 
-filename-reserved-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/filename-reserved-regex/-/filename-reserved-regex-1.0.0.tgz#e61cf805f0de1c984567d0386dc5df50ee5af7e4"
-  integrity sha1-5hz4BfDeHJhFZ9A4bcXfUO5a9+Q=
-
-filenamify-url@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/filenamify-url/-/filenamify-url-1.0.0.tgz#b32bd81319ef5863b73078bed50f46a4f7975f50"
-  integrity sha1-syvYExnvWGO3MHi+1Q9GpPeXX1A=
-  dependencies:
-    filenamify "^1.0.0"
-    humanize-url "^1.0.0"
-
-filenamify@^1.0.0:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/filenamify/-/filenamify-1.2.1.tgz#a9f2ffd11c503bed300015029272378f1f1365a5"
-  integrity sha1-qfL/0RxQO+0wABUCknI3jx8TZaU=
-  dependencies:
-    filename-reserved-regex "^1.0.0"
-    strip-outer "^1.0.0"
-    trim-repeated "^1.0.0"
-
 fileset@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/fileset/-/fileset-2.0.3.tgz#8e7548a96d3cc2327ee5e674168723a333bba2a0"
@@ -4469,15 +4442,6 @@ fs-extra@^0.30.0:
     path-is-absolute "^1.0.0"
     rimraf "^2.2.8"
 
-fs-extra@^7.0.0:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
-  integrity sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==
-  dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^4.0.0"
-    universalify "^0.1.0"
-
 fs-minipass@^1.2.5:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.7.tgz#ccff8570841e7fe4265693da88936c55aed7f7c7"
@@ -4561,20 +4525,6 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
-gh-pages@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/gh-pages/-/gh-pages-2.1.1.tgz#5be70a92f9cb70404bafabd8bb149c0e9a8c264b"
-  integrity sha512-yNW2SFp9xGRP/8Sk2WXuLI/Gn92oOL4HBgudn6PsqAnuWT90Y1tozJoTfX1WdrDSW5Rb90kLVOf5mm9KJ/2fDw==
-  dependencies:
-    async "^2.6.1"
-    commander "^2.18.0"
-    email-addresses "^3.0.1"
-    filenamify-url "^1.0.0"
-    fs-extra "^7.0.0"
-    globby "^6.1.0"
-    graceful-fs "^4.1.11"
-    rimraf "^2.6.2"
-
 glob-base@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
@@ -5014,14 +4964,6 @@ https-browserify@^1.0.0:
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
   integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
 
-humanize-url@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/humanize-url/-/humanize-url-1.0.1.tgz#f4ab99e0d288174ca4e1e50407c55fbae464efff"
-  integrity sha1-9KuZ4NKIF0yk4eUEB8VfuuRk7/8=
-  dependencies:
-    normalize-url "^1.0.0"
-    strip-url-auth "^1.0.0"
-
 iconv-lite@0.4.24, iconv-lite@^0.4.17, iconv-lite@^0.4.4:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -7042,7 +6984,7 @@ normalize-range@^0.1.2:
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
   integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
 
-normalize-url@^1.0.0, normalize-url@^1.4.0:
+normalize-url@^1.4.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c"
   integrity sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=
@@ -9759,18 +9701,6 @@ strip-json-comments@~2.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
 
-strip-outer@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/strip-outer/-/strip-outer-1.0.1.tgz#b2fd2abf6604b9d1e6013057195df836b8a9d631"
-  integrity sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==
-  dependencies:
-    escape-string-regexp "^1.0.2"
-
-strip-url-auth@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/strip-url-auth/-/strip-url-auth-1.0.1.tgz#22b0fa3a41385b33be3f331551bbb837fa0cd7ae"
-  integrity sha1-IrD6OkE4WzO+PzMVUbu4N/oM164=
-
 style-inject@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/style-inject/-/style-inject-0.3.0.tgz#d21c477affec91811cc82355832a700d22bf8dd3"
@@ -10089,13 +10019,6 @@ trim-newlines@^1.0.0:
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
   integrity sha1-WIeWa7WCpFA6QetST301ARgVphM=
 
-trim-repeated@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/trim-repeated/-/trim-repeated-1.0.0.tgz#e3646a2ea4e891312bf7eace6cfb05380bc01c21"
-  integrity sha1-42RqLqTokTEr9+rObPsFOAvAHCE=
-  dependencies:
-    escape-string-regexp "^1.0.2"
-
 trim-right@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"