From 16fdf5f457c3e44df951b496a1869a676bdad8f4 Mon Sep 17 00:00:00 2001
From: yanquanfahei <1449826851@qq.com>
Date: Sat, 6 May 2023 15:01:08 +0800
Subject: [PATCH] feat: dodule scale

---
 .gitignore                      |  3 ++-
 package.json                    |  1 +
 pnpm-lock.yaml                  | 20 ++++++++++++++++++++
 src/components/ImageBox.vue     | 25 ++++++++++++++++++++-----
 src/components/ImagePreview.vue |  4 ++--
 src/main.ts                     |  4 ++++
 6 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/.gitignore b/.gitignore
index b512c09..76add87 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
-node_modules
\ No newline at end of file
+node_modules
+dist
\ No newline at end of file
diff --git a/package.json b/package.json
index 23f42b2..75c0bb1 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,7 @@
     "simple-git-hooks": "^2.8.1",
     "stylelint": "^15.3.0",
     "typescript": "^4.9.4",
+    "vconsole": "^3.15.0",
     "vite": "4.0.4",
     "vue-tsc": "^1.0.24"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ec78157..efd18a7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -30,6 +30,7 @@ specifiers:
   simple-git-hooks: ^2.8.1
   stylelint: ^15.3.0
   typescript: ^4.9.4
+  vconsole: ^3.15.0
   vite: 4.0.4
   vue: ^3.2.45
   vue-i18n: ^9.1.9
@@ -69,6 +70,7 @@ devDependencies:
   simple-git-hooks: 2.8.1
   stylelint: 15.5.0
   typescript: 4.9.5
+  vconsole: 3.15.0
   vite: 4.0.4_less@4.1.3
   vue-tsc: 1.4.2_typescript@4.9.5
 
@@ -3793,6 +3795,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /copy-text-to-clipboard/3.1.0:
+    resolution: {integrity: sha512-PFM6BnjLnOON/lB3ta/Jg7Ywsv+l9kQGD4TWDCSlRBGmqnnTM5MrDkhAFgw+8HZt0wW6Q2BBE4cmy9sq+s9Qng==}
+    engines: {node: '>=12'}
+    dev: true
+
   /core-js-compat/3.30.1:
     resolution: {integrity: sha512-d690npR7MC6P0gq4npTl5n2VQeNAmUrJ90n+MHiKS7W2+xno4o3F5GDEuylSdi6EJ3VssibSGXOa1r3YXD3Mhw==}
     dependencies:
@@ -6446,6 +6453,10 @@ packages:
     resolution: {integrity: sha512-YVE1mIJ4VpUMqZObFndk9CJu6DBJR/GB13p3tXuNbwD4XExaI5EOuRl6BHeIDxIqXZVxSfAC+y6U1Z/IxCfKUg==}
     dev: true
 
+  /mutation-observer/1.0.3:
+    resolution: {integrity: sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA==}
+    dev: true
+
   /nanoid/3.3.6:
     resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -8758,6 +8769,15 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
+  /vconsole/3.15.0:
+    resolution: {integrity: sha512-8hq7wabPcRucSWQyN7/1tthMawP9JPvM95zgtMHpPknMMMCKj+abpoK7P7oKK4B0qw58C24Mdvo9+raUdpHyVQ==}
+    dependencies:
+      '@babel/runtime': 7.21.0
+      copy-text-to-clipboard: 3.1.0
+      core-js: 3.30.1
+      mutation-observer: 1.0.3
+    dev: true
+
   /vfile-location/2.0.6:
     resolution: {integrity: sha512-sSFdyCP3G6Ka0CEmN83A2YCMKIieHx0EDaj5IDP4g1pa5ZJ4FJDvpO0WODLxo4LUX4oe52gmSCK7Jw4SBghqxA==}
     dev: true
diff --git a/src/components/ImageBox.vue b/src/components/ImageBox.vue
index fd1e29c..6f9d254 100644
--- a/src/components/ImageBox.vue
+++ b/src/components/ImageBox.vue
@@ -13,7 +13,9 @@
         willChange: 'transform'
       }"
     >
-      <view @touchstart="handleTouchStart">
+      <view
+        @touchstart="handleTouchStart"
+      >
         <img
           :style="{
             width: currentWidth + 'px',
@@ -33,12 +35,13 @@ import { reactive, ref } from 'vue'
 import getSuitableImageSize from './utils/getSuitableImageSize'
 import getMultipleTouchPosition from './utils/getMultipleTouchPosition'
 import useAnimationPosition from './hooks/useAnimationPosition'
-import { minStartTouchOffset } from './variables'
+import { minStartTouchOffset, scaleBuffer } from './variables'
 import { computePositionEdge, getReachType } from './utils/edgeHandle'
 import getPositionOnMoveOrScale from './utils/getPositionOnMoveOrScale'
 import { limitScale } from './utils/limitTarget'
 import useScrollPosition from './hooks/useScrollPosition'
 import useContinuousTap from './hooks/useContinuousTap'
+import useDebounceCallback from './hooks/useDebounceCallback'
 
 const props = defineProps({
   src: {
@@ -140,8 +143,8 @@ function onScale (current, clientX, clientY) {
   }
 }
 
-const handleMove = (nextClientX, nextClientY, currentTouchLength) => {
-  const { touched, maskTouched, CX, CY, lastCX, lastCY, lastX, lastY, scale, reach, x, y, width, height } = state
+const handleMove = useDebounceCallback((nextClientX, nextClientY, currentTouchLength) => {
+  const { touched, maskTouched, CX, CY, lastCX, lastCY, lastX, lastY, scale, reach, x, y, width, height, naturalWidth, touchLength } = state
   if (touched || maskTouched) {
     // 单指最小缩放下，以初始移动距离来判断意图
     if (currentTouchLength === 0 && initialTouchRef.value === 0) {
@@ -178,13 +181,25 @@ const handleMove = (nextClientX, nextClientY, currentTouchLength) => {
       state.reach = 'x'
       return
     }
+
+    // 目标倍数
+    const toScale = limitScale(
+      scale + ((currentTouchLength - touchLength) / 100 / 2) * scale,
+      naturalWidth / width,
+      scaleBuffer
+    )
+
+    // 导出变量
+    emit('expose', { scale: toScale })
+
     Object.assign(state, {
       touchLength: currentTouchLength,
       reach: currentReach,
+      scale: toScale,
       ...getPositionOnMoveOrScale(x, y, width, height, scale, scale, nextClientX, nextClientY, offsetX, offsetY)
     })
   }
-}
+}, { maxWait: 8 })
 
 function onTouchmove (e) {
   e.preventDefault()
diff --git a/src/components/ImagePreview.vue b/src/components/ImagePreview.vue
index af02fb4..7099763 100644
--- a/src/components/ImagePreview.vue
+++ b/src/components/ImagePreview.vue
@@ -167,8 +167,8 @@ function handleReachMove (reachPosition, clientX, clientY, nextScale) {
 }
 
 function handleReachUp (clientX, clientY) {
-  const offsetClientX = clientX - (state.lastCX ?? clientX)
-  const offsetClientY = clientY - (state.lastCY ?? clientY)
+  const offsetClientX = clientX - (state.lastCX === null || state.lastCX === undefined ? clientX : state.lastCX)
+  const offsetClientY = clientY - (state.lastCY === null || state.lastCY === undefined ? clientY : state.lastCY)
   let willClose = false
   // 下一张
 
diff --git a/src/main.ts b/src/main.ts
index 6ad663c..fe99480 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,10 @@
 import { createSSRApp } from 'vue'
 import App from './App.vue'
 import './styles.css'
+import vconsole from 'vconsole'
+
+new vconsole()
+
 export function createApp () {
   const app = createSSRApp(App)
   return {