feat: 新增工作区域内容模块

src/store/modules/chartEditStore/chartEditStore.d.ts

@@ -1,3 +1,50 @@
+// 编辑区域大小
+export enum EditCanvasTypeEnum {
+  EDITLAYOUTDOM = 'editLayoutDom',
+  EDITCONTENTDON = 'editContentDom',
+  WIDTH = 'width',
+  HEIGHT = 'height',
+  OFFSET = 'offset',
+  SCALE = 'scale',
+  LOCKSCALE = 'lockScale',
+  BACKGROUND = 'background'
+}
+export type EditCanvasType = {
+  // 编辑区域 DOM
+  [EditCanvasTypeEnum.EDITLAYOUTDOM]?: HTMLElement
+  [EditCanvasTypeEnum.EDITCONTENTDON]?: HTMLElement
+  // 大屏宽度
+  [EditCanvasTypeEnum.WIDTH]: number
+  // 大屏高度
+  [EditCanvasTypeEnum.HEIGHT]: number
+  // 偏移大小
+  [EditCanvasTypeEnum.OFFSET]: number
+  // 缩放
+  [EditCanvasTypeEnum.SCALE]: number
+  // 锁定缩放
+  [EditCanvasTypeEnum.LOCKSCALE]: boolean
+  // 背景色
+  [EditCanvasTypeEnum.BACKGROUND]?: string
+}
+
+// 坐标轴信息
+export enum EditCanvasTypeEnum {
+  X = 'x',
+  Y = 'y'
+}
+export type MousePositionType = {
+  // X 轴
+  [EditCanvasTypeEnum.X]: number
+  // y 轴
+  [EditCanvasTypeEnum.Y]: number
+}
+
+// Store 类型
+export enum chartEditStoreEnum {
+  EDITCANVAS = 'editCanvas',
+  MOUSEPOSITION = 'mousePosition'
+}
 export interface chartEditStoreType {
-  
-}
+  [chartEditStoreEnum.EDITCANVAS]: EditCanvasType
+  [chartEditStoreEnum.MOUSEPOSITION]: MousePositionType
+}

src/store/modules/chartEditStore/chartEditStore.ts

@@ -1,11 +1,118 @@
 import { defineStore } from 'pinia'
-import { chartEditStoreType } from './chartEditStore.d'
-import { setLocalStorage, getLocalStorage } from '@/utils'
-import { StorageEnum } from '@/enums/storageEnum'
+import debounce from 'lodash/debounce'
+import {
+  chartEditStoreType,
+  EditCanvasType,
+  MousePositionType
+} from './chartEditStore.d'
 
+// 编辑区域内容
 export const useChartEditStoreStore = defineStore({
   id: 'useChartEditStoreStore',
-  state: (): chartEditStoreType => ({}),
-  getters: {},
-  actions: {}
-})
+  state: (): chartEditStoreType => ({
+    editCanvas: {
+      // 编辑区域 Dom
+      editLayoutDom: undefined,
+      editContentDom: undefined,
+      // 默认宽度
+      width: 1920,
+      // 默认高度
+      height: 1080,
+      // 偏移量
+      offset: 20,
+      // 默认缩放
+      scale: 1,
+      // 锁定缩放
+      lockScale: false,
+      // 默认背景色
+      background: undefined
+    },
+    mousePosition: {
+      x: 0,
+      y: 0
+    }
+  }),
+  getters: {
+    getMousePosition(): MousePositionType {
+      return this.mousePosition
+    },
+    getEditCanvas(): EditCanvasType {
+      return this.editCanvas
+    }
+  },
+  actions: {
+    // * 设置数据项
+    setEditCanvasItem<T extends keyof EditCanvasType>(key: T, value: any) {
+      this.editCanvas[key] = value
+    },
+    // * 设置页面属性
+    setPageAttribute<T extends keyof CSSStyleDeclaration>(
+      key: T,
+      value: any
+    ): void {
+      const dom = this.editCanvas.editContentDom
+      if (dom) {
+        // @ts-ignore
+        dom.style[key] = value
+      }
+    },
+    // * 设置页面大小
+    setPageSize(): void {
+      this.setPageAttribute('height', `${this.editCanvas.height}px`)
+      this.setPageAttribute('width', `${this.editCanvas.width}px`)
+    },
+    // * 设置鼠标位置
+    setMousePosition(x: number, y: number): void {
+      this.mousePosition.x = x
+      this.mousePosition.y = y
+    },
+    // * 计算缩放
+    computedScale() {
+      if (this.editCanvas.editLayoutDom) {
+
+        // 现有展示区域
+        const width = this.editCanvas.editLayoutDom.clientWidth - this.editCanvas.offset * 2
+        const height = this.editCanvas.editLayoutDom.clientHeight - this.editCanvas.offset * 4
+
+        // 用户设定大小
+        const editCanvasWidth = this.editCanvas.width
+        const editCanvasHeight = this.editCanvas.height
+
+         // 需保持的比例
+         const baseProportion = parseFloat((editCanvasWidth / editCanvasHeight).toFixed(5))
+         const currentRate = parseFloat((width / height).toFixed(5))
+
+        if (currentRate > baseProportion) {
+          // 表示更宽
+          const scaleWidth = parseFloat(((height * baseProportion) / editCanvasWidth).toFixed(5))
+          this.setScale(parseFloat((scaleWidth).toFixed(5)))
+        } else {
+          // 表示更高
+          const scaleHeight = parseFloat(((width / baseProportion) / editCanvasHeight).toFixed(5))
+          this.setScale(parseFloat((scaleHeight).toFixed(5)))
+        }
+      } else {
+        window['$message'].warning('找不到元素')
+      }
+    },
+    // * 监听缩放
+    listenerScale(): Function {
+      const resize = debounce(this.computedScale, 200)
+      // 默认执行一次
+      resize()
+      // 开始监听
+      window.addEventListener('resize', resize)
+      // 销毁函数
+      const remove = () => {
+        window.removeEventListener('resize', resize)
+      }
+      return remove
+    },
+    // * 设置缩放
+    setScale(scale: number): void {
+      this.getEditCanvas.scale = scale
+      // 设置页面元素
+      this.setPageAttribute('transform', `scale(${scale})`)
+    }
+  }
+})

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

@@ -1,35 +1,43 @@
 import { ThemeEnum } from '@/enums/styleEnum'
 
+export enum ChartLayoutFilterEnum {
+  HUEROTATE = 'hueRotate',
+  SATURATE = 'saturate',
+  BRIGHTNESS = 'brightness',
+  CONTRAST = 'contrast',
+  UNOPACITY = 'unOpacity',
+}
+
 export interface ChartLayoutFilterType {
   // 色相
-  hueRotate: number
+  [ChartLayoutFilterEnum.HUEROTATE]: number
   // 饱和度
-  saturate: number
+  [ChartLayoutFilterEnum.SATURATE]: number
   // 亮度
-  brightness: number
+  [ChartLayoutFilterEnum.BRIGHTNESS]: number
   // 对比度
-  contrast: number
+  [ChartLayoutFilterEnum.CONTRAST]: number
   // 不透明度
-  unOpacity: number
+  [ChartLayoutFilterEnum.UNOPACITY]: number
 }
 
-export interface ChartLayoutType {
-  // 图层控制
-  layers: boolean
-  // 图表组件
-  charts: boolean
-  // 详情设置
-  details: boolean
-  // 对齐线
-  alignLine: boolean
-  // 滤镜
-  filter: ChartLayoutFilterType
-}
-
-export enum ChartLayoutStoreEnums {
+export enum ChartLayoutStoreEnum {
   LAYERS = 'layers',
   CHARTS = 'charts',
   DETAILS = 'details',
   ALIGNLINE = 'alignLine',
   FILTER = 'filter',
-}
+}
+
+export interface ChartLayoutType {
+  // 图层控制
+  [ChartLayoutStoreEnum.LAYERS]: boolean
+  // 图表组件
+  [ChartLayoutStoreEnum.CHARTS]: boolean
+  // 详情设置
+  [ChartLayoutStoreEnum.DETAILS]: boolean
+  // 对齐线
+  [ChartLayoutStoreEnum.ALIGNLINE]: boolean
+  // 滤镜
+  [ChartLayoutStoreEnum.FILTER]: ChartLayoutFilterType
+}

src/store/modules/chartLayoutStore/chartLayoutStore.ts

@@ -2,6 +2,9 @@ import { defineStore } from 'pinia'
 import { ChartLayoutType, ChartLayoutFilterType } from './chartLayoutStore.d'
 import { setLocalStorage, getLocalStorage } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
+import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
+
+const chartEditStore = useChartEditStoreStore()
 
 const { GO_CHART_LAYOUT_STORE } = StorageEnum
 
@@ -9,6 +12,7 @@ const storageChartLayout: ChartLayoutType = getLocalStorage(
   GO_CHART_LAYOUT_STORE
 )
 
+// 编辑区域布局和静态设置
 export const useChartLayoutStore = defineStore({
   id: 'useChartLayoutStore',
   state: (): ChartLayoutType =>
@@ -32,8 +36,8 @@ export const useChartLayoutStore = defineStore({
         // 对比度
         contrast: 100,
         // 不透明度
-        unOpacity: 100,
-      },
+        unOpacity: 100
+      }
     },
   getters: {
     getLayers(): boolean {
@@ -50,16 +54,23 @@ export const useChartLayoutStore = defineStore({
     },
     getFilter(): ChartLayoutFilterType {
       return this.filter
-    },
+    }
   },
   actions: {
     setItem(key: string, value: boolean): void {
       ;(this as any)[key] = value
       setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state)
+      // 重新计算拖拽区域缩放比例
+      setTimeout(() => {
+        chartEditStore.computedScale()
+      }, 500)
     },
-    setFilter<T extends keyof ChartLayoutFilterType>(key: T, value: boolean): void {
+    setFilter<T extends keyof ChartLayoutFilterType>(
+      key: T,
+      value: boolean
+    ): void {
       ;(this.filter as any)[key] = value
       setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state)
-    },
-  },
+    }
+  }
 })