jasder
/
PPTist
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

枚举和常量优化

This commit is contained in:
pipipi-pikachu 2021-01-30 21:11:20 +08:00
parent 69092a0518
commit e6c56f8f83
14 changed files with 32 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/configs/chartTheme.ts
View File

@ -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'],
]

14
src/configs/element.ts
View File

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

2
src/configs/hotkey.ts
View File

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

4
src/configs/imageClip.ts
View File

@ -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',

4
src/store/constants.ts
View File

@ -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',

10
src/types/edit.ts
View File

@ -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,'
}

2
src/types/slides.ts
View File

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

4
src/utils/element.ts
View File

@ -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

2
src/utils/emitter.ts
View File

@ -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',

4
src/views/Editor/Canvas/Operate/MultiSelectOperate.vue
View File

@ -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

8
src/views/Editor/Canvas/hooks/useDragElement.ts
View File

@ -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]))

6
src/views/Editor/Canvas/hooks/useScaleElement.ts
View File

@ -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,

4
src/views/Editor/Toolbar/ElementAnimationPanel.vue
View File

@ -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({

2
src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
View File

@ -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,
}