feat(image-viewer): support zoomed picture slide

[HuberTRoy]

尝试

fix #4707
fix #5701

抽离了原来的一些重复逻辑。

实现思路是在手指放开时，判断如果超过了边缘（加了一个额外100px的缓冲）就缩放回原大小并释放dragLock，使用上感觉还ok，不知道有没有没注意到的地方= =。

[codecov]

Codecov Report

Patch coverage: 75.60% and project coverage change: +1.42% 🎉

Comparison is base (72b8225) 90.25% compared to head (df11d82) 91.68%.
Report is 216 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #5701      +/-   ##
==========================================
+ Coverage   90.25%   91.68%   +1.42%     
==========================================
  Files         297      306       +9     
  Lines        6437     6615     +178     
  Branches     1600     1635      +35     
==========================================
+ Hits         5810     6065     +255     
+ Misses        576      514      -62     
+ Partials       51       36      -15     

Files Changed	Coverage Δ
src/components/image-viewer/slide.tsx	69.62% <72.97%> (+11.22%)	⬆️
src/components/image-viewer/image-viewer.tsx	95.45% <100.00%> (+0.10%)	⬆️

... and 83 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[github-actions]

PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-5701.surge.sh

[zombieJ]

快速滑动的时候会直接飘过去。感觉是到边缘移动翻页更适合。

[HuberTRoy]

@zombieJ

如果未到边缘则停滞在边缘，处在边缘在划动则翻页对吧。如果是这样的话，感觉要加个初始值的判断。

[www6688265]

@awmleer

[zombieJ]

这个手感还是很怪，似乎到下一张需要很用力的样子

[zombieJ]

另外，东西有点多，我给你的代码加点备注。

[HuberTRoy]

@zombieJ

现在是抵达边缘后还超过了20*放大倍数的px则判断为想要滑到下一张。

[zombieJ]

这个逻辑我不太熟，感觉是外侧 Slides 有个拖拽的逻辑，然后里面还有个拖拽和缩放的逻辑。然后里面如果到了边缘再拖拽，就让外面的拖拽来做切换。是不是这个意思？

[HuberTRoy]

@zombieJ

是的，这个更改没有改变原来的逻辑。之前不能切换是因为缩放时dragLock会锁住，导致原来的切换逻辑无法生效。

这个PR里新增的代码是这些，在触及边缘时将dragLock释放，来让外层的切换逻辑可以正常运行：

if (
            state.last &&
            initialMartix.current.some(i => i) &&
            getReachBound(x, minX, maxX, 20 * zoom).some(i => i)
          ) {
            if (dragLockRef) {
              dragLockRef.current = false
            }
}

其他的改动是将原来的逻辑抽象封装了一下。

将到达边缘的额外空间判断给删除了，切换起来不会那么吃力了，辛苦在试试~。

[zombieJ]

舒服很多，大佬 666

[zombieJ]

加个测试吧，好了准备合了哈~

[HuberTRoy]

@zombieJ

好~，晚上加一个测试= =，初步试了一下mock的事件触发的很奇怪= =，不太好模拟的样子。

[zombieJ]

是不是因为交互多了，所以变得复杂了？

[HuberTRoy]

@zombieJ

可能哪个地方忽略了，用mockDrag没法触发slide的onDrag事件(已经换成内层的element)，用大佬的方法直接mock onDrag事件的话又不触发slides的onDrag事件= =，而且在Multil的时候直接mock的onDrag和onPinch会让最后一张图片生效而不是当前的图片，有点奇怪= =。

[HuberTRoy]

@zombieJ

好了，辛苦在review下~。

需要等一会mockDrag才有效，是加载图片导致的，换了一张base64的进去，可以保证在等待的时间内加载出来。

倒换了一下两个test的顺序，maxZoom support auto里的restoreAllMocks会导致不成功。

还在onIndexChange那里加了一个index的对比，在缩放了的情况下偶尔会触发swipeTo但是速度不够没有切换成功但是onIndexChange触发了。