mirror of https://gitee.com/godoos/godoos.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
206 lines
6.6 KiB
206 lines
6.6 KiB
import { customAlphabet } from 'nanoid'
|
|
import { defineStore } from 'pinia'
|
|
import { ToolbarStates } from '@/types/toolbar'
|
|
import type { CreatingElement, ShapeFormatPainter, TextFormatPainter } from '@/types/edit'
|
|
import type { DialogForExportTypes } from '@/types/export'
|
|
import { type TextAttrs, defaultRichTextAttrs } from '@/utils/prosemirror/utils'
|
|
import { SYS_FONTS } from '@/configs/font'
|
|
import { isSupportFont } from '@/utils/font'
|
|
|
|
import { useSlidesStore } from './slides'
|
|
|
|
export interface MainState {
|
|
activeElementIdList: string[]
|
|
handleElementId: string
|
|
activeGroupElementId: string
|
|
hiddenElementIdList: string[]
|
|
canvasPercentage: number
|
|
canvasScale: number
|
|
canvasDragged: boolean
|
|
thumbnailsFocus: boolean
|
|
editorAreaFocus: boolean
|
|
disableHotkeys: boolean
|
|
gridLineSize: number
|
|
showRuler: boolean
|
|
creatingElement: CreatingElement | null
|
|
creatingCustomShape: boolean
|
|
availableFonts: typeof SYS_FONTS
|
|
toolbarState: ToolbarStates
|
|
clipingImageElementId: string
|
|
isScaling: boolean
|
|
richTextAttrs: TextAttrs
|
|
selectedTableCells: string[]
|
|
selectedSlidesIndex: number[]
|
|
dialogForExport: DialogForExportTypes
|
|
databaseId: string
|
|
textFormatPainter: TextFormatPainter | null
|
|
shapeFormatPainter: ShapeFormatPainter | null
|
|
showSelectPanel: boolean
|
|
showSearchPanel: boolean
|
|
showNotesPanel: boolean
|
|
}
|
|
|
|
const nanoid = customAlphabet('0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz')
|
|
export const databaseId = nanoid(10)
|
|
|
|
export const useMainStore = defineStore('main', {
|
|
state: (): MainState => ({
|
|
activeElementIdList: [], // 被选中的元素ID集合,包含 handleElementId
|
|
handleElementId: '', // 正在操作的元素ID
|
|
activeGroupElementId: '', // 组合元素成员中,被选中可独立操作的元素ID
|
|
hiddenElementIdList: [], // 被隐藏的元素ID集合
|
|
canvasPercentage: 90, // 画布可视区域百分比
|
|
canvasScale: 1, // 画布缩放比例(基于宽度1000px)
|
|
canvasDragged: false, // 画布被拖拽移动
|
|
thumbnailsFocus: false, // 左侧导航缩略图区域聚焦
|
|
editorAreaFocus: false, // 编辑区域聚焦
|
|
disableHotkeys: false, // 禁用快捷键
|
|
gridLineSize: 0, // 网格线尺寸(0表示不显示网格线)
|
|
showRuler: false, // 显示标尺
|
|
creatingElement: null, // 正在插入的元素信息,需要通过绘制插入的元素(文字、形状、线条)
|
|
creatingCustomShape: false, // 正在绘制任意多边形
|
|
availableFonts: SYS_FONTS, // 当前环境可用字体
|
|
toolbarState: ToolbarStates.SLIDE_DESIGN, // 右侧工具栏状态
|
|
clipingImageElementId: '', // 当前正在裁剪的图片ID
|
|
richTextAttrs: defaultRichTextAttrs, // 富文本状态
|
|
selectedTableCells: [], // 选中的表格单元格
|
|
isScaling: false, // 正在进行元素缩放
|
|
selectedSlidesIndex: [], // 当前被选中的页面索引集合
|
|
dialogForExport: '', // 导出面板
|
|
databaseId, // 标识当前应用的indexedDB数据库ID
|
|
textFormatPainter: null, // 文字格式刷
|
|
shapeFormatPainter: null, // 形状格式刷
|
|
showSelectPanel: false, // 打开选择面板
|
|
showSearchPanel: false, // 打开查找替换面板
|
|
showNotesPanel: false, // 打开批注面板
|
|
}),
|
|
|
|
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
|
|
},
|
|
|
|
setHiddenElementIdList(hiddenElementIdList: string[]) {
|
|
this.hiddenElementIdList = hiddenElementIdList
|
|
},
|
|
|
|
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
|
|
},
|
|
|
|
setGridLineSize(size: number) {
|
|
this.gridLineSize = size
|
|
},
|
|
|
|
setRulerState(show: boolean) {
|
|
this.showRuler = show
|
|
},
|
|
|
|
setCreatingElement(element: CreatingElement | null) {
|
|
this.creatingElement = element
|
|
},
|
|
|
|
setCreatingCustomShapeState(state: boolean) {
|
|
this.creatingCustomShape = state
|
|
},
|
|
|
|
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
|
|
},
|
|
|
|
setTextFormatPainter(textFormatPainter: TextFormatPainter | null) {
|
|
this.textFormatPainter = textFormatPainter
|
|
},
|
|
|
|
setShapeFormatPainter(shapeFormatPainter: ShapeFormatPainter | null) {
|
|
this.shapeFormatPainter = shapeFormatPainter
|
|
},
|
|
|
|
setSelectPanelState(show: boolean) {
|
|
this.showSelectPanel = show
|
|
},
|
|
|
|
setSearchPanelState(show: boolean) {
|
|
this.showSearchPanel = show
|
|
},
|
|
|
|
setNotesPanelState(show: boolean) {
|
|
this.showNotesPanel = show
|
|
},
|
|
},
|
|
})
|