From 41798a2ec6cad49252cdf36700392bd9dba92805 Mon Sep 17 00:00:00 2001
From: mtruning <1262327911@qq.com>
Date: Sun, 6 Mar 2022 15:19:18 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E9=A1=B5=E7=BC=A9=E6=94=BE=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/index.ts                            |  3 +-
 src/hooks/previewScale.hook.ts                | 71 +++++++++++++++++++
 src/hooks/{themeHook.ts => theme.hook.ts}     |  0
 .../chart/ContentEdit/hooks/useDrag.hook.ts   |  2 +-
 src/views/preview/index.vue                   | 45 ++++++++++--
 src/views/preview/utils/index.ts              | 23 ++++++
 6 files changed, 136 insertions(+), 8 deletions(-)
 create mode 100644 src/hooks/previewScale.hook.ts
 rename src/hooks/{themeHook.ts => theme.hook.ts} (100%)
 create mode 100644 src/views/preview/utils/index.ts

diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 2cead04f..979e8387 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -1 +1,2 @@
-export * from '@/hooks/themeHook'
\ No newline at end of file
+export * from '@/hooks/theme.hook'
+export * from '@/hooks/previewScale.hook'
\ No newline at end of file
diff --git a/src/hooks/previewScale.hook.ts b/src/hooks/previewScale.hook.ts
new file mode 100644
index 00000000..7fdd8ce3
--- /dev/null
+++ b/src/hooks/previewScale.hook.ts
@@ -0,0 +1,71 @@
+import { ref } from 'vue'
+import throttle from 'lodash/throttle'
+
+export const usePreviewScale = (
+  width: number,
+  height: number,
+  scaleDom: HTMLElement | null
+) => {
+  // * 指向最外层容器（没生效不知道为啥）
+  const appRef = ref()
+
+  // * 屏幕尺寸（px）
+  const baseWidth = width
+  const baseHeight = height
+
+  // * 默认缩放值
+  const scale = {
+    width: '1',
+    height: '1',
+  }
+
+  // * 需保持的比例
+  const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
+  const calcRate = () => {
+    // 当前宽高比
+    const currentRate = parseFloat(
+      (window.innerWidth / window.innerHeight).toFixed(5)
+    )
+    if (scaleDom) {
+      if (currentRate > baseProportion) {
+        // 表示更宽
+        scale.width = (
+          (window.innerHeight * baseProportion) /
+          baseWidth
+        ).toFixed(5)
+        scale.height = (window.innerHeight / baseHeight).toFixed(5)
+        scaleDom.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
+      } else {
+        // 表示更高
+        scale.height = (
+          window.innerWidth /
+          baseProportion /
+          baseHeight
+        ).toFixed(5)
+        scale.width = (window.innerWidth / baseWidth).toFixed(5)
+        scaleDom.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
+      }
+    }
+  }
+
+  const resize = throttle(() => {
+    calcRate()
+  }, 200)
+
+  // * 改变窗口大小重新绘制
+  const windowResize = () => {
+    window.addEventListener('resize', resize)
+  }
+
+  // * 改变窗口大小重新绘制
+  const unWindowResize = () => {
+    window.removeEventListener('resize', resize)
+  }
+
+  return {
+    appRef,
+    calcRate,
+    windowResize,
+    unWindowResize,
+  }
+}
diff --git a/src/hooks/themeHook.ts b/src/hooks/theme.hook.ts
similarity index 100%
rename from src/hooks/themeHook.ts
rename to src/hooks/theme.hook.ts
diff --git a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
index 02f7d842..da0e69d5 100644
--- a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
+++ b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
@@ -189,7 +189,7 @@ export const useMousePointHandle = (
     attr.w = newWidth > 0 ? newWidth : 0
     attr.x = itemAttrX + (isLeft ? currX : 0)
     attr.y = itemAttrY + (isTop ? currY : 0)
-  })
+  }, 50)
 
   const mouseup = () => {
     // 设置拖拽状态
diff --git a/src/views/preview/index.vue b/src/views/preview/index.vue
index a5af14d3..9e22334c 100644
--- a/src/views/preview/index.vue
+++ b/src/views/preview/index.vue
@@ -1,33 +1,66 @@
 <template>
   <div class="go-preview">
-    <h1>预览</h1>
+    <div ref="previewRef">
+      <h1>预览</h1>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { onUnmounted, ref, nextTick } from 'vue'
+import { usePreviewScale } from '@/hooks/index'
 import { getLocalStorage, fetchRouteParams } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
+import { ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
 
-const init = () => {
+interface ChartEditStorageType extends ChartEditStorage {
+  id: string
+}
+
+const previewRef = ref()
+
+const getLocalStorageInfo: () => ChartEditStorageType | undefined = () => {
   const routeParamsRes = fetchRouteParams()
   if (!routeParamsRes) return
   const { id } = routeParamsRes
 
-  const storageList = getLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST)
+  const storageList: ChartEditStorageType[] = getLocalStorage(
+    StorageEnum.GO_CHART_STORAGE_LIST
+  )
 
   for (let i = 0; i < storageList.length; i++) {
     if (id.toString() === storageList[i]['id']) {
-      console.log(storageList[i]);
-      break; 
+      return storageList[i]
     }
   }
 }
 
-init()
+const localStorageInfo: ChartEditStorageType | undefined = getLocalStorageInfo()
+const width = localStorageInfo?.editCanvasConfig.width
+const height = localStorageInfo?.editCanvasConfig.height
+
+if (!localStorageInfo) {
+  window['$message'].warning('获取数据失败')
+}
+
+nextTick(() => {
+  const { calcRate, windowResize, unWindowResize } = usePreviewScale(width as number, height as number, previewRef.value)
+
+  calcRate()
+  windowResize()
+
+  onUnmounted(() => {
+    unWindowResize()
+  })
+})
+
 </script>
 
 <style lang="scss" scoped>
 @include go("preview") {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   height: 100vh;
   width: 100vw;
   overflow: hidden;
diff --git a/src/views/preview/utils/index.ts b/src/views/preview/utils/index.ts
new file mode 100644
index 00000000..fa8781fe
--- /dev/null
+++ b/src/views/preview/utils/index.ts
@@ -0,0 +1,23 @@
+import { getLocalStorage, fetchRouteParams } from '@/utils'
+import { StorageEnum } from '@/enums/storageEnum'
+import { ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
+
+export interface ChartEditStorageType extends ChartEditStorage {
+  id: string
+}
+
+export const getLocalStorageInfo: () => ChartEditStorageType | undefined = () => {
+  const routeParamsRes = fetchRouteParams()
+  if (!routeParamsRes) return
+  const { id } = routeParamsRes
+
+  const storageList: ChartEditStorageType[] = getLocalStorage(
+    StorageEnum.GO_CHART_STORAGE_LIST
+  )
+
+  for (let i = 0; i < storageList.length; i++) {
+    if (id.toString() === storageList[i]['id']) {
+      return storageList[i]
+    }
+  }
+}