fix: 组合元素执行均匀分布异常（#49）

src/hooks/useUniformDisplayElement.ts

@@ -4,9 +4,33 @@ import { PPTElement, Slide } from '@/types/slides'
 import { getElementRange, getElementListRange, getRectRotatedOffset } from '@/utils/element'
 import useHistorySnapshot from './useHistorySnapshot'
 
-interface SortedElementData {
+interface ElementItem {
+  min: number;
+  max: number;
   el: PPTElement;
+}
+
+interface GroupItem {
+  groupId: string;
+  els: PPTElement[];
+}
+
+interface GroupElementsItem {
+  min: number;
+  max: number;
+  els: PPTElement[];
+}
+
+type Item = ElementItem | GroupElementsItem
+
+interface ElementWithPos {
   pos: number;
+  el: PPTElement;
+}
+
+interface LastPos {
+  min: number;
+  max: number;
 }
 
 export default () => {
@@ -17,44 +41,95 @@ export default () => {
 
   const { addHistorySnapshot } = useHistorySnapshot()
 
+  const displayItemCount = computed(() => {
+    let count = 0
+    const groupIdList: string[] = []
+    for (const el of activeElementList.value) {
+      if (!el.groupId) count += 1
+      else if (!groupIdList.includes(el.groupId)) {
+        groupIdList.push(el.groupId)
+        count += 1
+      }
+    }
+    return count
+  })
   // 水平均匀排列
   const uniformHorizontalDisplay = () => {
     const { minX, maxX } = getElementListRange(activeElementList.value)
     const copyOfActiveElementList: PPTElement[] = JSON.parse(JSON.stringify(activeElementList.value))
     const newElementList: PPTElement[] = JSON.parse(JSON.stringify(currentSlide.value.elements))
 
-    // 将选中的元素按位置（从左到右）排序
+    // 分别获取普通元素和组合元素集合，并记录下每一项的范围
-    copyOfActiveElementList.sort((elementA, elementB) => {
+    const singleElemetList: ElementItem[] = []
-      const { minX: elAMinX } = getElementRange(elementA)
+    let groupList: GroupItem[] = []
-      const { minX: elBMinX } = getElementRange(elementB)
+    for (const el of copyOfActiveElementList) {
-      return elAMinX - elBMinX
+      if (!el.groupId) {
-    })
+        const { minX, maxX } = getElementRange(el)
+        singleElemetList.push({ min: minX, max: maxX, el })
+      }
+      else {
+        const groupEl = groupList.find(item => item.groupId === el.groupId)
+        if (!groupEl) groupList.push({ groupId: el.groupId, els: [el] })
+        else {
+          groupList = groupList.map(item => item.groupId === el.groupId ? { ...item, els: [...item.els, el] } : item)
+        }
+      }
+    }
+    const formatedGroupList: GroupElementsItem[] = []
+    for (const groupItem of groupList) {
+      const { minX, maxX } = getElementListRange(groupItem.els)
+      formatedGroupList.push({ min: minX, max: maxX, els: groupItem.els })
+    }
+
+    // 将普通元素和组合元素集合组合在一起，然后将每一项按位置（从左到右）排序
+    const list: Item[] = [...singleElemetList, ...formatedGroupList]
+    list.sort((itemA, itemB) => itemA.min - itemB.min)
 
     // 计算元素均匀分布所需要的间隔：
     // (所选元素整体范围 - 所有所选元素宽度和) / (所选元素数 - 1)
     let totalWidth = 0
-    for (const element of activeElementList.value) {
+    for (const item of list) {
-      const { minX: elMinX, maxX: elMaxX } = getElementRange(element)
+      const width = item.max - item.min
-      totalWidth += (elMaxX - elMinX)
+      totalWidth += width
     }
-    const span = ((maxX - minX) - totalWidth) / (activeElementList.value.length - 1)
+    const span = ((maxX - minX) - totalWidth) / (list.length - 1)
 
-    // 将所选元素按位置顺序依次计算目标位置
+    // 按位置顺序依次计算每一个元素的目标位置
-    // 注意pos并非元素目标left值，而是目标位置范围最小值（元素旋转后的left值 ≠ 范围最小值）
+    // 第一项中的元素即为起点，无序计算
-    const sortedElementData: SortedElementData[] = []
+    // 从第二项开始，每一项的位置应该为：上一项位置 + 上一项宽度 + 间隔
-    for (const element of copyOfActiveElementList) {
+    // 注意此处计算的位置（pos）并非元素最终的left值，而是目标位置范围最小值（元素旋转后的left值 ≠ 范围最小值）
-      if (!sortedElementData.length) {
+    const sortedElementData: ElementWithPos[] = []
-        const { minX: firstElMinX } = getElementRange(element)
+
-        sortedElementData.push({ el: element, pos: firstElMinX })
+    const firstItem = list[0]
-        continue
+    let lastPos: LastPos = { min: firstItem.min, max: firstItem.max }
+
+    if ('el' in firstItem) {
+      sortedElementData.push({ pos: firstItem.min, el: firstItem.el })
+    }
+    else {
+      for (const el of firstItem.els) {
+        const { minX: pos } = getElementRange(el)
+        sortedElementData.push({ pos, el })
+      }
+    }
+
+    for (let i = 1; i < list.length; i++) {
+      const item = list[i]
+      const lastWidth = lastPos.max - lastPos.min
+      const currentPos = lastPos.min + lastWidth + span
+      const currentWidth = item.max - item.min
+      lastPos = { min: currentPos, max: currentPos + currentWidth }
+
+      if ('el' in item) {
+        sortedElementData.push({ pos: currentPos, el: item.el })
+      }
+      else {
+        for (const el of item.els) {
+          const { minX } = getElementRange(el)
+          const offset = minX - item.min
+          sortedElementData.push({ pos: currentPos + offset, el })
+        }
       }
-      
-      const lastItemElement = sortedElementData[sortedElementData.length - 1].el
-      const lastItemPos = sortedElementData[sortedElementData.length - 1].pos
-      const { minX: lastElementMinX, maxX: lastElementMaxX } = getElementRange(lastItemElement)
-      const lastElementWidth = lastElementMaxX - lastElementMinX
-      
-      sortedElementData.push({ el: element, pos: lastItemPos + lastElementWidth + span })
     }
 
     // 根据目标位置计算元素最终目标left值
@@ -89,33 +164,69 @@ 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 singleElemetList: ElementItem[] = []
-      const { minY: elAMinY } = getElementRange(elementA)
+    let groupList: GroupItem[] = []
-      const { minY: elBMinY } = getElementRange(elementB)
+    for (const el of copyOfActiveElementList) {
-      return elAMinY - elBMinY
+      if (!el.groupId) {
-    })
+        const { minY, maxY } = getElementRange(el)
+        singleElemetList.push({ min: minY, max: maxY, el })
+      }
+      else {
+        const groupEl = groupList.find(item => item.groupId === el.groupId)
+        if (!groupEl) groupList.push({ groupId: el.groupId, els: [el] })
+        else {
+          groupList = groupList.map(item => item.groupId === el.groupId ? { ...item, els: [...item.els, el] } : item)
+        }
+      }
+    }
+    const formatedGroupList: GroupElementsItem[] = []
+    for (const groupItem of groupList) {
+      const { minY, maxY } = getElementListRange(groupItem.els)
+      formatedGroupList.push({ min: minY, max: maxY, els: groupItem.els })
+    }
+
+    const list: Item[] = [...singleElemetList, ...formatedGroupList]
+    list.sort((itemA, itemB) => itemA.min - itemB.min)
 
     let totalHeight = 0
-    for (const element of activeElementList.value) {
+    for (const item of list) {
-      const { minY: elMinY, maxY: elMaxY } = getElementRange(element)
+      const height = item.max - item.min
-      totalHeight += (elMaxY - elMinY)
+      totalHeight += height
     }
-    const span = ((maxY - minY) - totalHeight) / (activeElementList.value.length - 1)
+    const span = ((maxY - minY) - totalHeight) / (list.length - 1)
 
-    const sortedElementData: SortedElementData[] = []
+    const sortedElementData: ElementWithPos[] = []
-    for (const element of copyOfActiveElementList) {
+
-      if (!sortedElementData.length) {
+    const firstItem = list[0]
-        const { minY: firstElMinY } = getElementRange(element)
+    let lastPos: LastPos = { min: firstItem.min, max: firstItem.max }
-        sortedElementData.push({ el: element, pos: firstElMinY })
+
-        continue
+    if ('el' in firstItem) {
+      sortedElementData.push({ pos: firstItem.min, el: firstItem.el })
+    }
+    else {
+      for (const el of firstItem.els) {
+        const { minY: pos } = getElementRange(el)
+        sortedElementData.push({ pos, el })
+      }
+    }
+
+    for (let i = 1; i < list.length; i++) {
+      const item = list[i]
+      const lastHeight = lastPos.max - lastPos.min
+      const currentPos = lastPos.min + lastHeight + span
+      const currentHeight = item.max - item.min
+      lastPos = { min: currentPos, max: currentPos + currentHeight }
+
+      if ('el' in item) {
+        sortedElementData.push({ pos: currentPos, el: item.el })
+      }
+      else {
+        for (const el of item.els) {
+          const { minY } = getElementRange(el)
+          const offset = minY - item.min
+          sortedElementData.push({ pos: currentPos + offset, el })
+        }
       }
-      
-      const lastItemElement = sortedElementData[sortedElementData.length - 1].el
-      const lastItemPos = sortedElementData[sortedElementData.length - 1].pos
-      const { minY: lastElementMinY, maxY: lastElementMaxY } = getElementRange(lastItemElement)
-      const lastElementHeight = lastElementMaxY - lastElementMinY
-      
-      sortedElementData.push({ el: element, pos: lastItemPos + lastElementHeight + span })
     }
 
     for (const element of newElementList) {
@@ -143,6 +254,7 @@ export default () => {
   }
 
   return {
+    displayItemCount,
     uniformHorizontalDisplay,
     uniformVerticalDisplay,
   }

src/views/Editor/Toolbar/MultiPositionPanel.vue

@@ -22,7 +22,7 @@
         <Button style="flex: 1;" @click="alignElement('bottom')"><IconAlignBottom /></Button>
       </Tooltip>
     </ButtonGroup>
-    <ButtonGroup class="row" v-if="activeElementList.length > 2">
+    <ButtonGroup class="row" v-if="displayItemCount > 2">
       <Button style="flex: 1;" @click="uniformHorizontalDisplay()">水平均匀分布</Button>
       <Button style="flex: 1;" @click="uniformVerticalDisplay()">垂直均匀分布</Button>
     </ButtonGroup>
@@ -55,7 +55,7 @@ export default defineComponent({
     const { combineElements, uncombineElements } = useCombineElement()
     const { alignActiveElement } = useAlignActiveElement()
     const { alignElementToCanvas } = useAlignElementToCanvas()
-    const { uniformHorizontalDisplay, uniformVerticalDisplay } = useUniformDisplayElement()
+    const { displayItemCount, uniformHorizontalDisplay, uniformVerticalDisplay } = useUniformDisplayElement()
 
     // 判断当前多选的几个元素是否可以组合
     const canCombine = computed(() => {
@@ -75,7 +75,7 @@ export default defineComponent({
     }
 
     return {
-      activeElementList,
+      displayItemCount,
       canCombine,
       combineElements,
       uncombineElements,