jvs-ppt-ui 0.0.16 → 0.0.18

package/src/utils/canvas/elementStyles.ts

@@ -964,3 +964,259 @@ export function updateTextAlignInHtml(html: string, align: string): string {
     return `style="${newStyle}"`
   })
 }
+
+
+/**
+ * Resolve the effective font size (in px) for a text/shape element:
+ * - When the cursor/selection is active inside the element's editable container:
+ *   - For a collapsed cursor (caret), returns the font size of the character immediately BEFORE the cursor
+ *     on the current line/block (falling back to the character after the cursor if at the very start of the line).
+ *   - For a non-collapsed range selection, returns the font size of the first selected character.
+ * - When there is no cursor in the element, returns the font size of the first line (first non-empty character).
+ */
+export function resolveEffectiveElementFontSize(
+  el: any,
+  options?: {
+    isEditing?: boolean
+    savedRange?: Range | null
+    fallback?: string
+  }
+): string {
+  const fallback = options?.fallback || '18px'
+  if (!el) return fallback
+
+  const parseSizeToPx = (raw: any): string | null => {
+    if (raw === undefined || raw === null || raw === '' || raw === 'auto') return null
+    const match = String(raw).trim().match(/(\d+(?:\.\d+)?)\s*(px|pt)?/i)
+    if (match && match[1]) {
+      let size = parseFloat(match[1])
+      const unit = (match[2] || 'px').toLowerCase()
+      if (unit === 'pt') {
+        size = size * 1.33333
+      }
+      if (!isNaN(size) && size > 0) {
+        return `${Math.round(size)}px`
+      }
+    }
+    return null
+  }
+
+  const resolveFontSizeFromDomNode = (targetNode: Node | null, container: HTMLElement): string | null => {
+    if (!targetNode) return null
+    let cur: HTMLElement | null = targetNode.nodeType === Node.ELEMENT_NODE
+      ? (targetNode as HTMLElement)
+      : targetNode.parentElement
+
+    // 1. Walk up from targetNode to container (exclusive) checking inline font-size
+    while (cur && cur !== container && container.contains(cur)) {
+      const styleAttr = cur.getAttribute('style') || ''
+      const match = styleAttr.match(/font-size\s*:\s*(\d+(?:\.\d+)?)\s*(px|pt)?/i)
+      if (match && match[1]) {
+        const parsed = parseSizeToPx(`${match[1]}${match[2] || 'px'}`)
+        if (parsed) return parsed
+      }
+      if (cur.style && cur.style.fontSize) {
+        const parsed = parseSizeToPx(cur.style.fontSize)
+        if (parsed) return parsed
+      }
+      cur = cur.parentElement
+    }
+
+    // 2. Fallback to element's style.fontSize or container's inline font-size
+    if (el.style && el.style.fontSize && el.style.fontSize !== 'auto') {
+      const parsed = parseSizeToPx(el.style.fontSize)
+      if (parsed) return parsed
+    }
+    if (el.fontSize && el.fontSize !== 'auto') {
+      const parsed = parseSizeToPx(el.fontSize)
+      if (parsed) return parsed
+    }
+    const containerStyleAttr = container.getAttribute('style') || ''
+    const containerMatch = containerStyleAttr.match(/font-size\s*:\s*(\d+(?:\.\d+)?)\s*(px|pt)?/i)
+    if (containerMatch && containerMatch[1]) {
+      const parsed = parseSizeToPx(`${containerMatch[1]}${containerMatch[2] || 'px'}`)
+      if (parsed) return parsed
+    }
+
+    // 3. Fallback to computed style on the element
+    const elem = targetNode.nodeType === Node.ELEMENT_NODE
+      ? (targetNode as HTMLElement)
+      : targetNode.parentElement
+    if (elem && typeof window !== 'undefined') {
+      const computedFs = window.getComputedStyle(elem).fontSize
+      const parsed = parseSizeToPx(computedFs)
+      if (parsed) return parsed
+    }
+
+    return null
+  }
+
+  const container = typeof document !== 'undefined' && el.id
+    ? (document.getElementById(`editable-${el.id}`) || document.getElementById(`editable-element-${el.id}`) || document.getElementById(`screen-editable-${el.id}`))
+    : null
+
+  const isEditing = options?.isEditing !== undefined
+    ? options.isEditing
+    : Boolean(container && (container.getAttribute('contenteditable') === 'true' || container === document.activeElement || container.contains(document.activeElement)))
+
+  // 1. Cursor / selection is active inside the element
+  if (container && isEditing && typeof window !== 'undefined') {
+    const selectedTd = container.querySelector('td.selected-cell') as HTMLElement | null
+    if (selectedTd) {
+      const tdWalker = document.createTreeWalker(selectedTd, NodeFilter.SHOW_TEXT, null)
+      let firstTdText: Text | null = null
+      let tdNode: Node | null = tdWalker.nextNode()
+      while (tdNode) {
+        if ((tdNode.nodeValue || '').replace(/[\u200B\r\n\s]/g, '').length > 0) {
+          firstTdText = tdNode as Text
+          break
+        }
+        tdNode = tdWalker.nextNode()
+      }
+      const tdFs = resolveFontSizeFromDomNode(firstTdText || selectedTd, container)
+      if (tdFs) return tdFs
+    }
+
+    const sel = window.getSelection()
+    let activeRange: Range | null = null
+    if (sel && sel.rangeCount > 0) {
+      const r = sel.getRangeAt(0)
+      if (container.contains(r.commonAncestorContainer)) {
+        activeRange = r
+      }
+    }
+    if (!activeRange && options?.savedRange && container.contains(options.savedRange.commonAncestorContainer)) {
+      activeRange = options.savedRange
+    }
+
+    if (activeRange) {
+      if (!activeRange.collapsed) {
+        const startRange = activeRange.cloneRange()
+        startRange.collapse(true)
+        const endRange = activeRange.cloneRange()
+        endRange.collapse(false)
+
+        const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, null)
+        let firstSelectedText: Text | null = null
+        let node: Node | null = walker.nextNode()
+        while (node) {
+          const rawVal = node.nodeValue || ''
+          if (rawVal.replace(/[\u200B\r\n]/g, '').length > 0) {
+            try {
+              if (startRange.comparePoint(node, rawVal.length) > 0 && endRange.comparePoint(node, 0) < 0) {
+                firstSelectedText = node as Text
+                break
+              }
+            } catch (_) {}
+          }
+          node = walker.nextNode()
+        }
+        const targetNode = firstSelectedText || activeRange.startContainer
+        const fs = resolveFontSizeFromDomNode(targetNode, container)
+        if (fs) return fs
+      } else {
+        let blockRoot: HTMLElement = container
+        let temp: Node | null = activeRange.startContainer
+        while (temp && temp !== container) {
+          if (temp.nodeType === Node.ELEMENT_NODE && /^(P|DIV|LI|H[1-6]|BLOCKQUOTE|TD|TH)$/i.test((temp as HTMLElement).tagName)) {
+            blockRoot = temp as HTMLElement
+            break
+          }
+          temp = temp.parentNode
+        }
+
+        let prevTextNode: Text | null = null
+        let nextTextNode: Text | null = null
+        const walker = document.createTreeWalker(blockRoot, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT, null)
+        let node: Node | null = walker.nextNode()
+        while (node) {
+          if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).tagName === 'BR') {
+            try {
+              if (activeRange.comparePoint(node, 0) < 0) {
+                prevTextNode = null
+              } else if (nextTextNode) {
+                break
+              }
+            } catch (_) {}
+          } else if (node.nodeType === Node.TEXT_NODE) {
+            const rawVal = node.nodeValue || ''
+            const firstCharIdx = rawVal.search(/[^\u200B\r\n]/)
+            if (firstCharIdx >= 0) {
+              try {
+                // 若该文本节点首个可见字符结束位置 (firstCharIdx + 1) 在光标位置之前或恰好重合，说明光标前存在该节点的可见字符
+                const cmp = activeRange.comparePoint(node, firstCharIdx + 1)
+                if (cmp <= 0) {
+                  prevTextNode = node as Text
+                } else if (!nextTextNode) {
+                  nextTextNode = node as Text
+                }
+              } catch (_) {}
+            }
+          }
+          node = walker.nextNode()
+        }
+
+        const targetNode = prevTextNode || nextTextNode || activeRange.startContainer
+        const fs = resolveFontSizeFromDomNode(targetNode, container)
+        if (fs) return fs
+      }
+    }
+  }
+
+  // 2. No active cursor: use the font size of the first line (first non-empty text character)
+  if (container) {
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, null)
+    let firstTextNode: Text | null = null
+    let node: Node | null = walker.nextNode()
+    while (node) {
+      if ((node.nodeValue || '').replace(/[\u200B\r\n\s]/g, '').length > 0) {
+        firstTextNode = node as Text
+        break
+      }
+      node = walker.nextNode()
+    }
+    if (firstTextNode) {
+      const fs = resolveFontSizeFromDomNode(firstTextNode, container)
+      if (fs) return fs
+    }
+  }
+
+  // 3. Fallback when DOM container is not mounted or has no text nodes
+  const htmlContent = el.content || (typeof el.text === 'string' ? el.text : el.text?.content) || ''
+  if (htmlContent) {
+    if (typeof document !== 'undefined' && htmlContent.includes('<')) {
+      const tempDiv = document.createElement('div')
+      tempDiv.innerHTML = htmlContent
+      const walker = document.createTreeWalker(tempDiv, NodeFilter.SHOW_TEXT, null)
+      let firstTextNode: Text | null = null
+      let node: Node | null = walker.nextNode()
+      while (node) {
+        if ((node.nodeValue || '').replace(/[\u200B\r\n\s]/g, '').length > 0) {
+          firstTextNode = node as Text
+          break
+        }
+        node = walker.nextNode()
+      }
+      if (firstTextNode) {
+        const fs = resolveFontSizeFromDomNode(firstTextNode, tempDiv)
+        if (fs) return fs
+      }
+    }
+    const match = htmlContent.match(/font-size\s*:\s*(\d+(?:\.\d+)?)\s*(px|pt)?/i)
+    if (match && match[1]) {
+      const parsed = parseSizeToPx(`${match[1]}${match[2] || 'px'}`)
+      if (parsed) return parsed
+    }
+  }
+
+  if (el.style && el.style.fontSize && el.style.fontSize !== 'auto') {
+    const parsed = parseSizeToPx(el.style.fontSize)
+    if (parsed) return parsed
+  }
+  if (el.fontSize && el.fontSize !== 'auto') {
+    const parsed = parseSizeToPx(el.fontSize)
+    if (parsed) return parsed
+  }
+
+  return fallback
+}