From 66700d256fc51aefc0f3974ca513f61ce93f6dec Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Sat, 29 Oct 2022 11:12:26 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=90=8C=E6=97=B6=E6=8B=96=E6=8B=BD?=
 =?UTF-8?q?=E7=94=BB=E5=B8=83=E5=B9=B6=E4=BF=AE=E6=94=B9=E7=94=BB=E5=B8=83?=
 =?UTF-8?q?=E6=AF=94=E4=BE=8B=E6=97=B6=EF=BC=8C=E9=83=A8=E5=88=86=E6=83=85?=
 =?UTF-8?q?=E5=86=B5=E4=B8=8B=E4=BD=BF=E9=80=82=E5=BA=94=E5=B1=8F=E5=B9=95?=
 =?UTF-8?q?=E6=93=8D=E4=BD=9C=E5=A4=B1=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Editor/Canvas/hooks/useViewportSize.ts    | 47 +++++++------------
 1 file changed, 18 insertions(+), 29 deletions(-)

diff --git a/src/views/Editor/Canvas/hooks/useViewportSize.ts b/src/views/Editor/Canvas/hooks/useViewportSize.ts
index d45131c2..07f5dfe7 100644
--- a/src/views/Editor/Canvas/hooks/useViewportSize.ts
+++ b/src/views/Editor/Canvas/hooks/useViewportSize.ts
@@ -30,39 +30,28 @@ export default (canvasRef: Ref<HTMLElement | undefined>) => {
       viewportTop.value = (canvasHeight - viewportActualHeight) / 2
     }
   }
-  // 计算画布可视区域的位置
-  const setViewportPosition = (newValue: number[], oldValue: number[]) => {
-    console.log(newValue, oldValue)
-    if (!canvasRef.value || !newValue || !newValue.length || !oldValue || !oldValue.length) return
+
+  // 更新画布可视区域的位置
+  const setViewportPosition = (newValue: number, oldValue: number) => {
+    if (!canvasRef.value) return
     const canvasWidth = canvasRef.value.clientWidth
     const canvasHeight = canvasRef.value.clientHeight
-    // change canvasPercentage
-    if (newValue[0] !== oldValue[0]) {
-      const newViewportActualWidth = canvasWidth * (newValue[0] / 100)
-      const oldViewportActualWidth = canvasWidth * (oldValue[0] / 100)
-      const newViewportActualHeight = canvasHeight * (newValue[0] / 100)
-      const oldViewportActualHeight = canvasHeight * (oldValue[0] / 100)
-      mainStore.setCanvasScale(newViewportActualWidth / VIEWPORT_SIZE)
-      viewportLeft.value = viewportLeft.value - (newViewportActualWidth - oldViewportActualWidth) / 2
-      viewportTop.value = viewportTop.value - (newViewportActualHeight - oldViewportActualHeight) / 2
-    } 
-    else if (newValue[1] !== oldValue[1]) {
-      // change viewportRatio
-      if (canvasHeight / canvasWidth > viewportRatio.value) {
-        const viewportActualWidth = canvasWidth * (canvasPercentage.value / 100)
-        mainStore.setCanvasScale(viewportActualWidth / VIEWPORT_SIZE)
-      }
-      else {
-        const viewportActualHeight = canvasHeight * (canvasPercentage.value / 100)
-        mainStore.setCanvasScale(viewportActualHeight / (VIEWPORT_SIZE * viewportRatio.value))
-      }
-    }
+
+    const newViewportActualWidth = canvasWidth * (newValue / 100)
+    const oldViewportActualWidth = canvasWidth * (oldValue / 100)
+    const newViewportActualHeight = canvasHeight * (newValue / 100)
+    const oldViewportActualHeight = canvasHeight * (oldValue / 100)
+
+    mainStore.setCanvasScale(newViewportActualWidth / VIEWPORT_SIZE)
+    viewportLeft.value = viewportLeft.value - (newViewportActualWidth - oldViewportActualWidth) / 2
+    viewportTop.value = viewportTop.value - (newViewportActualHeight - oldViewportActualHeight) / 2
   }
 
-  // 可视区域缩放或比例变化时，更新可视区域的位置
-  watch([canvasPercentage, viewportRatio], setViewportPosition)
+  // 可视区域缩放或比例变化时，重置/更新可视区域的位置
+  watch(canvasPercentage, setViewportPosition)
+  watch(viewportRatio, initViewportPosition)
 
-  // 画布拖拽状态改变（复原）时，更新可视区域的位置
+  // 画布拖拽状态改变（复原）时，重置可视区域的位置
   watch(canvasDragged, () => {
     if (!canvasDragged.value) initViewportPosition()
   })
@@ -75,7 +64,7 @@ export default (canvasRef: Ref<HTMLElement | undefined>) => {
     top: viewportTop.value,
   }))
 
-  // 监听画布尺寸发生变化时，更新可视区域的位置
+  // 监听画布尺寸发生变化时，重置可视区域的位置
   const resizeObserver = new ResizeObserver(initViewportPosition)
 
   onMounted(() => {