jvs-ppt-ui 0.0.16 → 0.0.17

package/src/components/sidebar/panels/SidebarTextFormatPanel.vue

@@ -298,7 +298,7 @@ function onFontSizeEnter(e: KeyboardEvent) {
 function onFontSizeBlur(e: FocusEvent) {
   const target = e.target as HTMLInputElement
   const raw = target.value.trim()
-  if (raw) {
+  if (raw && raw !== fontSizeClean.value) {
     emit('changeFontSize', raw)
   }
 }

package/src/composables/canvas/useCanvasText.ts

@@ -89,9 +89,8 @@ export function useCanvasText(options: TextOptions) {
 
     if (textNodes.length === 0) return null
 
-    let bestNode: Text | null = null
-    let bestOffset = 0
-    let minCost = Infinity
+    const charItems: { node: Text; index: number; rect: DOMRect; rowTop: number; rowBottom: number }[] = []
+    const rows: { top: number; bottom: number; items: typeof charItems }[] = []
 
     for (const node of textNodes) {
       const len = node.nodeValue?.length || 0
@@ -104,24 +103,51 @@ export function useCanvasText(options: TextOptions) {
         const charRect = charRange.getBoundingClientRect()
         if (charRect.width === 0 && charRect.height === 0) continue
 
-        const inRow = y >= charRect.top && y <= charRect.bottom
-        const dy = inRow ? 0 : Math.min(Math.abs(y - charRect.top), Math.abs(y - charRect.bottom))
+        const item = { node, index: i, rect: charRect, rowTop: charRect.top, rowBottom: charRect.bottom }
+        charItems.push(item)
 
-        // 候选点 1：字符左边缘（光标置于 i）
-        const costLeft = (dy * 200) + Math.abs(x - charRect.left)
-        if (costLeft < minCost) {
-          minCost = costLeft
-          bestNode = node
-          bestOffset = i
+        // 将同一视觉行（垂直方向重叠）的字符归并，共享整行的上下边界，防止同行小字号字符因字高较矮被误判为不在当前行
+        let matchedRow = rows.find(r => Math.min(r.bottom, charRect.bottom) > Math.max(r.top, charRect.top) - 2)
+        if (matchedRow) {
+          matchedRow.top = Math.min(matchedRow.top, charRect.top)
+          matchedRow.bottom = Math.max(matchedRow.bottom, charRect.bottom)
+          matchedRow.items.push(item)
+        } else {
+          rows.push({ top: charRect.top, bottom: charRect.bottom, items: [item] })
         }
+      }
+    }
 
-        // 候选点 2：字符右边缘（光标置于 i + 1）
-        const costRight = (dy * 200) + Math.abs(x - charRect.right)
-        if (costRight < minCost) {
-          minCost = costRight
-          bestNode = node
-          bestOffset = i + 1
-        }
+    for (const r of rows) {
+      for (const item of r.items) {
+        item.rowTop = r.top
+        item.rowBottom = r.bottom
+      }
+    }
+
+    let bestNode: Text | null = null
+    let bestOffset = 0
+    let minCost = Infinity
+
+    for (const item of charItems) {
+      const { node, index: i, rect: charRect, rowTop, rowBottom } = item
+      const inRow = y >= rowTop && y <= rowBottom
+      const dy = inRow ? 0 : Math.min(Math.abs(y - rowTop), Math.abs(y - rowBottom))
+
+      // 候选点 1：字符左边缘（光标置于 i）；在两字符交界处优先保留前一字符右边缘（i + 1），使光标落点归属前一字符
+      const costLeft = (dy * 200) + Math.abs(x - charRect.left)
+      if (costLeft < minCost - 0.5) {
+        minCost = costLeft
+        bestNode = node
+        bestOffset = i
+      }
+
+      // 候选点 2：字符右边缘（光标置于 i + 1）
+      const costRight = (dy * 200) + Math.abs(x - charRect.right)
+      if (costRight <= minCost + 0.5) {
+        if (costRight < minCost) minCost = costRight
+        bestNode = node
+        bestOffset = i + 1
       }
     }
 

package/src/composables/sidebar/useSidebarTextFormat.ts

@@ -16,6 +16,7 @@ import {
 } from '../../utils/listIndent'
 import { parseColor, hexToRgba } from './useSidebarShapeFormat'
 import { getFormatFromElement, getFormatFromSelection } from '../../utils/canvas/formatPainter'
+import { resolveEffectiveElementFontSize } from '../../utils/canvas/elementStyles'
 import { isEllipseShape } from '../../utils/line'
 import { defaultStyleRecipe } from '../presetThemes'
 import {
@@ -66,8 +67,23 @@ export function useSidebarTextFormat(
     }
   })
 
+  let savedSidebarRange: Range | null = null
+
   const styleFontSize = computed({
-    get() { return getStyleVal('fontSize', '16px') },
+    get() {
+      selectionTrigger.value
+      const el = selectedElement.value as any
+      if (el) {
+        const container = typeof document !== 'undefined' ? document.getElementById(`editable-${el.id}`) : null
+        const isEditing = Boolean(container && (container.getAttribute('contenteditable') === 'true' || container === document.activeElement || container.contains(document.activeElement)))
+        return resolveEffectiveElementFontSize(el, {
+          isEditing,
+          savedRange: isEditing ? savedSidebarRange : null,
+          fallback: '16px'
+        })
+      }
+      return getStyleVal('fontSize', '16px')
+    },
     set(val: string) { setStyleVal('fontSize', val) }
   })
 
@@ -597,7 +613,44 @@ export function useSidebarTextFormat(
         return
       }
     }
+
+    const el = selectedElement.value as any
+    const sel = typeof window !== 'undefined' ? window.getSelection() : null
+    const container = el ? document.getElementById(`editable-${el.id}`) : null
+    if (container && sel) {
+      const activeRange = (sel.rangeCount > 0 && container.contains(sel.getRangeAt(0).commonAncestorContainer))
+        ? sel.getRangeAt(0)
+        : (savedSidebarRange && container.contains(savedSidebarRange.commonAncestorContainer) ? savedSidebarRange : null)
+      if (activeRange && !activeRange.collapsed) {
+        sel.removeAllRanges()
+        sel.addRange(activeRange)
+        document.execCommand('fontSize', false, '7')
+        const fontElements = container.querySelectorAll('font[size="7"]')
+        if (fontElements.length > 0) {
+          fontElements.forEach((font: any) => {
+            const span = document.createElement('span')
+            span.style.fontSize = formattedSize
+            span.innerHTML = font.innerHTML
+            span.querySelectorAll('*').forEach((child: any) => {
+              if (child.style && child.style.fontSize) {
+                child.style.fontSize = ''
+              }
+              if (child.tagName === 'FONT') {
+                child.removeAttribute('size')
+              }
+            })
+            font.parentNode.replaceChild(span, font)
+          })
+          syncContainerContentToElement(el)
+          selectionTrigger.value++
+          addHistorySnapshot()
+          return
+        }
+      }
+    }
+
     setStyleVal('fontSize', formattedSize)
+    selectionTrigger.value++
   }
 
   function syncContainerContentToElement(el: any) {
@@ -739,9 +792,27 @@ export function useSidebarTextFormat(
   // Selection trigger for tracking lists and caret
   const selectionTrigger = ref(0)
   const handleSelectionChange = () => {
+    if (typeof window !== 'undefined') {
+      const sel = window.getSelection()
+      if (sel && sel.rangeCount > 0) {
+        const range = sel.getRangeAt(0)
+        let node: Node | null = range.commonAncestorContainer
+        if (node && node.nodeType !== Node.ELEMENT_NODE) {
+          node = node.parentNode
+        }
+        if (node && (node as HTMLElement).closest && (node as HTMLElement).closest('[id^="editable-"]')) {
+          savedSidebarRange = range.cloneRange()
+        }
+      }
+    }
     selectionTrigger.value++
   }
 
+  watch(() => selectedElementId.value, () => {
+    savedSidebarRange = null
+    selectionTrigger.value++
+  })
+
   onMounted(() => {
     document.addEventListener('selectionchange', handleSelectionChange)
   })