From 9f487c3eb8ef793930863b28fb82a63d0546a6c8 Mon Sep 17 00:00:00 2001
From: fennghuang <89014758+fennghuang@users.noreply.github.com>
Date: Fri, 20 Oct 2023 06:03:17 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=9B=BE=E7=89=87=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E6=8B=96=E6=8B=BD=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                      |   1 +
 src/image-viewer/image-viewer.vue | 315 ++++++++++++++++--------------
 src/shared/index.ts               |   1 +
 src/shared/useGesture/index.ts    |  89 +++++++++
 src/swiper/swiper.vue             |  47 ++---
 5 files changed, 281 insertions(+), 172 deletions(-)
 create mode 100644 src/shared/useGesture/index.ts

diff --git a/package.json b/package.json
index 9caf4cbc8..2e5bc5fb8 100644
--- a/package.json
+++ b/package.json
@@ -86,6 +86,7 @@
     "@babel/runtime": "^7.16.5",
     "@types/lodash": "^4.14.178",
     "@types/validator": "^13.6.3",
+    "@use-gesture/vanilla": "^10.3.0",
     "@vueuse/core": "^8.2.5",
     "dayjs": "^1.10.7",
     "lodash": "^4.17.21",
diff --git a/src/image-viewer/image-viewer.vue b/src/image-viewer/image-viewer.vue
index 93fb32be6..3f871a823 100644
--- a/src/image-viewer/image-viewer.vue
+++ b/src/image-viewer/image-viewer.vue
@@ -3,6 +3,7 @@
     <div v-if="visible" :ref="(el) => (rootRef = el)" :class="`${prefix}-image-viewer`">
       <div :class="`${name}__mask`" @click="handleClose($event, 'overlay')" />
       <t-swiper
+        ref="swiperRootRef"
         :autoplay="false"
         :class="`${name}__content`"
         height="100vh"
@@ -12,16 +13,15 @@
       >
         <t-swiper-item
           v-for="(image, index) in images"
+          ref="swiperItemRefs"
           :key="index"
           :class="`${name}__swiper-item`"
-          @touchstart="onTouchStart($event, index)"
-          @touchmove="onTouchMove"
-          @touchend="onTouchEnd"
+          style="touch-action: none"
         >
           <t-image
             :src="image"
             :style="`${imageTransitionDuration}; ${index === touchIndex ? `transform: ${imageTransform}` : ''}`"
-            :on-load="({ e }) => onLoad(e, index)"
+            :on-load="({ e }) => onImgLoad(e, index)"
           />
         </t-swiper-item>
       </t-swiper>
@@ -30,7 +30,9 @@
           <t-node :content="closeNode" />
         </div>
 
-        <div v-if="showIndex" :class="`${name}__nav-index`">{{ (currentIndex ?? 0) + 1 }}/{{ images?.length }}</div>
+        <div v-if="showIndex" :class="`${name}__nav-index`">
+          {{ Math.min((currentIndex ?? 0) + 1, images?.length) }}/{{ images?.length }}
+        </div>
 
         <div v-if="deleteNode" :class="`${name}__nav-delete`" @click="handleDelete">
           <t-node :content="deleteNode" />
@@ -41,13 +43,24 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, reactive, getCurrentInstance, h, Transition, toRefs, ref, watch } from 'vue';
+import {
+  computed,
+  defineComponent,
+  reactive,
+  getCurrentInstance,
+  h,
+  Transition,
+  toRefs,
+  ref,
+  watch,
+  nextTick,
+  onUnmounted,
+} from 'vue';
 import { CloseIcon, DeleteIcon } from 'tdesign-icons-vue-next';
 
 import config from '../config';
 import ImagediverProps from './props';
-import { renderTNode, TNode, useDefault, useTouch } from '../shared';
-import { preventDefault } from '../shared/dom';
+import { renderTNode, TNode, useDefault, inBrowser, useGesture, DragState, PinchState } from '../shared';
 
 // inner components
 import { Swiper as TSwiper, SwiperItem as TSwiperItem } from '../swiper';
@@ -57,9 +70,6 @@ import { TdImageViewerProps } from './type';
 const { prefix } = config;
 const name = `${prefix}-image-viewer`;
 
-const getDistance = (touches: TouchList) =>
-  Math.sqrt((touches[0].clientX - touches[1].clientX) ** 2 + (touches[0].clientY - touches[1].clientY) ** 2);
-
 export default defineComponent({
   name,
   components: {
@@ -77,8 +87,6 @@ export default defineComponent({
       zooming: false,
       scale: 1,
       touchIndex: 0,
-      swiperStyle: [] as string[],
-
       dragging: false,
       draggedX: 0,
       draggedY: 0,
@@ -91,11 +99,13 @@ export default defineComponent({
       'index',
       'index-change',
     );
-    const touch = useTouch();
 
     const disabled = ref(false);
     const rootRef = ref();
     const imagesSize = reactive({});
+    const swiperRootRef = ref();
+    const swiperItemRefs = ref();
+    const gestureRef = ref();
 
     const closeNode = computed(() =>
       renderTNode(internalInstance, 'close-btn', {
@@ -124,6 +134,7 @@ export default defineComponent({
       state.dragging = false;
       state.draggedX = 0;
       state.draggedY = 0;
+      state.extraDraggedX = 0;
     };
 
     const handleClose = (e: Event, trigger: string) => {
@@ -143,122 +154,55 @@ export default defineComponent({
       }
     };
 
-    const onLoad = (e: Event, index: number) => {
+    const onImgLoad = (e: Event, index: number) => {
       const { height } = e.target as HTMLImageElement;
       imagesSize[index] = { height };
     };
 
-    const maxDraggedX = computed(() => {
+    const getMaxDraggedX = () => {
       const rootOffsetWidth = rootRef.value?.offsetWidth || 0;
       const scaledWidth = state.scale * rootOffsetWidth;
       return Math.max(0, (scaledWidth - rootOffsetWidth) / 2);
-    });
+    };
 
-    const maxDraggedY = computed(() => {
+    const getMaxDraggedY = (index: number) => {
       const rootOffsetHeight = rootRef.value?.offsetHeight || 0;
-      const currentImageScaledHeight = state.scale * (imagesSize?.[currentIndex.value]?.height || 0);
+      const currentImageScaledHeight = state.scale * (imagesSize?.[index]?.height || 0);
       if (currentImageScaledHeight <= rootOffsetHeight) return 0;
       return Math.max(0, (currentImageScaledHeight - rootOffsetHeight) / 2);
-    });
-
-    let fingerNum: number;
-    let startScale: number;
-    let startDistance: number;
-    let doubleTapTimer: number | null;
-    let touchStartTime: number;
-    let startDraggedX: number;
-    let startDraggedY: number;
-    let isDragged = false;
-
-    const onTouchStart = (event: TouchEvent, index: number) => {
-      preventDefault(event, true);
-      const { touches } = event;
-
-      touch.start(event);
-
-      fingerNum = touches.length;
-      touchStartTime = Date.now();
-      startDraggedX = state.draggedX;
-      startDraggedY = state.draggedY;
-
-      state.dragging = fingerNum === 1;
-      state.zooming = fingerNum === 2;
-      state.touchIndex = index;
-
-      if (state.zooming) {
-        startScale = state.scale;
-        startDistance = getDistance(event.touches);
-      }
-    };
-
-    const onTouchMove = (event: TouchEvent) => {
-      const { touches } = event;
-
-      touch.move(event);
-      if (state.zooming) {
-        preventDefault(event, true);
-        if (touches.length === 2) {
-          const distance = getDistance(touches);
-          const scale = (startScale * distance) / startDistance;
-
-          setScale(scale);
-        }
-      }
-
-      if (state.dragging) {
-        const { deltaX, deltaY, isHorizontal } = touch;
-        const draggedX = deltaX.value + startDraggedX;
-        const draggedY = deltaY.value + startDraggedY;
-        state.extraDraggedX = draggedX;
-        if ((draggedX > maxDraggedX.value || draggedX < -maxDraggedX.value) && !isDragged && isHorizontal()) {
-          state.dragging = false;
-          return;
-        }
-
-        isDragged = true;
-        preventDefault(event, true);
-        state.draggedX = Math.min(Math.max(draggedX, -maxDraggedX.value), maxDraggedX.value);
-        state.draggedY = Math.min(Math.max(draggedY, -maxDraggedY.value), maxDraggedY.value);
-      }
     };
 
     const setScale = (scale: number) => {
       scale = Math.min(scale, +props.maxZoom + 1);
-
       if (scale !== state.scale) {
         state.scale = scale;
-        state.draggedX = 0;
-        state.draggedY = 0;
+
+        if (scale === 1) {
+          state.draggedX = 0;
+          state.draggedY = 0;
+        }
       }
     };
-    const resetScale = () => {
-      setScale(1);
-    };
+
+    let dragStartTime: number;
+    let doubleTapTimer: number | null;
 
     const toggleScale = () => {
       const scale = state.scale > 1 ? 1 : 2;
-
       setScale(scale);
     };
 
-    const checkTap = (event: Event) => {
-      if (fingerNum > 1) {
-        return;
-      }
-
-      // resetScale();
-
-      const { offsetX, offsetY } = touch;
-      const deltaTime = Date.now() - touchStartTime;
+    const checkTap = (e: DragState) => {
+      const { event } = e;
+      const deltaTime = Date.now() - dragStartTime;
       const TAP_TIME = 250;
-      const TAP_OFFSET = 5;
-
-      if (offsetX.value < TAP_OFFSET && offsetY.value < TAP_OFFSET && deltaTime < TAP_TIME) {
+      if (deltaTime < TAP_TIME) {
         if (doubleTapTimer) {
           clearTimeout(doubleTapTimer);
           doubleTapTimer = null;
+          state.dragging = false;
           toggleScale();
-        } else {
+        } else if (inBrowser) {
           doubleTapTimer = window.setTimeout(() => {
             handleClose(event, 'overlay');
             doubleTapTimer = null;
@@ -267,45 +211,136 @@ export default defineComponent({
       }
     };
 
-    const onTouchEnd = (event: TouchEvent) => {
-      let stopPropagation = false;
+    const onPinchChange = (scale: number, index: number) => {
+      state.zooming = true;
+      state.touchIndex = index;
+      setScale(scale);
+    };
 
-      if (state.zooming || state.dragging) {
-        stopPropagation = true;
+    const onPinchEnd = () => {
+      state.zooming = false;
+      if (state.scale < 1) {
+        setScale(1);
+      }
+      if (state.scale > props.maxZoom) {
+        state.scale = +props.maxZoom;
+      }
+    };
 
-        if (state.dragging && startDraggedX === state.draggedX && startDraggedY === state.draggedY) {
-          stopPropagation = false;
-        }
+    const handlePinch = (pinState: PinchState, index: number) => {
+      const {
+        last,
+        offset: [d],
+      } = pinState;
+      // 图片未加载完毕，禁止拖拽
+      if (!imagesSize?.[index]) return;
+      if (!last) {
+        onPinchChange(d, index);
+      } else {
+        onPinchEnd();
+      }
+    };
 
-        if (!event.touches.length) {
-          if (state.zooming) {
-            state.draggedX = Math.min(Math.max(state.draggedX, -maxDraggedX.value), maxDraggedX.value);
-            state.draggedY = Math.min(Math.max(state.draggedY, -maxDraggedY.value), maxDraggedY.value);
-            state.zooming = false;
-          }
+    const handleDrag = (dragState: DragState, index: number) => {
+      state.touchIndex = index;
+      const { setOffset } = swiperRootRef.value;
 
-          state.dragging = false;
-          startDraggedX = 0;
-          startDraggedY = 0;
-          startScale = 1;
-
-          startScale = 1;
-          if (state.scale < 1) {
-            resetScale();
-          }
-          if (state.scale > props.maxZoom) {
-            state.scale = +props.maxZoom;
-          }
-        }
+      // 图片未加载完毕，禁止拖拽
+      if (!imagesSize?.[index]) return;
+      const { first, movement, _movement, elapsedTime, tap, offset, overflow, _delta } = dragState;
+      if (first) {
+        dragStartTime = Date.now();
       }
 
-      // eliminate tap delay on safari
-      preventDefault(event, stopPropagation);
+      if (tap && elapsedTime > 0 && elapsedTime < 300) {
+        checkTap(dragState);
+        return;
+      }
+      // 过高图片允许上下滑动
+      state.draggedY = offset?.[1] || 0;
+
+      if (state.scale === 1) return;
 
-      checkTap(event);
-      touch.reset();
+      state.draggedX = offset?.[0] || 0;
+      state.dragging = true;
+
+      if (movement[0] !== _movement[0] && overflow[0] !== 0) {
+        state.extraDraggedX += _delta[0] / 5;
+        setOffset(state.extraDraggedX, 'X');
+      } else if (state.extraDraggedX !== 0) {
+        state.extraDraggedX = 0;
+        setOffset(state.extraDraggedX, 'X');
+      }
     };
 
+    const handleDragEnd = (dragState: DragState) => {
+      const { overflow, last } = dragState;
+      const { goPrev, goNext, swiperContainer } = swiperRootRef.value;
+
+      state.dragging = false;
+
+      if (state.extraDraggedX !== 0 && last) {
+        if (Math.abs(state.extraDraggedX) > 50) {
+          state.extraDraggedX = 0;
+          overflow[0] < 0 ? goNext('touch') : goPrev('touch');
+          return;
+        }
+        state.extraDraggedX = 0;
+        nextTick(() => {
+          swiperContainer.style.setProperty('transform', 'translateX(0)');
+          swiperContainer.style.setProperty('transition', 'transform 300ms');
+        });
+      }
+    };
+
+    const gestureOptions = reactive({
+      destroyInvisible: true,
+      visible: !!visible.value,
+    });
+
+    gestureRef.value = useGesture(gestureOptions);
+
+    watch(
+      () => visible.value,
+      (newVal) => (gestureOptions.visible = !!newVal),
+    );
+
+    watch(
+      () => [visible.value, swiperItemRefs.value],
+      ([newVisible, newRefs]) => {
+        if (!newVisible) return;
+        nextTick(() => {
+          newRefs?.forEach?.((item: any, index: number) => {
+            const { $el } = item;
+            gestureRef.value?.create(
+              $el as Element,
+              {
+                onDrag: (dragState: DragState) => handleDrag(dragState, index),
+                onDragEnd: (dragState: DragState) => handleDragEnd(dragState),
+                onPinch: (pinchState: PinchState) => handlePinch(pinchState, index),
+              },
+              {
+                drag: {
+                  from: () => [state.draggedX, state.draggedY],
+                  pointer: { touch: true },
+                  bounds: () => ({
+                    top: -getMaxDraggedY(index),
+                    right: getMaxDraggedX(),
+                    bottom: getMaxDraggedY(index),
+                    left: -getMaxDraggedX(),
+                  }),
+                },
+                pinch: {
+                  from: () => [state.scale, 0],
+                  pointer: { touch: true },
+                },
+              },
+            );
+          });
+        });
+      },
+    );
+
     watch(
       () => state.scale,
       (newVal) => {
@@ -317,18 +352,13 @@ export default defineComponent({
       },
     );
 
-    watch(
-      () => state.extraDraggedX,
-      (newVal) => {
-        if (newVal > maxDraggedX.value || newVal < -maxDraggedX.value) {
-          disabled.value = false;
-        } else {
-          disabled.value = true;
-        }
-      },
-    );
+    onUnmounted(() => {
+      clearTimeout(doubleTapTimer);
+    });
 
     return {
+      swiperRootRef,
+      swiperItemRefs,
       rootRef,
       disabled,
       name,
@@ -343,10 +373,7 @@ export default defineComponent({
       handleClose,
       handleDelete,
       onSwiperChange,
-      onTouchStart,
-      onTouchMove,
-      onTouchEnd,
-      onLoad,
+      onImgLoad,
     };
   },
 });
diff --git a/src/shared/index.ts b/src/shared/index.ts
index 0131e94c9..7b5517116 100644
--- a/src/shared/index.ts
+++ b/src/shared/index.ts
@@ -16,6 +16,7 @@ export * from './useScrollParent';
 export * from './useExpose';
 export * from './useTest';
 export * from './useClickAway';
+export * from './useGesture';
 
 /* directives */
 export { default as Hover } from './hover';
diff --git a/src/shared/useGesture/index.ts b/src/shared/useGesture/index.ts
new file mode 100644
index 000000000..7870adaf0
--- /dev/null
+++ b/src/shared/useGesture/index.ts
@@ -0,0 +1,89 @@
+import { ref, onUnmounted, watch, reactive } from 'vue';
+import {
+  createGesture,
+  dragAction,
+  pinchAction,
+  FullGestureState,
+  WebKitGestureEvent,
+  UserGestureConfig,
+} from '@use-gesture/vanilla';
+
+export type PinchState = Omit<FullGestureState<'pinch'>, 'event'> & {
+  event: PointerEvent | TouchEvent | WheelEvent | WebKitGestureEvent;
+};
+
+export type DragState = Omit<FullGestureState<'drag'>, 'event'> & {
+  event: PointerEvent | TouchEvent | WheelEvent | WebKitGestureEvent;
+};
+
+const Gesture = createGesture([dragAction, pinchAction]);
+
+export type GestureHandler = {
+  onDrag?: (state: DragState) => void;
+  onDragStart?: (state: DragState) => void;
+  onDragEnd?: (state: DragState) => void;
+  onPinch?: (state: PinchState) => void;
+  onPinchStart?: (state: PinchState) => void;
+  onPinchEnd?: (state: PinchState) => void;
+};
+
+export type UseGestureConfig = {
+  destroyInvisible?: boolean;
+  visible?: boolean;
+};
+
+type UseGrestureReturn = {
+  gesture: ReturnType<typeof Gesture> | null;
+  destroy: () => void;
+  create: (target: Element, handler: GestureHandler, config?: UserGestureConfig) => void;
+};
+
+/**
+ * 手势处理
+ * @param config 手势处理配置项
+ * @param config.destroyInvisible 是否不可见时销毁
+ * @param config.visible 可见性
+ * @example
+ * const visible = ref(false);
+ * const gesture = useGesture({ destroyInvisible: true, visible: visible.value });
+ * const handler = {
+ *   onDrag: (state) => {}
+ * }
+ * const config = {
+ *   drag: dragOptions
+ * }
+ * gesture.create(element, handler, config);
+ * gesture.destory();
+ */
+
+export function useGesture(config: UseGestureConfig): UseGrestureReturn {
+  const gesture = ref(null);
+
+  const destroy = () => gesture.value?.destroy?.();
+
+  watch(
+    () => [config?.destroyInvisible, config?.visible],
+    ([destroyInvisible, visible]) => {
+      if (destroyInvisible && !visible) {
+        destroy();
+      }
+    },
+  );
+
+  onUnmounted(() => {
+    gesture.value?.destroy?.();
+  });
+
+  const create = (target: Element, handler: GestureHandler, config: UserGestureConfig = {}) => {
+    // @ts-ignore
+    gesture.value = new Gesture(target, handler, config);
+    returns.gesture = gesture.value;
+  };
+
+  const returns: UseGrestureReturn = reactive({
+    gesture: gesture.value,
+    destroy,
+    create,
+  });
+  return returns;
+}
diff --git a/src/swiper/swiper.vue b/src/swiper/swiper.vue
index 89ec137b1..b11edfe60 100644
--- a/src/swiper/swiper.vue
+++ b/src/swiper/swiper.vue
@@ -57,11 +57,11 @@ import {
   computed,
   ref,
   provide,
-  defineProps,
   defineEmits,
+  defineExpose,
+  defineProps,
   watch,
   onUnmounted,
-  reactive,
 } from 'vue';
 import { useSwipe } from '@vueuse/core';
 import isObject from 'lodash/isObject';
@@ -176,43 +176,23 @@ const processIndex = (index: number, source: SwiperChangeSource) => {
   if (index >= max) {
     val = props.loop ? 0 : max - 1;
   }
-
   setCurrent(val);
   emit('change', val, { source });
 };
 
-const coordsStart = reactive({
-  x: 0,
-  y: 0,
-});
-
-const lengthX = ref(0);
-const lengthY = ref(0);
-
-useSwipe(swiperContainer, {
+const { lengthX, lengthY } = useSwipe(swiperContainer, {
   passive: false,
-  onSwipeStart(e: TouchEvent) {
-    if (e.touches.length > 1 || disabled.value || isSwiperDisabled.value) return;
-    coordsStart.x = undefined;
-    coordsStart.y = undefined;
+  onSwipeStart() {
+    if (disabled.value || isSwiperDisabled.value || !items.value.length) return;
     onItemClick(); // use touchstart to simulate click on swipe start
     stopAutoplay();
   },
   onSwipe(e: TouchEvent) {
-    if (e.touches.length > 1 || disabled.value || isSwiperDisabled.value) return;
-    const { clientX, clientY } = e.touches[0];
-    if (coordsStart.x === undefined || coordsStart.y === undefined) {
-      coordsStart.x = clientX;
-      coordsStart.y = clientY;
-    }
-
-    lengthX.value = coordsStart.x - clientX;
-    lengthY.value = coordsStart.y - clientY;
-
+    if (disabled.value || isSwiperDisabled.value || !items.value.length) return;
     onTouchMove(e);
   },
   onSwipeEnd() {
-    if (disabled.value || isSwiperDisabled.value) return;
+    if (disabled.value || isSwiperDisabled.value || !items.value.length) return;
     onTouchEnd();
   },
 });
@@ -251,7 +231,11 @@ const addChild = (item: any) => {
 
 const removeChild = (uid: number) => {
   const index = items.value.findIndex((item: any) => item.uid === uid);
-  items.value.splice(index, 0);
+  items.value.splice(index, 1);
+
+  if (current.value + 1 > items.value.length) {
+    goNext('nav');
+  }
 };
 
 const updateItemPosition = () => {
@@ -295,4 +279,11 @@ onMounted(() => {
 onUnmounted(() => {
   stopAutoplay();
 });
+
+defineExpose({
+  swiperContainer,
+  goPrev,
+  goNext,
+  setOffset,
+});
 </script>