jvs-ppt-ui 0.0.9 → 0.0.11

package/src/composables/useSlides.ts

@@ -2,7 +2,7 @@ import { ref, computed, watch, nextTick, type WatchStopHandle } from 'vue'
 import { extractAnimationsFromPptxArrayBuffer } from '../utils/pptxAnimationExtractor'
 import { syncSlideConnections, scaleSvgPath, extractPathStartEnd, isEllipseShape, isStandardShapeType } from '../utils/line'
 import { getSvgPathRange } from '../utils/svgPathParser'
-import { SHAPE_LIST as PPTX_SHAPE_LIST, SHAPE_PATH_FORMULAS as PPTX_SHAPE_PATH_FORMULAS } from '../utils/pptxShapes'
+import { shapeFormulas, shapeList, ensurePptxShapes } from '../utils/pptxShapesLazy'
 import { compileSchemaToSlides, compileSingleSchema } from '../utils/dslCompiler'
 import { defaultStyleRecipe } from './presetThemes'
 import { extractTextAlignFromHtml } from '../utils/canvas/elementStyles'
@@ -71,6 +71,8 @@ export interface SlideElement {
   keypoints?: number[]
   start?: [number, number]
   end?: [number, number]
+  startPoint?: [number, number]
+  endPoint?: [number, number]
   lineStyle?: 'solid' | 'dashed'
   points?: [string, string]
   borderHeadEnd?: { type?: string; w?: string; len?: string } | null
@@ -102,10 +104,10 @@ export interface SlideElement {
   gridColor?: string
   color?: string
   fontFamily?: string
-  top?: string
-  left?: string
-  width?: string
-  height?: string
+  top?: string | number
+  left?: string | number
+  width?: string | number
+  height?: string | number
   rotate?: number
   flipH?: boolean
   isFlipH?: boolean
@@ -2275,21 +2277,27 @@ const activeSlide = computed<Slide>({
 })
 
 let isSyncingConnections = false
-watch(() => activeSlide.value?.elements, (newElements) => {
-  if (!newElements || !newElements.length) return
+// 连接线端点吸附（线跟随形状）是确定性重推导且幂等（<0.5px 不更新）。
+// 快照/深 watcher 共用同一收敛入口，避免各自为政产生不同步的几何状态。
+function settleActiveSlideConnections() {
+  const cur = activeSlide.value
+  if (!cur || !Array.isArray(cur.elements) || !cur.elements.length) return
   if (isSyncingConnections) return
   if (isCanvasDragging.value) return
 
   // 性能守卫：如果页面中不存在任何线条或连接线，直接跳过全量连接线更新计算
-  const hasLineElements = newElements.some(el => el.type === 'line')
-  if (!hasLineElements) return
+  if (!cur.elements.some(el => el?.type === 'line')) return
 
   isSyncingConnections = true
   try {
-    syncSlideConnections(activeSlide.value, logicalWidth.value, logicalHeight.value, selectedElementIds.value)
+    syncSlideConnections(cur, logicalWidth.value, logicalHeight.value, selectedElementIds.value)
   } finally {
     isSyncingConnections = false
   }
+}
+watch(() => activeSlide.value?.elements, (newElements) => {
+  if (!newElements || !newElements.length) return
+  settleActiveSlideConnections()
 }, { deep: true, immediate: true, flush: 'post' })
 const activeTab = ref<'design' | 'transition' | 'animation' | 'format' | 'multi-style' | 'multi-position' | 'material' | null>(null)
 
@@ -2606,6 +2614,7 @@ function revokeSlideBlobUrls(slideList: any[]) {
 function initHistory() {
   ensurePageWatchers()
   ensureMasterWatchers()
+  slidesRevision.value++ // 导入/重置整册替换数组，补一次 bump 供对外同步
   // 双栈即将整体重置，此时清资源池是安全的（不会有存活条目引用池内 id）
   assetPool.clear()
   assetIntern.clear()
@@ -2673,6 +2682,11 @@ function syncDOMWithRestoredSlides() {
 function addHistorySnapshot() {
   if (isUndoingRedoing.value || pauseHistory.value) return
   syncActiveEditingTextToElement()
+  // 连接线吸附是 flush:'post' 的深度 watcher，在手动快照之后才执行：若快照先落盘，
+  // 吸附结果会被防抖 watcher 再推一条幽灵条目（同一操作两条历史，撤销第一步看似无效；
+  // 还原旧条目还会让吸附反复重推导，undo 前的 flush 不断推新条目，撤销指针原地打转）。
+  // 序列化前先就地收敛一次（拖拽 stopDrag 里显式调 syncSlideConnections 同理），幂等无副作用。
+  settleActiveSlideConnections()
   ensurePageWatchers()
 
   const __perfT0 = performance.now()
@@ -2723,6 +2737,9 @@ function addHistorySnapshot() {
 
   historyIndex.value = historyStack.value.length - 1
   currentPageIds = slides.value.map(s => s && s.id)
+  // 真实落盘的编辑统一失效缩略图/画布快照：非拖拽类编辑（换形状/样式/文字提交/对齐/
+  // keypoint 调整等）原先没有任何 bump 点，SidebarLeft 激活页缩略图的 v-memo 会停在旧内容
+  activeSlideVersion.value++
   if (import.meta.env.DEV) {
     console.debug(`[perf:addSnapshot] ${(performance.now() - __perfT0).toFixed(1)}ms pages=${slides.value.length} dirty=${candidates.size} stack=${historyStack.value.length}`)
     // 漏标脏页保险丝：未纳入候选集的页应与落盘字符串完全一致，不一致说明脏标漏页（仅 DEV）
@@ -2802,6 +2819,10 @@ function scheduleHistorySnapshot() {
 
 // 每页一个 deep watcher：任何页的任何深层变更只标脏自己那一页（替代原整册 deep watch）。
 // 标脏不受守卫限制（守卫只作用于 flush），pauseHistory/撤销期间产生的标记靠下次 flush 的字符串比对自愈
+// 对外变更版本号：PptEditor 侧的对外同步 watch 用它替代整册 deep watch（后者每次拖拽/打字
+// 都要 O(整册) 深遍历重收集依赖，页数越多越卡）。任何变更点 bump 一次即可
+const slidesRevision = ref(0)
+
 function ensurePageWatchers() {
   const n = slides.value.length
   while (pageWatchers.length > n) pageWatchers.pop()!()
@@ -2812,6 +2833,7 @@ function ensurePageWatchers() {
       // 此窗口内还原路径已同步 currentPageStrs，无需标脏。watcher 回调先于 nextTick 复位执行，守卫可靠
       if (isUndoingRedoing.value) return
       dirtyPageIndexes.add(i)
+      slidesRevision.value++
       scheduleHistorySnapshot()
     }, { deep: true }))
   }
@@ -2820,6 +2842,7 @@ function ensurePageWatchers() {
 // 长度哨兵：纯尾部追加（末页后 addSlide）不触发任何 index getter，必须靠它补注册 watcher
 watch(() => slides.value.length, () => {
   ensurePageWatchers()
+  slidesRevision.value++
   scheduleHistorySnapshot()
 })
 
@@ -2861,6 +2884,7 @@ function ensureMasterWatchers() {
     masterWatchers.push(watch(() => slideMasters.value[i], () => {
       if (isUndoingRedoing.value) return
       dirtyMasterIndexes.add(i)
+      slidesRevision.value++
       scheduleMasterHistorySnapshot()
     }, { deep: true }))
   }
@@ -2868,6 +2892,7 @@ function ensureMasterWatchers() {
 
 watch(() => slideMasters.value.length, () => {
   ensureMasterWatchers()
+  slidesRevision.value++
   scheduleMasterHistorySnapshot()
 })
 
@@ -2918,6 +2943,7 @@ const canRedo = computed(() => isMasterEditingView.value
 // 按页还原：只解析与当前状态字符串不同的页，未变页对象引用复用（缩略图/组件 vnode 稳定）。
 // 始终返回新数组：依赖 slides.value 数组 identity 的 watcher（缩略图测量/滚动重置等）照常触发
 function applyHistoryEntry<T>(entryStrs: string[], currentStrs: string[], list: T[]): { list: T[]; changed: boolean } {
+  slidesRevision.value++ // undo/redo 窗口期页 watcher 被守卫跳过，还原本身补一次 bump 供对外同步
   if (entryStrs.length !== list.length || entryStrs.length !== currentStrs.length) {
     // 结构性差异（增删页）：与旧行为一致，整册逐页解析
     return { list: entryStrs.map(s => parsePage<T>(s)), changed: true }
@@ -3254,47 +3280,288 @@ function pasteSlideData(targetSlideData: any, afterIndex = activeIndex.value, is
   }
 }
 
-function pasteElementsData(elementsArray: any[]) {
-  if (!activeSlide.value || !elementsArray || elementsArray.length === 0) return
+function copySelectedElements(): { type: 'elements'; data: SlideElement[]; sourceWidth: number; sourceHeight: number } | null {
+  if (!activeSlide.value || !activeSlide.value.elements) return null
+  if (selectedElementIds.value.length === 0) return null
+
+  const targetElements: SlideElement[] = []
+  const selectedSet = new Set(selectedElementIds.value)
+
+  function isAnyAncestorSelected(id: string): boolean {
+    let parent = findParentGroupInSlide(id, activeSlide.value!.elements)
+    while (parent) {
+      if (selectedSet.has(parent.id)) return true
+      parent = findParentGroupInSlide(parent.id, activeSlide.value!.elements)
+    }
+    return false
+  }
+
+  function getAbsoluteCanvasBox(el: SlideElement): { left: number; top: number; width: number; height: number } {
+    const parentGroups: SlideElement[] = []
+    let curr = findParentGroupInSlide(el.id, activeSlide.value!.elements)
+    while (curr) {
+      parentGroups.unshift(curr)
+      curr = findParentGroupInSlide(curr.id, activeSlide.value!.elements)
+    }
+
+    let box = {
+      left: parseValToPx(el.style?.left, logicalWidth.value, (el as any).left || 0),
+      top: parseValToPx(el.style?.top, logicalHeight.value, (el as any).top || 0),
+      width: parseValToPx(el.style?.width, logicalWidth.value, (el as any).width || 200),
+      height: parseValToPx(el.style?.height, logicalHeight.value, (el as any).height || 100)
+    }
+
+    if (parentGroups.length === 0) return box
+
+    let pLeft = 0
+    let pTop = 0
+    let pWidth = logicalWidth.value
+    let pHeight = logicalHeight.value
+
+    for (const pg of parentGroups) {
+      const gLeft = parseValToPx(pg.style?.left, pWidth, (pg as any).left || 0)
+      const gTop = parseValToPx(pg.style?.top, pHeight, (pg as any).top || 0)
+      const gWidth = parseValToPx(pg.style?.width, pWidth, (pg as any).width || 200)
+      const gHeight = parseValToPx(pg.style?.height, pHeight, (pg as any).height || 100)
+      pLeft += gLeft
+      pTop += gTop
+      pWidth = gWidth
+      pHeight = gHeight
+    }
+
+    const relLeftPx = parseValToPx(el.style?.left, pWidth, (el as any).left || 0)
+    const relTopPx = parseValToPx(el.style?.top, pHeight, (el as any).top || 0)
+    const elWidthPx = parseValToPx(el.style?.width, pWidth, (el as any).width || 200)
+    const elHeightPx = parseValToPx(el.style?.height, pHeight, (el as any).height || 50)
+
+    return {
+      left: pLeft + relLeftPx,
+      top: pTop + relTopPx,
+      width: elWidthPx,
+      height: elHeightPx
+    }
+  }
+
+  function findElementById(id: string, list: SlideElement[]): SlideElement | null {
+    for (const item of list) {
+      if (item.id === id) return item
+      if (item.type === 'group' && Array.isArray(item.elements)) {
+        const found = findElementById(id, item.elements)
+        if (found) return found
+      }
+    }
+    return null
+  }
+
+  selectedElementIds.value.forEach(id => {
+    if (isAnyAncestorSelected(id)) {
+      return
+    }
+
+    const el = findElementById(id, activeSlide.value!.elements)
+    if (!el) return
+
+    const parentGroup = findParentGroupInSlide(id, activeSlide.value!.elements)
+    if (parentGroup) {
+      const box = getAbsoluteCanvasBox(el)
+      const childClone = JSON.parse(JSON.stringify(el)) as SlideElement
+      delete (childClone as any).groupId
+      if (!childClone.style) childClone.style = {} as any
+      childClone.style.left = `${((box.left / logicalWidth.value) * 100).toFixed(4)}%`
+      childClone.style.top = `${((box.top / logicalHeight.value) * 100).toFixed(4)}%`
+      childClone.style.width = `${((box.width / logicalWidth.value) * 100).toFixed(4)}%`
+      childClone.style.height = `${((box.height / logicalHeight.value) * 100).toFixed(4)}%`
+      ;(childClone as any).left = box.left
+      ;(childClone as any).top = box.top
+      ;(childClone as any).width = box.width
+      ;(childClone as any).height = box.height
+
+      if (childClone.type === 'line') {
+        const dX = box.left
+        const dY = box.top
+        if (childClone.startPoint && Array.isArray(childClone.startPoint)) childClone.startPoint = [childClone.startPoint[0] + dX, childClone.startPoint[1] + dY]
+        if (childClone.endPoint && Array.isArray(childClone.endPoint)) childClone.endPoint = [childClone.endPoint[0] + dX, childClone.endPoint[1] + dY]
+      }
+      targetElements.push(childClone)
+    } else {
+      targetElements.push(JSON.parse(JSON.stringify(el)))
+    }
+  })
+
+  if (targetElements.length === 0) return null
+
+  clipboard.value = targetElements
+  slideClipboard.value = null
+
+  return {
+    type: 'elements',
+    data: targetElements,
+    sourceWidth: logicalWidth.value || 1280,
+    sourceHeight: logicalHeight.value || 720
+  }
+}
+
+function scaleElementIfNeeded(el: any, sX: number, sY: number) {
+  if (Math.abs(sX - 1) < 0.001 && Math.abs(sY - 1) < 0.001) return
+
+  if (el.style) {
+    if (typeof el.style.left === 'string' && el.style.left.endsWith('px')) {
+      el.style.left = `${(parseFloat(el.style.left) * sX).toFixed(1)}px`
+    }
+    if (typeof el.style.top === 'string' && el.style.top.endsWith('px')) {
+      el.style.top = `${(parseFloat(el.style.top) * sY).toFixed(1)}px`
+    }
+    if (typeof el.style.width === 'string' && el.style.width.endsWith('px')) {
+      el.style.width = `${(parseFloat(el.style.width) * sX).toFixed(1)}px`
+    }
+    if (typeof el.style.height === 'string' && el.style.height.endsWith('px')) {
+      el.style.height = `${(parseFloat(el.style.height) * sY).toFixed(1)}px`
+    }
+    if (typeof el.style.fontSize === 'string' && el.style.fontSize.endsWith('px')) {
+      el.style.fontSize = `${(parseFloat(el.style.fontSize) * ((sX + sY) / 2)).toFixed(1)}px`
+    }
+  }
+
+  if (typeof el.left === 'number') el.left = +(el.left * sX).toFixed(1)
+  if (typeof el.top === 'number') el.top = +(el.top * sY).toFixed(1)
+  if (typeof el.width === 'number') el.width = +(el.width * sX).toFixed(1)
+  if (typeof el.height === 'number') el.height = +(el.height * sY).toFixed(1)
+
+  if (el.type === 'line') {
+    if (el.startPoint && Array.isArray(el.startPoint)) el.startPoint = [el.startPoint[0] * sX, el.startPoint[1] * sY]
+    if (el.endPoint && Array.isArray(el.endPoint)) el.endPoint = [el.endPoint[0] * sX, el.endPoint[1] * sY]
+  }
+
+  if (el.type === 'group' && Array.isArray(el.elements)) {
+    el.elements.forEach((child: any) => {
+      if (child.style && typeof child.style.fontSize === 'string' && child.style.fontSize.endsWith('px')) {
+        child.style.fontSize = `${(parseFloat(child.style.fontSize) * ((sX + sY) / 2)).toFixed(1)}px`
+      }
+      if (child.type === 'group') {
+        scaleElementIfNeeded(child, sX, sY)
+      }
+    })
+  }
+}
+
+function pasteElementsData(elementsArray: any[], options?: { sourceWidth?: number; sourceHeight?: number }) {
+  if (!activeSlide.value || !elementsArray || !Array.isArray(elementsArray) || elementsArray.length === 0) return
   const pastedIds: string[] = []
+  const oldIdToNewId = new Map<string, string>()
   const oldGroupIdToNewGroupId = new Map<string, string>()
 
+  const destW = logicalWidth.value || 1280
+  const destH = logicalHeight.value || 720
+  const srcW = (options && options.sourceWidth && options.sourceWidth > 0) ? options.sourceWidth : destW
+  const srcH = (options && options.sourceHeight && options.sourceHeight > 0) ? options.sourceHeight : destH
+  const scaleX = destW / srcW
+  const scaleY = destH / srcH
+  const needScale = Math.abs(scaleX - 1) > 0.001 || Math.abs(scaleY - 1) > 0.001
+
+  function reassignIdsRecursively(item: any) {
+    const oldId = item.id
+    const prefix = (oldId && typeof oldId === 'string' && oldId.startsWith('title')) ? 'title-' : ''
+    const newId = prefix + Date.now().toString(36) + Math.random().toString(36).substring(2, 7)
+    if (oldId) {
+      oldIdToNewId.set(oldId, newId)
+    }
+    item.id = newId
+
+    if (item.groupId) {
+      if (!oldGroupIdToNewGroupId.has(item.groupId)) {
+        oldGroupIdToNewGroupId.set(item.groupId, 'group_' + Date.now().toString(36) + Math.random().toString(36).substring(2, 7))
+      }
+      item.groupId = oldGroupIdToNewGroupId.get(item.groupId)
+    }
+
+    if (item.type === 'group' && Array.isArray(item.elements)) {
+      item.elements.forEach(reassignIdsRecursively)
+    }
+  }
+
+  function remapLineConnections(item: any) {
+    if (item.type === 'line') {
+      if (item.startConnection && item.startConnection.id) {
+        if (oldIdToNewId.has(item.startConnection.id)) {
+          item.startConnection.id = oldIdToNewId.get(item.startConnection.id)!
+        } else {
+          delete item.startConnection
+        }
+      }
+      if (item.endConnection && item.endConnection.id) {
+        if (oldIdToNewId.has(item.endConnection.id)) {
+          item.endConnection.id = oldIdToNewId.get(item.endConnection.id)!
+        } else {
+          delete item.endConnection
+        }
+      }
+      if (item.startElementId) {
+        if (oldIdToNewId.has(item.startElementId)) {
+          item.startElementId = oldIdToNewId.get(item.startElementId)
+        } else {
+          delete item.startElementId
+        }
+      }
+      if (item.endElementId) {
+        if (oldIdToNewId.has(item.endElementId)) {
+          item.endElementId = oldIdToNewId.get(item.endElementId)
+        } else {
+          delete item.endElementId
+        }
+      }
+    }
+    if (item.type === 'group' && Array.isArray(item.elements)) {
+      item.elements.forEach(remapLineConnections)
+    }
+  }
+
+  const offsetPx = 20
+
   elementsArray.forEach((el: any) => {
     const newEl = JSON.parse(JSON.stringify(el))
-    newEl.id = (el.id && el.id.startsWith('title') ? 'title-' : '') + Date.now().toString() + Math.random().toString(36).substring(2, 7)
-    if (newEl.groupId) {
-      if (!oldGroupIdToNewGroupId.has(newEl.groupId)) {
-        oldGroupIdToNewGroupId.set(newEl.groupId, 'group_' + Date.now().toString() + Math.random().toString(36).substring(2, 7))
-      }
-      newEl.groupId = oldGroupIdToNewGroupId.get(newEl.groupId)
+    reassignIdsRecursively(newEl)
+    remapLineConnections(newEl)
+
+    if (needScale) {
+      scaleElementIfNeeded(newEl, scaleX, scaleY)
     }
 
     if (newEl.style && newEl.style.left) {
       const leftVal = parseFloat(newEl.style.left) || 0
-      const isPx = newEl.style.left.endsWith('px')
       const isPct = newEl.style.left.endsWith('%')
-      if (isPx) {
-        newEl.style.left = `${leftVal + 20}px`
-      } else if (isPct) {
-        newEl.style.left = `${(leftVal + (20 / (logicalWidth.value || 1280)) * 100).toFixed(2)}%`
+      if (isPct) {
+        newEl.style.left = `${(leftVal + (offsetPx / destW) * 100).toFixed(4)}%`
       } else {
-        newEl.style.left = `${leftVal + 20}px`
+        newEl.style.left = `${(leftVal + offsetPx).toFixed(1)}px`
       }
     }
     if (newEl.style && newEl.style.top) {
       const topVal = parseFloat(newEl.style.top) || 0
-      const isPx = newEl.style.top.endsWith('px')
       const isPct = newEl.style.top.endsWith('%')
-      if (isPx) {
-        newEl.style.top = `${topVal + 20}px`
-      } else if (isPct) {
-        newEl.style.top = `${(topVal + (20 / (logicalHeight.value || 720)) * 100).toFixed(2)}%`
+      if (isPct) {
+        newEl.style.top = `${(topVal + (offsetPx / destH) * 100).toFixed(4)}%`
       } else {
-        newEl.style.top = `${topVal + 20}px`
+        newEl.style.top = `${(topVal + offsetPx).toFixed(1)}px`
       }
     }
 
-    activeSlide.value.elements.push(newEl)
+    if (typeof newEl.left === 'number') newEl.left += offsetPx
+    if (typeof newEl.top === 'number') newEl.top += offsetPx
+
+    if (newEl.type === 'line') {
+      if (newEl.startPoint && Array.isArray(newEl.startPoint)) {
+        newEl.startPoint = [newEl.startPoint[0] + offsetPx, newEl.startPoint[1] + offsetPx]
+      }
+      if (newEl.endPoint && Array.isArray(newEl.endPoint)) {
+        newEl.endPoint = [newEl.endPoint[0] + offsetPx, newEl.endPoint[1] + offsetPx]
+      }
+    }
+
+    if (newEl.type === 'group') {
+      updateGroupBounds(newEl)
+    }
+
+    activeSlide.value!.elements.push(newEl)
     pastedIds.push(newEl.id)
   })
 
@@ -3302,6 +3569,7 @@ function pasteElementsData(elementsArray: any[]) {
   if (pastedIds.length > 0) {
     selectedElementId.value = pastedIds[pastedIds.length - 1]
   }
+  addHistorySnapshot()
   notify(`已粘贴 ${pastedIds.length} 个元素`)
 }
 
@@ -3411,6 +3679,10 @@ function duplicateSelectedElements(targetSlide = activeSlide.value) {
       targetSlide.elements.push(cloned)
     }
 
+    if (cloned.type === 'group') {
+      updateGroupBounds(cloned)
+    }
+
     newElementIds.push(cloned.id)
     clonedElements.push(cloned)
   })
@@ -3491,6 +3763,12 @@ async function handleUnifiedPaste(afterSlideIndex?: number) {
         pasteSlideData(data.data, afterSlideIndex !== undefined ? afterSlideIndex : activeIndex.value)
         return true
       }
+      if (data && data.type === 'elements' && Array.isArray(data.data) && data.data.length > 0) {
+        clipboard.value = data.data
+        slideClipboard.value = null
+        pasteElementsData(data.data, { sourceWidth: data.sourceWidth, sourceHeight: data.sourceHeight })
+        return true
+      }
       if (Array.isArray(data) && data.length > 0 && data[0].type && data[0].style) {
         clipboard.value = data
         slideClipboard.value = null
@@ -4209,36 +4487,20 @@ function combineElements() {
     const idx = activeSlide.value!.elements.indexOf(el)
     if (idx > maxZIndex) maxZIndex = idx
 
-    const domEl = document.getElementById(`canvas-el-${el.id}`)
-    const left = parseValToPx(el.style?.left, logicalWidth.value, 0)
-    const top = parseValToPx(el.style?.top, logicalHeight.value, 0)
-    let width = parseValToPx(el.style?.width, logicalWidth.value, 200)
-    let height = parseValToPx(el.style?.height, logicalHeight.value, 50)
-
-    if (domEl) {
-      width = domEl.offsetWidth || width
-      height = domEl.offsetHeight || height
-    }
-
-    if (width <= 0) width = 100
-    if (height <= 0) height = 30
+    const rawLeft = el.style?.left ?? (typeof (el as any).left === 'number' ? `${(el as any).left}px` : undefined)
+    const rawTop = el.style?.top ?? (typeof (el as any).top === 'number' ? `${(el as any).top}px` : undefined)
+    const rawWidth = el.style?.width ?? (typeof (el as any).width === 'number' ? `${(el as any).width}px` : undefined)
+    const rawHeight = el.style?.height ?? (typeof (el as any).height === 'number' ? `${(el as any).height}px` : undefined)
 
-    if (left < minLeft) minLeft = left
-    if (top < minTop) minTop = top
-    if (left + width > maxRight) maxRight = left + width
-    if (top + height > maxBottom) maxBottom = top + height
-  })
+    const left = parseValToPx(rawLeft, logicalWidth.value, 0)
+    const top = parseValToPx(rawTop, logicalHeight.value, 0)
+    let width = parseValToPx(rawWidth, logicalWidth.value, 100)
+    let height = parseValToPx(rawHeight, logicalHeight.value, 40)
 
-  targetElements.forEach(el => {
-    const domEl = document.getElementById(`canvas-el-${el.id}`)
-    const left = parseValToPx(el.style?.left, logicalWidth.value, 0)
-    const top = parseValToPx(el.style?.top, logicalHeight.value, 0)
-    let width = parseValToPx(el.style?.width, logicalWidth.value, 200)
-    let height = parseValToPx(el.style?.height, logicalHeight.value, 50)
-
-    if (domEl) {
-      width = domEl.offsetWidth || width
-      height = domEl.offsetHeight || height
+    const domEl = typeof document !== 'undefined' ? document.getElementById(`canvas-el-${el.id}`) : null
+    if (domEl && el.type === 'text') {
+      if (domEl.offsetHeight > 0) height = domEl.offsetHeight
+      if (el.style?.width === 'auto' && domEl.offsetWidth > 0) width = domEl.offsetWidth
     }
 
     if (width <= 0) width = 100
@@ -4256,15 +4518,21 @@ function combineElements() {
   // Convert each target element's coordinates relative to the group container (%)
   const childElements: SlideElement[] = targetElements.map(el => {
     const childClone = JSON.parse(JSON.stringify(el)) as SlideElement
-    const domEl = document.getElementById(`canvas-el-${el.id}`)
-    const elLeft = parseValToPx(el.style?.left, logicalWidth.value, 0)
-    const elTop = parseValToPx(el.style?.top, logicalHeight.value, 0)
-    let elWidth = parseValToPx(el.style?.width, logicalWidth.value, 200)
-    let elHeight = parseValToPx(el.style?.height, logicalHeight.value, 50)
 
-    if (domEl) {
-      elWidth = domEl.offsetWidth || elWidth
-      elHeight = domEl.offsetHeight || elHeight
+    const rawLeft = el.style?.left ?? (typeof (el as any).left === 'number' ? `${(el as any).left}px` : undefined)
+    const rawTop = el.style?.top ?? (typeof (el as any).top === 'number' ? `${(el as any).top}px` : undefined)
+    const rawWidth = el.style?.width ?? (typeof (el as any).width === 'number' ? `${(el as any).width}px` : undefined)
+    const rawHeight = el.style?.height ?? (typeof (el as any).height === 'number' ? `${(el as any).height}px` : undefined)
+
+    const elLeft = parseValToPx(rawLeft, logicalWidth.value, 0)
+    const elTop = parseValToPx(rawTop, logicalHeight.value, 0)
+    let elWidth = parseValToPx(rawWidth, logicalWidth.value, 100)
+    let elHeight = parseValToPx(rawHeight, logicalHeight.value, 40)
+
+    const domEl = typeof document !== 'undefined' ? document.getElementById(`canvas-el-${el.id}`) : null
+    if (domEl && el.type === 'text') {
+      if (domEl.offsetHeight > 0) elHeight = domEl.offsetHeight
+      if (el.style?.width === 'auto' && domEl.offsetWidth > 0) elWidth = domEl.offsetWidth
     }
 
     const relLeft = ((elLeft - minLeft) / groupWidth) * 100
@@ -4278,6 +4546,20 @@ function combineElements() {
     childClone.style.width = `${relWidth.toFixed(4)}%`
     childClone.style.height = `${relHeight.toFixed(4)}%`
 
+    ;(childClone as any).left = elLeft - minLeft
+    ;(childClone as any).top = elTop - minTop
+    ;(childClone as any).width = elWidth
+    ;(childClone as any).height = elHeight
+
+    if (childClone.type === 'line') {
+      if (childClone.startPoint && Array.isArray(childClone.startPoint)) {
+        childClone.startPoint = [childClone.startPoint[0] - minLeft, childClone.startPoint[1] - minTop]
+      }
+      if (childClone.endPoint && Array.isArray(childClone.endPoint)) {
+        childClone.endPoint = [childClone.endPoint[0] - minLeft, childClone.endPoint[1] - minTop]
+      }
+    }
+
     return childClone
   })
 
@@ -4295,6 +4577,10 @@ function combineElements() {
       height: `${((groupHeight / logicalHeight.value) * 100).toFixed(4)}%`,
       rotate: 0
     },
+    left: minLeft,
+    top: minTop,
+    width: groupWidth,
+    height: groupHeight,
     elements: childElements
   }
 
@@ -4367,6 +4653,22 @@ function uncombineElement(groupId?: string) {
       childClone.style.width = `${((absWidthPx / logicalWidth.value) * 100).toFixed(4)}%`
       childClone.style.height = `${((absHeightPx / logicalHeight.value) * 100).toFixed(4)}%`
 
+      ;(childClone as any).left = absLeftPx
+      ;(childClone as any).top = absTopPx
+      ;(childClone as any).width = absWidthPx
+      ;(childClone as any).height = absHeightPx
+
+      if (childClone.type === 'line') {
+        const dX = groupLeft
+        const dY = groupTop
+        if (childClone.startPoint && Array.isArray(childClone.startPoint)) {
+          childClone.startPoint = [childClone.startPoint[0] + dX, childClone.startPoint[1] + dY]
+        }
+        if (childClone.endPoint && Array.isArray(childClone.endPoint)) {
+          childClone.endPoint = [childClone.endPoint[0] + dX, childClone.endPoint[1] + dY]
+        }
+      }
+
       return childClone
     })
 
@@ -4488,10 +4790,10 @@ function updateGroupBounds(groupEl: SlideElement) {
   groupEl.style.width = isWidthPx ? `${newGroupWidth.toFixed(1)}px` : `${((newGroupWidth / parentDim.width) * 100).toFixed(4)}%`
   groupEl.style.height = isHeightPx ? `${newGroupHeight.toFixed(1)}px` : `${((newGroupHeight / parentDim.height) * 100).toFixed(4)}%`
 
-  if (typeof (groupEl as any).left === 'number') (groupEl as any).left = minAbsLeft
-  if (typeof (groupEl as any).top === 'number') (groupEl as any).top = minAbsTop
-  if (typeof (groupEl as any).width === 'number') (groupEl as any).width = newGroupWidth
-  if (typeof (groupEl as any).height === 'number') (groupEl as any).height = newGroupHeight
+  ;(groupEl as any).left = minAbsLeft
+  ;(groupEl as any).top = minAbsTop
+  ;(groupEl as any).width = newGroupWidth
+  ;(groupEl as any).height = newGroupHeight
 
   absChildren.forEach(({ child, absLeft, absTop, absWidth, absHeight }) => {
     const newRelLeftPct = ((absLeft - minAbsLeft) / newGroupWidth) * 100
@@ -4505,10 +4807,10 @@ function updateGroupBounds(groupEl: SlideElement) {
     child.style.width = `${newRelWidthPct.toFixed(4)}%`
     child.style.height = `${newRelHeightPct.toFixed(4)}%`
 
-    if (typeof (child as any).left === 'number') (child as any).left = absLeft - minAbsLeft
-    if (typeof (child as any).top === 'number') (child as any).top = absTop - minAbsTop
-    if (typeof (child as any).width === 'number') (child as any).width = absWidth
-    if (typeof (child as any).height === 'number') (child as any).height = absHeight
+    ;(child as any).left = absLeft - minAbsLeft
+    ;(child as any).top = absTop - minAbsTop
+    ;(child as any).width = absWidth
+    ;(child as any).height = absHeight
   })
 
   // Recursive parent group bounds update if nested in another group
@@ -4548,6 +4850,8 @@ function deleteElement(id: string, silent = false) {
 const currentAnimationIndex = ref(0)
 const isPlayingAnimation = ref(false)
 const playedTriggerAnimations = ref<string[]>([])
+// 动画代际：快速跳步/换页/退出放映时 +1，使挂起的 autoNext setTimeout 链失效（防止旧链在新页继续跑）
+const animationGeneration = ref(0)
 
 function getFormatedAnimationsForSlide(slide: Slide) {
   if (!slide.animations) return []
@@ -4643,7 +4947,9 @@ function runAnimationStep() {
       if (finishedCount === animations.length) {
         isPlayingAnimation.value = false
         if (autoNext) {
+          const gen = animationGeneration.value
           setTimeout(() => {
+            if (gen !== animationGeneration.value) return
             runAnimationStep()
           }, 50)
         }
@@ -4669,36 +4975,6 @@ function runAnimationStep() {
   }
 }
 
-function revokeAnimationStep() {
-  if (currentAnimationIndex.value <= 0) return
-
-  currentAnimationIndex.value -= 1
-  const formatted = formatedAnimations.value
-  const { animations } = formatted[currentAnimationIndex.value]
-
-  for (const animation of animations) {
-    const el = document.getElementById(`screen-element-${animation.elId}`)
-    if (!el) continue
-
-    el.style.animationDuration = ''
-    el.style.animationDelay = ''
-    el.style.animationIterationCount = ''
-    el.style.removeProperty('--animate-duration')
-    el.style.removeProperty('--animate-repeat')
-    el.style.removeProperty('visibility')
-    for (const cls of Array.from(el.classList)) {
-      if (cls.startsWith('animate__')) {
-        el.classList.remove(cls)
-      }
-    }
-    el.classList.remove('animate__animated')
-  }
-
-  if (animations.every(item => item.type === 'attention')) {
-    revokeAnimationStep()
-  }
-}
-
 function runTriggerAnimations(clickedElId: string) {
   if (!activeSlide.value || !activeSlide.value.animations) return
   const elIds = activeSlide.value.elements.map(el => el.id)
@@ -4768,11 +5044,62 @@ function restoreAnimationState(slide: Slide, targetIndex: number) {
   }
 }
 
+// 纯自动步：全部动画都是 auto / meantime 触发（不消耗点击）
+function isAutoAnimationStep(step: FormatedAnimation): boolean {
+  return step.animations.every(a => a.trigger === 'auto' || a.trigger === 'meantime')
+}
+
+function clearElementAnimationState(el: HTMLElement) {
+  el.style.animationDuration = ''
+  el.style.animationDelay = ''
+  el.style.animationIterationCount = ''
+  el.style.removeProperty('--animate-duration')
+  el.style.removeProperty('--animate-repeat')
+  el.style.removeProperty('visibility')
+  for (const cls of Array.from(el.classList)) {
+    if (cls.startsWith('animate__')) {
+      el.classList.remove(cls)
+    }
+  }
+  el.classList.remove('animate__animated')
+}
+
+// 瞬间补齐 [currentAnimationIndex, target) 的动画步（不播动画，元素直接就位），并作废挂起的自动链
+function completeAnimationStepsTo(target: number) {
+  const formatted = formatedAnimations.value
+  for (let i = currentAnimationIndex.value; i < target && i < formatted.length; i++) {
+    for (const animation of formatted[i].animations) {
+      const el = document.getElementById(`screen-element-${animation.elId}`)
+      if (!el) continue
+      clearElementAnimationState(el)
+      if (animation.type === 'out') el.style.visibility = 'hidden'
+    }
+  }
+  animationGeneration.value++
+  isPlayingAnimation.value = false
+  currentAnimationIndex.value = Math.min(target, formatted.length)
+}
+
+// 撤销 [target, currentAnimationIndex) 的动画步：in→隐藏、out→恢复可见，并作废挂起的自动链
+function revokeAnimationStepsTo(target: number) {
+  const formatted = formatedAnimations.value
+  for (let i = target; i < currentAnimationIndex.value && i < formatted.length; i++) {
+    for (const animation of formatted[i].animations) {
+      const el = document.getElementById(`screen-element-${animation.elId}`)
+      if (!el) continue
+      clearElementAnimationState(el)
+      if (animation.type === 'in') el.style.visibility = 'hidden'
+      else if (animation.type === 'out') el.style.removeProperty('visibility')
+    }
+  }
+  animationGeneration.value++
+  isPlayingAnimation.value = false
+  currentAnimationIndex.value = Math.max(0, target)
+}
+
 function execNext() {
   const formatted = formatedAnimations.value
-  if (formatted.length && currentAnimationIndex.value < formatted.length) {
-    runAnimationStep()
-  } else {
+  const goNextSlide = () => {
     if (activeIndex.value < slides.value.length - 1) {
       activeIndex.value++
       currentAnimationIndex.value = 0
@@ -4781,22 +5108,42 @@ function execNext() {
       notify('演示已结束')
     }
   }
+  if (formatted.length && currentAnimationIndex.value < formatted.length) {
+    // 连续的纯自动步不消耗点击：瞬间补齐，停到下一个点击步或本页末尾（PPT 行为）
+    let target = currentAnimationIndex.value
+    while (target < formatted.length && isAutoAnimationStep(formatted[target])) target++
+    if (target > currentAnimationIndex.value) {
+      completeAnimationStepsTo(target)
+    }
+    if (currentAnimationIndex.value < formatted.length) {
+      runAnimationStep()
+    } else {
+      goNextSlide()
+    }
+  } else {
+    goNextSlide()
+  }
 }
 
 function execPrev() {
-  if (currentAnimationIndex.value > 0) {
-    revokeAnimationStep()
-  } else {
-    if (activeIndex.value > 0) {
-      activeIndex.value--
-      const prevSlide = slides.value[activeIndex.value]
-      if (prevSlide) {
-        const formatted = getFormatedAnimationsForSlide(prevSlide)
-        currentAnimationIndex.value = formatted.length
-        nextTick(() => {
-          restoreAnimationState(prevSlide, currentAnimationIndex.value)
-        })
-      }
+  const formatted = formatedAnimations.value
+  // 回退只落在"点击步"上：纯自动步不占点击；已播步里没有点击步时直接退回上一页
+  let target = currentAnimationIndex.value
+  while (target > 0 && isAutoAnimationStep(formatted[target - 1])) target--
+  if (target > 0) {
+    revokeAnimationStepsTo(target - 1)
+    return
+  }
+  // target===0：已播步全是自动步（不占点击）→ 视同本页无点击交互，直接退回上一页
+  if (activeIndex.value > 0) {
+    activeIndex.value--
+    const prevSlide = slides.value[activeIndex.value]
+    if (prevSlide) {
+      const prevFormatted = getFormatedAnimationsForSlide(prevSlide)
+      currentAnimationIndex.value = prevFormatted.length
+      nextTick(() => {
+        restoreAnimationState(prevSlide, currentAnimationIndex.value)
+      })
     }
   }
 }
@@ -4850,6 +5197,7 @@ function needWaitAnimation(slide: Slide, elId: string, animationIndex: number) {
 
 watch([activeIndex, isPresenting], () => {
   playedTriggerAnimations.value = []
+  animationGeneration.value++ // 换页/进出放映：作废挂起的 autoNext 自动链
   currentAnimationIndex.value = 0
   if (!isPresenting.value) return
 
@@ -5703,6 +6051,10 @@ function convertPPTistToLocalIfNeed(newSlides: any): Slide[] {
           if ((el.wrap === 'none' || el.wrap === false) && (!el.style.whiteSpace || el.style.whiteSpace === 'normal')) {
             el.style.whiteSpace = 'nowrap'
           }
+          const rawLh = el.style?.lineHeight || el.lineHeight || el.text?.lineHeight
+          if (rawLh && !el.style.lineHeight) {
+            el.style.lineHeight = rawLh
+          }
           if (el.shadow) {
             if (isEffectiveLocalShadow(el.shadow)) {
               if (!el.style.boxShadow || el.style.boxShadow === 'none') {
@@ -5873,7 +6225,7 @@ function convertPPTistToLocalIfNeed(newSlides: any): Slide[] {
 
     const normType = String(shapType).toLowerCase()
 
-    for (const group of PPTX_SHAPE_LIST) {
+    for (const group of shapeList()) {
       for (const item of group.children) {
         const itemPptxType = (item.pptxShapeType || '').toLowerCase()
         const itemFormula = (item.pathFormula || '').toLowerCase()
@@ -5894,8 +6246,8 @@ function convertPPTistToLocalIfNeed(newSlides: any): Slide[] {
           const matchedShapType = item.pptxShapeType || shapType
           const matchedPathFormula = item.pathFormula
 
-          if (item.pathFormula && PPTX_SHAPE_PATH_FORMULAS[item.pathFormula]) {
-            const formula = PPTX_SHAPE_PATH_FORMULAS[item.pathFormula]
+          if (item.pathFormula && shapeFormulas()[item.pathFormula]) {
+            const formula = shapeFormulas()[item.pathFormula]
             let kps = formula.defaultValue ? [...formula.defaultValue] : []
             if (el.keypoints) {
               if (Array.isArray(el.keypoints) && el.keypoints.length > 0) {
@@ -6648,7 +7000,7 @@ function convertPPTistToLocalIfNeed(newSlides: any): Slide[] {
             let pFormula = el.pathFormula
             if (!pFormula && el.shapType) {
               const norm = String(el.shapType).toLowerCase()
-              let shape = PPTX_SHAPE_LIST.flatMap((x: any) => x.children).find((item: any) => {
+              let shape = shapeList().flatMap((x: any) => x.children).find((item: any) => {
                 const t1 = (item.pptxShapeType || '').toLowerCase()
                 const t2 = (item.pathFormula || '').toLowerCase()
                 return t1 === norm || t2 === norm ||
@@ -6663,7 +7015,7 @@ function convertPPTistToLocalIfNeed(newSlides: any): Slide[] {
               if (shape) pFormula = shape.pathFormula
             }
             if (pFormula) {
-              const formulaObj = PPTX_SHAPE_PATH_FORMULAS[pFormula as string]
+              const formulaObj = shapeFormulas()[pFormula as string]
               if (formulaObj && formulaObj.defaultValue) {
                 const kps = el.keypoints && Array.isArray(el.keypoints) && el.keypoints.length > 0 ? [...el.keypoints] : []
                 const defaults = formulaObj.defaultValue
@@ -6704,7 +7056,7 @@ function convertPPTistToLocalIfNeed(newSlides: any): Slide[] {
         pathFormula: (() => {
           if (type === 'shape' && el.shapType && !el.pathFormula) {
             const norm = String(el.shapType).toLowerCase()
-            let shape = PPTX_SHAPE_LIST.flatMap((x: any) => x.children).find((item: any) => {
+            let shape = shapeList().flatMap((x: any) => x.children).find((item: any) => {
               const t1 = (item.pptxShapeType || '').toLowerCase()
               const t2 = (item.pathFormula || '').toLowerCase()
               return t1 === norm || t2 === norm ||
@@ -7853,6 +8205,7 @@ async function aiReplaceCurrentSlide(options?: { primaryCategory?: string; secon
   notify('正在进行一键美化，替换当前幻灯片内容...')
 
   try {
+    await ensurePptxShapes() // 后续 pptParserFn/convertPPTistToLocalIfNeed 同步消费形状表，先确保就绪
     const pureText = extractPureTextFromSlide(activeSlide.value)
     if (!pureText) {
       notify('当前幻灯片没有可提取的纯文字内容')
@@ -8891,6 +9244,7 @@ export function useSlides() {
     zoomRatio,
     fitTrigger,
     slides,
+    slidesRevision,
     activeIndex,
     activeSlide,
     selectedSlideIndexes,
@@ -8971,6 +9325,7 @@ export function useSlides() {
     slideClipboard,
     pasteSlideData,
     pasteElementsData,
+    copySelectedElements,
     handleUnifiedPaste,
     shapeFormatPainter,
     currentSlideAnimations,