jvs-ppt-ui 0.0.7 → 0.0.8

package/src/composables/canvas/useCanvasTable.ts

@@ -14,6 +14,16 @@ export interface TableOptions {
   selectedElementHeight?: Ref<string>
 }
 
+interface TableMeasure {
+  ver: number
+  sig: string
+  offset: { left: number; top: number; width: number; height: number }
+  cols: number[]
+  rows: number[]
+  colDots: number[]
+  rowDots: number[]
+}
+
 export function useCanvasTable(options: TableOptions) {
   const {
     activeSlide,
@@ -54,6 +64,7 @@ export function useCanvasTable(options: TableOptions) {
 
   let tableCleanupFunc: (() => void) | null = null
   let tableSelectionActive = false
+  let updateBordersRafId = 0
   let startCell: HTMLTableCellElement | null = null
   let tableResizeActiveTable: HTMLTableElement | null = null
   let tableResizeActiveEl: any = null
@@ -71,37 +82,64 @@ export function useCanvasTable(options: TableOptions) {
     return { width, height }
   }
 
-  function getTableOffset(el: any) {
-    if (!el) return { left: 0, top: 0, width: 500, height: 200 }
+  // ---- 表格几何单遍合并测量（渲染期回流治理）----
+  // 模板每次渲染原本重复调 getTableOffset×7 + getTableInfo×5 + 行/列圆点 O(n²)，
+  // 全是 offset* 强制布局读；合并为每次失效只做一次 DOM 遍历，版本号+签名双缓存。
+  const tableMeasureVersion = ref(0)
+  const tableMeasureCache = new WeakMap<object, TableMeasure>()
+
+  function bumpTableMeasure() {
+    tableMeasureVersion.value++
+  }
+
+  // 表格内容提交统一入口：写 content + 失效测量缓存 + 落历史快照
+  function commitTableContent(targetEl: any, html: string) {
+    targetEl.content = html
+    bumpTableMeasure()
+    addHistorySnapshot()
+  }
+
+  function getTableMeasure(el: any): TableMeasure | null {
+    if (!el) return null
+    // 显式读取 RO 尺寸 ref：表格增高引起 ref 变化时，确保依赖收集覆盖本测量
+    void selectedElementWidth?.value
+    void selectedElementHeight?.value
+    const ver = tableMeasureVersion.value
+    // 签名只含响应式输入（零 DOM 读）：内容长度 + 影响排版的 style + RO 尺寸
+    const st = el.style || {}
+    const sig = `${el.content?.length || 0}|${st.fontSize || ''}|${st.fontFamily || ''}|${st.fontWeight || ''}|${st.lineHeight || ''}|${st.letterSpacing || ''}|${st.padding || ''}|${st.whiteSpace || ''}|${st.writingMode || ''}|${st.width || ''}|${st.height || ''}|${selectedElementWidth?.value || ''}|${selectedElementHeight?.value || ''}`
+    const cached = tableMeasureCache.get(el)
+    if (cached && cached.ver === ver && cached.sig === sig) return cached
+
+    const hasContent = !!el.content && typeof el.content === 'string' && el.content.includes('<table')
     const container = document.getElementById(`editable-${el.id}`)
     const tableEl = container?.querySelector('table')
+
+    // offset（原 getTableOffset 逐分支等价）
+    let offset: TableMeasure['offset']
     if (tableEl) {
-      return {
+      offset = {
         left: tableEl.offsetLeft || 0,
         top: tableEl.offsetTop || 0,
         width: tableEl.offsetWidth || parseFloat(getOverlayWidth(el)) || 500,
         height: tableEl.offsetHeight || parseFloat(getOverlayHeight(el)) || 200
       }
+    } else {
+      offset = {
+        left: 0,
+        top: 0,
+        width: parseFloat(getOverlayWidth(el)) || 500,
+        height: parseFloat(getOverlayHeight(el)) || 200
+      }
     }
-    return {
-      left: 0,
-      top: 0,
-      width: parseFloat(getOverlayWidth(el)) || 500,
-      height: parseFloat(getOverlayHeight(el)) || 200
-    }
-  }
-
-  function getTableInfo(el: any) {
-    if (!el || !el.content || typeof el.content !== 'string' || !el.content.includes('<table')) return { cols: [], rows: [] }
 
-    const container = document.getElementById(`editable-${el.id}`)
-    const tableEl = container?.querySelector('table')
-
-    let trs: HTMLTableRowElement[] = []
-    if (tableEl) {
-      trs = Array.from(tableEl.rows || [])
-    }
+    // cols/rows/圆点（原 getTableInfo 与两个圆点函数逐分支等价，单遍产出）
+    let cols: number[] = []
+    let rows: number[] = []
+    let colDots: number[] = []
+    let rowDots: number[] = []
 
+    const trs: HTMLTableRowElement[] = tableEl ? Array.from(tableEl.rows || []) : []
     if (trs.length > 0) {
       let bestRow = trs[0]
       for (const tr of trs) {
@@ -110,51 +148,79 @@ export function useCanvasTable(options: TableOptions) {
         }
       }
       const cells = Array.from(bestRow.cells)
-      const cols: number[] = []
       if (cells.length > 0) {
-        for (let i = 0; i < cells.length; i++) {
-          if (i < cells.length - 1) {
-            cols.push(cells[i + 1].offsetLeft - cells[i].offsetLeft)
-          } else {
-            cols.push(cells[i].offsetWidth)
-          }
-        }
+        cols = cells.map((c, i) => (i < cells.length - 1 ? cells[i + 1].offsetLeft - cells[i].offsetLeft : c.offsetWidth))
+        colDots = [0, ...cells.slice(1).map(c => c.offsetLeft)]
+        const lastTd = cells[cells.length - 1]
+        colDots.push(lastTd.offsetLeft + lastTd.offsetWidth)
       }
 
-      const rows: number[] = []
-      for (let i = 0; i < trs.length; i++) {
-        if (i < trs.length - 1) {
-          rows.push(trs[i + 1].offsetTop - trs[i].offsetTop)
+      rows = trs.map((tr, i) => (i < trs.length - 1 ? trs[i + 1].offsetTop - trs[i].offsetTop : tr.offsetHeight))
+      rowDots = [0, ...trs.slice(1).map(tr => tr.offsetTop)]
+      const lastTr = trs[trs.length - 1]
+      rowDots.push(lastTr.offsetTop + lastTr.offsetHeight)
+    } else if (hasContent) {
+      // DOM 表不在场：DOMParser 结构 + 均分（原 getTableInfo fallback / 圆点累积路径）
+      const { width: targetW, height: targetH } = getTableActualDimensions(el)
+      try {
+        const doc = new DOMParser().parseFromString(el.content, 'text/html')
+        const parsedTable = doc.querySelector('table')
+        if (parsedTable) {
+          const numRows = parsedTable.rows.length || 1
+          let bestRow = parsedTable.rows[0]
+          for (let r = 0; r < parsedTable.rows.length; r++) {
+            if (parsedTable.rows[r].cells.length > bestRow.cells.length) {
+              bestRow = parsedTable.rows[r]
+            }
+          }
+          const numCols = bestRow ? bestRow.cells.length : 1
+          cols = Array(numCols).fill(targetW / numCols)
+          rows = Array(numRows).fill(targetH / numRows)
         } else {
-          rows.push(trs[i].offsetHeight)
+          cols = [targetW]
+          rows = [targetH]
         }
+      } catch {
+        cols = [targetW]
+        rows = [targetH]
       }
-
-      return { cols, rows }
-    }
-
-    const { width: targetW, height: targetH } = getTableActualDimensions(el)
-    try {
-      const doc = new DOMParser().parseFromString(el.content, 'text/html')
-      const parsedTable = doc.querySelector('table')
-      if (parsedTable) {
-        const numRows = parsedTable.rows.length || 1
-        let bestRow = parsedTable.rows[0]
-        for (let r = 0; r < parsedTable.rows.length; r++) {
-          if (parsedTable.rows[r].cells.length > bestRow.cells.length) {
-            bestRow = parsedTable.rows[r]
-          }
+      if (cols.length > 0) {
+        colDots = [0]
+        let cx = 0
+        for (let i = 0; i < cols.length; i++) {
+          cx += cols[i]
+          colDots.push(cx)
         }
-        const numCols = bestRow ? bestRow.cells.length : 1
-        return {
-          cols: Array(numCols).fill(targetW / numCols),
-          rows: Array(numRows).fill(targetH / numRows)
+      }
+      if (rows.length > 0) {
+        rowDots = [0]
+        let cy = 0
+        for (let i = 0; i < rows.length; i++) {
+          cy += rows[i]
+          rowDots.push(cy)
         }
       }
-    } catch {
-      return { cols: [targetW], rows: [targetH] }
     }
-    return { cols: [targetW], rows: [targetH] }
+    // 与原 getTableInfo 对齐：content 不含 <table> 时 cols/rows 恒为空
+    if (!hasContent) {
+      cols = []
+      rows = []
+    }
+
+    const entry: TableMeasure = { ver, sig, offset, cols, rows, colDots, rowDots }
+    tableMeasureCache.set(el, entry)
+    return entry
+  }
+
+  function getTableOffset(el: any) {
+    const m = getTableMeasure(el)
+    return m ? { ...m.offset } : { left: 0, top: 0, width: 500, height: 200 }
+  }
+
+  function getTableInfo(el: any) {
+    const m = getTableMeasure(el)
+    if (!m) return { cols: [], rows: [] }
+    return { cols: m.cols.slice(), rows: m.rows.slice() }
   }
 
   function reindexTable(tableEl: HTMLTableElement) {
@@ -280,6 +346,7 @@ export function useCanvasTable(options: TableOptions) {
     const selectedTds = Array.from(tableEl.querySelectorAll('td.selected-cell')) as HTMLTableCellElement[]
     selectedCellCount.value = selectedTds.length
     tableSelectionTrigger.value++
+    bumpTableMeasure()
 
     if (selectedTds.length === 1) {
       const td = selectedTds[0]
@@ -574,63 +641,13 @@ export function useCanvasTable(options: TableOptions) {
   }
 
   function getColDotPositions(el: any): number[] {
-    const container = document.getElementById(`editable-${el.id}`)
-    const tableEl = container?.querySelector('table')
-    if (tableEl && tableEl.rows.length > 0) {
-      let bestRow = tableEl.rows[0]
-      for (let r = 0; r < tableEl.rows.length; r++) {
-        if (tableEl.rows[r].cells.length > bestRow.cells.length) {
-          bestRow = tableEl.rows[r]
-        }
-      }
-      const cells = Array.from(bestRow.cells)
-      if (cells.length > 0) {
-        const positions: number[] = [0]
-        for (let i = 1; i < cells.length; i++) {
-          positions.push(cells[i].offsetLeft)
-        }
-        const lastTd = cells[cells.length - 1]
-        positions.push(lastTd.offsetLeft + lastTd.offsetWidth)
-        return positions
-      }
-    }
-
-    const info = getTableInfo(el)
-    if (!info.cols || info.cols.length === 0) return []
-    const positions = [0]
-    let currentX = 0
-    for (let i = 0; i < info.cols.length; i++) {
-      currentX += info.cols[i]
-      positions.push(currentX)
-    }
-    return positions
+    const m = getTableMeasure(el)
+    return m ? m.colDots.slice() : []
   }
 
   function getRowDotPositions(el: any): number[] {
-    const container = document.getElementById(`editable-${el.id}`)
-    const tableEl = container?.querySelector('table')
-    if (tableEl && tableEl.rows.length > 0) {
-      const trs = Array.from(tableEl.rows)
-      if (trs.length > 0) {
-        const positions: number[] = [0]
-        for (let i = 1; i < trs.length; i++) {
-          positions.push(trs[i].offsetTop)
-        }
-        const lastTr = trs[trs.length - 1]
-        positions.push(lastTr.offsetTop + lastTr.offsetHeight)
-        return positions
-      }
-    }
-
-    const info = getTableInfo(el)
-    if (!info.rows || info.rows.length === 0) return []
-    const positions = [0]
-    let currentY = 0
-    for (let i = 0; i < info.rows.length; i++) {
-      currentY += info.rows[i]
-      positions.push(currentY)
-    }
-    return positions
+    const m = getTableMeasure(el)
+    return m ? m.rowDots.slice() : []
   }
 
   function getSelectedCellCoords(container: HTMLElement) {
@@ -805,8 +822,7 @@ export function useCanvasTable(options: TableOptions) {
 
     const cloneTable = tableEl.cloneNode(true) as HTMLTableElement
     cleanTableDOMForSaving(cloneTable)
-    targetEl.content = cloneTable.outerHTML
-    addHistorySnapshot()
+    commitTableContent(targetEl, cloneTable.outerHTML)
 
     nextTick(() => {
       const freshContainer = document.getElementById(`editable-${targetEl.id}`)
@@ -932,8 +948,7 @@ export function useCanvasTable(options: TableOptions) {
 
     const cloneTable = tableEl.cloneNode(true) as HTMLTableElement
     cleanTableDOMForSaving(cloneTable)
-    targetEl.content = cloneTable.outerHTML
-    addHistorySnapshot()
+    commitTableContent(targetEl, cloneTable.outerHTML)
 
     nextTick(() => {
       const freshContainer = document.getElementById(`editable-${targetEl.id}`)
@@ -995,8 +1010,7 @@ export function useCanvasTable(options: TableOptions) {
 
     const cloneTable = tableEl.cloneNode(true) as HTMLTableElement
     cleanTableDOMForSaving(cloneTable)
-    targetEl.content = cloneTable.outerHTML
-    addHistorySnapshot()
+    commitTableContent(targetEl, cloneTable.outerHTML)
 
     nextTick(() => {
       const freshContainer = document.getElementById(`editable-${targetEl.id}`)
@@ -1064,8 +1078,7 @@ export function useCanvasTable(options: TableOptions) {
 
     const cloneTable = tableEl.cloneNode(true) as HTMLTableElement
     cleanTableDOMForSaving(cloneTable)
-    targetEl.content = cloneTable.outerHTML
-    addHistorySnapshot()
+    commitTableContent(targetEl, cloneTable.outerHTML)
 
     nextTick(() => {
       const freshContainer = document.getElementById(`editable-${targetEl.id}`)
@@ -1131,8 +1144,7 @@ export function useCanvasTable(options: TableOptions) {
 
     const cloneTable = tableEl.cloneNode(true) as HTMLTableElement
     cleanTableDOMForSaving(cloneTable)
-    targetEl.content = cloneTable.outerHTML
-    addHistorySnapshot()
+    commitTableContent(targetEl, cloneTable.outerHTML)
 
     nextTick(() => {
       const freshContainer = document.getElementById(`editable-${targetEl.id}`)
@@ -1234,8 +1246,7 @@ export function useCanvasTable(options: TableOptions) {
 
     const cloneTable = tableEl.cloneNode(true) as HTMLTableElement
     cleanTableDOMForSaving(cloneTable)
-    targetEl.content = cloneTable.outerHTML
-    addHistorySnapshot()
+    commitTableContent(targetEl, cloneTable.outerHTML)
 
     nextTick(() => {
       const freshContainer = document.getElementById(`editable-${targetEl.id}`)
@@ -1332,12 +1343,21 @@ export function useCanvasTable(options: TableOptions) {
           selectedElementWidth.value = `${sumW.toFixed(1)}px`
         }
       }
-      updateSelectionBorders(tableEl)
+      // rAF 节流：高轮询率鼠标下避免每 move 一次边框重算
+      if (updateBordersRafId) cancelAnimationFrame(updateBordersRafId)
+      updateBordersRafId = requestAnimationFrame(() => {
+        updateBordersRafId = 0
+        if (isResizingTable.value) updateSelectionBorders(tableEl)
+      })
     }
 
     const onMouseUp = () => {
       window.removeEventListener('mousemove', onMouseMove)
       window.removeEventListener('mouseup', onMouseUp)
+      if (updateBordersRafId) {
+        cancelAnimationFrame(updateBordersRafId)
+        updateBordersRafId = 0
+      }
       isResizingTable.value = false
       tableResizeType.value = null
       tableResizeTd.value = null
@@ -1345,8 +1365,7 @@ export function useCanvasTable(options: TableOptions) {
 
       const cloneTable = tableEl.cloneNode(true) as HTMLTableElement
       cleanTableDOMForSaving(cloneTable)
-      el.content = cloneTable.outerHTML
-      addHistorySnapshot()
+      commitTableContent(el, cloneTable.outerHTML)
     }
 
     window.addEventListener('mousemove', onMouseMove)
@@ -1417,12 +1436,21 @@ export function useCanvasTable(options: TableOptions) {
           selectedElementHeight.value = `${sumH.toFixed(1)}px`
         }
       }
-      updateSelectionBorders(tableEl)
+      // rAF 节流：高轮询率鼠标下避免每 move 一次边框重算
+      if (updateBordersRafId) cancelAnimationFrame(updateBordersRafId)
+      updateBordersRafId = requestAnimationFrame(() => {
+        updateBordersRafId = 0
+        if (isResizingTable.value) updateSelectionBorders(tableEl)
+      })
     }
 
     const onMouseUp = () => {
       window.removeEventListener('mousemove', onMouseMove)
       window.removeEventListener('mouseup', onMouseUp)
+      if (updateBordersRafId) {
+        cancelAnimationFrame(updateBordersRafId)
+        updateBordersRafId = 0
+      }
       isResizingTable.value = false
       tableResizeType.value = null
       tableResizeTd.value = null
@@ -1430,8 +1458,7 @@ export function useCanvasTable(options: TableOptions) {
 
       const cloneTable = tableEl.cloneNode(true) as HTMLTableElement
       cleanTableDOMForSaving(cloneTable)
-      el.content = cloneTable.outerHTML
-      addHistorySnapshot()
+      commitTableContent(el, cloneTable.outerHTML)
     }
 
     window.addEventListener('mousemove', onMouseMove)
@@ -1456,26 +1483,34 @@ export function useCanvasTable(options: TableOptions) {
     reindexTable(tableEl)
     const borderTolerance = 6
 
+    let mousemoveRafId = 0
     const mousemoveHandler = (e: MouseEvent) => {
       if (isResizingTable.value) return
+      // rAF 节流：每帧最多一次 getBoundingClientRect，消除高频 mousemove 的强制回流
+      if (mousemoveRafId) return
+      const clientX = e.clientX
+      const clientY = e.clientY
       const target = e.target as HTMLElement
-      const td = target.closest('td') as HTMLTableCellElement | null
-      if (!td || !tableEl.contains(td)) {
-        tableEl.style.cursor = 'default'
-        return
-      }
+      mousemoveRafId = requestAnimationFrame(() => {
+        mousemoveRafId = 0
+        const td = target.closest('td') as HTMLTableCellElement | null
+        if (!td || !tableEl.contains(td)) {
+          tableEl.style.cursor = 'default'
+          return
+        }
 
-      const rect = td.getBoundingClientRect()
-      const distRight = Math.abs(rect.right - e.clientX)
-      const distBottom = Math.abs(rect.bottom - e.clientY)
+        const rect = td.getBoundingClientRect()
+        const distRight = Math.abs(rect.right - clientX)
+        const distBottom = Math.abs(rect.bottom - clientY)
 
-      if (distRight <= borderTolerance && distRight <= distBottom) {
-        tableEl.style.cursor = 'col-resize'
-      } else if (distBottom <= borderTolerance) {
-        tableEl.style.cursor = 'row-resize'
-      } else {
-        tableEl.style.cursor = 'default'
-      }
+        if (distRight <= borderTolerance && distRight <= distBottom) {
+          tableEl.style.cursor = 'col-resize'
+        } else if (distBottom <= borderTolerance) {
+          tableEl.style.cursor = 'row-resize'
+        } else {
+          tableEl.style.cursor = 'default'
+        }
+      })
     }
 
     const mousedownHandler = (e: MouseEvent) => {
@@ -1536,6 +1571,10 @@ export function useCanvasTable(options: TableOptions) {
     window.addEventListener('mouseup', mouseupHandler)
 
     const cleanup = () => {
+      if (mousemoveRafId) {
+        cancelAnimationFrame(mousemoveRafId)
+        mousemoveRafId = 0
+      }
       tableEl.removeEventListener('mousemove', mousemoveHandler)
       tableEl.removeEventListener('mousedown', mousedownHandler)
       tableEl.removeEventListener('mouseover', mouseoverHandler)
@@ -1610,9 +1649,8 @@ export function useCanvasTable(options: TableOptions) {
       }
     }
 
-    el.content = div.innerHTML
     if (selectedElementHeight) selectedElementHeight.value = `${totalHeight}px`
-    addHistorySnapshot()
+    commitTableContent(el, div.innerHTML)
   }
 
   function equalizeTableColWidths() {
@@ -1638,9 +1676,8 @@ export function useCanvasTable(options: TableOptions) {
       }
     }
 
-    el.content = div.innerHTML
     if (selectedElementWidth) selectedElementWidth.value = `${totalWidth}px`
-    addHistorySnapshot()
+    commitTableContent(el, div.innerHTML)
   }
 
   return {

package/src/composables/sidebar/useSidebarTextFormat.ts

@@ -32,7 +32,7 @@ export function useSidebarTextFormat(
   activeSlide: Ref<any>,
   slides: Ref<any[]>,
   activeIndex: Ref<number>,
-  historyStack: Ref<string[]>,
+  historyStack: Ref<string[][]>,
   historyIndex: Ref<number>,
   globalFontColor: Ref<string>,
   shapeFormatPainter: Ref<any>,