update

src/configs/animation.ts

@@ -10,25 +10,25 @@ export const ANIMATIONS = [
   {
     key: 'bounceInDown',
     type: '弹跳',
-    name: '上方弹跳',
+    name: '向下弹跳',
     icon: 'icon-anime-bounce-down',
   },
   {
     key: 'bounceInLeft',
     type: '弹跳',
-    name: '左侧弹跳',
+    name: '从左弹跳',
     icon: 'icon-anime-bounce-left',
   },
   {
     key: 'bounceInRight',
     type: '弹跳',
-    name: '右侧弹跳',
+    name: '从右弹跳',
     icon: 'icon-anime-bounce-right',
   },
   {
     key: 'bounceInUp',
     type: '弹跳',
-    name: '下方弹跳',
+    name: '向上弹跳',
     icon: 'icon-anime-bounce-up',
   },
   {
@@ -40,25 +40,25 @@ export const ANIMATIONS = [
   {
     key: 'fadeInDown',
     type: '淡入',
-    name: '上方淡入',
+    name: '向下淡入',
     icon: 'icon-anime-fade-down',
   },
   {
     key: 'fadeInLeft',
     type: '淡入',
-    name: '左侧淡入',
+    name: '从左淡入',
     icon: 'icon-anime-fade-left',
   },
   {
     key: 'fadeInRight',
     type: '淡入',
-    name: '右侧淡入',
+    name: '从右淡入',
     icon: 'icon-anime-fade-right',
   },
   {
     key: 'fadeInUp',
     type: '淡入',
-    name: '下方淡入',
+    name: '向上淡入',
     icon: 'icon-anime-fade-up',
   },
   {
@@ -82,49 +82,49 @@ export const ANIMATIONS = [
   {
     key: 'rotateInDownLeft',
     type: '旋转',
-    name: '左下旋转',
+    name: '从左下旋转',
     icon: 'icon-anime-rotate-up-right',
   },
   {
     key: 'rotateInDownRight',
     type: '旋转',
-    name: '右下旋转',
+    name: '从右下旋转',
     icon: 'icon-anime-rotate-up-left',
   },
   {
     key: 'rotateInUpLeft',
     type: '旋转',
-    name: '左上旋转',
+    name: '从左上旋转',
     icon: 'icon-anime-rotate-down-right',
   },
   {
     key: 'rotateInUpRight',
     type: '旋转',
-    name: '右上旋转',
+    name: '从右上旋转',
     icon: 'icon-anime-rotate-down-left',
   },
   {
     key: 'slideInDown',
     type: '滑入',
-    name: '上方滑入',
+    name: '向下滑入',
     icon: 'icon-anime-slide-down',
   },
   {
     key: 'slideInLeft',
     type: '滑入',
-    name: '左侧滑入',
+    name: '从左滑入',
     icon: 'icon-anime-slide-left',
   },
   {
     key: 'slideInRight',
     type: '滑入',
-    name: '右侧滑入',
+    name: '从右滑入',
     icon: 'icon-anime-slide-right',
   },
   {
     key: 'slideInUp',
     type: '滑入',
-    name: '下方滑入',
+    name: '向上滑入',
     icon: 'icon-anime-slide-up',
   },
   {
@@ -136,25 +136,25 @@ export const ANIMATIONS = [
   {
     key: 'zoomInDown',
     type: '缩放',
-    name: '上方放大',
+    name: '向下放大',
     icon: 'icon-anime-zoom-down',
   },
   {
     key: 'zoomInLeft',
     type: '缩放',
-    name: '左侧放大',
+    name: '从左放大',
     icon: 'icon-anime-zoom-left',
   },
   {
     key: 'zoomInRight',
     type: '缩放',
-    name: '右侧放大',
+    name: '从右放大',
     icon: 'icon-anime-zoom-right',
   },
   {
     key: 'zoomInUp',
     type: '缩放',
-    name: '下方放大',
+    name: '向上放大',
     icon: 'icon-anime-zoom-up',
   },
 ]

src/configs/chart.ts

@@ -1,54 +0,0 @@
-export const DEFAULT_BAR_DATA = {
-  axisData: ['类别1', '类别2', '类别3', '类别4', '类别5'],
-  series: [
-    { name: '系列1', data: [120, 200, 150, 80, 70] },
-    { name: '系列2', data: [80, 220, 170, 180, 40] }
-  ]
-}
-
-export const DEFAULT_PIE_DATA = [
-  { name: '类别1', value: 335 },
-  { name: '类别2', value: 310 },
-  { name: '类别3', value: 234 },
-  { name: '类别4', value: 135 },
-  { name: '类别5', value: 1548 },
-]
-
-export const CHARTS = [
-  {
-    key: 'bar',
-    name: '柱状图',
-    value: DEFAULT_BAR_DATA,
-  },
-  {
-    key: 'barY',
-    name: '条形图',
-    value: DEFAULT_BAR_DATA,
-  },
-  {
-    key: 'line',
-    name: '折线图',
-    value: DEFAULT_BAR_DATA,
-  },
-  {
-    key: 'pie',
-    name: '饼状图',
-    value: DEFAULT_PIE_DATA,
-  },
-  {
-    key: 'pieDoughnut',
-    name: '环形图',
-    value: DEFAULT_PIE_DATA,
-  },
-]
-
-export const CHART_THEME = {
-  purple: ['#8a7ca8', '#e098c7', '#8fd3e8', '#71669e', '#cc70af'],
-  shine: ['#c12e34', '#e6b600', '#0098d9', '#2b821d', '#005eaa'],
-  halloween: ['#ff715e', '#ffaf51', '#ffee51', '#797fba', '#715c87'],
-  vintage: ['#d87c7c', '#919e8b', '#d7ab82', '#6e7074', '#61a0a8'],
-  dark: ['#dd6b66', '#759aa0', '#e69d87', '#8dc1a9', '#ea7e53'],
-  westeros: ['#516b91', '#59c4e6', '#edafda', '#93b7e3', '#a5e7f0'],
-  wonderland: ['#4ea397', '#22c3aa', '#7bd9a5', '#d0648a', '#f58db2'],
-  chalk: ['#fc97af', '#87f7cf', '#f7f494', '#72ccff', '#f7c5a0'],
-}

src/configs/defaultElement.ts

@@ -1,52 +0,0 @@
-const DEFAULT_COLOR = '#41464b'
-
-export const DEFAULT_TEXT = {
-  type: 'text',
-  left: 0,
-  top: 0,
-  width: 300,
-  height: 0,
-  opacity: 1,
-  lineHeight: 1.5,
-  segmentSpacing: 5,
-  content: '请输入内容',
-}
-
-export const DEFAULT_IMAGE = {
-  type: 'image',
-  left: 0,
-  top: 0,
-  lockRatio: true,
-}
-
-export const DEFAULT_SHAPE = {
-  type: 'shape',
-  fill: DEFAULT_COLOR,
-  lockRatio: false,
-}
-
-export const DEFAULT_LINE = {
-  type: 'line',
-  style: 'solid',
-  marker: ['', ''],
-  width: 4,
-  color: DEFAULT_COLOR,
-}
-
-export const DEFAULT_CHART = {
-  type: 'chart',
-  left: 0,
-  top: 0,
-  width: 500,
-  height: 500,
-}
-
-export const DEFAULT_TABLE = {
-  type: 'table',
-  left: 0,
-  top: 0,
-  isLock: false,
-  borderStyle: 'solid',
-  borderWidth: 2,
-  borderColor: DEFAULT_COLOR,
-}

src/configs/element.ts

@@ -1,35 +1,65 @@
-export const ELEMENT_SIZE_RANGE = {
-  text: { width: 15, height: 15 },
-  image: { width: 15, height: 15 },
-  shape: { width: 15, height: 15 },
-  icon: { width: 15, height: 15 },
-  chart: { width: 200, height: 200 },
-  iframe: { width: 200, height: 200 },
-  table: { width: 50, height: 30 },
-}
-
-export const ELEMENT_TYPE_TABS = {
-  text: { key: 'element-text', label: '文本属性' },
-  image: { key: 'element-image', label: '图片属性' },
-  shape: { key: 'element-shape', label: '形状属性' },
-  icon: { key: 'element-icon', label: '图标属性' },
-  line: { key: 'element-line', label: '线条属性' },
-  chart: { key: 'element-chart', label: '图表属性' },
-  iframe: { key: 'element-iframe', label: 'Iframe属性' },
-  table: { key: 'element-table', label: '表格属性' },
-}
+const DEFAULT_COLOR = '#41464b'
 
 export enum ELEMENTS {
   text = '文本',
   image = '图片',
   shape = '形状',
-  icon = '图标',
   line = '线条',
   chart = '图表',
-  iframe = 'Iframe',
   table = '表格',
 }
 
+export const DEFAULT_TEXT = {
+  type: 'text',
+  left: 0,
+  top: 0,
+  width: 300,
+  height: 0,
+  opacity: 1,
+  lineHeight: 1.5,
+  segmentSpacing: 5,
+  content: '请输入内容',
+}
+
+export const DEFAULT_IMAGE = {
+  type: 'image',
+  left: 0,
+  top: 0,
+  lockRatio: true,
+}
+
+export const DEFAULT_SHAPE = {
+  type: 'shape',
+  fill: DEFAULT_COLOR,
+  lockRatio: false,
+}
+
+export const DEFAULT_LINE = {
+  type: 'line',
+  style: 'solid',
+  marker: ['', ''],
+  width: 4,
+  color: DEFAULT_COLOR,
+}
+
+export const DEFAULT_CHART = {
+  type: 'chart',
+  left: 0,
+  top: 0,
+  width: 500,
+  height: 500,
+}
+
+export const DEFAULT_TABLE = {
+  type: 'table',
+  left: 0,
+  top: 0,
+  isLock: false,
+  borderStyle: 'solid',
+  borderWidth: 2,
+  borderColor: DEFAULT_COLOR,
+}
+
 export enum OPERATE_KEYS {
   LEFT_TOP = 1,
   TOP = 2,

src/configs/fontName.ts

@@ -4,7 +4,7 @@ export interface FontName {
   en: string;
 }
 
-export const FONT_NAMES = [
+export const FONT_NAMES: FontName[] = [
   { source: 'windows', zh: '微软雅黑', en: 'Microsoft Yahei' },
   { source: 'windows', zh: '宋体', en: 'SimSun' },
   { source: 'windows', zh: '黑体', en: 'SimHei' },

src/configs/lines.ts

@@ -1,21 +1,12 @@
 export const LINES = [
-  { type: 'line', path: 'M0,0 L20,20', style: 'solid', marker: ['', ''] },
-  { type: 'line', path: 'M0,0 L20,20', style: 'solid', marker: ['', 'arrow'] },
-  { type: 'line', path: 'M0,0 L20,20', style: 'solid', marker: ['arrow', 'arrow'] },
-  { type: 'line', path: 'M0,0 L20,20', style: 'solid', marker: ['', 'cusp'] },
-  { type: 'line', path: 'M0,0 L20,20', style: 'solid', marker: ['cusp', 'cusp'] },
-  { type: 'line', path: 'M0,0 L20,20', style: 'solid', marker: ['', 'dot'] },
-  { type: 'line', path: 'M0,0 L20,20', style: 'solid', marker: ['dot', 'dot'] },
-  { type: 'line', path: 'M0,0 L20,20', style: 'dashed', marker: ['', ''] },
-  { type: 'line', path: 'M0,0 L20,20', style: 'dashed', marker: ['', 'arrow'] },
-  { type: 'line', path: 'M0,0 L20,20', style: 'dashed', marker: ['arrow', 'arrow'] },
-
-  { type: 'polyline-x', path: 'M0,0 L0,20 L20,20', style: 'solid', marker: ['', 'arrow'] },
-  { type: 'polyline-y', path: 'M0,0 L20,0 L20,20', style: 'solid', marker: ['', 'arrow'] },
-
-  { type: 'polyline-x2', path: 'M0,0 L10,0 L10,20 L20,20', style: 'solid', marker: ['', 'arrow'] },
-  { type: 'polyline-y2', path: 'M0,0 L0,10 L20,10 L20,20', style: 'solid', marker: ['', 'arrow'] },
-
-  { type: 'curve-x', path: 'M0,0 C20,0 0,20 20,20', style: 'solid', marker: ['', 'arrow'] },
-  { type: 'curve-y', path: 'M0,0 C0,20 20,0 20,20', style: 'solid', marker: ['', 'arrow'] },
+  { path: 'M0,0 L20,20', style: 'solid', marker: ['', ''] },
+  { path: 'M0,0 L20,20', style: 'solid', marker: ['', 'arrow'] },
+  { path: 'M0,0 L20,20', style: 'solid', marker: ['arrow', 'arrow'] },
+  { path: 'M0,0 L20,20', style: 'solid', marker: ['', 'cusp'] },
+  { path: 'M0,0 L20,20', style: 'solid', marker: ['cusp', 'cusp'] },
+  { path: 'M0,0 L20,20', style: 'solid', marker: ['', 'dot'] },
+  { path: 'M0,0 L20,20', style: 'solid', marker: ['dot', 'dot'] },
+  { path: 'M0,0 L20,20', style: 'dashed', marker: ['', ''] },
+  { path: 'M0,0 L20,20', style: 'dashed', marker: ['', 'arrow'] },
+  { path: 'M0,0 L20,20', style: 'dashed', marker: ['arrow', 'arrow'] },
 ]

src/configs/shadows.ts

@@ -1,77 +0,0 @@
-export const TEXT_SHADOWS = [
-  {
-    key: '无阴影',
-    value: '',
-  },
-  {
-    key: '左上方偏移-深色',
-    value: '-1px -1px 3px #666',
-  },
-  {
-    key: '右上方偏移-深色',
-    value: '1px -1px 3px #666',
-  },
-  {
-    key: '左下方偏移-深色',
-    value: '-1px 1px 3px #666',
-  },
-  {
-    key: '右下方偏移-深色',
-    value: '1px 1px 3px #666',
-  },
-  {
-    key: '左上方偏移-浅色',
-    value: '-1px -1px 3px #ccc',
-  },
-  {
-    key: '右上方偏移-浅色',
-    value: '1px -1px 3px #ccc',
-  },
-  {
-    key: '左下方偏移-浅色',
-    value: '-1px 1px 3px #ccc',
-  },
-  {
-    key: '右下方偏移-浅色',
-    value: '1px 1px 3px #ccc',
-  },
-]
-
-export const SHAPE_SHADOWS = [
-  {
-    key: '无阴影',
-    value: '',
-  },
-  {
-    key: '左上-深色',
-    value: '-3px -3px 6px #666',
-  },
-  {
-    key: '左下-深色',
-    value: '-3px 3px 6px #666',
-  },
-  {
-    key: '右上-深色',
-    value: '3px -3px 6px #666',
-  },
-  {
-    key: '右下-深色',
-    value: '3px 3px 6px #666',
-  },
-  {
-    key: '左上-浅色',
-    value: '-3px -3px 6px #ccc',
-  },
-  {
-    key: '左下-浅色',
-    value: '-3px 3px 6px #ccc',
-  },
-  {
-    key: '右上-浅色',
-    value: '3px -3px 6px #ccc',
-  },
-  {
-    key: '右下-浅色',
-    value: '3px 3px 6px #ccc',
-  },
-]

src/configs/shapes.ts

@@ -1,350 +0,0 @@
-export const SHAPES = [
-  {
-    key: 'rect',
-    path: 'M 0 0 L 200 0 L 200 200 L 0 200 Z'
-  },
-  {
-    key: 'rect-2',
-    path: 'M 0 200 L 0 0 L 150 0 L 200 50 L 200 200 L 0 200'
-  },
-  {
-    key: 'rect-3',
-    path: 'M 0 150 L 0 0 L 150 0 L 200 50 L 200 200 L 50 200 L 0 150'
-  },
-  {
-    key: 'roundRect',
-    path: 'M 20 0 L 180 0 Q 200 0 200 20 L 200 180 Q 200 200 180 200 L 20 200 Q 0 200 0 180 L 0 20 Q 0 0 20 0 '
-  },
-  {
-    key: 'roundRect-2',
-    path: 'M 0 50 Q 0 0 50 0 L 150 0 Q 200 0 200 50 L 200 150 Q 200 200 150 200 L 50 200 Q 0 200 0 150 L 0 50 Z'
-  },
-  {
-    key: 'roundRect-3',
-    path: 'M 0 0 L 140 0 Q 200 0 200 60 L 200 200 L 60 200 Q 0 200 0 140 L 0 0 Z'
-  },
-  {
-    key: 'roundRect-4',
-    path: 'M 0 0 L 140 0 Q 200 0 200 60 L 200 200 L 0 200 L 0 0 Z'
-  },
-  {
-    key: 'ellipse',
-    path: 'M 100 0 A 50 50 0 1 1 100 200 A 50 50 0 1 1 100 0 Z'
-  },
-  {
-    key: 'ellipse-half',
-    path: 'M 0 200 A 50 100 0 1 1 200 200 L 0 200 Z'
-  },  
-  {
-    key: 'ellipse-quarter',
-    path: 'M 200 0 Q 0 0 0 200 L 200 200 L 200 0'
-  },
-  {
-    key: 'pie',
-    path: 'M 100 0 A 100 100 0 1 1 0 100 L 100 100 L 100 0 Z'
-  },
-  {
-    key: 'pie-2',
-    path: 'M 200 100 A 100 100 0 1 1 160 20 L 100 100 Z'
-  },
-  {
-    key: 'triangle',
-    path: 'M 100 0 L 0 200 L 200 200 L 100 0 Z'
-  },
-  {
-    key: 'triangle-2',
-    path: 'M 0 0 L 200 0 L 100 200 L 0 0 Z'
-  },
-  {
-    key: 'triangle-3',
-    path: 'M 0 100 L 200 0 L 200 200 L 0 100 Z'
-  },
-  {
-    key: 'triangle-4',
-    path: 'M 0 0 L 200 100 L 0 200 L 0 0 Z'
-  },
-  {
-    key: 'triangle-5',
-    path: 'M 0 0 L 0 200 L 200 200 Z'
-  },
-  {
-    key: 'triangle-6',
-    path: 'M 0 0 L 200 0 L 200 200 Z'
-  },
-  {
-    key: 'parallelogram',
-    path: 'M 50 0 L 200 0 L 150 200 L 0 200 L 50 0 Z'
-  },
-  {
-    key: 'diamond',
-    path: 'M 100 0 L 0 100 L 100 200 L 200 100 L 100 0 Z'
-  },
-  {
-    key: 'trapezoid',
-    path: 'M 50 0 L 150 0 L 200 200 L 0 200 L 50 0 Z'
-  },
-  {
-    key: 'pentagon',
-    path: 'M 100 0 L 0 90 L 50 200 L 150 200 L 200 90 L 100 0 Z'
-  },
-  {
-    key: 'hexagon',
-    path: 'M 100 0 L 0 60 L 0 140 L 100 200 L 200 140 L 200 60 L 100 0 Z'
-  },
-  {
-    key: 'octagon',
-    path: 'M 60 0 L 140 0 L 200 60 L 200 140 L 140 200 L 60 200 L 0 140 L 0 60 L 60 0 Z'
-  },
-  {
-    key: 'water',
-    path: 'M 100 0 A 100 100 0 1 1 0 100 L 0 0 L 100 0 Z'
-  },  
-  {
-    key: 'leaf',
-    path: 'M 0 0 Q 200 0 200 200 Q 0 200 0 0'
-  },
-  {
-    key: 'leaf-2',
-    path: 'M 0 200 Q 0 0 200 0 Q 200 200 0 200'
-  },
-  {
-    key: 'moon',
-    path: 'M 100 0 A 50 50 0 1 0 200 120 A 100 100 0 1 1 100 0'
-  },
-  {
-    key: 'star',
-    path: 'M 100 0 L 122 70 L 196 70 L 136 114 L 158 182 L 100 140 L 42 182 L 64 114 L 4 70 L 78 70 Z'
-  },
-  {
-    key: 'lightning',
-    path: 'M 120 0 L 100 80 L 200 80 L 80 200 L 100 120 L 0 120 L 120 0'
-  },
-  {
-    key: 'cloud',
-    path: 'M 190 100 C 200 120 190 160 150 160 C 130 190 110 190 80 170 C 50 180 20 170 20 140 C 0 130 0 80 30 70 C 30 30 50 20 90 30 C 120 10 140 10 160 40 C 200 40 200 70 190 100'
-  },
-  {
-    key: 'arrow',
-    path: 'M 100 0 L 0 100 L 50 100 L 50 200 L 150 200 L 150 100 L 200 100 L 100 0 Z'
-  },
-  {
-    key: 'arrow-2',
-    path: 'M 100 200 L 200 100 L 150 100 L 150 0 L 50 0 L 50 100 L 0 100 L 100 200 Z'
-  },
-  {
-    key: 'arrow-3',
-    path: 'M 0 100 L 100 0 L 100 50 L 200 50 L 200 150 L 100 150 L 100 200 L 0 100 Z'
-  },
-  {
-    key: 'arrow-4',
-    path: 'M 200 100 L 100 0 L 100 50 L 0 50 L 0 150 L 100 150 L 100 200 L 200 100 Z'
-  },
-  {
-    key: 'arrow-5',
-    path: 'M 50 100 L 0 50 L 125 50 L 125 0 L 200 100 L 125 200 L 125 150 L 0 150 Z'
-  },
-  {
-    key: 'arrow-6',
-    path: 'M 150 100 L 200 50 L 75 50 L 75 0 L 0 100 L 75 200 L 75 150 L 200 150 Z'
-  },
-  {
-    key: 'arrow-7',
-    path: 'M 100 150 L 50 200 L 50 75 L 0 75 L 100 0 L 200 75 L 150 75 L 150 200 Z'
-  },
-  {
-    key: 'arrow-8',
-    path: 'M 100 50 L 50 0 L 50 125 L 0 125 L 100 200 L 200 125 L 150 125 L 150 0 Z'
-  },
-  {
-    key: 'arrow-9',
-    path: 'M 40 120 L 0 160 L 40 200 L 40 180 L 180 180 L 180 40 L 200 40 L 160 0 L 120 40 L 140 40 L 140 140 L 40 140 Z'
-  },
-  {
-    key: 'arrow-10',
-    path: 'M 160 60 L 160 80 L 200 40 L 160 0 L 160 20 L 20 20 L 20 160 L 0 160 L 40 200 L 80 160 L 60 160 L 60 60 Z'
-  },
-  {
-    key: 'arrow-11',
-    path: 'M 100 0 L 0 40 L 60 40 L 60 160 L 0 160 L 100 200 L 200 160 L 140 160 L 140 40 L 200 40 Z'
-  },
-  {
-    key: 'arrow-12',
-    path: 'M 0 100 L 40 200 L 40 140 L 160 140 L 160 200 L 200 100 L 160 0 L 160 60 L 40 60 L 40 0 Z'
-  },
-  {
-    key: 'arrow-13',
-    path: 'M 0 200 Q 0 25 150 25 L 150 0 L 200 50 L 150 100 L 150 75 Q 0 75 0 200',
-  },
-  {
-    key: 'arrow-14',
-    path: 'M 200 200 Q 175 25 50 25 L 50 0 L 0 50 L 50 100 L 50 75 Q 175 75 200 200'
-  },
-  {
-    key: 'message',
-    path: 'M 0 0 L 200 0 L 200 150 L 80 150 L 40 200 L 40 150 L 0 150 L 0 0 Z'
-  },
-  {
-    key: 'message-2',
-    path: 'M 0 0 L 200 0 L 200 150 L 160 150 L 160 200 L 120 150 L 0 150 L 0 10 Z'
-  },
-  {
-    key: 'v',
-    path: 'M 0 0 L 120 0 L 200 100 L 120 200 L 0 200 L 80 100 L 0 0 Z'
-  },
-  {
-    key: 'v-2',
-    path: 'M 80 0 L 200 0 L 120 100 L 200 200 L 80 200 L 0 100 L 80 0 Z'
-  },
-  {
-    key: 'point',
-    path: 'M 0 0 L 140 0 L 200 100 L 140 200 L 0 200 L 0 100 L 0 0 Z'
-  },
-  {
-    key: 'point-2',
-    path: 'M 60 0 L 200 0 L 200 100 L 200 200 L 60 200 L 0 100 L 60 0 Z'
-  },
-  {
-    key: 'plus-wide',
-    path: 'M 50 0 L 150 0 L 150 50 L 200 50 L 200 150 L 150 150 L 150 200 L 50 200 L 50 150 L 0 150 L 0 50 L 50 50 L 50 0'
-  },
-  {
-    key: 'plus',
-    path: 'M 70 0 L 70 70 L 0 70 L 0 130 L 70 130 L 70 200 L 130 200 L 130 130 L 200 130 L 200 70 L 130 70 L 130 0 L 70 0 Z'
-  },
-  {
-    key: 'cross',
-    path: 'M 40 0 L 0 40 L 60 100 L 0 160 L 40 200 L 100 140 L 160 200 L 200 160 L 140 100 L 200 40 L 160 0 L 100 60 L 40 0 Z'
-  },
-  {
-    key: 'funnel',
-    path: 'M 0 0 L 200 0 L 0 200 L 200 200 L 0 0 Z'
-  },
-  {
-    key: 'funnel-2',
-    path: 'M 200 0 Q 0 100 200 200 L 0 200 Q 200 100 0 0 L 200 0 Z'
-  },
-  {
-    key: 'funnel-3',
-    path: 'M 200 0 Q 100 100 200 200 L 0 200 Q 100 100 0 0 L 200 0 Z'
-  },
-  {
-    key: 'flag',
-    path: 'M 0 0 Q 50 50 100 25 Q 150 0 200 50 L 200 200 Q 150 150 100 175 Q 50 200 0 150 L 0 0 Z'
-  },
-  {
-    key: 'crown',
-    path: 'M 0 200 L 200 200 L 180 60 L 140 100 L 100 0 L 60 100 L 20 60 L 0 200 Z'
-  },
-  {
-    key: 'sector',
-    path: 'M 200 100 A 50 50 0 1 1 0 100 L 100 0 L 200 100 Z'
-  },
-  {
-    key: 'sector-2',
-    path: 'M 0 100 A 50 50 0 1 1 200 100 L 100 200 L 0 100 Z'
-  },
-  {
-    key: 'sector-3',
-    path: 'M 200 200 L 125 0 Q 0 0 0 125 Z'
-  },
-  {
-    key: 'darts',
-    path: 'M 100 0 L 60 60 L 0 100 L 60 140 L 100 200 L 140 140 L 200 100 L 140 60 L 100 0 Z'
-  },
-  {
-    key: 'break',
-    path: 'M 0 0 L 150 0 L 200 50 L 150 100 L 200 150 L 150 200 L 0 200 L 50 150 L 0 100 L 50 50 L 0 0 Z'
-  },
-  {
-    key: 'spray',
-    path: 'M 0 100 A 50 50 0 1 1 200 100 Q 100 50 100 200 Q 100 50 0 100 Z'
-  },
-  {
-    key: 'pinecones',
-    path: 'M 100 0 Q 0 50 0 175 Q 100 225 200 175 Q 200 50 100 0'
-  },
-  {
-    key: 'triangular-arrow',
-    path: 'M 50 100 L 0 0 L 200 100 L 0 200 Z'
-  },
-  {
-    key: 'triangular-arrow-2',
-    path: 'M 100 150 L 0 200 L 100 0 L 200 200 Z'
-  },
-  {
-    key: 'triangular-arrow-3',
-    path: 'M 150 100 L 200 200 L 0 100 L 200 0 Z'
-  },
-  {
-    key: 'triangular-arrow-4',
-    path: 'M 100 50 L 200 0 L 100 200 L 0 0 Z'
-  },
-  {
-    key: 'border',
-    path: 'M 0 0 L 200 0 L 160 40 L 40 40 L 40 160 L 0 200 Z'
-  },
-  {
-    key: 'border-2',
-    path: 'M 200 200 L 200 0 L 160 40 L 160 160 L 40 160 L 0 200 Z'
-  },
-  {
-    key: 'border-3',
-    path: 'M 40 40 L 200 40 L 200 0 L 0 0 L 0 200 L 40 200 Z'
-  },
-  {
-    key: 'border-4',
-    path: 'M 200 200 L 200 0 L 160 0 L 160 160 L 0 160 L 0 200 Z'
-  },
-  {
-    key: 'flower',
-    path: 'M 100 100 Q 50 50 100 0 Q 150 50 100 100 Q 150 50 200 100 Q 150 150 100 100 Q 150 150 100 200 Q 50 150 100 100 Q 50 150 0 100 Q 50 50 100 100'
-  },
-  {
-    key: 'flower-2',
-    path: 'M 100 100 Q 25 0 100 0 Q 175 0 100 100 Q 200 25 200 100 Q 200 175 100 100 Q 175 200 100 200 Q 25 200 100 100 Q 0 175 0 100 Q 0 25 100 100'
-  },
-  {
-    key: 'flower-3',
-    path: 'M 100 100 L 50 0 L 0 50 L 100 100 L 0 150 L 50 200 L 100 100 L 150 200 L 200 150 L 100 100 L 200 50 L 150 0 L 100 100'
-  },
-  {
-    key: 'brace-left',
-    path: 'M 200 0 L 80 20 L 80 90 L 0 100 L 80 110 L 80 180 L 200 200',
-    type: 'line'
-  },
-  {
-    key: 'brace-right',
-    path: 'M 0 0 L 120 20 L 120 90 L 200 100 L 120 110 L 120 180 L 0 200',
-    type: 'line'
-  },
-  {
-    key: 'fillet-brace-left',
-    path: 'M 200 0 Q 80 0 80 40 L 80 90 L 0 100 L 80 110 L 80 160 Q 80 200 200 200',
-    type: 'line'
-  },
-  {
-    key: 'fillet-brace-right',
-    path: 'M 0 0 Q 120 0 120 40 L 120 90 L 200 100 L 120 110 L 120 160 Q 120 200 0 200',
-    type: 'line'
-  },
-  {
-    key: 'bracket-left',
-    path: 'M 200 0 L 0 0 L 0 200 L 200 200',
-    type: 'line'
-  },
-  {
-    key: 'bracket-right',
-    path: 'M 0 0 L 200 0 L 200 200 L 0 200',
-    type: 'line'
-  },
-  {
-    key: 'parentheses-left',
-    path: 'M 200 0 Q 0 0 0 100 Q 0 200 200 200',
-    type: 'line'
-  },
-  {
-    key: 'parentheses-right',
-    path: 'M 0 0 Q 200 0 200 100 Q 200 200 0 200',
-    type: 'line'
-  },
-]

src/configs/tableTheme.ts

@@ -1,117 +0,0 @@
-const commonProps = {
-  data: [
-    [
-      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
-      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
-      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
-      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
-      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
-    ],
-    [
-      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
-      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
-      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
-      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
-      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
-    ],
-    [
-      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
-      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
-      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
-      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
-      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
-    ],
-    [
-      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
-      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
-      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
-      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
-      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
-    ],
-    [
-      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
-      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
-      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
-      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
-      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
-    ],
-    [
-      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
-      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
-      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
-      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
-      { colspan: 1, rowspan: 1, content: '<div style=\"text-align: center;\">text</div>' },
-    ],
-  ],
-  rowSizes: [10, 10, 10, 10, 10, 10],
-  colSizes: [20, 20, 20, 20, 20],
-  width: 102,
-  height: 62,
-  borderColor: '#fff',
-  borderTheme: 'all',
-  borderStyle: 'solid',
-  borderWidth: 1,
-}
-
-export const TABLE_THEMES = [
-  {
-    ...commonProps,
-    tableTheme: 'style-default',
-  },
-  {
-    ...commonProps,
-    tableTheme: 'style-0',
-  },
-  {
-    ...commonProps,
-    tableTheme: 'style-1',
-  },
-  {
-    ...commonProps,
-    tableTheme: 'style-2',
-  },
-  {
-    ...commonProps,
-    tableTheme: 'style-3',
-  },
-  {
-    ...commonProps,
-    tableTheme: 'style-4',
-  },
-  {
-    ...commonProps,
-    tableTheme: 'style-5',
-  },
-  {
-    ...commonProps,
-    tableTheme: 'style-6',
-  },
-  {
-    ...commonProps,
-    tableTheme: 'style-7',
-  },
-  {
-    ...commonProps,
-    tableTheme: 'style-8',
-  },
-  {
-    ...commonProps,
-    tableTheme: 'style-9',
-  },
-  {
-    ...commonProps,
-    tableTheme: 'style-10',
-  },
-  {
-    ...commonProps,
-    tableTheme: 'style-11',
-  },
-  {
-    ...commonProps,
-    tableTheme: 'style-12',
-  },
-  {
-    ...commonProps,
-    tableTheme: 'style-13',
-  },
-]

src/store/constants.ts

@@ -12,13 +12,11 @@ export enum MutationTypes {
 
   // slides
   SET_SLIDES = 'setSlides',
-  ADD_SLIDES = 'addSlides',
-  SET_SLIDE = 'setSlide',
   ADD_SLIDE = 'addSlide',
   UPDATE_SLIDE = 'updateSlide',
   DELETE_SLIDE = 'deleteSlide',
   UPDATE_SLIDE_INDEX = 'updateSlideIndex',
-  ADD_ELEMENTS = 'addElements',
+  ADD_ELEMENT = 'addElement',
   UPDATE_ELEMENT = 'updateElement',
 
   // history

src/store/mutations.ts

@@ -4,25 +4,12 @@ import { Slide, PPTElement } from '@/types/slides'
 import { FONT_NAMES } from '@/configs/fontName'
 import { isSupportFontFamily } from '@/utils/fontFamily'
 
-interface AddSlidesData {
+interface AddSlideData {
   index?: number;
-  slides: Slide[];
-}
-
-interface SetSlideData {
-  index?: number;
-  slide: Slide;
-}
-
-type AddSlideData = SetSlideData
-
-interface UpdateSlideData {
-  index?: number;
-  props: Partial<Slide>;
+  slide: Slide | Slide[];
 }
 
 interface UpdateElementData {
-  index?: number;
   elId: string | string[];
   props: Partial<PPTElement>;
 }
@@ -36,15 +23,15 @@ export type Mutations = {
   [MutationTypes.SET_EDITORAREA_FOCUS](state: State, isFocus: boolean): void;
   [MutationTypes.SET_DISABLE_HOTKEYS_STATE](state: State, disable: boolean): void;
   [MutationTypes.SET_AVAILABLE_FONTS](state: State): void;
+
   [MutationTypes.SET_SLIDES](state: State, slides: Slide[]): void;
-  [MutationTypes.ADD_SLIDES](state: State, data: AddSlidesData): void;
-  [MutationTypes.SET_SLIDE](state: State, data: SetSlideData): void;
   [MutationTypes.ADD_SLIDE](state: State, data: AddSlideData): void;
-  [MutationTypes.UPDATE_SLIDE](state: State, data: UpdateSlideData): void;
+  [MutationTypes.UPDATE_SLIDE](state: State, data: Partial<Slide>): void;
   [MutationTypes.DELETE_SLIDE](state: State, slideId: string): void;
   [MutationTypes.UPDATE_SLIDE_INDEX](state: State, index: number): void;
-  [MutationTypes.ADD_ELEMENTS](state: State, elements: PPTElement[]): void;
+  [MutationTypes.ADD_ELEMENT](state: State, element: PPTElement | PPTElement[]): void;
   [MutationTypes.UPDATE_ELEMENT](state: State, data: UpdateElementData): void;
+  
   [MutationTypes.SET_CURSOR](state: State, cursor: number): void;
   [MutationTypes.UNDO](state: State): void;
   [MutationTypes.REDO](state: State): void;
@@ -96,25 +83,15 @@ export const mutations: Mutations = {
     state.slides = slides
   },
 
-  [MutationTypes.ADD_SLIDES](state, {index, slides}) {
+  [MutationTypes.ADD_SLIDE](state, { index, slide }) {
+    const slides = Array.isArray(slide) ? slide : [slide]
     const addIndex = index !== undefined ? index : (state.slideIndex + 1)
     state.slides.splice(addIndex, 0, ...slides)
     state.slideIndex = addIndex
   },
 
-  [MutationTypes.SET_SLIDE](state, {index, slide}) {
-    const slideIndex = index !== undefined ? index : state.slideIndex
-    state.slides[slideIndex] = slide
-  },
-
-  [MutationTypes.ADD_SLIDE](state, {index, slide}) {
-    const addIndex = index !== undefined ? index : (state.slideIndex + 1)
-    state.slides.splice(addIndex, 0, slide)
-    state.slideIndex = addIndex
-  },
-
-  [MutationTypes.UPDATE_SLIDE](state, {index, props}) {
-    const slideIndex = index !== undefined ? index : state.slideIndex
+  [MutationTypes.UPDATE_SLIDE](state, props) {
+    const slideIndex = state.slideIndex
     state.slides[slideIndex] = { ...state.slides[slideIndex], ...props }
   },
 
@@ -131,19 +108,20 @@ export const mutations: Mutations = {
     state.slideIndex = index
   },
 
-  [MutationTypes.ADD_ELEMENTS](state, elements) {
+  [MutationTypes.ADD_ELEMENT](state, element) {
+    const elements = Array.isArray(element) ? element : [element]
     const currentSlideEls = state.slides[state.slideIndex].elements
     const newEls = [...currentSlideEls, ...elements]
     state.slides[state.slideIndex].elements = newEls
   },
 
-  [MutationTypes.UPDATE_ELEMENT](state, {index, elId, props}) {
-    if(typeof elId === 'string') elId = [elId]
+  [MutationTypes.UPDATE_ELEMENT](state, { elId, props }) {
+    const elIdList = typeof elId === 'string' ? [elId] : elId
 
-    const slideIndex = index !== undefined ? index : state.slideIndex
+    const slideIndex = state.slideIndex
     const slide = state.slides[slideIndex]
     const elements = slide.elements.map(el => {
-      return elId.includes(el.elId) ? { ...el, ...props } : el
+      return elIdList.includes(el.elId) ? { ...el, ...props } : el
     })
     state.slides[slideIndex].elements = (elements as PPTElement[])
   },