PPTist/src/store/main.ts

164 lines
5.2 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { customAlphabet } from 'nanoid'
import { defineStore } from 'pinia'
import { CreatingElement } from '@/types/edit'
import { ToolbarStates } from '@/types/toolbar'
import { DialogForExportTypes } from '@/types/export'
import { SYS_FONTS } from '@/configs/font'
import { TextAttrs, defaultRichTextAttrs } from '@/utils/prosemirror/utils'
import { isSupportFont } from '@/utils/font'
import { useSlidesStore } from './slides'
export interface MainState {
activeElementIdList: string[];
handleElementId: string;
activeGroupElementId: string;
canvasPercentage: number;
canvasScale: number;
canvasDragged: boolean;
thumbnailsFocus: boolean;
editorAreaFocus: boolean;
disableHotkeys: boolean;
showGridLines: boolean;
showRuler: boolean;
creatingElement: CreatingElement | null;
availableFonts: typeof SYS_FONTS;
toolbarState: ToolbarStates;
clipingImageElementId: string;
isScaling: boolean;
richTextAttrs: TextAttrs;
selectedTableCells: string[];
selectedSlidesIndex: number[];
dialogForExport: DialogForExportTypes;
databaseId: string;
}
const nanoid = customAlphabet('0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz')
export const databaseId = nanoid(10)
export const useMainStore = defineStore('main', {
state: (): MainState => ({
activeElementIdList: [], // 被选中的元素ID集合包含 handleElementId
handleElementId: '', // 正在操作的元素ID
activeGroupElementId: '', // 组合元素成员中被选中可独立操作的元素ID
canvasPercentage: 90, // 画布可视区域百分比
canvasScale: 1, // 画布缩放比例基于宽度1000px
canvasDragged: false, // 画布被拖拽移动
thumbnailsFocus: false, // 左侧导航缩略图区域聚焦
editorAreaFocus: false, // 编辑区域聚焦
disableHotkeys: false, // 禁用快捷键
showGridLines: false, // 显示网格线
showRuler: false, // 显示标尺
creatingElement: null, // 正在插入的元素信息,需要通过绘制插入的元素(文字、形状、线条)
availableFonts: SYS_FONTS, // 当前环境可用字体
toolbarState: ToolbarStates.SLIDE_DESIGN, // 右侧工具栏状态
clipingImageElementId: '', // 当前正在裁剪的图片ID
richTextAttrs: defaultRichTextAttrs, // 富文本状态
selectedTableCells: [], // 选中的表格单元格
isScaling: false, // 正在进行元素缩放
selectedSlidesIndex: [], // 当前被选中的页面索引集合
dialogForExport: '', // 导出面板
databaseId, // 标识当前应用的indexedDB数据库ID
}),
getters: {
activeElementList(state) {
const slidesStore = useSlidesStore()
const currentSlide = slidesStore.currentSlide
if (!currentSlide || !currentSlide.elements) return []
return currentSlide.elements.filter(element => state.activeElementIdList.includes(element.id))
},
handleElement(state) {
const slidesStore = useSlidesStore()
const currentSlide = slidesStore.currentSlide
if (!currentSlide || !currentSlide.elements) return null
return currentSlide.elements.find(element => state.handleElementId === element.id) || null
},
},
actions: {
setActiveElementIdList(activeElementIdList: string[]) {
if (activeElementIdList.length === 1) this.handleElementId = activeElementIdList[0]
else this.handleElementId = ''
this.activeElementIdList = activeElementIdList
},
setHandleElementId(handleElementId: string) {
this.handleElementId = handleElementId
},
setActiveGroupElementId(activeGroupElementId: string) {
this.activeGroupElementId = activeGroupElementId
},
setCanvasPercentage(percentage: number) {
this.canvasPercentage = percentage
},
setCanvasScale(scale: number) {
this.canvasScale = scale
},
setCanvasDragged(isDragged: boolean) {
this.canvasDragged = isDragged
},
setThumbnailsFocus(isFocus: boolean) {
this.thumbnailsFocus = isFocus
},
setEditorareaFocus(isFocus: boolean) {
this.editorAreaFocus = isFocus
},
setDisableHotkeysState(disable: boolean) {
this.disableHotkeys = disable
},
setGridLinesState(show: boolean) {
this.showGridLines = show
},
setRulerState(show: boolean) {
this.showRuler = show
},
setCreatingElement(element: CreatingElement | null) {
this.creatingElement = element
},
setAvailableFonts() {
this.availableFonts = SYS_FONTS.filter(font => isSupportFont(font.value))
},
setToolbarState(toolbarState: ToolbarStates) {
this.toolbarState = toolbarState
},
setClipingImageElementId(elId: string) {
this.clipingImageElementId = elId
},
setRichtextAttrs(attrs: TextAttrs) {
this.richTextAttrs = attrs
},
setSelectedTableCells(cells: string[]) {
this.selectedTableCells = cells
},
setScalingState(isScaling: boolean) {
this.isScaling = isScaling
},
updateSelectedSlidesIndex(selectedSlidesIndex: number[]) {
this.selectedSlidesIndex = selectedSlidesIndex
},
setDialogForExport(type: DialogForExportTypes) {
this.dialogForExport = type
},
},
})