update

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: '<div style=\'text-align: center;\'><span style=\'font-size: 28px;\'><span style=\'color: rgb(232, 107, 153); font-weight: bold;\'>一段测试文字</span>，字号固定为<span style=\'font-weight: bold; font-style: italic; text-decoration-line: underline;\'>28px</span></span></div>',
+      },
+      {
+        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: '<div>😀 😐 😶 😜 🔔 ⭐ ⚡ 🔥 👍 💡 🔰 🎀 🎁 🥇 🏅 🏆 🎈 🎉 💎 🚧 ⛔ 📢 ⌛ ⏰ 🕒 🧩 🎵 📎 🔒 🔑 ⛳ 📌 📍 💬 📅 📈 📋 📜 📁 📱 💻 💾 🌏 🚚 🚡 🚢💧 🌐 🧭 💰 💳 🛒</div>',
+      },
+    ],
+  },
+]

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

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

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

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[];
 }