From e3c199499635235e8790d9ced2bc9d532ee66a13 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Sat, 16 Jul 2022 10:25:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=A4=9A=E7=A7=8D?=
 =?UTF-8?q?=E7=BD=91=E6=A0=BC=E7=BA=BF=E5=B0=BA=E5=AF=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/main.ts                             |  8 ++--
 src/views/Editor/Canvas/GridLines.vue         | 24 +++++-------
 .../Editor/Canvas/ViewportBackground.vue      |  4 +-
 src/views/Editor/Canvas/index.vue             | 38 +++++++++++++------
 src/views/Editor/EditorHeader/index.vue       |  6 +--
 5 files changed, 46 insertions(+), 34 deletions(-)

diff --git a/src/store/main.ts b/src/store/main.ts
index 41dce63b..196cfd42 100644
--- a/src/store/main.ts
+++ b/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) {
-      this.showGridLines = show
+    setGridLineSize(size: number) {
+      this.gridLineSize = size
     },
   
     setRulerState(show: boolean) {
diff --git a/src/views/Editor/Canvas/GridLines.vue b/src/views/Editor/Canvas/GridLines.vue
index 13a0853d..df6cff65 100644
--- a/src/views/Editor/Canvas/GridLines.vue
+++ b/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 getPath = () => {
+// 网格路径
+const path = computed(() => {
   const maxX = VIEWPORT_SIZE
   const maxY = VIEWPORT_SIZE * viewportRatio.value
 
-  let path = ''
-  for (let i = 0; i <= Math.floor(maxY / gridSize); i++) {
-    path += `M0 ${i * gridSize} L${maxX} ${i * gridSize} `
+  let p = ''
+  for (let i = 0; i <= Math.floor(maxY / gridLineSize.value); i++) {
+    p += `M0 ${i * gridLineSize.value} L${maxX} ${i * gridLineSize.value} `
   }
-  for (let i = 0; i <= Math.floor(maxX / gridSize); i++) {
-    path += `M${i * gridSize} 0 L${i * gridSize} ${maxY} `
+  for (let i = 0; i <= Math.floor(maxX / gridLineSize.value); i++) {
+    p += `M${i * gridLineSize.value} 0 L${i * gridLineSize.value} ${maxY} `
   }
-  return path
-}
-
-const path = getPath()
+  return p
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/Canvas/ViewportBackground.vue b/src/views/Editor/Canvas/ViewportBackground.vue
index dcd36d57..ed86f4eb 100644
--- a/src/views/Editor/Canvas/ViewportBackground.vue
+++ b/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)
 
diff --git a/src/views/Editor/Canvas/index.vue b/src/views/Editor/Canvas/index.vue
index 6d6e1b57..59002153 100644
--- a/src/views/Editor/Canvas/index.vue
+++ b/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,
diff --git a/src/views/Editor/EditorHeader/index.vue b/src/views/Editor/EditorHeader/index.vue
index 1d5e8db7..2407f577 100644
--- a/src/views/Editor/EditorHeader/index.vue
+++ b/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 = () => {