feat: 新增预览放大功能

src/hooks/usePreviewScale.hook.ts

@@ -54,7 +54,7 @@ export const usePreviewFitScale = (
     window.addEventListener('resize', resize)
   }
 
-  // * 改变窗口大小重新绘制
+  // * 卸载监听
   const unWindowResize = () => {
     window.removeEventListener('resize', resize)
   }
@@ -106,7 +106,7 @@ export const usePreviewScrollYScale = (
     window.addEventListener('resize', resize)
   }
 
-  // * 改变窗口大小重新绘制
+  // * 卸载监听
   const unWindowResize = () => {
     window.removeEventListener('resize', resize)
   }
@@ -158,7 +158,7 @@ export const usePreviewScrollXScale = (
     window.addEventListener('resize', resize)
   }
 
-  // * 改变窗口大小重新绘制
+  // * 卸载监听
   const unWindowResize = () => {
     window.removeEventListener('resize', resize)
   }
@@ -205,7 +205,7 @@ export const usePreviewFullScale = (
     window.addEventListener('resize', resize)
   }
 
-  // * 改变窗口大小重新绘制
+  // * 卸载监听
   const unWindowResize = () => {
     window.removeEventListener('resize', resize)
   }

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

@@ -12,7 +12,31 @@ export const useScale = (localStorageInfo: ChartEditStorageType) => {
   const height = ref(localStorageInfo.editCanvasConfig.height)
   const scaleRef = ref({ width: 1, height: 1 })
 
-  provide(SCALE_KEY, scaleRef);
+  provide(SCALE_KEY, scaleRef)
+
+  // 监听鼠标滚轮 +ctrl 键
+  const useAddWheelHandle = (removeEvent: Function) => {
+    addEventListener(
+      'wheel',
+      (e: any) => {
+        if (window?.$KeyboardActive?.ctrl) {
+          e.preventDefault()
+          e.stopPropagation()
+          removeEvent()
+          const transform = previewRef.value.style.transform
+          // 使用正则解析 scale(1, 1) 中的两个数值
+          const regRes = transform.match(/scale\((\d+\.?\d*)*/) as RegExpMatchArray
+          const width = regRes[1]
+          if (e.wheelDelta > 0) {
+            previewRef.value.style.transform = `scale(${parseFloat(Number(width).toFixed(2)) + 0.1})`
+          } else {
+            previewRef.value.style.transform = `scale(${parseFloat(Number(width).toFixed(2)) - 0.1})`
+          }
+        }
+      },
+      { passive: false }
+    )
+  }
 
   const updateScaleRef = (scale: { width: number; height: number }) => {
     // 这里需要解构，保证赋值给scaleRef的为一个新对象
@@ -23,7 +47,8 @@ export const useScale = (localStorageInfo: ChartEditStorageType) => {
   // 屏幕适配
   onMounted(() => {
     switch (localStorageInfo.editCanvasConfig.previewScaleType) {
-      case PreviewScaleEnum.FIT: (() => {
+      case PreviewScaleEnum.FIT:
+        ;(() => {
           const { calcRate, windowResize, unWindowResize } = usePreviewFitScale(
             width.value as number,
             height.value as number,
@@ -32,17 +57,19 @@ export const useScale = (localStorageInfo: ChartEditStorageType) => {
           )
           calcRate()
           windowResize()
+          useAddWheelHandle(unWindowResize)
           onUnmounted(() => {
             unWindowResize()
           })
         })()
-        break;
+        break
-      case PreviewScaleEnum.SCROLL_Y: (() => {
+      case PreviewScaleEnum.SCROLL_Y:
+        ;(() => {
           const { calcRate, windowResize, unWindowResize } = usePreviewScrollYScale(
             width.value as number,
             height.value as number,
             previewRef.value,
-          (scale) => {
+            scale => {
               const dom = entityRef.value
               dom.style.width = `${width.value * scale.width}px`
               dom.style.height = `${height.value * scale.height}px`
@@ -51,18 +78,20 @@ export const useScale = (localStorageInfo: ChartEditStorageType) => {
           )
           calcRate()
           windowResize()
+          useAddWheelHandle(unWindowResize)
           onUnmounted(() => {
             unWindowResize()
           })
         })()
 
-        break;
+        break
-      case PreviewScaleEnum.SCROLL_X: (() => {
+      case PreviewScaleEnum.SCROLL_X:
+        ;(() => {
           const { calcRate, windowResize, unWindowResize } = usePreviewScrollXScale(
             width.value as number,
             height.value as number,
             previewRef.value,
-          (scale) => {
+            scale => {
               const dom = entityRef.value
               dom.style.width = `${width.value * scale.width}px`
               dom.style.height = `${height.value * scale.height}px`
@@ -71,13 +100,15 @@ export const useScale = (localStorageInfo: ChartEditStorageType) => {
           )
           calcRate()
           windowResize()
+          useAddWheelHandle(unWindowResize)
           onUnmounted(() => {
             unWindowResize()
           })
         })()
 
-        break;
+        break
-      case PreviewScaleEnum.FULL: (() => {
+      case PreviewScaleEnum.FULL:
+        ;(() => {
           const { calcRate, windowResize, unWindowResize } = usePreviewFullScale(
             width.value as number,
             height.value as number,
@@ -86,11 +117,12 @@ export const useScale = (localStorageInfo: ChartEditStorageType) => {
           )
           calcRate()
           windowResize()
+          useAddWheelHandle(unWindowResize)
           onUnmounted(() => {
             unWindowResize()
           })
         })()
-        break;
+        break
     }
   })
 

src/views/preview/suspenseIndex.vue

@@ -30,7 +30,7 @@
 import { computed } from 'vue'
 import { PreviewRenderList } from './components/PreviewRenderList'
 import { getFilterStyle, setTitle } from '@/utils'
-import { getEditCanvasConfigStyle, getSessionStorageInfo } from './utils'
+import { getEditCanvasConfigStyle, getSessionStorageInfo, keyRecordHandle } from './utils'
 import { useComInstall } from './hooks/useComInstall.hook'
 import { useScale } from './hooks/useScale.hook'
 import { useStore } from './hooks/useStore.hook'
@@ -60,6 +60,9 @@ const showEntity = computed(() => {
 useStore(chartEditStore)
 const { entityRef, previewRef } = useScale(chartEditStore)
 const { show } = useComInstall(chartEditStore)
+
+// 开启键盘监听
+keyRecordHandle()
 </script>
 
 <style lang="scss" scoped>

src/views/preview/utils/index.ts

@@ -1,2 +1,3 @@
 export * from './style'
 export * from './storage'
+export * from './keyboard'

src/views/preview/utils/keyboard.ts

@@ -0,0 +1,32 @@
+// 处理键盘记录
+export const keyRecordHandle = () => {
+  // 默认赋值
+  window.$KeyboardActive = {
+    ctrl: false,
+    space: false
+  }
+
+  document.onkeydown = (e: KeyboardEvent) => {
+    const { keyCode } = e
+    if (keyCode == 32 && e.target == document.body) e.preventDefault()
+
+    if ([17, 32].includes(keyCode) && window.$KeyboardActive) {
+      switch (keyCode) {
+        case 17: window.$KeyboardActive.ctrl = true; break
+        case 32: window.$KeyboardActive.space = true; break
+      }
+    }
+  }
+
+  document.onkeyup = (e: KeyboardEvent) => {
+    const { keyCode } = e
+    if (keyCode == 32 && e.target == document.body) e.preventDefault()
+
+    if ([17, 32].includes(keyCode) && window.$KeyboardActive) {
+      switch (keyCode) {
+        case 17: window.$KeyboardActive.ctrl = false; break
+        case 32: window.$KeyboardActive.space = false; break
+      }
+    }
+  }
+}