Merge branch 'dev' into master-fetch-dev

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

@@ -1,14 +1,25 @@
-import { ref, onMounted, onUnmounted} from 'vue'
+import { ref, provide, 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 SCALE_KEY = 'scale-value'
+
 export const useScale = (localStorageInfo: ChartEditStorageType) => {
 
   const entityRef = ref()
   const previewRef = ref()
   const width = ref(localStorageInfo.editCanvasConfig.width)
   const height = ref(localStorageInfo.editCanvasConfig.height)
+  const scaleRef = ref({ width: 1, height: 1 })
+
+  provide(SCALE_KEY, scaleRef);
+
+  const updateScaleRef = (scale: { width: number; height: number }) => {
+    // 这里需要解构，保证赋值给scaleRef的为一个新对象
+    // 因为scale始终为同一引用
+    scaleRef.value = { ...scale }
+  }
 
   // 屏幕适配
   onMounted(() => {
@@ -18,6 +29,7 @@ export const useScale = (localStorageInfo: ChartEditStorageType) => {
           width.value as number,
           height.value as number,
           previewRef.value,
+          updateScaleRef
         )
         calcRate()
         windowResize()
@@ -35,6 +47,7 @@ export const useScale = (localStorageInfo: ChartEditStorageType) => {
             const dom = entityRef.value
             dom.style.width = `${width.value * scale.width}px`
             dom.style.height = `${height.value * scale.height}px`
+            updateScaleRef(scale)
           }
         )
         calcRate()
@@ -54,6 +67,7 @@ export const useScale = (localStorageInfo: ChartEditStorageType) => {
             const dom = entityRef.value
             dom.style.width = `${width.value * scale.width}px`
             dom.style.height = `${height.value * scale.height}px`
+            updateScaleRef(scale)
           }
         )
         calcRate()
@@ -69,6 +83,7 @@ export const useScale = (localStorageInfo: ChartEditStorageType) => {
           width.value as number,
           height.value as number,
           previewRef.value,
+          updateScaleRef
         )
         calcRate()
         windowResize()
@@ -82,6 +97,7 @@ export const useScale = (localStorageInfo: ChartEditStorageType) => {
 
   return {
     entityRef,
-    previewRef
+    previewRef,
+    scaleRef
   }
 }