mirror of
https://github.com/pipipi-pikachu/PPTist.git
synced 2025-04-15 02:20:00 +08:00
164 lines
5.2 KiB
TypeScript
164 lines
5.2 KiB
TypeScript
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
|
||
},
|
||
},
|
||
}) |