From f35b96b48b0bb300c7d2683061d94dc6a256f6c1 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Wed, 28 Sep 2022 22:14:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=85=83=E7=B4=A0=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E6=94=AF=E6=8C=81=E8=B0=83=E6=95=B4=E5=B1=82?=
 =?UTF-8?q?=E7=BA=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                       |  2 +-
 package.json                            |  2 +-
 src/plugins/icon.ts                     |  2 ++
 src/views/Editor/Canvas/index.vue       |  8 +++++
 src/views/Editor/EditorHeader/index.vue |  7 ++--
 src/views/Editor/SelectPanel.vue        | 48 +++++++++++++++++++++----
 6 files changed, 57 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index eb53e1e7..f2b1dcbe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,7 +40,7 @@
         "svg-pathdata": "^6.0.0",
         "tinycolor2": "^1.4.2",
         "vue": "^3.2.37",
-        "vuedraggable": "^4.0.1"
+        "vuedraggable": "^4.1.0"
       },
       "devDependencies": {
         "@commitlint/cli": "^12.0.0",
diff --git a/package.json b/package.json
index f3684174..08e213cd 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "svg-pathdata": "^6.0.0",
     "tinycolor2": "^1.4.2",
     "vue": "^3.2.37",
-    "vuedraggable": "^4.0.1"
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^12.0.0",
diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts
index 74e304d7..cdbabe6b 100644
--- a/src/plugins/icon.ts
+++ b/src/plugins/icon.ts
@@ -48,6 +48,7 @@ import {
   Tailoring,
   Effects,
   ColorFilter,
+  Up,
   Down,
   Plus,
   Minus,
@@ -159,6 +160,7 @@ export const icons = {
   IconTailoring: Tailoring,
   IconEffects: Effects,
   IconColorFilter: ColorFilter,
+  IconUp: Up,
   IconDown: Down,
   IconPlus: Plus,
   IconMinus: Minus,
diff --git a/src/views/Editor/Canvas/index.vue b/src/views/Editor/Canvas/index.vue
index d838c04a..bcd54d07 100644
--- a/src/views/Editor/Canvas/index.vue
+++ b/src/views/Editor/Canvas/index.vue
@@ -143,6 +143,7 @@ const {
   editorAreaFocus,
   gridLineSize,
   showRuler,
+  showSelectPanel,
   creatingElement,
   canvasScale,
   textFormatPainter,
@@ -287,6 +288,13 @@ const contextmenus = (): ContextmenuItem[] => {
         },
       ],
     },
+    {
+      text: showSelectPanel.value ? '关闭选择面板' : '打开选择面板',
+      handler: () => {
+        if (!showSelectPanel.value) mainStore.setSelectPanelState(true)
+        else mainStore.setSelectPanelState(false)
+      },
+    },
     {
       text: '重置当前页',
       handler: deleteAllElements,
diff --git a/src/views/Editor/EditorHeader/index.vue b/src/views/Editor/EditorHeader/index.vue
index 737fe63f..e23f127e 100644
--- a/src/views/Editor/EditorHeader/index.vue
+++ b/src/views/Editor/EditorHeader/index.vue
@@ -27,7 +27,7 @@
             <MenuItem @click="toggleGridLines()">{{ gridLineSize ? '关闭网格线' : '打开网格线' }}</MenuItem>
             <MenuItem @click="toggleRuler()">{{ showRuler ? '关闭标尺' : '打开标尺' }}</MenuItem>
             <MenuItem @click="resetSlides()">重置幻灯片</MenuItem>
-            <MenuItem @click="openSelectPanel()">打开选择面板</MenuItem>
+            <MenuItem @click="openSelectPanel()">{{ showSelectPanel ? '关闭选择面板' : '打开选择面板' }}</MenuItem>
           </Menu>
         </template>
       </Dropdown>
@@ -91,7 +91,7 @@ import useExport from '@/hooks/useExport'
 import HotkeyDoc from './HotkeyDoc.vue'
 
 const mainStore = useMainStore()
-const { gridLineSize, showRuler } = storeToRefs(mainStore)
+const { gridLineSize, showRuler, showSelectPanel } = storeToRefs(mainStore)
 
 const { enterScreening, enterScreeningFromStart } = useScreening()
 const { createSlide, deleteSlide, resetSlides } = useSlideHandler()
@@ -109,7 +109,8 @@ const toggleRuler = () => {
 }
 
 const openSelectPanel = () => {
-  mainStore.setSelectPanelState(true)
+  if (!showSelectPanel.value) mainStore.setSelectPanelState(true)
+  else mainStore.setSelectPanelState(false)
 }
 
 const hotkeyDrawerVisible = ref(false)
diff --git a/src/views/Editor/SelectPanel.vue b/src/views/Editor/SelectPanel.vue
index 1fb0135e..93a0484a 100644
--- a/src/views/Editor/SelectPanel.vue
+++ b/src/views/Editor/SelectPanel.vue
@@ -8,9 +8,15 @@
     :top="90"
     @close="close()"
   >
-    <div class="btns" v-if="elements.length">
-      <Button size="small" style="margin-right: 5px;" @click="showAll()">全部显示</Button>
-      <Button size="small" @click="hideAll()">全部隐藏</Button>
+    <div class="handler" v-if="elements.length">
+      <div class="btns">
+        <Button size="small" style="margin-right: 5px;" @click="showAll()">全部显示</Button>
+        <Button size="small" @click="hideAll()">全部隐藏</Button>
+      </div>
+      <div class="icon-btns" v-if="handleElement">
+        <IconDown class="icon-btn" @click="orderElement(handleElement!, ElementOrderCommands.UP)" />
+        <IconUp class="icon-btn" @click="orderElement(handleElement!, ElementOrderCommands.DOWN)" />
+      </div>
     </div>
     <div class="element-list">
       <template v-for="item in elements" :key="item.id">
@@ -76,11 +82,15 @@ import { storeToRefs } from 'pinia'
 import { useSlidesStore, useMainStore } from '@/store'
 import { PPTElement } from '@/types/slides'
 import { ELEMENT_TYPE_ZH } from '@/configs/element'
+import useOrderElement from '@/hooks/useOrderElement'
+import { ElementOrderCommands } from '@/types/edit'
 
 const slidesStore = useSlidesStore()
 const mainStore = useMainStore()
 const { currentSlide } = storeToRefs(slidesStore)
-const { handleElementId, activeElementIdList, activeGroupElementId, hiddenElementIdList } = storeToRefs(mainStore)
+const { handleElement, handleElementId, activeElementIdList, activeGroupElementId, hiddenElementIdList } = storeToRefs(mainStore)
+
+const { orderElement } = useOrderElement()
 
 interface GroupElements {
   type: 'group'
@@ -168,11 +178,35 @@ const close = () => {
   font-size: 12px;
   user-select: none;
 }
-.btns {
-  margin-bottom: 6px;
+.handler {
+  height: 24px;
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .icon-btns {
+    height: 100%;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+  .icon-btn {
+    width: 16px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    &:hover {
+      color: $themeColor;
+    }
+  }
 }
 .element-list {
-  height: calc(100% - 30px);
+  height: calc(100% - 32px);
   padding-right: 10px;
   margin-right: -10px;
   overflow: auto;