update
This commit is contained in:
pipipi-pikachu
parent
6220a73641
commit
f37c7d7a62
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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<Slide>;
|
||||
}
|
||||
|
||||
interface UpdateElementData {
|
||||
index?: number;
|
||||
elId: string | string[];
|
||||
props: Partial<PPTElement>;
|
||||
}
|
||||
|
||||
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[])
|
||||
},
|
||||
}
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue