feat: 新增页面预览方式

src/views/preview/hooks/useScale.hook.ts

@@ -1,31 +1,86 @@
-import { onUnmounted, ref, nextTick, computed } from 'vue'
-import { usePreviewScale } from '@/hooks/index'
+import { ref, nextTick, onMounted, onUnmounted} from 'vue'
+import { usePreviewFitScale, usePreviewScrollYScale, usePreviewScrollXScale, usePreviewFullScale } from '@/hooks/index'
 import type { ChartEditStorageType } from '../index.d'
+import { PreviewScaleEnum } from '@/enums/styleEnum'
 
 export const useScale = (localStorageInfo: ChartEditStorageType) => {
-
+  const entityRef = ref()
   const previewRef = ref()
-
-  const width = ref(localStorageInfo?.editCanvasConfig.width)
-  const height = ref(localStorageInfo?.editCanvasConfig.height)
+  const width = ref(localStorageInfo.editCanvasConfig.width)
+  const height = ref(localStorageInfo.editCanvasConfig.height)
 
   // 屏幕适配
-  nextTick(() => {
-    const { calcRate, windowResize, unWindowResize } = usePreviewScale(
-      width.value as number,
-      height.value as number,
-      previewRef.value
-    )
+  onMounted(() => {
+    switch (localStorageInfo.editCanvasConfig.previewScaleType) {
+      case PreviewScaleEnum.FIT: (() => {
+        const { calcRate, windowResize, unWindowResize } = usePreviewFitScale(
+          width.value as number,
+          height.value as number,
+          previewRef.value,
+        )
+        calcRate()
+        windowResize()
+        onUnmounted(() => {
+          unWindowResize()
+        })
+      })()
+        break;
+      case PreviewScaleEnum.SCROLL_Y: (() => {
+        const { calcRate, windowResize, unWindowResize } = usePreviewScrollYScale(
+          width.value as number,
+          height.value as number,
+          previewRef.value,
+          (scale) => {
+            const dom = entityRef.value
+            dom.style.width = `${width.value * scale.width}px`
+            dom.style.height = `${height.value * scale.height}px`
+          }
+        )
+        calcRate()
+        windowResize()
+        onUnmounted(() => {
+          unWindowResize()
+        })
+      })()
 
-    calcRate()
-    windowResize()
+        break;
+      case PreviewScaleEnum.SCROLL_X: (() => {
+        const { calcRate, windowResize, unWindowResize } = usePreviewScrollXScale(
+          width.value as number,
+          height.value as number,
+          previewRef.value,
+          (scale) => {
+            const dom = entityRef.value
+            dom.style.width = `${width.value * scale.width}px`
+            dom.style.height = `${height.value * scale.height}px`
+          }
+        )
+        calcRate()
+        windowResize()
+        onUnmounted(() => {
+          unWindowResize()
+        })
+      })()
 
-    onUnmounted(() => {
-      unWindowResize()
-    })
+        break;
+      case PreviewScaleEnum.FULL: (() => {
+        const { calcRate, windowResize, unWindowResize } = usePreviewFullScale(
+          width.value as number,
+          height.value as number,
+          previewRef.value,
+        )
+        calcRate()
+        windowResize()
+        onUnmounted(() => {
+          unWindowResize()
+        })
+      })()
+        break;
+    }
   })
 
   return {
+    entityRef,
     previewRef
   }
 }