From f37c7d7a62e6baaf82d4eed9325adb32a900ea28 Mon Sep 17 00:00:00 2001 From: pipipi-pikachu <1171051090@qq.com> Date: Sun, 13 Dec 2020 11:44:13 +0800 Subject: [PATCH] update --- src/store/constants.ts | 4 +- src/store/mutations.ts | 131 ++++++++++++++++++++++++++++++++++++++++- src/store/state.ts | 4 ++ 3 files changed, 136 insertions(+), 3 deletions(-) diff --git a/src/store/constants.ts b/src/store/constants.ts index dadcdea..1d155cc 100644 --- a/src/store/constants.ts +++ b/src/store/constants.ts @@ -9,18 +9,18 @@ export enum MutationTypes { SET_THUMBNAILS_FOCUS = 'setThumbnailsFocus', SET_EDITORAREA_FOCUS = 'setEditorAreaFocus', SET_AVAILABLE_FONTS = 'setAvailableFonts', + SET_SAVE_STATE = 'setSaveState', // slides SET_SLIDES = 'setSlides', + ADD_SLIDES = 'addSlides', 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', diff --git a/src/store/mutations.ts b/src/store/mutations.ts index 65c8679..27095bc 100644 --- a/src/store/mutations.ts +++ b/src/store/mutations.ts @@ -1,12 +1,55 @@ import { MutationTypes } from './constants' -import { State } from './state' +import { State, SaveState } from './state' +import { Slide, PPTElement } from '@/types/slides' + +interface AddSlidesData { + index?: number; + slides: Slide[]; +} + +interface SetSlideData { + index?: number; + slide: Slide; +} + +type AddSlideData = SetSlideData + +interface UpdateSlideData { + index?: number; + props: Partial; +} + +interface UpdateElementData { + index?: number; + elId: string | string[]; + props: Partial; +} export type Mutations = { [MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST](state: State, activeElementIdList: string[]): void; [MutationTypes.SET_HANDLE_ELEMENT_ID](state: State, handleElementId: string): void; + [MutationTypes.SET_EDITOR_AREA_SHOW_SCALE](state: State, scale: number): void; + [MutationTypes.SET_CANVAS_SCALE](state: State, scale: number): void; + [MutationTypes.TOGGLE_SHOW_GRID_LINES](state: State): void; + [MutationTypes.SET_THUMBNAILS_FOCUS](state: State, isFocus: boolean): void; + [MutationTypes.SET_EDITORAREA_FOCUS](state: State, isFocus: boolean): void; + [MutationTypes.SET_AVAILABLE_FONTS](state: State, fonts: string[]): void; + [MutationTypes.SET_SAVE_STATE](state: State, saveState: SaveState ): 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.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.UPDATE_ELEMENT](state: State, data: UpdateElementData): void; } export const mutations: Mutations = { + + // editor + [MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST](state, activeElementIdList) { if(activeElementIdList.length === 1) state.handleElementId = activeElementIdList[0] else state.handleElementId = '' @@ -17,4 +60,90 @@ export const mutations: Mutations = { [MutationTypes.SET_HANDLE_ELEMENT_ID](state, handleElementId) { state.handleElementId = handleElementId }, + + [MutationTypes.SET_EDITOR_AREA_SHOW_SCALE](state, scale) { + state.editorAreaShowScale = scale + }, + + [MutationTypes.SET_CANVAS_SCALE](state, scale) { + state.canvasScale = scale + }, + + [MutationTypes.TOGGLE_SHOW_GRID_LINES](state) { + state.isShowGridLines = !state.isShowGridLines + }, + + [MutationTypes.SET_THUMBNAILS_FOCUS](state, isFocus) { + state.thumbnailsFocus = isFocus + }, + + [MutationTypes.SET_EDITORAREA_FOCUS](state, isFocus) { + state.editorAreaFocus = isFocus + }, + + [MutationTypes.SET_AVAILABLE_FONTS](state, fonts) { + state.availableFonts = fonts + }, + + [MutationTypes.SET_SAVE_STATE](state, saveState) { + state.saveState = saveState + }, + + // slides + + [MutationTypes.SET_SLIDES](state, slides) { + state.slides = slides + }, + + [MutationTypes.ADD_SLIDES](state, {index, slides}) { + 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 + state.slides[slideIndex] = { ...state.slides[slideIndex], ...props } + }, + + [MutationTypes.DELETE_SLIDE](state, slideId) { + const deleteIndex = state.slides.findIndex(item => item.id === slideId) + + if(deleteIndex === state.slides.length - 1) { + state.slideIndex = deleteIndex - 1 + } + state.slides.splice(deleteIndex, 1) + }, + + [MutationTypes.UPDATE_SLIDE_INDEX](state, index) { + state.slideIndex = index + }, + + [MutationTypes.ADD_ELEMENTS](state, elements) { + 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] + + const slideIndex = index !== undefined ? index : state.slideIndex + const slide = state.slides[slideIndex] + const elements = slide.elements.map(el => { + return elId.includes(el.elId) ? { ...el, ...props } : el + }) + state.slides[slideIndex].elements = (elements as PPTElement[]) + }, } \ No newline at end of file diff --git a/src/store/state.ts b/src/store/state.ts index b94c992..9016e31 100644 --- a/src/store/state.ts +++ b/src/store/state.ts @@ -1,6 +1,8 @@ import { Slide } from '@/types/slides' import { slides } from '@/mocks/index' +export type SaveState = 'complete' | 'pending' + export type State = { activeElementIdList: string[]; handleElementId: string; @@ -10,6 +12,7 @@ export type State = { thumbnailsFocus: boolean; editorAreaFocus: boolean; availableFonts: string[]; + saveState: SaveState; slides: Slide[]; slideIndex: number; cursor: number; @@ -25,6 +28,7 @@ export const state: State = { thumbnailsFocus: false, editorAreaFocus: false, availableFonts: [], + saveState: 'complete', slides: slides, slideIndex: 0, cursor: -1,