jvs-ppt-ui 0.0.8 → 0.0.10

package/src/composables/canvas/useCanvasAlignment.ts

@@ -1,238 +1,286 @@
-import { type Ref } from 'vue'
-
-export interface AlignmentOptions {
-  activeSlide: Ref<any>
-  selectedElementIds: Ref<string[]>
-  logicalWidth: Ref<number>
-  logicalHeight: Ref<number>
-  getElementPixels: (el: any) => { left: number; top: number; width: number; height: number; rotate: number }
-  addHistorySnapshot: () => void
-}
-
-interface GeomItem {
-  el: any
-  left: number
-  top: number
-  width: number
-  height: number
-  rotate: number
-}
-
-export function useCanvasAlignment(options: AlignmentOptions) {
-  const {
-    activeSlide,
-    selectedElementIds,
-    logicalWidth,
-    logicalHeight,
-    getElementPixels,
-    addHistorySnapshot
-  } = options
-
-  function getSelectedItemsGeom(): GeomItem[] {
-    if (!activeSlide.value) return []
-    return activeSlide.value.elements
-      .filter((el: any) => selectedElementIds.value.includes(el.id))
-      .map((el: any) => ({
-        el,
-        ...getElementPixels(el)
-      }))
-  }
-
-  function quickAlignLeft() {
-    const items = getSelectedItemsGeom()
-    if (items.length === 0) return
-    if (items.length === 1) {
-      items[0].el.style.left = '0%'
-      addHistorySnapshot()
-      return
-    }
-    const minLeft = Math.min(...items.map((i: GeomItem) => i.left))
-    items.forEach((item: GeomItem) => {
-      const pct = (minLeft / logicalWidth.value) * 100
-      item.el.style.left = `${pct.toFixed(2)}%`
-    })
-    addHistorySnapshot()
-  }
-
-  function quickAlignCenter() {
-    const items = getSelectedItemsGeom()
-    if (items.length === 0) return
-    if (items.length === 1) {
-      const left = (logicalWidth.value - items[0].width) / 2
-      const pct = (left / logicalWidth.value) * 100
-      items[0].el.style.left = `${pct.toFixed(2)}%`
-      addHistorySnapshot()
-      return
-    }
-    const minLeft = Math.min(...items.map((i: GeomItem) => i.left))
-    const maxRight = Math.max(...items.map((i: GeomItem) => i.left + i.width))
-    const center = (minLeft + maxRight) / 2
-    items.forEach((item: GeomItem) => {
-      const left = center - item.width / 2
-      const pct = (left / logicalWidth.value) * 100
-      item.el.style.left = `${pct.toFixed(2)}%`
-    })
-    addHistorySnapshot()
-  }
-
-  function quickAlignRight() {
-    const items = getSelectedItemsGeom()
-    if (items.length === 0) return
-    if (items.length === 1) {
-      const left = logicalWidth.value - items[0].width
-      const pct = (left / logicalWidth.value) * 100
-      items[0].el.style.left = `${pct.toFixed(2)}%`
-      addHistorySnapshot()
-      return
-    }
-    const maxRight = Math.max(...items.map((i: GeomItem) => i.left + i.width))
-    items.forEach((item: GeomItem) => {
-      const left = maxRight - item.width
-      const pct = (left / logicalWidth.value) * 100
-      item.el.style.left = `${pct.toFixed(2)}%`
-    })
-    addHistorySnapshot()
-  }
-
-  function quickAlignTop() {
-    const items = getSelectedItemsGeom()
-    if (items.length === 0) return
-    if (items.length === 1) {
-      items[0].el.style.top = '0%'
-      addHistorySnapshot()
-      return
-    }
-    const minTop = Math.min(...items.map((i: GeomItem) => i.top))
-    items.forEach((item: GeomItem) => {
-      const pct = (minTop / logicalHeight.value) * 100
-      item.el.style.top = `${pct.toFixed(2)}%`
-    })
-    addHistorySnapshot()
-  }
-
-  function quickAlignMiddle() {
-    const items = getSelectedItemsGeom()
-    if (items.length === 0) return
-    if (items.length === 1) {
-      const top = (logicalHeight.value - items[0].height) / 2
-      const pct = (top / logicalHeight.value) * 100
-      items[0].el.style.top = `${pct.toFixed(2)}%`
-      addHistorySnapshot()
-      return
-    }
-    const minTop = Math.min(...items.map((i: GeomItem) => i.top))
-    const maxBottom = Math.max(...items.map((i: GeomItem) => i.top + i.height))
-    const middle = (minTop + maxBottom) / 2
-    items.forEach((item: GeomItem) => {
-      const top = middle - item.height / 2
-      const pct = (top / logicalHeight.value) * 100
-      item.el.style.top = `${pct.toFixed(2)}%`
-    })
-    addHistorySnapshot()
-  }
-
-  function quickAlignBottom() {
-    const items = getSelectedItemsGeom()
-    if (items.length === 0) return
-    if (items.length === 1) {
-      const top = logicalHeight.value - items[0].height
-      const pct = (top / logicalHeight.value) * 100
-      items[0].el.style.top = `${pct.toFixed(2)}%`
-      addHistorySnapshot()
-      return
-    }
-    const maxBottom = Math.max(...items.map((i: GeomItem) => i.top + i.height))
-    items.forEach((item: GeomItem) => {
-      const top = maxBottom - item.height
-      const pct = (top / logicalHeight.value) * 100
-      item.el.style.top = `${pct.toFixed(2)}%`
-    })
-    addHistorySnapshot()
-  }
-
-  function quickDistributeHorizontally() {
-    const items = getSelectedItemsGeom().sort((a: GeomItem, b: GeomItem) => a.left - b.left)
-    if (items.length < 2) return
-
-    if (items.length === 2) {
-      const totalWidths = items[0].width + items[1].width
-      const gap = (logicalWidth.value - totalWidths) / 3
-      const left1Pct = (gap / logicalWidth.value) * 100
-      const left2Pct = ((gap * 2 + items[0].width) / logicalWidth.value) * 100
-      items[0].el.style.left = `${left1Pct.toFixed(2)}%`
-      items[1].el.style.left = `${left2Pct.toFixed(2)}%`
-      addHistorySnapshot()
-      return
-    }
-
-    const minLeft = items[0].left
-    const maxRight = items[items.length - 1].left + items[items.length - 1].width
-    const totalWidths = items.reduce((sum: number, item: GeomItem) => sum + item.width, 0)
-    const availableWidth = maxRight - minLeft
-    const gap = (availableWidth - totalWidths) / (items.length - 1)
-
-    let currentLeft = minLeft
-    items.forEach((item: GeomItem, index: number) => {
-      if (index === 0) {
-        currentLeft += item.width + gap
-        return
-      }
-      if (index === items.length - 1) {
-        return
-      }
-      const pct = (currentLeft / logicalWidth.value) * 100
-      item.el.style.left = `${pct.toFixed(2)}%`
-      currentLeft += item.width + gap
-    })
-    addHistorySnapshot()
-  }
-
-  function quickDistributeVertically() {
-    const items = getSelectedItemsGeom().sort((a: GeomItem, b: GeomItem) => a.top - b.top)
-    if (items.length < 2) return
-
-    if (items.length === 2) {
-      const totalHeights = items[0].height + items[1].height
-      const gap = (logicalHeight.value - totalHeights) / 3
-      const top1Pct = (gap / logicalHeight.value) * 100
-      const top2Pct = ((gap * 2 + items[0].height) / logicalHeight.value) * 100
-      items[0].el.style.top = `${top1Pct.toFixed(2)}%`
-      items[1].el.style.top = `${top2Pct.toFixed(2)}%`
-      addHistorySnapshot()
-      return
-    }
-
-    const minTop = items[0].top
-    const maxBottom = items[items.length - 1].top + items[items.length - 1].height
-    const totalHeights = items.reduce((sum: number, item: GeomItem) => sum + item.height, 0)
-    const availableHeight = maxBottom - minTop
-    const gap = (availableHeight - totalHeights) / (items.length - 1)
-
-    let currentTop = minTop
-    items.forEach((item: GeomItem, index: number) => {
-      if (index === 0) {
-        currentTop += item.height + gap
-        return
-      }
-      if (index === items.length - 1) {
-        return
-      }
-      const pct = (currentTop / logicalHeight.value) * 100
-      item.el.style.top = `${pct.toFixed(2)}%`
-      currentTop += item.height + gap
-    })
-    addHistorySnapshot()
-  }
-
-  return {
-    getSelectedItemsGeom,
-    quickAlignLeft,
-    quickAlignCenter,
-    quickAlignRight,
-    quickAlignTop,
-    quickAlignMiddle,
-    quickAlignBottom,
-    quickDistributeHorizontally,
-    quickDistributeVertically
-  }
-}
+import { type Ref } from 'vue'
+
+export interface AlignmentOptions {
+  activeSlide: Ref<any>
+  selectedElementIds: Ref<string[]>
+  logicalWidth: Ref<number>
+  logicalHeight: Ref<number>
+  getElementPixels: (el: any) => { left: number; top: number; width: number; height: number; rotate: number }
+  findElementInSlide?: (id: any) => any
+  findParentGroup?: (id: any) => any
+  addHistorySnapshot: () => void
+}
+
+interface GeomItem {
+  el: any
+  left: number
+  top: number
+  width: number
+  height: number
+  rotate: number
+}
+
+interface Box {
+  left: number
+  top: number
+  width: number
+  height: number
+}
+
+export function useCanvasAlignment(options: AlignmentOptions) {
+  const {
+    activeSlide,
+    selectedElementIds,
+    logicalWidth,
+    logicalHeight,
+    getElementPixels,
+    findElementInSlide,
+    findParentGroup,
+    addHistorySnapshot
+  } = options
+
+  // 选中集可能是顶层元素，也可能是组合内子元素（id 不会出现在 activeSlide.elements 顶层），
+  // 需要经 findElementInSlide 递归解析；祖先组合与后代同时选中时只保留祖先，避免双重位移
+  function resolveSelectedElements(): any[] {
+    const ids = selectedElementIds.value
+    if (!activeSlide.value || ids.length === 0) return []
+    let found: any[]
+    if (findElementInSlide) {
+      found = ids.map((id: any) => findElementInSlide(id)).filter(Boolean) as any[]
+    } else {
+      found = activeSlide.value.elements.filter((el: any) => ids.includes(el.id))
+    }
+    if (found.length === 0 || !findParentGroup) return found
+    return found.filter((el: any) => {
+      let parent = findParentGroup(el.id)
+      while (parent) {
+        if (found.includes(parent)) return false
+        parent = findParentGroup(parent.id)
+      }
+      return true
+    })
+  }
+
+  function getSelectedItemsGeom(): GeomItem[] {
+    return resolveSelectedElements().map((el: any) => ({
+      el,
+      ...getElementPixels(el)
+    }))
+  }
+
+  // 单元素对齐 / 两元素分布的参照容器：
+  // 组内子元素以父组合盒子为容器（对齐到组合边缘而不是画布边缘），其余以画布为容器
+  function getItemsContainer(items: GeomItem[]): Box {
+    const parents = new Set<any>()
+    items.forEach((item: GeomItem) => {
+      const parent = findParentGroup ? findParentGroup(item.el.id) : null
+      if (parent) parents.add(parent)
+    })
+    if (parents.size === 1) {
+      const parent = [...parents][0]
+      const pp = getElementPixels(parent)
+      if (pp.width > 0 && pp.height > 0) return { left: pp.left, top: pp.top, width: pp.width, height: pp.height }
+    }
+    return { left: 0, top: 0, width: logicalWidth.value, height: logicalHeight.value }
+  }
+
+  // 绝对坐标写回：组内子元素的 style.left/top 是相对父组合盒子的百分比，
+  // 必须减去父组合绝对偏移再除以父组合尺寸（与 getElementPixels 的解析互逆）
+  function setItemLeft(item: GeomItem, absLeft: number) {
+    const parent = findParentGroup ? findParentGroup(item.el.id) : null
+    if (parent) {
+      const pp = getElementPixels(parent)
+      const base = pp.width || logicalWidth.value
+      item.el.style.left = `${(((absLeft - pp.left) / base) * 100).toFixed(2)}%`
+    } else {
+      item.el.style.left = `${((absLeft / logicalWidth.value) * 100).toFixed(2)}%`
+    }
+  }
+
+  function setItemTop(item: GeomItem, absTop: number) {
+    const parent = findParentGroup ? findParentGroup(item.el.id) : null
+    if (parent) {
+      const pp = getElementPixels(parent)
+      const base = pp.height || logicalHeight.value
+      item.el.style.top = `${(((absTop - pp.top) / base) * 100).toFixed(2)}%`
+    } else {
+      item.el.style.top = `${((absTop / logicalHeight.value) * 100).toFixed(2)}%`
+    }
+  }
+
+  function quickAlignLeft() {
+    const items = getSelectedItemsGeom()
+    if (items.length === 0) return
+    if (items.length === 1) {
+      setItemLeft(items[0], getItemsContainer(items).left)
+      addHistorySnapshot()
+      return
+    }
+    const minLeft = Math.min(...items.map((i: GeomItem) => i.left))
+    items.forEach((item: GeomItem) => setItemLeft(item, minLeft))
+    addHistorySnapshot()
+  }
+
+  function quickAlignCenter() {
+    const items = getSelectedItemsGeom()
+    if (items.length === 0) return
+    if (items.length === 1) {
+      const box = getItemsContainer(items)
+      setItemLeft(items[0], box.left + (box.width - items[0].width) / 2)
+      addHistorySnapshot()
+      return
+    }
+    const minLeft = Math.min(...items.map((i: GeomItem) => i.left))
+    const maxRight = Math.max(...items.map((i: GeomItem) => i.left + i.width))
+    const center = (minLeft + maxRight) / 2
+    items.forEach((item: GeomItem) => {
+      setItemLeft(item, center - item.width / 2)
+    })
+    addHistorySnapshot()
+  }
+
+  function quickAlignRight() {
+    const items = getSelectedItemsGeom()
+    if (items.length === 0) return
+    if (items.length === 1) {
+      const box = getItemsContainer(items)
+      setItemLeft(items[0], box.left + box.width - items[0].width)
+      addHistorySnapshot()
+      return
+    }
+    const maxRight = Math.max(...items.map((i: GeomItem) => i.left + i.width))
+    items.forEach((item: GeomItem) => {
+      setItemLeft(item, maxRight - item.width)
+    })
+    addHistorySnapshot()
+  }
+
+  function quickAlignTop() {
+    const items = getSelectedItemsGeom()
+    if (items.length === 0) return
+    if (items.length === 1) {
+      setItemTop(items[0], getItemsContainer(items).top)
+      addHistorySnapshot()
+      return
+    }
+    const minTop = Math.min(...items.map((i: GeomItem) => i.top))
+    items.forEach((item: GeomItem) => setItemTop(item, minTop))
+    addHistorySnapshot()
+  }
+
+  function quickAlignMiddle() {
+    const items = getSelectedItemsGeom()
+    if (items.length === 0) return
+    if (items.length === 1) {
+      const box = getItemsContainer(items)
+      setItemTop(items[0], box.top + (box.height - items[0].height) / 2)
+      addHistorySnapshot()
+      return
+    }
+    const minTop = Math.min(...items.map((i: GeomItem) => i.top))
+    const maxBottom = Math.max(...items.map((i: GeomItem) => i.top + i.height))
+    const middle = (minTop + maxBottom) / 2
+    items.forEach((item: GeomItem) => {
+      setItemTop(item, middle - item.height / 2)
+    })
+    addHistorySnapshot()
+  }
+
+  function quickAlignBottom() {
+    const items = getSelectedItemsGeom()
+    if (items.length === 0) return
+    if (items.length === 1) {
+      const box = getItemsContainer(items)
+      setItemTop(items[0], box.top + box.height - items[0].height)
+      addHistorySnapshot()
+      return
+    }
+    const maxBottom = Math.max(...items.map((i: GeomItem) => i.top + i.height))
+    items.forEach((item: GeomItem) => {
+      setItemTop(item, maxBottom - item.height)
+    })
+    addHistorySnapshot()
+  }
+
+  function quickDistributeHorizontally() {
+    const items = getSelectedItemsGeom().sort((a: GeomItem, b: GeomItem) => a.left - b.left)
+    if (items.length < 2) return
+
+    if (items.length === 2) {
+      const box = getItemsContainer(items)
+      const totalWidths = items[0].width + items[1].width
+      const gap = (box.width - totalWidths) / 3
+      setItemLeft(items[0], box.left + gap)
+      setItemLeft(items[1], box.left + gap * 2 + items[0].width)
+      addHistorySnapshot()
+      return
+    }
+
+    const minLeft = items[0].left
+    const maxRight = items[items.length - 1].left + items[items.length - 1].width
+    const totalWidths = items.reduce((sum: number, item: GeomItem) => sum + item.width, 0)
+    const availableWidth = maxRight - minLeft
+    const gap = (availableWidth - totalWidths) / (items.length - 1)
+
+    let currentLeft = minLeft
+    items.forEach((item: GeomItem, index: number) => {
+      if (index === 0) {
+        currentLeft += item.width + gap
+        return
+      }
+      if (index === items.length - 1) {
+        return
+      }
+      setItemLeft(item, currentLeft)
+      currentLeft += item.width + gap
+    })
+    addHistorySnapshot()
+  }
+
+  function quickDistributeVertically() {
+    const items = getSelectedItemsGeom().sort((a: GeomItem, b: GeomItem) => a.top - b.top)
+    if (items.length < 2) return
+
+    if (items.length === 2) {
+      const box = getItemsContainer(items)
+      const totalHeights = items[0].height + items[1].height
+      const gap = (box.height - totalHeights) / 3
+      setItemTop(items[0], box.top + gap)
+      setItemTop(items[1], box.top + gap * 2 + items[0].height)
+      addHistorySnapshot()
+      return
+    }
+
+    const minTop = items[0].top
+    const maxBottom = items[items.length - 1].top + items[items.length - 1].height
+    const totalHeights = items.reduce((sum: number, item: GeomItem) => sum + item.height, 0)
+    const availableHeight = maxBottom - minTop
+    const gap = (availableHeight - totalHeights) / (items.length - 1)
+
+    let currentTop = minTop
+    items.forEach((item: GeomItem, index: number) => {
+      if (index === 0) {
+        currentTop += item.height + gap
+        return
+      }
+      if (index === items.length - 1) {
+        return
+      }
+      setItemTop(item, currentTop)
+      currentTop += item.height + gap
+    })
+    addHistorySnapshot()
+  }
+
+  return {
+    getSelectedItemsGeom,
+    quickAlignLeft,
+    quickAlignCenter,
+    quickAlignRight,
+    quickAlignTop,
+    quickAlignMiddle,
+    quickAlignBottom,
+    quickDistributeHorizontally,
+    quickDistributeVertically
+  }
+}

package/src/composables/canvas/useCanvasContextMenu.ts

@@ -27,6 +27,7 @@ export interface ContextMenuOptions {
   selectElement: (id: string, e?: MouseEvent) => void
   updateSelectionBorders: (tableEl: HTMLTableElement) => void
   deleteElement: (id: string) => void
+  copySelectedElements?: () => { type: 'elements'; data: any[]; sourceWidth: number; sourceHeight: number } | null
   handleUnifiedPaste: () => Promise<void | boolean>
   getElementPixels: (el: any) => { left: number; top: number; width: number; height: number; rotate: number }
   notify: (msg: string) => void
@@ -50,6 +51,7 @@ export function useCanvasContextMenu(options: ContextMenuOptions) {
     selectElement,
     updateSelectionBorders,
     deleteElement,
+    copySelectedElements,
     handleUnifiedPaste,
     getElementPixels,
     notify
@@ -326,15 +328,28 @@ export function useCanvasContextMenu(options: ContextMenuOptions) {
   function copySelected() {
     if (selectedElementIds.value.length === 0) return
     if (!activeSlide.value) return
-    const copied = getElementsByIds(selectedElementIds.value).map((el: any) => JSON.parse(JSON.stringify(el)))
-    clipboard.value = copied
-    slideClipboard.value = null
-    try {
-      navigator.clipboard.writeText(JSON.stringify(copied))
-    } catch (err) {
-      // Ignore
+
+    if (copySelectedElements) {
+      const payload = copySelectedElements()
+      if (payload) {
+        try {
+          navigator.clipboard.writeText(JSON.stringify(payload))
+        } catch (err) {
+          // Ignore
+        }
+        notify(`已复制 ${payload.data.length} 个元素`)
+      }
+    } else {
+      const copied = getElementsByIds(selectedElementIds.value).map((el: any) => JSON.parse(JSON.stringify(el)))
+      clipboard.value = copied
+      slideClipboard.value = null
+      try {
+        navigator.clipboard.writeText(JSON.stringify(copied))
+      } catch (err) {
+        // Ignore
+      }
+      notify(`已复制 ${copied.length} 个元素`)
     }
-    notify(`已复制 ${copied.length} 个元素`)
     showContextMenu.value = false
   }
 
@@ -342,21 +357,37 @@ export function useCanvasContextMenu(options: ContextMenuOptions) {
     if (selectedElementIds.value.length === 0) return
     if (!activeSlide.value) return
 
-    const copied = getElementsByIds(selectedElementIds.value).map((el: any) => JSON.parse(JSON.stringify(el)))
-    clipboard.value = copied
-    slideClipboard.value = null
-    try {
-      navigator.clipboard.writeText(JSON.stringify(copied))
-    } catch (err) {
-      // Ignore
+    if (copySelectedElements) {
+      const payload = copySelectedElements()
+      if (payload) {
+        try {
+          navigator.clipboard.writeText(JSON.stringify(payload))
+        } catch (err) {
+          // Ignore
+        }
+        selectedElementIds.value.forEach(id => {
+          deleteElement(id)
+        })
+        selectedElementIds.value = []
+        selectedElementId.value = null
+        notify(`已剪切 ${payload.data.length} 个元素`)
+      }
+    } else {
+      const copied = getElementsByIds(selectedElementIds.value).map((el: any) => JSON.parse(JSON.stringify(el)))
+      clipboard.value = copied
+      slideClipboard.value = null
+      try {
+        navigator.clipboard.writeText(JSON.stringify(copied))
+      } catch (err) {
+        // Ignore
+      }
+      selectedElementIds.value.forEach(id => {
+        deleteElement(id)
+      })
+      selectedElementIds.value = []
+      selectedElementId.value = null
+      notify(`已剪切 ${copied.length} 个元素`)
     }
-
-    selectedElementIds.value.forEach(id => {
-      deleteElement(id)
-    })
-    selectedElementIds.value = []
-    selectedElementId.value = null
-    notify(`已剪切 ${copied.length} 个元素`)
     showContextMenu.value = false
   }