jvs-ppt-ui 0.0.8 → 0.0.10

package/src/composables/canvas/useCanvasFormatting.ts

@@ -1,5 +1,5 @@
 import { ref, computed, nextTick, type Ref } from 'vue'
-import { SHAPE_PATH_FORMULAS } from '../../utils/pptxShapes'
+import { shapeFormulas } from '../../utils/pptxShapesLazy'
 
 export interface FormattingOptions {
   activeSlide: Ref<any>
@@ -45,6 +45,29 @@ export function useCanvasFormatting(options: FormattingOptions) {
 
   const quickRecentColors = ref<string[]>([])
 
+  // 组合内子元素感知：按选中 id 递归解析（含嵌套组），不能只查顶层 elements，
+  // 否则选中组合内子元素时字号/颜色/填充/边框等设置全部静默失效
+  function findElementNested(id: string | null | undefined, elements: any[] = activeSlide.value?.elements || []): any {
+    if (!id) return null
+    for (const el of elements) {
+      if (el.id === id) return el
+      if (Array.isArray(el.elements) && el.elements.length) {
+        const found = findElementNested(id, el.elements)
+        if (found) return found
+      }
+    }
+    return null
+  }
+
+  function resolveSelectedElements(typeFilter?: string): any[] {
+    const out: any[] = []
+    for (const id of selectedElementIds.value || []) {
+      const el = findElementNested(id)
+      if (el && (!typeFilter || el.type === typeFilter)) out.push(el)
+    }
+    return out
+  }
+
   function rgbToHex(rgbStr: string | undefined): string {
     if (!rgbStr || rgbStr === 'transparent') return 'transparent'
     if (rgbStr.startsWith('#')) return rgbStr
@@ -147,7 +170,7 @@ export function useCanvasFormatting(options: FormattingOptions) {
   const quickBorderStyle = computed({
     get() {
       if (!selectedElementId.value || !activeSlide.value) return 'solid'
-      const el = activeSlide.value.elements.find((e: any) => e.id === selectedElementId.value)
+      const el = findElementNested(selectedElementId.value)
       if (!el) return 'solid'
       if (el.type === 'line') {
         return el.lineStyle || 'solid'
@@ -156,7 +179,7 @@ export function useCanvasFormatting(options: FormattingOptions) {
     },
     set(val) {
       if (selectedElementIds.value.length === 0 || !activeSlide.value) return
-      const els = activeSlide.value.elements.filter((e: any) => selectedElementIds.value.includes(e.id))
+      const els = resolveSelectedElements()
       if (els.length === 0) return
       els.forEach((el: any) => {
         if (el.type === 'line') {
@@ -171,7 +194,7 @@ export function useCanvasFormatting(options: FormattingOptions) {
 
   const quickBorderWidth = computed({
     get() {
-      const el = (selectedElement && selectedElement.value) || (activeSlide.value && selectedElementId.value ? activeSlide.value.elements.find((e: any) => e.id === selectedElementId.value) : null)
+      const el = (selectedElement && selectedElement.value) || findElementNested(selectedElementId.value)
       if (!el) return 1
       if (el.type === 'line') {
         return el.style?.strokeWidth !== undefined ? el.style.strokeWidth : 1
@@ -181,7 +204,7 @@ export function useCanvasFormatting(options: FormattingOptions) {
     },
     set(val) {
       if (selectedElementIds.value.length === 0 || !activeSlide.value) return
-      const els = activeSlide.value.elements.filter((e: any) => selectedElementIds.value.includes(e.id))
+      const els = resolveSelectedElements()
       if (els.length === 0) return
       els.forEach((el: any) => {
         let num = val
@@ -324,7 +347,7 @@ export function useCanvasFormatting(options: FormattingOptions) {
 
   function selectQuickTextColor(color: string, type: 'color' | 'background') {
     if (selectedElementIds.value.length === 0 || !activeSlide.value) return
-    const els = activeSlide.value.elements.filter((e: any) => selectedElementIds.value.includes(e.id))
+    const els = resolveSelectedElements()
     if (els.length === 0) return
 
     // 0. Synchronize DOM contents to reactive state first for non-table elements
@@ -581,7 +604,7 @@ export function useCanvasFormatting(options: FormattingOptions) {
 
   function selectQuickFillColor(color: string) {
     if (selectedElementIds.value.length === 0 || !activeSlide.value) return
-    const els = activeSlide.value.elements.filter((e: any) => selectedElementIds.value.includes(e.id))
+    const els = resolveSelectedElements()
     if (els.length === 0) return
 
     let hasAppliedToCells = false
@@ -649,7 +672,7 @@ export function useCanvasFormatting(options: FormattingOptions) {
 
   function changeQuickBorderColor(color: string) {
     if (selectedElementIds.value.length === 0 || !activeSlide.value) return
-    const els = activeSlide.value.elements.filter((e: any) => selectedElementIds.value.includes(e.id))
+    const els = resolveSelectedElements()
     if (els.length === 0) return
 
     els.forEach((el: any) => {
@@ -697,7 +720,7 @@ export function useCanvasFormatting(options: FormattingOptions) {
     if (!el) return
     const isEllipse = shape.title === '椭圆' || shape.pathFormula === 'ellipse' || shape.pptxShapeType === 'ellipse'
     if (selectedElementIds.value.length > 1 && activeSlide.value) {
-      const els = activeSlide.value.elements.filter((e: any) => selectedElementIds.value.includes(e.id) && e.type === 'shape')
+      const els = resolveSelectedElements('shape')
       els.forEach((item: any) => {
         item.content = shape.path
         item.viewBox = shape.viewBox
@@ -712,7 +735,7 @@ export function useCanvasFormatting(options: FormattingOptions) {
 
         if (shape.pathFormula) {
           item.pathFormula = shape.pathFormula
-          const formulaObj = SHAPE_PATH_FORMULAS[shape.pathFormula]
+          const formulaObj = shapeFormulas()[shape.pathFormula]
           if (formulaObj) {
             if (shape.keypoints) {
               item.keypoints = [...shape.keypoints]
@@ -745,7 +768,7 @@ export function useCanvasFormatting(options: FormattingOptions) {
 
       if (shape.pathFormula) {
         el.pathFormula = shape.pathFormula
-        const formulaObj = SHAPE_PATH_FORMULAS[shape.pathFormula]
+        const formulaObj = shapeFormulas()[shape.pathFormula]
         if (formulaObj) {
           if (shape.keypoints) {
             el.keypoints = [...shape.keypoints]
@@ -786,7 +809,7 @@ export function useCanvasFormatting(options: FormattingOptions) {
     }
 
     if (selectedElementIds.value.length > 1 && activeSlide.value) {
-      const els = activeSlide.value.elements.filter((e: any) => selectedElementIds.value.includes(e.id) && e.type === 'line')
+      const els = resolveSelectedElements('line')
       els.forEach(updateItem)
     } else {
       updateItem(el)

package/src/composables/canvas/useCanvasTable.ts

@@ -24,6 +24,27 @@ interface TableMeasure {
   rowDots: number[]
 }
 
+// 剥离表格编辑态的运行时属性（contenteditable/selected-cell/选区边框/索引），
+// 存入 el.content 前必须清理，否则编辑态样式会被烙进内容（退出编辑后蓝边框残留）
+export function cleanTableDOMForSaving(tableEl: HTMLTableElement) {
+  tableEl.querySelectorAll('td').forEach(td => {
+    td.removeAttribute('contenteditable')
+    td.classList.remove('selected-cell')
+    td.classList.remove('focused-cell')
+    td.removeAttribute('data-row')
+    td.removeAttribute('data-col')
+    td.removeAttribute('data-sel-top')
+    td.removeAttribute('data-sel-bottom')
+    td.removeAttribute('data-sel-left')
+    td.removeAttribute('data-sel-right')
+    td.style.boxShadow = ''
+    if (td.style.cursor === 'default') {
+      td.style.removeProperty('cursor')
+    }
+  })
+  tableEl.style.removeProperty('cursor')
+}
+
 export function useCanvasTable(options: TableOptions) {
   const {
     activeSlide,
@@ -97,6 +118,15 @@ export function useCanvasTable(options: TableOptions) {
     targetEl.content = html
     bumpTableMeasure()
     addHistorySnapshot()
+    // CanvasTextElement 的 syncContentToDom 在焦点位于单元格内时不再回写 DOM（保光标），
+    // 结构/样式操作随后的恢复代码（重设 contenteditable、重新绑定、重新聚焦）依赖新
+    // DOM，这里在 nextTick 强制同步一次；焦点不在表格内时组件 watch 已写过，此处幂等
+    nextTick(() => {
+      const container = document.getElementById(`editable-${targetEl.id}`)
+      if (container && container.innerHTML !== html) {
+        container.innerHTML = html
+      }
+    })
   }
 
   function getTableMeasure(el: any): TableMeasure | null {
@@ -359,6 +389,7 @@ export function useCanvasTable(options: TableOptions) {
 
     tableEl.querySelectorAll('td').forEach(td => {
       td.style.boxShadow = ''
+      td.classList.remove('focused-cell')
       td.removeAttribute('data-sel-top')
       td.removeAttribute('data-sel-bottom')
       td.removeAttribute('data-sel-left')
@@ -393,31 +424,16 @@ export function useCanvasTable(options: TableOptions) {
       if (isRight) shadows.push('inset -1.5px 0 0 0 #2563eb')
 
       if (selectedTds.length === 1 && activeEl === td) {
+        // 焦点（光标）落在唯一选中格上：既不要描边也不要 selected-cell 蒙层，
+        // 否则出现"光标在单元格里还显示选中效果"；focused-cell 类供 CSS 压掉蒙层
         td.style.boxShadow = 'none'
+        td.classList.add('focused-cell')
       } else {
         td.style.boxShadow = shadows.length > 0 ? shadows.join(', ') : 'none'
       }
     })
   }
 
-  function cleanTableDOMForSaving(tableEl: HTMLTableElement) {
-    tableEl.querySelectorAll('td').forEach(td => {
-      td.removeAttribute('contenteditable')
-      td.classList.remove('selected-cell')
-      td.removeAttribute('data-row')
-      td.removeAttribute('data-col')
-      td.removeAttribute('data-sel-top')
-      td.removeAttribute('data-sel-bottom')
-      td.removeAttribute('data-sel-left')
-      td.removeAttribute('data-sel-right')
-      td.style.boxShadow = ''
-      if (td.style.cursor === 'default') {
-        td.style.removeProperty('cursor')
-      }
-    })
-    tableEl.style.removeProperty('cursor')
-  }
-
   function doSelectColumn(tableEl: HTMLTableElement, el: any, colIdx: number) {
     tableEl.querySelectorAll('td').forEach(td => td.setAttribute('contenteditable', 'true'))
     bindTableSelectionEvents(el)
@@ -836,8 +852,10 @@ export function useCanvasTable(options: TableOptions) {
           const freshTd = freshTable.querySelector(`td[data-row="${newSelectR}"][data-col="${newSelectC}"]`) as HTMLTableCellElement
           if (freshTd) {
             freshTd.classList.add('selected-cell')
-            updateSelectionBorders(freshTable)
+            // 先 focus 再算边框：focus() 同步设置 activeElement，这样 updateSelectionBorders
+            // 里"唯一选中格=焦点格"的抑制分支才生效，结构操作后不会边描边边留蒙层
             freshTd.focus()
+            updateSelectionBorders(freshTable)
           }
         }
       }
@@ -962,8 +980,10 @@ export function useCanvasTable(options: TableOptions) {
           const freshTd = freshTable.querySelector(`td[data-row="${newSelectR}"][data-col="${newSelectC}"]`) as HTMLTableCellElement
           if (freshTd) {
             freshTd.classList.add('selected-cell')
-            updateSelectionBorders(freshTable)
+            // 先 focus 再算边框：focus() 同步设置 activeElement，这样 updateSelectionBorders
+            // 里"唯一选中格=焦点格"的抑制分支才生效，结构操作后不会边描边边留蒙层
             freshTd.focus()
+            updateSelectionBorders(freshTable)
           }
         }
       }
@@ -1024,8 +1044,10 @@ export function useCanvasTable(options: TableOptions) {
           const freshTd = freshTable.querySelector(`td[data-row="${newSelectR}"][data-col="${newSelectC}"]`) as HTMLTableCellElement
           if (freshTd) {
             freshTd.classList.add('selected-cell')
-            updateSelectionBorders(freshTable)
+            // 先 focus 再算边框：focus() 同步设置 activeElement，这样 updateSelectionBorders
+            // 里"唯一选中格=焦点格"的抑制分支才生效，结构操作后不会边描边边留蒙层
             freshTd.focus()
+            updateSelectionBorders(freshTable)
           }
         }
       }
@@ -1092,8 +1114,10 @@ export function useCanvasTable(options: TableOptions) {
           const freshTd = freshTable.querySelector(`td[data-row="${newSelectR}"][data-col="${newSelectC}"]`) as HTMLTableCellElement
           if (freshTd) {
             freshTd.classList.add('selected-cell')
-            updateSelectionBorders(freshTable)
+            // 先 focus 再算边框：focus() 同步设置 activeElement，这样 updateSelectionBorders
+            // 里"唯一选中格=焦点格"的抑制分支才生效，结构操作后不会边描边边留蒙层
             freshTd.focus()
+            updateSelectionBorders(freshTable)
           }
         }
       }
@@ -1158,8 +1182,10 @@ export function useCanvasTable(options: TableOptions) {
           const freshTd = freshTable.querySelector(`td[data-row="${bounds.minRow}"][data-col="${bounds.minCol}"]`) as HTMLTableCellElement
           if (freshTd) {
             freshTd.classList.add('selected-cell')
-            updateSelectionBorders(freshTable)
+            // 先 focus 再算边框：focus() 同步设置 activeElement，这样 updateSelectionBorders
+            // 里"唯一选中格=焦点格"的抑制分支才生效，结构操作后不会边描边边留蒙层
             freshTd.focus()
+            updateSelectionBorders(freshTable)
           }
         }
       }
@@ -1260,8 +1286,10 @@ export function useCanvasTable(options: TableOptions) {
           const freshTd = freshTable.querySelector(`td[data-row="${rStart}"][data-col="${cStart}"]`) as HTMLTableCellElement
           if (freshTd) {
             freshTd.classList.add('selected-cell')
-            updateSelectionBorders(freshTable)
+            // 先 focus 再算边框：focus() 同步设置 activeElement，这样 updateSelectionBorders
+            // 里"唯一选中格=焦点格"的抑制分支才生效，结构操作后不会边描边边留蒙层
             freshTd.focus()
+            updateSelectionBorders(freshTable)
           }
         }
       }

package/src/composables/canvas/useCanvasText.ts

@@ -2,6 +2,7 @@ import { ref, nextTick, type Ref } from 'vue'
 import { normalizeHtmlFontFamily } from '../useSlides'
 import { getDefaultPlaceholderContent, isSvgPathString } from '../../utils/canvas/elementStyles'
 import { isEllipseShape } from '../../utils/line'
+import { cleanTableDOMForSaving } from './useCanvasTable'
 
 export interface TextOptions {
   activeSlide: Ref<any>
@@ -514,6 +515,17 @@ export function useCanvasText(options: TextOptions) {
         htmlVal = htmlVal.replace(/style="\s*;\s*"/gi, '')
         htmlVal = htmlVal.replace(/style="\s*"/gi, '')
       }
+      // 表格：活 DOM 带编辑态运行时属性（contenteditable/selected-cell/选区边框），
+      // 存档前克隆清理，避免烙进 content（退出编辑后蓝边框残留）
+      if (htmlVal.includes('<table')) {
+        const div = document.createElement('div')
+        div.innerHTML = htmlVal
+        const tableEl = div.querySelector('table')
+        if (tableEl) {
+          cleanTableDOMForSaving(tableEl)
+          htmlVal = div.innerHTML
+        }
+      }
       el.content = htmlVal
 
       if (el.content && el.content.includes('<table')) {

package/src/composables/canvas/useCanvasTransform.ts

@@ -1,5 +1,6 @@
 import { ref, nextTick, type Ref } from 'vue'
-import { SHAPE_PATH_FORMULAS } from '../../utils/pptxShapes'
+import { shapeFormulas } from '../../utils/pptxShapesLazy'
+import { syncSlideConnections } from '../../utils/line'
 
 export interface ResizeState {
   el: any
@@ -412,6 +413,9 @@ export function useCanvasTransform(options: CanvasTransformOptions) {
         }
       }
     }
+    if (activeSlide.value && activeSlide.value.elements) {
+      syncSlideConnections(activeSlide.value, logicalWidth.value, logicalHeight.value, selectedElementIds.value)
+    }
   }
 
   function stopResize() {
@@ -539,6 +543,9 @@ export function useCanvasTransform(options: CanvasTransformOptions) {
       newAngle = (newAngle % 360 + 360) % 360
       state.el.style.rotate = Math.round(newAngle)
     }
+    if (activeSlide.value && activeSlide.value.elements) {
+      syncSlideConnections(activeSlide.value, logicalWidth.value, logicalHeight.value, selectedElementIds.value)
+    }
   }
 
   function stopRotate() {
@@ -598,7 +605,7 @@ export function useCanvasTransform(options: CanvasTransformOptions) {
     if (!isDraggingKeypoint || !currentElement.value) return
 
     const curEl = currentElement.value
-    const formulaObj = SHAPE_PATH_FORMULAS[curEl.pathFormula as string]
+    const formulaObj = shapeFormulas()[curEl.pathFormula as string]
     if (!formulaObj) return
 
     const dx = e.clientX - dragKeypointStartX
@@ -1031,6 +1038,9 @@ export function useCanvasTransform(options: CanvasTransformOptions) {
         parentGroup.elements[idx] = { ...curEl, path: newPath, content: newPath }
       }
     }
+    if (activeSlide.value && activeSlide.value.elements) {
+      syncSlideConnections(activeSlide.value, logicalWidth.value, logicalHeight.value, selectedElementIds.value)
+    }
   }
 
   function stopDragKeypoint() {
@@ -1249,6 +1259,9 @@ export function useCanvasTransform(options: CanvasTransformOptions) {
     currentElement.value = null
     window.removeEventListener('mousemove', handleDragLinePoint)
     window.removeEventListener('mouseup', stopDragLinePoint)
+    if (activeSlide.value && activeSlide.value.elements) {
+      syncSlideConnections(activeSlide.value, logicalWidth.value, logicalHeight.value, selectedElementIds.value)
+    }
     pauseHistory.value = false
     addHistorySnapshot()
   }

package/src/composables/sidebar/useSidebarElementTransform.ts

@@ -1,5 +1,5 @@
 import { computed, type Ref, type ComputedRef } from 'vue'
-import { SHAPE_PATH_FORMULAS } from '../../utils/pptxShapes'
+import { shapeFormulas } from '../../utils/pptxShapesLazy'
 import { useSlides } from '../useSlides'
 
 export function useSidebarElementTransform(
@@ -277,7 +277,7 @@ export function useSidebarElementTransform(
               if (typeof el.height === 'number') el.height = newH
             }
             if (el.type === 'shape' && el.pathFormula) {
-              const formulaObj = SHAPE_PATH_FORMULAS[el.pathFormula]
+              const formulaObj = shapeFormulas()[el.pathFormula]
               if (formulaObj) {
                 const logicalW = parseFloat(el.style.width) || val
                 const logicalH = parseFloat(el.style.height) || 120
@@ -333,7 +333,7 @@ export function useSidebarElementTransform(
           })
         }
         if (selectedElement.value.type === 'shape' && selectedElement.value.pathFormula) {
-          const formulaObj = SHAPE_PATH_FORMULAS[selectedElement.value.pathFormula]
+          const formulaObj = shapeFormulas()[selectedElement.value.pathFormula]
           if (formulaObj) {
             const logicalW = parseFloat(selectedElement.value.style.width) || val
             const logicalH = parseFloat(selectedElement.value.style.height) || 120
@@ -408,7 +408,7 @@ export function useSidebarElementTransform(
               if (typeof el.width === 'number') el.width = newW
             }
             if (el.type === 'shape' && el.pathFormula) {
-              const formulaObj = SHAPE_PATH_FORMULAS[el.pathFormula]
+              const formulaObj = shapeFormulas()[el.pathFormula]
               if (formulaObj) {
                 const logicalW = parseFloat(el.style.width) || 120
                 const logicalH = parseFloat(el.style.height) || val
@@ -464,7 +464,7 @@ export function useSidebarElementTransform(
           })
         }
         if (selectedElement.value.type === 'shape' && selectedElement.value.pathFormula) {
-          const formulaObj = SHAPE_PATH_FORMULAS[selectedElement.value.pathFormula]
+          const formulaObj = shapeFormulas()[selectedElement.value.pathFormula]
           if (formulaObj) {
             const logicalW = parseFloat(selectedElement.value.style.width) || 120
             const logicalH = parseFloat(selectedElement.value.style.height) || val

package/src/composables/sidebar/useSidebarShapeFormat.ts

@@ -1,5 +1,5 @@
 import { ref, computed, watch, nextTick, type Ref, type ComputedRef } from 'vue'
-import { SHAPE_PATH_FORMULAS } from '../../utils/pptxShapes'
+import { shapeFormulas } from '../../utils/pptxShapesLazy'
 import {
   isImagePlaceholder,
   normalizeGradientConfig,
@@ -1253,7 +1253,7 @@ export function useSidebarShapeFormat(
 
     if (shape.pathFormula) {
       item.pathFormula = shape.pathFormula
-      const formulaObj = SHAPE_PATH_FORMULAS[shape.pathFormula]
+      const formulaObj = shapeFormulas()[shape.pathFormula]
       if (formulaObj) {
         if (shape.keypoints) {
           item.keypoints = [...shape.keypoints]