perf: 优化画布缩放体验

src/store/modules/chartLayoutStore/chartLayoutStore.d.ts

@@ -14,7 +14,8 @@ export enum ChartLayoutStoreEnum {
   DETAILS = 'details',
   Chart_TYPE = 'chartType',
   LAYER_TYPE = 'layerType',
-  PERCENTAGE = 'percentage'
+  PERCENTAGE = 'percentage',
+  RE_POSITION_CANVAS = 'rePositionCanvas'
 }
 
 export interface ChartLayoutType {
@@ -30,4 +31,6 @@ export interface ChartLayoutType {
   [ChartLayoutStoreEnum.LAYER_TYPE]: LayerModeEnum
   // 当前正在加载的数量
   [ChartLayoutStoreEnum.PERCENTAGE]: number
+  // 是否重置当前画布位置
+  [ChartLayoutStoreEnum.RE_POSITION_CANVAS]: boolean
 }

src/store/modules/chartLayoutStore/chartLayoutStore.ts

@@ -26,6 +26,8 @@ export const useChartLayoutStore = defineStore({
     layerType: LayerModeEnum.THUMBNAIL,
     // 当前加载数量
     percentage: 0,
+    // 是否重置当前画布位置
+    rePositionCanvas: false,
     // 防止值不存在
     ...storageChartLayout
   }),
@@ -47,6 +49,9 @@ export const useChartLayoutStore = defineStore({
     },
     getPercentage(): number {
       return this.percentage
+    },
+    getRePositionCanvas(): boolean {
+      return this.rePositionCanvas
     }
   },
   actions: {
@@ -54,7 +59,10 @@ export const useChartLayoutStore = defineStore({
       this.$patch(state => {
         state[key] = value
       })
+      // 存储本地
       setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state)
+      // 这里需要标记重置画布位置
+      this.rePositionCanvas = true;
       // 重新计算拖拽区域缩放比例
       setTimeout(() => {
         chartEditStore.computedScale()