From 19cdb80c1e7a724ccbc1e7dd2d73b5293ed3c8ad Mon Sep 17 00:00:00 2001 From: pipipi-pikachu <1171051090@qq.com> Date: Sat, 12 Dec 2020 20:27:04 +0800 Subject: [PATCH] update --- src/mocks/index.ts | 92 ++++++++++++++++++++++++++++++++++++++++++ src/store/constants.ts | 20 +++++++++ src/store/getters.ts | 11 +++++ src/store/state.ts | 7 +++- src/types/slides.ts | 26 ++++++++---- 5 files changed, 148 insertions(+), 8 deletions(-) create mode 100644 src/mocks/index.ts diff --git a/src/mocks/index.ts b/src/mocks/index.ts new file mode 100644 index 0000000..f20b7aa --- /dev/null +++ b/src/mocks/index.ts @@ -0,0 +1,92 @@ +import { Slide } from '@/types/slides' + +export const slides: Slide[] = [ + { + id: 'xxx1', + background: ['solid', '#323f4f'], + elements: [ + { + elId: 'xxx1', + type: 'text', + left: 190, + top: 50, + width: 320, + height: 104, + rotate: 0, + borderStyle: 'solid', + borderWidth: 4, + borderColor: '#5b7d89', + fill: 'rgba(220,220,220,0.8)', + shadow: '1px 1px 3px rgba(10,10,10,.5)', + padding: 10, + opacity: 1, + lineHeight: 1.5, + segmentSpacing: 10, + isLock: false, + textType: 'title', + content: '
一段测试文字，字号固定为28px
', + }, + { + elId: 'xxx3', + type: 'image', + left: 80, + top: 250, + width: 180, + height: 180, + rotate: 0, + borderStyle: 'solid', + borderWidth: 4, + borderColor: 'rgba(10,10,10,1)', + filter: '', + clip: { + range: [[30, 0], [100, 70]], + shape: 'ellipse' + }, + lockRatio: false, + isLock: false, + imgUrl: 'https://img.lessonplan.cn/IMG/Show/ppt/3ab74e91-c34f-499d-9711-166e423d4dd6/1573622467064v2-7aa3ce420052983d91c6d01b47a7441d_hd.jpg', + }, + { + elId: 'xxx2', + type: 'image', + left: 750, + top: 320, + width: 150, + height: 150, + rotate: 0, + borderStyle: 'solid', + borderWidth: 6, + borderColor: 'rgba(10,10,10,1)', + filter: '', + clip: { + range: [[0, 0], [100, 100]], + shape: 'roundRect' + }, + lockRatio: true, + isLock: false, + imgUrl: 'https://img.lessonplan.cn/IMG/Show/ppt/3ab74e91-c34f-499d-9711-166e423d4dd6/62d9adb3-e7a6-4dc4-a352-095cffb49f08/b1be1a2f-f893-47d3-a8a3-eac7d04d395f/1596159381259v2-b2c69096d25ae16bf6ca09e30add3e65_hd.jpg', + }, + ], + }, + { + id: 'sajd172', + elements: [ + { + elId: 'yyx1', + type: 'text', + left: 590, + top: 90, + width: 220, + height: 188, + rotate: 0, + padding: 10, + opacity: 1, + lineHeight: 1.5, + segmentSpacing: 10, + isLock: false, + textType: 'content', + content: '
😀 😐 😶 😜 🔔 ⭐ ⚡ 🔥 👍 💡 🔰 🎀 🎁 🥇 🏅 🏆 🎈 🎉 💎 🚧 ⛔ 📢 ⌛ ⏰ 🕒 🧩 🎵 📎 🔒 🔑 ⛳ 📌 📍 💬 📅 📈 📋 📜 📁 📱 💻 💾 🌏 🚚 🚡 🚢💧 🌐 🧭 💰 💳 🛒
', + }, + ], + }, +] \ No newline at end of file diff --git a/src/store/constants.ts b/src/store/constants.ts index 6a908dc..dadcdea 100644 --- a/src/store/constants.ts +++ b/src/store/constants.ts @@ -1,4 +1,6 @@ export enum MutationTypes { + + // editor SET_ACTIVE_ELEMENT_ID_LIST = 'setActiveElementIdList', SET_HANDLE_ELEMENT_ID = 'setHandleElementId', SET_EDITOR_AREA_SHOW_SCALE = 'setEditorAreaShowScale', @@ -7,4 +9,22 @@ export enum MutationTypes { SET_THUMBNAILS_FOCUS = 'setThumbnailsFocus', SET_EDITORAREA_FOCUS = 'setEditorAreaFocus', SET_AVAILABLE_FONTS = 'setAvailableFonts', + + // slides + SET_SLIDES = 'setSlides', + SET_SLIDE = 'setSlide', + ADD_SLIDE = 'addSlide', + ADD_SLIDES = 'addSlides', + UPDATE_SLIDE = 'updateSlide', + DELETE_SLIDE = 'deleteSlide', + UPDATE_SLIDE_INDEX = 'updateSlideIndex', + ADD_ELEMENTS = 'addElements', + UPDATE_ELEMENT = 'updateElement', + UPDATE_ELEMENTS = 'updateElements', + + // history + SET_CURSOR = 'setCursor', + UNDO = 'undo', + REDO = 'redo', + SET_HISTORY_RECORD_LENGTH = 'setHistoryRecordLength', } \ No newline at end of file diff --git a/src/store/getters.ts b/src/store/getters.ts index 4fe032b..6454657 100644 --- a/src/store/getters.ts +++ b/src/store/getters.ts @@ -4,6 +4,8 @@ import { State } from './state' export type Getters = { activeElementList(state: State): PPTElement[]; handleElement(state: State): PPTElement | null; + canUndo(state: State): boolean; + canRedo(state: State): boolean; } export const getters: Getters = { @@ -12,9 +14,18 @@ export const getters: Getters = { if(!currentSlide || !currentSlide.elements) return [] return currentSlide.elements.filter(element => state.activeElementIdList.includes(element.elId)) }, + handleElement(state) { const currentSlide = state.slides[state.slideIndex] if(!currentSlide || !currentSlide.elements) return null return currentSlide.elements.find(element => state.handleElementId === element.elId) || null }, + + canUndo(state) { + return state.cursor > 0 + }, + + canRedo(state) { + return state.cursor < state.historyRecordLength - 1 + }, } \ No newline at end of file diff --git a/src/store/state.ts b/src/store/state.ts index 7fa6f4b..b94c992 100644 --- a/src/store/state.ts +++ b/src/store/state.ts @@ -1,4 +1,5 @@ import { Slide } from '@/types/slides' +import { slides } from '@/mocks/index' export type State = { activeElementIdList: string[]; @@ -11,6 +12,8 @@ export type State = { availableFonts: string[]; slides: Slide[]; slideIndex: number; + cursor: number; + historyRecordLength: number; } export const state: State = { @@ -22,6 +25,8 @@ export const state: State = { thumbnailsFocus: false, editorAreaFocus: false, availableFonts: [], - slides: [], + slides: slides, slideIndex: 0, + cursor: -1, + historyRecordLength: 0, } \ No newline at end of file diff --git a/src/types/slides.ts b/src/types/slides.ts index 13c8132..a95f2e7 100644 --- a/src/types/slides.ts +++ b/src/types/slides.ts @@ -1,9 +1,9 @@ export interface PPTElementBaseProps { elId: string; isLock: boolean; - groupId: string; left: number; top: number; + groupId?: string; } export interface PPTElementSizeProps { @@ -18,40 +18,48 @@ export interface PPTElementBorderProps { } export interface PPTTextElement extends PPTElementBaseProps, PPTElementSizeProps, PPTElementBorderProps { + type: 'text'; textType: string; content: string; rotate?: number; fill?: string; - opactity?: number; + opacity?: number; lineHeight?: number; - segmentSapcing?: number; + segmentSpacing?: number; letterSpacing?: number; shadow?: string; padding?: number; } +interface ImageClip { + range: [[number, number], [number, number]]; + shape: string; +} export interface PPTImageElement extends PPTElementBaseProps, PPTElementSizeProps, PPTElementBorderProps { + type: 'image'; lockRatio: boolean; imgUrl: string; rotate?: number; filter?: string; - clip?: string; + clip?: ImageClip; flip?: string; shadow?: string; } export interface PPTShapeElement extends PPTElementBaseProps, PPTElementSizeProps, PPTElementBorderProps { + type: 'shape'; svgCode: string; lockRatio: boolean; fill: string; rotate?: number; - opactity?: number; + opacity?: number; shadow?: string; text?: string; textAlign?: string; } export interface PPTIconElement extends PPTElementBaseProps, PPTElementSizeProps { + type: 'icon'; color: string; lockRatio: boolean; svgCode: string; @@ -60,6 +68,7 @@ export interface PPTIconElement extends PPTElementBaseProps, PPTElementSizeProps } export interface PPTLineElement extends PPTElementBaseProps { + type: 'line'; start: [number, number]; end: [number, number]; width: number; @@ -82,6 +91,7 @@ export interface PieChartData { value: number } export interface PPTChartElement extends PPTElementBaseProps, PPTElementSizeProps, PPTElementBorderProps { + type: 'chart'; chartType: string; theme: string; data: PieChartData[] | BarChartData; @@ -94,6 +104,7 @@ export interface TableCell { bgColor: string; } export interface PPTTableElement extends PPTElementBaseProps, PPTElementSizeProps { + type: 'table'; borderTheme: string; theme: string; rowSizes: number[]; @@ -101,6 +112,7 @@ export interface PPTTableElement extends PPTElementBaseProps, PPTElementSizeProp data: TableCell[][]; } export interface PPTIframeElement extends PPTElementBaseProps, PPTElementSizeProps, PPTElementBorderProps { + type: 'iframe'; src: string; } @@ -121,7 +133,7 @@ export interface PPTAnimation { export interface Slide { id: string; - background: [string, string]; elements: PPTElement[]; - animations: PPTAnimation[]; + background?: [string, string]; + animations?: PPTAnimation[]; } \ No newline at end of file