jvs-ppt-ui 0.0.8 → 0.0.10

package/src/components/canvas/textSelectionOverlay.ts

@@ -0,0 +1,305 @@
+/**
+ * 画布内编辑态自绘文字选区高亮。
+ *
+ * 背景：Chrome 的 ::selection 高亮几何跟随行盒/字体度量，无法用 CSS 控制。
+ * 导入的字体栈常是 'Lato Light' 等拉丁字体名，本机未安装时回退到
+ * SourceHanSansCN 等 CJK 字体（ascent≈1.16em / descent≈0.29em，远大于拉丁
+ * 字形 ink ≈0.93em），于是原生高亮条在文字上方留出大片空白、行间出现宽空白
+ * 带，观感是"选区浮在文字上方 / 字贴条底"。
+ *
+ * 方案：编辑态隐藏原生高亮（.text-selection-overlay-active ::selection 透明），
+ * 用 range 的每行矩形定 x 范围，再遍历行内文本节点计算各节点实际字形 ink：
+ *
+ * 基线测量（关键）：DOM 行内片段的内容盒用的是字体 winAsc/winDesc 度量，
+ * 而 canvas measureText 的 fontBoundingBox* 是 typo/hhea 度量——两套坐标系
+ * 差 0.1~0.3em，直接 `rect.bottom − fontBoundingBoxDescent` 反推基线会把
+ * 基线压低、条整体下坠盖不住字顶（v2 的教训）。因此用「镜像 span + 零尺寸
+ * inline-block」在页内实测渲染字体的真实基线：line-height:normal 的镜像
+ * span 内容盒高 = winAsc+winDesc，零尺寸 inline-block（空内容，底边贴基线）
+ * 的 rect.top 即基线位置。
+ *
+ * ink 高度：canvas measureText('国Mg' / 'Mg') 的 actualBoundingBoxAscent/
+ * Descent（真实字形墨迹，按行内是否含 CJK 选探针）。
+ *
+ * 节点基线 = 节点矩形底 − (矩形高 − winAsc − winDesc)/2 − winDesc
+ * （行内盒按 half-leading 模型在自身 line-height 盒内居中）。
+ * 行内各节点 ink 取并集 ±1.5px 作为高亮条，画在宿主元素内的 pe:none
+ * 覆盖层上。表格文本同样适用：选中发生在 td/th 内时度量作用域收窄到该
+ * 单元格（同一行其他单元格字体不参与 ink 并集）。
+ * 不改任何文本布局，导入标定（textInset/行距等）不受影响。
+ *
+ * 用法：createTextSelectionOverlay(editableEl, hostEl)，hostEl 需与 editable
+ * 处于同一变换坐标系（通常是 editable 的 position:relative 父级）。
+ * 编辑态开启时安装、关闭/卸载时 destroy()。
+ */
+
+export interface TextSelectionOverlayHandle {
+  destroy(): void
+}
+
+// 混排探针（含 CJK）与纯拉丁探针：按行内是否含 CJK 选对应 ink 度量
+const PROBE_MIXED = '国Mg'
+const PROBE_LATIN = 'Mg'
+const CJK_RE = /[ᄀ-ᇿ　-ヿ㐀-䶿一-鿿가-힯豈-﫿＀-￯]/
+const BAR_PAD = 1.5
+
+/** 字形 ink 度量（canvas actualBoundingBox，px） */
+interface InkMetrics {
+  taMixed: number
+  tdMixed: number
+  taLatin: number
+  tdLatin: number
+  fontSize: number
+}
+
+/** 渲染字体的真实内容盒度量（winAsc/winDesc，px）——镜像 span 实测 */
+interface RenderedFontBox {
+  winAsc: number
+  winDesc: number
+}
+
+interface LineBox {
+  top: number
+  bottom: number
+  left: number
+  right: number
+  /** 该行内所有文本节点实际字形 ink 的并集（无节点信息时为 undefined） */
+  inkTop?: number
+  inkBottom?: number
+}
+
+export function createTextSelectionOverlay(editableEl: HTMLElement, hostEl: HTMLElement): TextSelectionOverlayHandle {
+  const overlay = document.createElement('div')
+  overlay.className = 'text-selection-overlay'
+
+  let destroyed = false
+  let failed = false
+  let rafId = 0
+
+  const mctx = document.createElement('canvas').getContext('2d')
+  const inkCache = new Map<string, InkMetrics>()
+  const fontBoxCache = new Map<string, RenderedFontBox>()
+
+  function inkMetricsFor(el: Element): InkMetrics | null {
+    if (!mctx) return null
+    const cs = getComputedStyle(el)
+    const key = `${cs.fontStyle}|${cs.fontWeight}|${cs.fontSize}|${cs.fontFamily}`
+    let m = inkCache.get(key)
+    if (!m) {
+      const font = cs.font || `${cs.fontStyle} ${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`
+      mctx.font = font
+      const mixed = mctx.measureText(PROBE_MIXED)
+      const latin = mctx.measureText(PROBE_LATIN)
+      m = {
+        taMixed: mixed.actualBoundingBoxAscent,
+        tdMixed: mixed.actualBoundingBoxDescent,
+        taLatin: latin.actualBoundingBoxAscent,
+        tdLatin: latin.actualBoundingBoxDescent,
+        fontSize: parseFloat(cs.fontSize) || 0
+      }
+      if (!isFinite(m.taLatin) || !isFinite(m.tdLatin) || !isFinite(m.fontSize)) return null
+      inkCache.set(key, m)
+    }
+    return m
+  }
+
+  // 镜像 span + 零尺寸 inline-block 实测渲染字体的 winAsc/winDesc：
+  // line-height:normal 的镜像内容盒高 = winAsc+winDesc；
+  // 空 inline-block 底边贴基线，其 rect.top 就是基线。
+  function renderedFontBoxFor(el: Element): RenderedFontBox | null {
+    const cs = getComputedStyle(el)
+    const key = cs.font || `${cs.fontStyle}|${cs.fontWeight}|${cs.fontSize}|${cs.fontFamily}`
+    let m = fontBoxCache.get(key)
+    if (m) return m
+    const font = cs.font || `${cs.fontStyle} ${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`
+    const mirror = document.createElement('span')
+    mirror.style.cssText = `position:fixed;left:-99999px;top:0;visibility:hidden;white-space:pre;line-height:normal;font:${font};`
+    const ib = document.createElement('span')
+    ib.style.cssText = 'display:inline-block;width:0;height:0;'
+    mirror.appendChild(document.createTextNode('x'))
+    mirror.appendChild(ib)
+    document.body.appendChild(mirror)
+    try {
+      const hr = mirror.getBoundingClientRect()
+      const ibr = ib.getBoundingClientRect()
+      if (hr.height < 1 || !isFinite(ibr.top) || !isFinite(hr.bottom)) return null
+      const winAsc = ibr.top - hr.top
+      const winDesc = hr.bottom - ibr.top
+      if (!(winAsc > 0) || !(winDesc > 0) || !isFinite(winAsc) || !isFinite(winDesc)) return null
+      m = { winAsc, winDesc }
+      fontBoxCache.set(key, m)
+      return m
+    } catch {
+      return null
+    } finally {
+      mirror.remove()
+    }
+  }
+
+  function collectLineBoxes(range: Range): LineBox[] {
+    const lines: LineBox[] = []
+    const rects = Array.from(range.getClientRects()).filter(r => r.width >= 1 && r.height >= 1)
+    for (const r of rects) {
+      const L = lines.find(l => Math.abs(l.top - r.top) < 2)
+      if (L) {
+        L.top = Math.min(L.top, r.top)
+        L.bottom = Math.max(L.bottom, r.bottom)
+        L.left = Math.min(L.left, r.left)
+        L.right = Math.max(L.right, r.right)
+      } else {
+        lines.push({ top: r.top, bottom: r.bottom, left: r.left, right: r.right })
+      }
+    }
+    lines.sort((a, b) => a.top - b.top)
+    return lines
+  }
+
+  // 选区所在表格单元格（表格文本的选中发生在动态设为 contenteditable 的
+  // td/th 内）：把度量作用域收窄到该 cell，避免同一行其他单元格的字体
+  // 污染本行 ink 并集；非表格返回 null。
+  function scopeFor(range: Range): ParentNode {
+    let n: Node | null = range.startContainer
+    if (n.nodeType === Node.TEXT_NODE) n = n.parentElement
+    while (n && n !== editableEl) {
+      if (n.nodeType === Node.ELEMENT_NODE) {
+        const tag = (n as Element).tagName
+        if (tag === 'TD' || tag === 'TH') return n as HTMLElement
+      }
+      n = n.parentNode
+    }
+    return editableEl
+  }
+
+  // 遍历编辑区内直接持有文本的节点，用「节点自身矩形 + 该字体实测基线 +
+  // canvas 字形 ink」算出每个节点在该行的实际字形 ink，行内取并集。
+  // 基线绝不能从行盒底/容器字体反推（strut、行距、win/typo 度量差异都会
+  // 把条压低），只能从节点自身字体实测。
+  function accumulateLineMetrics(lines: LineBox[], scope: ParentNode) {
+    if (!lines.length) return
+    const walker = document.createTreeWalker(scope, NodeFilter.SHOW_TEXT)
+    let node: Node | null
+    while ((node = walker.nextNode())) {
+      const text = node.nodeValue || ''
+      if (!text.trim()) continue
+      const parent = node.parentElement
+      if (!parent || parent.tagName === 'SCRIPT' || parent.tagName === 'STYLE') continue
+      const ink = inkMetricsFor(parent)
+      const box = renderedFontBoxFor(parent)
+      if (!ink || !box) continue
+      const hasCJK = CJK_RE.test(text)
+      const ta = hasCJK ? ink.taMixed : ink.taLatin
+      const td = hasCJK ? ink.tdMixed : ink.tdLatin
+      const nr = document.createRange()
+      nr.selectNodeContents(node)
+      for (const r of nr.getClientRects()) {
+        if (r.height < 1 || r.width < 1) continue
+        const lead = (r.height - box.winAsc - box.winDesc) / 2
+        // 行距异常（负 leading 超过字号一半）视为不可信，跳过该节点
+        if (!isFinite(lead) || Math.abs(lead) > ink.fontSize * 1.5) continue
+        const baseline = r.bottom - lead - box.winDesc
+        const inkTop = baseline - ta
+        const inkBottom = baseline + td
+        const mid = (r.top + r.bottom) / 2
+        for (const L of lines) {
+          if (mid < L.top - 1 || mid > L.bottom + 1) continue
+          L.inkTop = Math.min(L.inkTop ?? Infinity, inkTop)
+          L.inkBottom = Math.max(L.inkBottom ?? -Infinity, inkBottom)
+        }
+      }
+    }
+  }
+
+  function draw() {
+    overlay.textContent = ''
+    hostEl.classList.remove('text-selection-overlay-active')
+    if (destroyed || failed) return
+
+    const sel = window.getSelection()
+    if (!sel || sel.rangeCount === 0 || sel.isCollapsed) return
+    const range = sel.getRangeAt(0)
+    if (!editableEl.contains(range.commonAncestorContainer)) return
+
+    const hostRect = hostEl.getBoundingClientRect()
+    if (!hostRect.width || !hostEl.offsetWidth) return
+    const scale = hostRect.width / hostEl.offsetWidth
+
+    const lines = collectLineBoxes(range)
+    if (!lines.length) return
+    accumulateLineMetrics(lines, scopeFor(range))
+
+    const frag = document.createDocumentFragment()
+    let drew = 0
+    for (const L of lines) {
+      // 条 = 行内实际字形 ink 并集 ± 边距；拿不到节点度量时退回整行盒
+      let top: number
+      let bottom: number
+      if (L.inkTop !== undefined && L.inkBottom !== undefined && L.inkBottom - L.inkTop >= 2) {
+        top = L.inkTop - BAR_PAD
+        bottom = L.inkBottom + BAR_PAD
+        // 保险：异常度量不许把条拉出行盒太远
+        top = Math.max(top, L.top - 3)
+        bottom = Math.min(bottom, L.bottom + 3)
+      } else {
+        top = L.top
+        bottom = L.bottom
+      }
+      const bar = document.createElement('div')
+      bar.className = 'text-selection-bar'
+      bar.style.left = `${(L.left - hostRect.left) / scale}px`
+      bar.style.top = `${(top - hostRect.top) / scale}px`
+      bar.style.width = `${(L.right - L.left) / scale}px`
+      bar.style.height = `${(bottom - top) / scale}px`
+      frag.appendChild(bar)
+      drew++
+    }
+    if (!drew) return
+    overlay.appendChild(frag)
+    // 诊断用：行盒 vs 字形 ink 并集（排障时可直接从 DOM 读）
+    try {
+      overlay.dataset.diag = JSON.stringify(lines.map(l => [
+        +l.top.toFixed(1), +l.bottom.toFixed(1),
+        l.inkTop !== undefined ? +l.inkTop.toFixed(1) : null,
+        l.inkBottom !== undefined ? +l.inkBottom.toFixed(1) : null
+      ]))
+    } catch { /* ignore */ }
+    if (!overlay.isConnected) {
+      if (getComputedStyle(hostEl).position === 'static') hostEl.style.position = 'relative'
+      hostEl.appendChild(overlay)
+    }
+    // 有自绘条才隐藏原生高亮（失败时保留原生兜底）
+    hostEl.classList.add('text-selection-overlay-active')
+  }
+
+  function schedule() {
+    if (destroyed || failed) return
+    cancelAnimationFrame(rafId)
+    rafId = requestAnimationFrame(() => {
+      try {
+        draw()
+      } catch {
+        failed = true
+        overlay.textContent = ''
+        hostEl.classList.remove('text-selection-overlay-active')
+      }
+    })
+  }
+
+  const onSelectionChange = () => schedule()
+  document.addEventListener('selectionchange', onSelectionChange)
+  // 画布平移/缩放（祖先 transform 变化不触发 selectionchange/resize）
+  window.addEventListener('scroll', onSelectionChange, true)
+  window.addEventListener('resize', onSelectionChange)
+
+  function destroy() {
+    if (destroyed) return
+    destroyed = true
+    cancelAnimationFrame(rafId)
+    document.removeEventListener('selectionchange', onSelectionChange)
+    window.removeEventListener('scroll', onSelectionChange, true)
+    window.removeEventListener('resize', onSelectionChange)
+    overlay.remove()
+    hostEl.classList.remove('text-selection-overlay-active')
+  }
+
+  return { destroy }
+}