feat: 添加多种网格线尺寸

src/store/main.ts

@@ -19,7 +19,7 @@ export interface MainState {
   thumbnailsFocus: boolean
   editorAreaFocus: boolean
   disableHotkeys: boolean
-  showGridLines: boolean
+  gridLineSize: number
   showRuler: boolean
   creatingElement: CreatingElement | null
   availableFonts: typeof SYS_FONTS
@@ -47,7 +47,7 @@ export const useMainStore = defineStore('main', {
     thumbnailsFocus: false, // 左侧导航缩略图区域聚焦
     editorAreaFocus: false, //  编辑区域聚焦
     disableHotkeys: false, // 禁用快捷键
-    showGridLines: false, // 显示网格线
+    gridLineSize: 0, // 网格线尺寸（0表示不显示网格线）
     showRuler: false, // 显示标尺
     creatingElement: null, // 正在插入的元素信息，需要通过绘制插入的元素（文字、形状、线条）
     availableFonts: SYS_FONTS, // 当前环境可用字体
@@ -117,8 +117,8 @@ export const useMainStore = defineStore('main', {
       this.disableHotkeys = disable
     },
   
-    setGridLinesState(show: boolean) {
+    setGridLineSize(size: number) {
-      this.showGridLines = show
+      this.gridLineSize = size
     },
   
     setRulerState(show: boolean) {

src/views/Editor/Canvas/GridLines.vue

@@ -21,7 +21,7 @@ import { useMainStore, useSlidesStore } from '@/store'
 import { VIEWPORT_SIZE } from '@/configs/canvas'
 import { SlideBackground } from '@/types/slides'
 
-const { canvasScale } = storeToRefs(useMainStore())
+const { canvasScale, gridLineSize } = storeToRefs(useMainStore())
 const { currentSlide, viewportRatio } = storeToRefs(useSlidesStore())
 
 const background = computed<SlideBackground | undefined>(() => currentSlide.value?.background)
@@ -33,24 +33,20 @@ const gridColor = computed(() => {
   return tinycolor.mostReadable(bgColor, colorList, { includeFallbackColors: true }).setAlpha(.5).toRgbString()
 })
 
-const gridSize = 50
+// 网格路径
-
+const path = computed(() => {
-// 计算网格路径
-const getPath = () => {
   const maxX = VIEWPORT_SIZE
   const maxY = VIEWPORT_SIZE * viewportRatio.value
 
-  let path = ''
+  let p = ''
-  for (let i = 0; i <= Math.floor(maxY / gridSize); i++) {
+  for (let i = 0; i <= Math.floor(maxY / gridLineSize.value); i++) {
-    path += `M0 ${i * gridSize} L${maxX} ${i * gridSize} `
+    p += `M0 ${i * gridLineSize.value} L${maxX} ${i * gridLineSize.value} `
   }
-  for (let i = 0; i <= Math.floor(maxX / gridSize); i++) {
+  for (let i = 0; i <= Math.floor(maxX / gridLineSize.value); i++) {
-    path += `M${i * gridSize} 0 L${i * gridSize} ${maxY} `
+    p += `M${i * gridLineSize.value} 0 L${i * gridLineSize.value} ${maxY} `
   }
-  return path
+  return p
-}
+})
-
-const path = getPath()
 </script>
 
 <style lang="scss" scoped>

src/views/Editor/Canvas/ViewportBackground.vue

@@ -3,7 +3,7 @@
     class="viewport-background"
     :style="backgroundStyle"
   >
-    <GridLines v-if="showGridLines" />
+    <GridLines v-if="gridLineSize" />
   </div>
 </template>
 
@@ -15,7 +15,7 @@ import { SlideBackground } from '@/types/slides'
 import GridLines from './GridLines.vue'
 import useSlideBackgroundStyle from '@/hooks/useSlideBackgroundStyle'
 
-const { showGridLines } = storeToRefs(useMainStore())
+const { gridLineSize } = storeToRefs(useMainStore())
 const { currentSlide } = storeToRefs(useSlidesStore())
 const background = computed<SlideBackground | undefined>(() => currentSlide.value?.background)
 

src/views/Editor/Canvas/index.vue

@@ -138,7 +138,7 @@ const {
   activeGroupElementId,
   handleElementId,
   editorAreaFocus,
-  showGridLines,
+  gridLineSize,
   showRuler,
   creatingElement,
   canvasScale,
@@ -224,11 +224,6 @@ const handleMousewheelCanvas = (e: WheelEvent) => {
   }
 }
 
-// 开关网格线
-const toggleGridLines = () => {
-  mainStore.setGridLinesState(!showGridLines.value)
-}
-
 // 开关标尺
 const toggleRuler = () => {
   mainStore.setRulerState(!showRuler.value)
@@ -249,16 +244,37 @@ const contextmenus = (): ContextmenuItem[] => {
       subText: 'Ctrl + A',
       handler: selectAllElement,
     },
-    {
-      text: '网格线',
-      subText: showGridLines.value ? '√' : '',
-      handler: toggleGridLines,
-    },
     {
       text: '标尺',
       subText: showRuler.value ? '√' : '',
       handler: toggleRuler,
     },
+    {
+      text: '网格线',
+      handler: () => mainStore.setGridLineSize(gridLineSize.value ? 0 : 50),
+      children: [
+        {
+          text: '无',
+          subText: gridLineSize.value === 0 ? '√' : '',
+          handler: () => mainStore.setGridLineSize(0),
+        },
+        {
+          text: '小',
+          subText: gridLineSize.value === 25 ? '√' : '',
+          handler: () => mainStore.setGridLineSize(25),
+        },
+        {
+          text: '中',
+          subText: gridLineSize.value === 50 ? '√' : '',
+          handler: () => mainStore.setGridLineSize(50),
+        },
+        {
+          text: '大',
+          subText: gridLineSize.value === 100 ? '√' : '',
+          handler: () => mainStore.setGridLineSize(100),
+        },
+      ],
+    },
     {
       text: '重置当前页',
       handler: deleteAllElements,

src/views/Editor/EditorHeader/index.vue

@@ -24,7 +24,7 @@
             <MenuItem @click="redo()">重做</MenuItem>
             <MenuItem @click="createSlide()">添加页面</MenuItem>
             <MenuItem @click="deleteSlide()">删除页面</MenuItem>
-            <MenuItem @click="toggleGridLines()">{{ showGridLines ? '关闭网格线' : '打开网格线' }}</MenuItem>
+            <MenuItem @click="toggleGridLines()">{{ gridLineSize ? '关闭网格线' : '打开网格线' }}</MenuItem>
             <MenuItem @click="toggleRuler()">{{ showRuler ? '关闭标尺' : '打开标尺' }}</MenuItem>
             <MenuItem @click="resetSlides()">重置幻灯片</MenuItem>
           </Menu>
@@ -90,7 +90,7 @@ import useExport from '@/hooks/useExport'
 import HotkeyDoc from './HotkeyDoc.vue'
 
 const mainStore = useMainStore()
-const { showGridLines, showRuler } = storeToRefs(mainStore)
+const { gridLineSize, showRuler } = storeToRefs(mainStore)
 
 const { enterScreening, enterScreeningFromStart } = useScreening()
 const { createSlide, deleteSlide, resetSlides } = useSlideHandler()
@@ -100,7 +100,7 @@ const { importSpecificFile } = useExport()
 const setDialogForExport = mainStore.setDialogForExport
 
 const toggleGridLines = () => {
-  mainStore.setGridLinesState(!showGridLines.value)
+  mainStore.setGridLineSize(gridLineSize.value ? 0 : 50)
 }
 
 const toggleRuler = () => {