From 1293e6cc84cf5e9203a99f8c53ecfa6f808e7b0a Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Wed, 14 Apr 2021 21:07:20 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E8=A1=A5=E5=85=85=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useUniformDisplayElement.ts | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/hooks/useUniformDisplayElement.ts b/src/hooks/useUniformDisplayElement.ts
index 9afda211..2a2dd9a1 100644
--- a/src/hooks/useUniformDisplayElement.ts
+++ b/src/hooks/useUniformDisplayElement.ts
@@ -23,19 +23,24 @@ export default () => {
     const copyOfActiveElementList: PPTElement[] = JSON.parse(JSON.stringify(activeElementList.value))
     const newElementList: PPTElement[] = JSON.parse(JSON.stringify(currentSlide.value.elements))
 
+    // 将选中的元素按位置（从左到右）排序
     copyOfActiveElementList.sort((elementA, elementB) => {
       const { minX: elAMinX } = getElementRange(elementA)
       const { minX: elBMinX } = getElementRange(elementB)
       return elAMinX - elBMinX
     })
 
-    let totaiWidth = 0
+    // 计算元素均匀分布所需要的间隔：
+    // (所选元素整体范围 - 所有所选元素宽度和) / (所选元素数 - 1)
+    let totalWidth = 0
     for (const element of activeElementList.value) {
       const { minX: elMinX, maxX: elMaxX } = getElementRange(element)
-      totaiWidth += (elMaxX - elMinX)
+      totalWidth += (elMaxX - elMinX)
     }
-    const span = ((maxX - minX) - totaiWidth) / (activeElementList.value.length - 1)
+    const span = ((maxX - minX) - totalWidth) / (activeElementList.value.length - 1)
 
+    // 将所选元素按位置顺序依次计算目标位置
+    // 注意pos并非元素目标left值，而是目标位置范围最小值（元素旋转后的left值 ≠ 范围最小值）
     const sortedElementData: SortedElementData[] = []
     for (const element of copyOfActiveElementList) {
       if (!sortedElementData.length) {
@@ -52,6 +57,8 @@ export default () => {
       sortedElementData.push({ el: element, pos: lastItemPos + lastElementWidth + span })
     }
 
+    // 根据目标位置计算元素最终目标left值
+    // 对于旋转后的元素，需要计算旋转前后left的偏移来做校正
     for (const element of newElementList) {
       if (!activeElementIdList.value.includes(element.id)) continue
 
@@ -76,7 +83,7 @@ export default () => {
     addHistorySnapshot()
   }
 
-  // 垂直均匀排列
+  // 垂直均匀排列（逻辑类似水平均匀排列方法）
   const uniformVerticalDisplay = () => {
     const { minY, maxY } = getElementListRange(activeElementList.value)
     const copyOfActiveElementList: PPTElement[] = JSON.parse(JSON.stringify(activeElementList.value))
@@ -88,12 +95,12 @@ export default () => {
       return elAMinY - elBMinY
     })
 
-    let totaiHeight = 0
+    let totalHeight = 0
     for (const element of activeElementList.value) {
       const { minY: elMinY, maxY: elMaxY } = getElementRange(element)
-      totaiHeight += (elMaxY - elMinY)
+      totalHeight += (elMaxY - elMinY)
     }
-    const span = ((maxY - minY) - totaiHeight) / (activeElementList.value.length - 1)
+    const span = ((maxY - minY) - totalHeight) / (activeElementList.value.length - 1)
 
     const sortedElementData: SortedElementData[] = []
     for (const element of copyOfActiveElementList) {