vant 4.3.1 → 4.4.0

package/lib/image-preview/ImagePreviewItem.js

@@ -29,7 +29,12 @@ var import_image = require("../image");
 var import_loading = require("../loading");
 var import_swipe_item = require("../swipe-item");
 const getDistance = (touches) => Math.sqrt((touches[0].clientX - touches[1].clientX) ** 2 + (touches[0].clientY - touches[1].clientY) ** 2);
+const getCenter = (touches) => ({
+  x: (touches[0].clientX + touches[1].clientX) / 2,
+  y: (touches[0].clientY + touches[1].clientY) / 2
+});
 const bem = (0, import_utils.createNamespace)("image-preview")[1];
+const longImageRatio = 2.6;
 var stdin_default = (0, import_vue2.defineComponent)({
   props: {
     src: String,
@@ -52,20 +57,14 @@ var stdin_default = (0, import_vue2.defineComponent)({
       moveY: 0,
       moving: false,
       zooming: false,
-      imageRatio: 0,
-      displayWidth: 0,
-      displayHeight: 0
+      imageRatio: 0
     });
     const touch = (0, import_use_touch.useTouch)();
+    const imageRef = (0, import_vue2.ref)();
     const swipeItem = (0, import_vue2.ref)();
-    const vertical = (0, import_vue2.computed)(() => {
-      const {
-        rootWidth,
-        rootHeight
-      } = props;
-      const rootRatio = rootHeight / rootWidth;
-      return state.imageRatio > rootRatio;
-    });
+    const vertical = (0, import_vue2.ref)(false);
+    const isLongImage = (0, import_vue2.ref)(false);
+    let initialMoveY = 0;
     const imageStyle = (0, import_vue2.computed)(() => {
       const {
         scale,
@@ -77,10 +76,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
       const style = {
         transitionDuration: zooming || moving ? "0s" : ".3s"
       };
-      if (scale !== 1) {
-        const offsetX = moveX / scale;
-        const offsetY = moveY / scale;
-        style.transform = `scale(${scale}, ${scale}) translate(${offsetX}px, ${offsetY}px)`;
+      if (scale !== 1 || isLongImage.value) {
+        style.transform = `matrix(${scale}, 0, 0, ${scale}, ${moveX}, ${moveY})`;
       }
       return style;
     });
@@ -106,10 +103,26 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }
       return 0;
     });
-    const setScale = (scale) => {
+    const setScale = (scale, center) => {
+      var _a;
       scale = (0, import_utils.clamp)(scale, +props.minZoom, +props.maxZoom + 1);
       if (scale !== state.scale) {
+        const ratio = scale / state.scale;
         state.scale = scale;
+        if (center) {
+          const imageRect = (0, import_use.useRect)((_a = imageRef.value) == null ? void 0 : _a.$el);
+          const origin = {
+            x: imageRect.width * 0.5,
+            y: imageRect.height * 0.5
+          };
+          const moveX = state.moveX - (center.x - imageRect.left - origin.x) * (ratio - 1);
+          const moveY = state.moveY - (center.y - imageRect.top - origin.y) * (ratio - 1);
+          state.moveX = (0, import_utils.clamp)(moveX, -maxMoveX.value, maxMoveX.value);
+          state.moveY = (0, import_utils.clamp)(moveY, -maxMoveY.value, maxMoveY.value);
+        } else {
+          state.moveX = 0;
+          state.moveY = isLongImage.value ? initialMoveY : 0;
+        }
         emit("scale", {
           scale,
           index: props.active
@@ -118,20 +131,20 @@ var stdin_default = (0, import_vue2.defineComponent)({
     };
     const resetScale = () => {
       setScale(1);
-      state.moveX = 0;
-      state.moveY = 0;
     };
     const toggleScale = () => {
       const scale = state.scale > 1 ? 1 : 2;
-      setScale(scale);
-      state.moveX = 0;
-      state.moveY = 0;
+      setScale(scale, scale === 2 || isLongImage.value ? {
+        x: touch.startX.value,
+        y: touch.startY.value
+      } : void 0);
     };
     let fingerNum;
     let startMoveX;
     let startMoveY;
     let startScale;
     let startDistance;
+    let lastCenter;
     let doubleTapTimer;
     let touchStartTime;
     let isImageMoved = false;
@@ -151,11 +164,11 @@ var stdin_default = (0, import_vue2.defineComponent)({
       startMoveY = state.moveY;
       touchStartTime = Date.now();
       isImageMoved = false;
-      state.moving = fingerNum === 1 && state.scale !== 1;
+      state.moving = fingerNum === 1 && (state.scale !== 1 || isLongImage.value);
       state.zooming = fingerNum === 2 && !offsetX.value;
       if (state.zooming) {
         startScale = state.scale;
-        startDistance = getDistance(event.touches);
+        startDistance = getDistance(touches);
       }
     };
     const onTouchMove = (event) => {
@@ -184,7 +197,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
         if (touches.length === 2) {
           const distance = getDistance(touches);
           const scale = startScale * distance / startDistance;
-          setScale(scale);
+          lastCenter = getCenter(touches);
+          setScale(scale, lastCenter);
         }
       }
     };
@@ -238,7 +252,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
           }
           const maxZoom = +props.maxZoom;
           if (state.scale > maxZoom) {
-            state.scale = maxZoom;
+            setScale(maxZoom, lastCenter);
           }
         }
       }
@@ -246,12 +260,30 @@ var stdin_default = (0, import_vue2.defineComponent)({
       checkTap();
       touch.reset();
     };
+    const resize = () => {
+      const {
+        rootWidth,
+        rootHeight
+      } = props;
+      const rootRatio = rootHeight / rootWidth;
+      const {
+        imageRatio
+      } = state;
+      vertical.value = state.imageRatio > rootRatio && imageRatio < longImageRatio;
+      isLongImage.value = state.imageRatio > rootRatio && imageRatio >= longImageRatio;
+      if (isLongImage.value) {
+        initialMoveY = (imageRatio * rootWidth - rootHeight) / 2;
+        state.moveY = initialMoveY;
+      }
+      resetScale();
+    };
     const onLoad = (event) => {
       const {
         naturalWidth,
         naturalHeight
       } = event.target;
       state.imageRatio = naturalHeight / naturalWidth;
+      resize();
     };
     (0, import_vue2.watch)(() => props.active, resetScale);
     (0, import_vue2.watch)(() => props.show, (value) => {
@@ -259,6 +291,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         resetScale();
       }
     });
+    (0, import_vue2.watch)(() => [props.rootWidth, props.rootHeight], resize);
     (0, import_use.useEventListener)("touchmove", onTouchMove, {
       target: (0, import_vue2.computed)(() => {
         var _a;
@@ -283,6 +316,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         }, [slots.image({
           src: props.src
         })]) : (0, import_vue.createVNode)(import_image.Image, {
+          "ref": imageRef,
           "src": props.src,
           "fit": "contain",
           "class": bem("image", {