From 26200a0be00515ecf87be5e94239ee28a1c4a51d Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Mon, 26 Apr 2021 20:10:19 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=90=8C=E7=BB=84=E5=85=83=E7=B4=A0?=
 =?UTF-8?q?=E6=97=A0=E6=B3=95=E6=89=A7=E8=A1=8C[=E4=BD=8D=E7=BD=AE]?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E4=B8=AD=E7=9A=84=E5=AF=B9=E9=BD=90=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=EF=BC=88#22=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Editor/Toolbar/MultiPositionPanel.vue     | 25 +++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/views/Editor/Toolbar/MultiPositionPanel.vue b/src/views/Editor/Toolbar/MultiPositionPanel.vue
index d7b5566c..83e65ba0 100644
--- a/src/views/Editor/Toolbar/MultiPositionPanel.vue
+++ b/src/views/Editor/Toolbar/MultiPositionPanel.vue
@@ -2,24 +2,24 @@
   <div class="multi-position-panel">
     <ButtonGroup class="row">
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="左对齐">
-        <Button style="flex: 1;" @click="alignActiveElement('left')"><IconAlignLeft /></Button>
+        <Button style="flex: 1;" @click="alignElement('left')"><IconAlignLeft /></Button>
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="水平居中">
-        <Button style="flex: 1;" @click="alignActiveElement('horizontal')"><IconAlignVertically /></Button>
+        <Button style="flex: 1;" @click="alignElement('horizontal')"><IconAlignVertically /></Button>
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="右对齐">
-        <Button style="flex: 1;" @click="alignActiveElement('right')"><IconAlignRight /></Button>
+        <Button style="flex: 1;" @click="alignElement('right')"><IconAlignRight /></Button>
       </Tooltip>
     </ButtonGroup>
     <ButtonGroup class="row">
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="上对齐">
-        <Button style="flex: 1;" @click="alignActiveElement('top')"><IconAlignTop /></Button>
+        <Button style="flex: 1;" @click="alignElement('top')"><IconAlignTop /></Button>
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="垂直居中">
-        <Button style="flex: 1;" @click="alignActiveElement('vertical')"><IconAlignHorizontally /></Button>
+        <Button style="flex: 1;" @click="alignElement('vertical')"><IconAlignHorizontally /></Button>
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="下对齐">
-        <Button style="flex: 1;" @click="alignActiveElement('bottom')"><IconAlignBottom /></Button>
+        <Button style="flex: 1;" @click="alignElement('bottom')"><IconAlignBottom /></Button>
       </Tooltip>
     </ButtonGroup>
     <ButtonGroup class="row" v-if="activeElementList.length > 2">
@@ -40,8 +40,10 @@
 import { computed, defineComponent } from 'vue'
 import { useStore } from '@/store'
 import { PPTElement } from '@/types/slides'
+import { ElementAlignCommand } from '@/types/edit'
 import useCombineElement from '@/hooks/useCombineElement'
 import useAlignActiveElement from '@/hooks/useAlignActiveElement'
+import useAlignElementToCanvas from '@/hooks/useAlignElementToCanvas'
 import useUniformDisplayElement from '@/hooks/useUniformDisplayElement'
 
 export default defineComponent({
@@ -52,6 +54,7 @@ export default defineComponent({
 
     const { combineElements, uncombineElements } = useCombineElement()
     const { alignActiveElement } = useAlignActiveElement()
+    const { alignElementToCanvas } = useAlignElementToCanvas()
     const { uniformHorizontalDisplay, uniformVerticalDisplay } = useUniformDisplayElement()
 
     // 判断当前多选的几个元素是否可以组合
@@ -63,14 +66,22 @@ export default defineComponent({
       return !inSameGroup
     })
 
+    // 多选元素对齐，需要先判断当前所选中的元素状态：
+    // 如果所选元素为一组组合元素，则将它对齐到画布；
+    // 如果所选元素不是组合元素或不止一组元素（即当前为可组合状态），则将这多个（多组）元素相互对齐。
+    const alignElement = (command: ElementAlignCommand) => {
+      if (canCombine.value) alignActiveElement(command)
+      else alignElementToCanvas(command)
+    }
+
     return {
       activeElementList,
       canCombine,
       combineElements,
       uncombineElements,
-      alignActiveElement,
       uniformHorizontalDisplay,
       uniformVerticalDisplay,
+      alignElement,
     }
   },
 })