枚举和常量优化

src/configs/chartTheme.ts

@@ -1,10 +0,0 @@
-export const CHART_THEME_COLORS = [
-  ['#d70206', '#f05b4f', '#f4c63d', '#d17905'],
-  ['#67d5b5', '#ee7785', '#c89ec4', '#84b1ed'],
-  ['#f6ea8c', '#f26d5b', '#c03546', '#492540'],
-  ['#583d72', '#9f5f80', '#ffba93', '#ff8e71'],
-  ['#59886b', '#c05555', '#ffc85c', '#fff8c1'],
-  ['#d87c7c', '#919e8b', '#d7ab82', '#6e7074'],
-  ['#1a1a2e', '#16213e', '#0f3460', '#e94560'],
-  ['#e01f54', '#001852', '#f5e8c8', '#b8d2c7'],
-]

src/configs/element.ts

@@ -1,10 +1,10 @@
-export const ELEMENT_TYPE = {
+export const ELEMENT_TYPE_ZH = {
-  'text': '文本',
+  text: '文本',
-  'image': '图片',
+  image: '图片',
-  'shape': '形状',
+  shape: '形状',
-  'line': '线条',
+  line: '线条',
-  'chart': '图表',
+  chart: '图表',
-  'table': '表格',
+  table: '表格',
 }
 
 export const MIN_SIZE = {

src/configs/hotkey.ts

@@ -1,4 +1,4 @@
-export enum KEYS {
+export const enum KEYS {
   C = 'C',
   X = 'X',
   Z = 'Z',

src/configs/imageClip.ts

@@ -1,10 +1,10 @@
-export enum ClipPathTypes {
+export const enum ClipPathTypes {
   RECT = 'rect',
   ELLIPSE = 'ellipse',
   POLYGON = 'polygon',
 }
 
-export enum ClipPaths {
+export const enum ClipPaths {
   RECT = 'rect',
   ROUNDRECT = 'roundRect',
   ELLIPSE = 'ellipse',

src/store/constants.ts

@@ -1,4 +1,4 @@
-export enum MutationTypes {
+export const enum MutationTypes {
 
   // editor
   SET_ACTIVE_ELEMENT_ID_LIST = 'setActiveElementIdList',
@@ -37,7 +37,7 @@ export enum MutationTypes {
   SET_SCREENING = 'setScreening',
 }
 
-export enum ActionTypes {
+export const enum ActionTypes {
   INIT_SNAPSHOT_DATABASE = 'initSnapshotDatabase',
   ADD_SNAPSHOT = 'addSnapshot',
   UN_DO = 'undo',

src/types/edit.ts

@@ -3,7 +3,7 @@ import { LinePoolItem } from '@/configs/lines'
 
 export type ElementOrderCommand = 'up' | 'down' | 'top' | 'bottom'
 
-export enum ElementOrderCommands {
+export const enum ElementOrderCommands {
   UP = 'up',
   DOWN = 'down',
   TOP = 'top',
@@ -12,7 +12,7 @@ export enum ElementOrderCommands {
 
 export type ElementAlignCommand = 'top'| 'bottom' | 'left' | 'right' | 'vertical' | 'horizontal'
 
-export enum ElementAlignCommands {
+export const enum ElementAlignCommands {
   TOP = 'top',
   BOTTOM = 'bottom',
   LEFT = 'left',
@@ -23,7 +23,7 @@ export enum ElementAlignCommands {
 
 export type OperateBorderLine = 'top' | 'bottom' | 'left' | 'right'
 
-export enum OperateBorderLines {
+export const enum OperateBorderLines {
   T = 'top',
   B = 'bottom',
   L = 'left',
@@ -32,7 +32,7 @@ export enum OperateBorderLines {
 
 export type OperateResizeHandler = '' | 'left-top' | 'top' | 'right-top' | 'left' | 'right' | 'left-bottom' | 'bottom' | 'right-bottom'
 
-export enum OperateResizeHandlers {
+export const enum OperateResizeHandlers {
   LEFT_TOP = 'left-top',
   TOP = 'top',
   RIGHT_TOP = 'right-top',
@@ -45,7 +45,7 @@ export enum OperateResizeHandlers {
 
 export type OperateLineHandler = 'start' | 'end'
 
-export enum OperateLineHandlers {
+export const enum OperateLineHandlers {
   START = 'start',
   END = 'end,'
 }

src/types/slides.ts

@@ -7,7 +7,7 @@ export interface PPTElementShadow {
   color: string;
 }
 
-export enum ElementTypes {
+export const enum ElementTypes {
   TEXT = 'text',
   IMAGE = 'image',
   SHAPE = 'shape',

src/utils/element.ts

@@ -1,4 +1,4 @@
-import { ElementTypes, PPTElement } from '@/types/slides'
+import { PPTElement } from '@/types/slides'
 
 // 获取矩形旋转后在画布中的位置范围
 interface RotatedElementData {
@@ -46,7 +46,7 @@ export const getRectRotatedRange = (element: RotatedElementData) => {
 export const getElementRange = (element: PPTElement) => {
   let minX, maxX, minY, maxY
 
-  if(element.type === ElementTypes.LINE) {
+  if(element.type === 'line') {
     minX = element.left
     maxX = element.left + Math.max(element.start[0], element.end[0])
     minY = element.top

src/utils/emitter.ts

@@ -1,6 +1,6 @@
 import mitt, { Emitter } from 'mitt'
 
-export enum EmitterEvents {
+export const enum EmitterEvents {
   UPDATE_TEXT_STATE = 'UPDATE_TEXT_STATE',
   EXEC_TEXT_COMMAND = 'EXEC_TEXT_COMMAND',
   UPDATE_TABLE_SELECTED_CELL = 'UPDATE_TABLE_SELECTED_CELL',

src/views/Editor/Canvas/Operate/MultiSelectOperate.vue

@@ -23,7 +23,7 @@
 <script lang="ts">
 import { computed, defineComponent, reactive, PropType, watchEffect, toRefs } from 'vue'
 import { useStore } from '@/store'
-import { PPTElement, ElementTypes } from '@/types/slides'
+import { PPTElement } from '@/types/slides'
 import { getElementListRange } from '@/utils/element'
 import { OperateResizeHandler, MultiSelectRange } from '@/types/edit'
 import useCommonOperate from '../hooks/useCommonOperate'
@@ -67,7 +67,7 @@ export default defineComponent({
     const disableResize = computed(() => {
       return localActiveElementList.value.some(item => {
         if(
-          (item.type === ElementTypes.IMAGE || item.type === ElementTypes.SHAPE) && 
+          (item.type === 'image' || item.type === 'shape') && 
           !item.rotate
         ) return false
         return true

src/views/Editor/Canvas/hooks/useDragElement.ts

@@ -1,6 +1,6 @@
 import { Ref, computed } from 'vue'
 import { MutationTypes, useStore } from '@/store'
-import { ElementTypes, PPTElement } from '@/types/slides'
+import { PPTElement } from '@/types/slides'
 import { AlignmentLineProps } from '@/types/edit'
 import { VIEWPORT_SIZE, VIEWPORT_ASPECT_RATIO } from '@/configs/canvas'
 import { getRectRotatedRange, AlignLine, uniqAlignLines } from '@/utils/element'
@@ -48,7 +48,7 @@ export default (
 
     // 元素在页面内水平和垂直方向的范围和中心位置（需要特殊计算线条和被旋转的元素）
     for(const el of elementList.value) {
-      if(el.type === ElementTypes.LINE) continue
+      if(el.type === 'line') continue
       if(isActiveGroupElement && el.id === element.id) continue
       if(!isActiveGroupElement && activeElementIdList.value.includes(el.id)) continue
 
@@ -144,7 +144,7 @@ export default (
           targetMinY = yRange[0]
           targetMaxY = yRange[1]
         }
-        else if(element.type === ElementTypes.LINE) {
+        else if(element.type === 'line') {
           targetMinX = targetLeft
           targetMaxX = targetLeft + Math.max(element.start[0], element.end[0])
           targetMinY = targetTop
@@ -178,7 +178,7 @@ export default (
             rightValues.push(xRange[1])
             bottomValues.push(yRange[1])
           }
-          else if(element.type === ElementTypes.LINE) {
+          else if(element.type === 'line') {
             leftValues.push(left)
             topValues.push(top)
             rightValues.push(left + Math.max(element.start[0], element.end[0]))

src/views/Editor/Canvas/hooks/useScaleElement.ts

@@ -1,6 +1,6 @@
 import { computed, Ref } from 'vue'
 import { MutationTypes, useStore } from '@/store'
-import { ElementTypes, PPTElement, PPTImageElement, PPTLineElement, PPTShapeElement } from '@/types/slides'
+import { PPTElement, PPTImageElement, PPTLineElement, PPTShapeElement } from '@/types/slides'
 import { OperateResizeHandlers, AlignmentLineProps, MultiSelectRange } from '@/types/edit'
 import emitter, { EmitterEvents } from '@/utils/emitter'
 import { VIEWPORT_SIZE, VIEWPORT_ASPECT_RATIO } from '@/configs/canvas'
@@ -139,7 +139,7 @@ export default (
       
       for(const el of elementList.value) {
         if('rotate' in el && el.rotate) continue
-        if(el.type === ElementTypes.LINE) continue
+        if(el.type === 'line') continue
         if(isActiveGroupElement && el.id === element.id) continue
         if(!isActiveGroupElement && activeElementIdList.value.includes(el.id)) continue
 
@@ -468,7 +468,7 @@ export default (
       // 根据上面计算的比例，修改所有被激活元素的位置大小
       // 宽高通过乘以对应的比例得到，位置通过将被操作元素在所有元素整体中的相对位置乘以对应比例获得
       elementList.value = elementList.value.map(el => {
-        if((el.type === ElementTypes.IMAGE || el.type === ElementTypes.SHAPE) && activeElementIdList.value.includes(el.id)) {
+        if((el.type === 'image' || el.type === 'shape') && activeElementIdList.value.includes(el.id)) {
           const originElement = originElementList.find(originEl => originEl.id === el.id) as PPTImageElement | PPTShapeElement
           return {
             ...el,

src/views/Editor/Toolbar/ElementAnimationPanel.vue

@@ -71,7 +71,7 @@ import { computed, defineComponent, ref } from 'vue'
 import { MutationTypes, useStore } from '@/store'
 import { PPTAnimation, PPTElement, Slide } from '@/types/slides'
 import { ANIMATIONS } from '@/configs/animation'
-import { ELEMENT_TYPE } from '@/configs/element'
+import { ELEMENT_TYPE_ZH } from '@/configs/element'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import Draggable from 'vuedraggable'
@@ -107,7 +107,7 @@ export default defineComponent({
       for(const animation of currentSlideAnimations.value) {
         const el = currentSlide.value.elements.find(el => el.id === animation.elId)
         if(!el) continue
-        const elType = ELEMENT_TYPE[el.type]
+        const elType = ELEMENT_TYPE_ZH[el.type]
         const animationType = animationTypes[animation.type]
 
         animationSequence.push({

src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue

@@ -103,7 +103,6 @@ import { computed, defineComponent, ref, watch } from 'vue'
 import { IBarChartOptions, ILineChartOptions, IPieChartOptions } from 'chartist'
 import { MutationTypes, useStore } from '@/store'
 import { ChartData, PPTChartElement } from '@/types/slides'
-import { CHART_THEME_COLORS } from '@/configs/chartTheme'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import ElementOutline from '../../common/ElementOutline.vue'
@@ -207,7 +206,6 @@ export default defineComponent({
       updateOptions,
       themeColor,
       gridColor,
-      CHART_THEME_COLORS,
       updateTheme,
       updateGridColor,
     }