From e7010cfaf4eec293859d4adcc2e3db90a3892c7f Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <1171051090@qq.com>
Date: Sun, 24 Jan 2021 20:00:37 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=80=E4=BA=9BUI=E8=B0=83=E6=95=B4=E5=92=8C?=
 =?UTF-8?q?=E5=B0=8F=E5=8A=9F=E8=83=BD=E8=A1=A5=E5=85=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                               |  2 +-
 src/hooks/useLockElement.ts                |  2 ++
 src/hooks/useScreening.ts                  |  6 ++++
 src/views/Editor/Canvas/MouseSelection.vue |  3 +-
 src/views/Editor/Canvas/index.vue          |  2 +-
 src/views/Editor/EditorHeader/index.vue    | 38 +++++++++++++++++-----
 6 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 0168f81..9596e4a 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "hamster_ppt",
+  "name": "pptist",
   "version": "0.0.1",
   "private": true,
   "scripts": {
diff --git a/src/hooks/useLockElement.ts b/src/hooks/useLockElement.ts
index bdddfaf..6ffa14a 100644
--- a/src/hooks/useLockElement.ts
+++ b/src/hooks/useLockElement.ts
@@ -18,6 +18,7 @@ export default () => {
       if(activeElementIdList.value.includes(element.id)) element.lock = true
     }
     store.commit(MutationTypes.UPDATE_SLIDE, { elements: newElementList })
+    store.commit(MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST, [])
     addHistorySnapshot()
   }
 
@@ -38,6 +39,7 @@ export default () => {
       }
     }
     store.commit(MutationTypes.UPDATE_SLIDE, { elements: newElementList })
+    store.commit(MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST, [handleElement.id])
     addHistorySnapshot()
   }
 
diff --git a/src/hooks/useScreening.ts b/src/hooks/useScreening.ts
index a8b2f6d..6cbcd0b 100644
--- a/src/hooks/useScreening.ts
+++ b/src/hooks/useScreening.ts
@@ -10,6 +10,11 @@ export default () => {
     store.commit(MutationTypes.SET_SCREENING, true)
   }
 
+  const enterScreeningFromStart = () => {
+    store.commit(MutationTypes.UPDATE_SLIDE_INDEX, 0)
+    enterScreening()
+  }
+
   const exitScreening = () => {
     store.commit(MutationTypes.SET_SCREENING, false)
     if(isFullscreen()) exitFullscreen()
@@ -17,6 +22,7 @@ export default () => {
 
   return {
     enterScreening,
+    enterScreeningFromStart,
     exitScreening,
   }
 }
\ No newline at end of file
diff --git a/src/views/Editor/Canvas/MouseSelection.vue b/src/views/Editor/Canvas/MouseSelection.vue
index e69d47a..10b9066 100644
--- a/src/views/Editor/Canvas/MouseSelection.vue
+++ b/src/views/Editor/Canvas/MouseSelection.vue
@@ -43,7 +43,8 @@ export default {
 <style lang="scss" scoped>
 .mouse-selection {
   position: absolute;
-  background: rgba(150, 150, 150, 0.25);
+  background-color: rgba($themeColor, 0.1);
+  border: 1px solid $themeColor;
   z-index: 200;
 
   &.quadrant-1 {
diff --git a/src/views/Editor/Canvas/index.vue b/src/views/Editor/Canvas/index.vue
index 12ba9e1..9bb6222 100644
--- a/src/views/Editor/Canvas/index.vue
+++ b/src/views/Editor/Canvas/index.vue
@@ -202,7 +202,7 @@ export default defineComponent({
           handler: pasteElement,
         },
         {
-          text: '网格参考线',
+          text: '网格线',
           handler: toggleGridLines,
         },
         {
diff --git a/src/views/Editor/EditorHeader/index.vue b/src/views/Editor/EditorHeader/index.vue
index 65b8f75..70daa79 100644
--- a/src/views/Editor/EditorHeader/index.vue
+++ b/src/views/Editor/EditorHeader/index.vue
@@ -14,11 +14,11 @@
         <div class="menu-item"><IconEdit /> 编辑</div>
         <template #overlay>
           <Menu>
-            <MenuItem>撤销</MenuItem>
-            <MenuItem>重做</MenuItem>
-            <MenuItem>添加页面</MenuItem>
-            <MenuItem>删除页面</MenuItem>
-            <MenuItem>网格参考线</MenuItem>
+            <MenuItem @click="undo()">撤销</MenuItem>
+            <MenuItem @click="redo()">重做</MenuItem>
+            <MenuItem @click="createSlide()">添加页面</MenuItem>
+            <MenuItem @click="deleteSlide()">删除页面</MenuItem>
+            <MenuItem @click="toggleGridLines()">{{ showGridLines ? '关闭网格线' : '打开网格线' }}</MenuItem>
           </Menu>
         </template>
       </Dropdown>
@@ -26,8 +26,8 @@
         <div class="menu-item"><IconSlide /> 演示</div>
         <template #overlay>
           <Menu>
-            <MenuItem>从头开始</MenuItem>
-            <MenuItem>从当前页开始</MenuItem>
+            <MenuItem @click="enterScreeningFromStart()">从头开始</MenuItem>
+            <MenuItem @click="enterScreening()">从当前页开始</MenuItem>
           </Menu>
         </template>
       </Dropdown>
@@ -57,16 +57,36 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { computed, defineComponent } from 'vue'
+import { useStore } from 'vuex'
+import { MutationTypes, State } from '@/store'
 import useScreening from '@/hooks/useScreening'
+import useSlideHandler from '@/hooks/useSlideHandler'
+import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 export default defineComponent({
   name: 'editor-header',
   setup() {
-    const { enterScreening } = useScreening()
+    const store = useStore<State>()
+
+    const { enterScreening, enterScreeningFromStart } = useScreening()
+    const { createSlide, deleteSlide } = useSlideHandler()
+    const { redo, undo } = useHistorySnapshot()
+
+    const showGridLines = computed(() => store.state.showGridLines)
+    const toggleGridLines = () => {
+      store.commit(MutationTypes.SET_GRID_LINES_STATE, !showGridLines.value)
+    }
 
     return {
       enterScreening,
+      enterScreeningFromStart,
+      createSlide,
+      deleteSlide,
+      redo,
+      undo,
+      toggleGridLines,
+      showGridLines,
     }
   },
 })