jvs-ppt-ui 0.0.14 → 0.0.16

package/src/components/CanvasArea.vue

@@ -101,7 +101,8 @@ const effectiveMasterElements = computed(() => {
   if (isMasterEditingView?.value) {
     if (activeLayoutId?.value) {
       const master = slideMasters?.value?.find((m: any) => m.id === activeMasterId.value) || slideMasters?.value?.[0]
-      return (master?.elements || []).filter((el: any) => !isPlaceholderElement(el))
+      const layoutElIds = new Set((activeSlide?.value?.elements || []).map((e: any) => e.id))
+      return (master?.elements || []).filter((el: any) => !isPlaceholderElement(el) && !layoutElIds.has(el.id))
     }
     return []
   }
@@ -818,7 +819,8 @@ const {
     updateLineGeometry(el, start, end, absControls, allElements, parentGroupDim)
   },
   selectedElementWidth,
-  selectedElementHeight
+  selectedElementHeight,
+  activeSlideVersion
 })
 
 const isInteracting = computed(() => {
@@ -1026,9 +1028,6 @@ const getOverlayHeight = (el: any) => {
   if (isDragging.value && el?.id && activeDragDimensions.has(el.id)) {
     return `${activeDragDimensions.get(el.id)!.height}px`
   }
-  if (el.id === selectedElementId.value && !isResizing.value && selectedElementHeight.value && selectedElementHeight.value !== '0px') {
-    return selectedElementHeight.value
-  }
   // For table elements: check DOM rendered table height if available
   if (el.type === 'text' && el.content?.includes('<table') && !isDragging.value) {
     const container = document.getElementById(`editable-${el.id}`) || document.getElementById(`canvas-el-${el.id}`)
@@ -1185,6 +1184,29 @@ const getFloatingQuickToolbarStyle = (el: any) => {
 
 let selectedElementResizeObserver: ResizeObserver | null = null
 
+function syncSelectedElementDimensionsFromDom(id: string | null) {
+  if (!id) {
+    selectedElementWidth.value = '0px'
+    selectedElementHeight.value = '0px'
+    return null
+  }
+  const dom = document.getElementById(`canvas-el-${id}`)
+  if (!dom) {
+    selectedElementWidth.value = '0px'
+    selectedElementHeight.value = '0px'
+    return null
+  }
+  const tableEl = dom.querySelector('table')
+  const editableDom = document.getElementById(`editable-${id}`)
+  const selEl = activeSlide.value?.elements.find((x: any) => x.id === id)
+  const isVertical = selEl && (selEl.style?.writingMode === 'vertical-rl' || selEl.style?.writingMode === 'vertical-lr')
+  const initialW = isVertical && editableDom ? Math.max(editableDom.scrollWidth, dom.offsetWidth) : dom.offsetWidth
+  const initialH = dom.offsetHeight > 0 ? dom.offsetHeight : (tableEl && tableEl.offsetHeight > 0 ? tableEl.offsetHeight : 0)
+  selectedElementWidth.value = `${initialW}px`
+  selectedElementHeight.value = `${initialH}px`
+  return { dom, tableEl, editableDom, isVertical }
+}
+
 function observeSelectedElement() {
   if (selectedElementResizeObserver) {
     selectedElementResizeObserver.disconnect()
@@ -1197,6 +1219,9 @@ function observeSelectedElement() {
     return
   }
 
+  // 同步测量一次：若 DOM 已存在（如未选中状态下直接按住拖拽选中），立即更新尺寸，避免 0px 或残留上一个选中元素的尺寸
+  syncSelectedElementDimensionsFromDom(selectedElementId.value)
+
   nextTick(() => {
     const dom = document.getElementById(`canvas-el-${selectedElementId.value}`)
     if (dom) {
@@ -2167,9 +2192,14 @@ function isPlaceholderElement(el: any): boolean {
   const isMarkedAsPlaceholder = Boolean(
     el.isPlaceholder ||
     el.placeholder ||
-    (el.id && typeof el.id === 'string' && el.id.startsWith('ph-')) ||
+    (el.id && typeof el.id === 'string' && (el.id.startsWith('ph-') || el.id.startsWith('ph_'))) ||
     (el.name && typeof el.name === 'string' && el.name.includes('占位符'))
   )
+  if (isMarkedAsPlaceholder) {
+    if (isMasterEditingView?.value || el.isPlaceholder || el.placeholder || (el.id && (el.id.startsWith('ph-') || el.id.startsWith('ph_')))) {
+      return true
+    }
+  }
   if (el.type === 'text') {
     const text = (el.content || '').replace(/<[^>]*>/g, '').replace(/&nbsp;/g, ' ').trim()
     if (!text) {
@@ -2212,6 +2242,7 @@ function isPlaceholderElement(el: any): boolean {
       '编辑文本样式',
       '页脚 / 日期文本',
       '页脚占位符',
+      '页脚区',
       '页码占位符',
       '日期占位符',
       '<#>',
@@ -2485,8 +2516,10 @@ function handleCanvasDblClick(e: MouseEvent) {
   const pctY = (localY / logicalHeight.value) * 100
 
   const recipe = getActiveSlideThemeRecipe(activeSlide.value)
-  const textColor = recipe.textStyles?.title?.color || recipe.styleColors?.[0] || globalFontColor.value || recipe.textStyles?.normalText?.color || '#0f172a'
-  const textFont = recipe.styleFonts?.bodyFont || recipe.styleFonts?.titleFont || globalFontFamily.value || 'PingFang SC'
+  const textColor = globalFontColor.value || recipe.textStyles?.title?.color || recipe.styleColors?.[0] || recipe.textStyles?.normalText?.color || '#0f172a'
+  const textFont = (globalFontFamily.value && globalFontFamily.value !== '默认字体')
+    ? globalFontFamily.value
+    : (recipe.styleFonts?.bodyFont || recipe.styleFonts?.titleFont || 'SourceHanSansCN')
 
   const newTextEl = {
     id: 'text-' + Date.now().toString() + Math.random().toString(36).substring(2, 7),
@@ -2682,10 +2715,12 @@ function handleCanvasMouseDown(e: MouseEvent) {
     const typeConf = TEXT_TYPE_CONFIGS[textType] || TEXT_TYPE_CONFIGS.normalText
     const textCfg = recipe.textStyles?.[textType] || defaultStyleRecipe.textStyles[textType] || defaultStyleRecipe.textStyles.normalText
     const isHeading = textType === 'title' || textType === 'headline'
-    const textFont = textCfg.fontFamily || (isHeading
-      ? (recipe.styleFonts?.titleFont && recipe.styleFonts.titleFont !== '默认字体' ? recipe.styleFonts.titleFont : 'SourceHanSansCN')
-      : (recipe.styleFonts?.bodyFont && recipe.styleFonts.bodyFont !== '默认字体' ? recipe.styleFonts.bodyFont : (globalFontFamily.value && globalFontFamily.value !== '默认字体' ? globalFontFamily.value : 'SourceHanSansCN')))
-    const textColor = textCfg.color || (textType === 'smallText' ? '#64748b' : (isHeading ? (recipe.textStyles?.title?.color || '#0f172a') : (recipe.textStyles?.normalText?.color || '#334155')))
+    const textFont = (globalFontFamily.value && globalFontFamily.value !== '默认字体')
+      ? globalFontFamily.value
+      : (textCfg.fontFamily || (isHeading
+        ? (recipe.styleFonts?.titleFont && recipe.styleFonts.titleFont !== '默认字体' ? recipe.styleFonts.titleFont : 'SourceHanSansCN')
+        : (recipe.styleFonts?.bodyFont && recipe.styleFonts.bodyFont !== '默认字体' ? recipe.styleFonts.bodyFont : 'SourceHanSansCN')))
+    const textColor = globalFontColor.value || textCfg.color || (textType === 'smallText' ? '#64748b' : (isHeading ? (recipe.textStyles?.title?.color || '#0f172a') : (recipe.textStyles?.normalText?.color || '#334155')))
     const fontSize = `${textCfg.fontSize || typeConf.defaultFontSize}px`
     const fontWeight = textCfg.fontWeight || typeConf.defaultFontWeight
     const lineHeight = textCfg.lineHeight || typeConf.defaultLineHeight
@@ -2729,10 +2764,12 @@ function handleCanvasMouseDown(e: MouseEvent) {
     const typeConf = TEXT_TYPE_CONFIGS[textType] || TEXT_TYPE_CONFIGS.normalText
     const textCfg = recipe.textStyles?.[textType] || defaultStyleRecipe.textStyles[textType] || defaultStyleRecipe.textStyles.normalText
     const isHeading = textType === 'title' || textType === 'headline'
-    const textFont = textCfg.fontFamily || (isHeading
-      ? (recipe.styleFonts?.titleFont && recipe.styleFonts.titleFont !== '默认字体' ? recipe.styleFonts.titleFont : 'SourceHanSansCN')
-      : (recipe.styleFonts?.bodyFont && recipe.styleFonts.bodyFont !== '默认字体' ? recipe.styleFonts.bodyFont : (globalFontFamily.value && globalFontFamily.value !== '默认字体' ? globalFontFamily.value : 'SourceHanSansCN')))
-    const textColor = textCfg.color || (textType === 'smallText' ? '#64748b' : (isHeading ? (recipe.textStyles?.title?.color || '#0f172a') : (recipe.textStyles?.normalText?.color || '#334155')))
+    const textFont = (globalFontFamily.value && globalFontFamily.value !== '默认字体')
+      ? globalFontFamily.value
+      : (textCfg.fontFamily || (isHeading
+        ? (recipe.styleFonts?.titleFont && recipe.styleFonts.titleFont !== '默认字体' ? recipe.styleFonts.titleFont : 'SourceHanSansCN')
+        : (recipe.styleFonts?.bodyFont && recipe.styleFonts.bodyFont !== '默认字体' ? recipe.styleFonts.bodyFont : 'SourceHanSansCN')))
+    const textColor = globalFontColor.value || textCfg.color || (textType === 'smallText' ? '#64748b' : (isHeading ? (recipe.textStyles?.title?.color || '#0f172a') : (recipe.textStyles?.normalText?.color || '#334155')))
     const fontSize = `${textCfg.fontSize || typeConf.defaultFontSize}px`
     const fontWeight = textCfg.fontWeight || typeConf.defaultFontWeight
     const lineHeight = textCfg.lineHeight || typeConf.defaultLineHeight
@@ -2775,9 +2812,11 @@ function handleCanvasMouseDown(e: MouseEvent) {
     const shapeFill = recipe.shape?.fillColor || (recipe.styleColors && recipe.styleColors[0]) || '#2563eb'
     const shapeBorder = recipe.shape?.borderColor || (recipe.styleColors && recipe.styleColors[1]) || '#1d4ed8'
     const shapeTextCol = recipe.shape?.textColor || '#ffffff'
-    const shapeFont = (recipe.styleFonts?.bodyFont && recipe.styleFonts.bodyFont !== '默认字体')
-      ? recipe.styleFonts.bodyFont
-      : 'SourceHanSansCN'
+    const shapeFont = (globalFontFamily.value && globalFontFamily.value !== '默认字体')
+      ? globalFontFamily.value
+      : ((recipe.styleFonts?.bodyFont && recipe.styleFonts.bodyFont !== '默认字体')
+        ? recipe.styleFonts.bodyFont
+        : 'SourceHanSansCN')
 
     style = {
       top: `${creationStartPctY.toFixed(2)}%`,
@@ -2816,6 +2855,7 @@ function handleCanvasMouseDown(e: MouseEvent) {
       borderWidth: '2px',
       borderStyle: 'solid',
       textColor: shapeTextCol,
+      fontFamily: shapeFont,
       viewBox: pendingShapeViewBox.value,
       pathFormula,
       keypoints
@@ -3579,10 +3619,14 @@ function handleElementMouseDown(e: MouseEvent, el: any) {
     return
   }
 
-  // 核心保护：若当前元素正在进行文字编辑，且鼠标按在编辑文本区域内，放行浏览器原生光标定位与拖动划词选择，绝不触发元素拖动
+  // 核心保护：若当前元素正在进行文字编辑，且鼠标按在实际文字字符上（或形状编辑区域内），放行浏览器原生光标定位与拖动划词选择；若按在文本框空白区域则允许拖动文本框
   if (isEditingText.value && (selectedElementId.value === el.id || editingElementId.value === el.id)) {
     const target = e.target as HTMLElement
-    if (target && (target.closest(`[id^="editable-${el.id}"]`) || target.closest('.shape-text-overlay-wrapper') || el.type === 'shape')) {
+    if (el.type === 'text' && !el.latex && !el.content?.includes('<table')) {
+      if (isClickOnTextCharacters(e, `editable-${el.id}`)) {
+        return
+      }
+    } else if (target && (target.closest(`[id^="editable-${el.id}"]`) || target.closest('.shape-text-overlay-wrapper') || el.type === 'shape')) {
       return
     }
   }
@@ -3782,15 +3826,26 @@ function startChildDrag(e: MouseEvent, child: any, parentGroup: any) {
   if (isReadonly.value) return
   const childContainerEl = document.getElementById(`editable-${child.id}`)
   const childCanvasElDom = document.getElementById(`canvas-el-${child.id}`)
-  const isChildClickInside = (childContainerEl && (childContainerEl === e.target || childContainerEl.contains(e.target as Node))) ||
-    (childCanvasElDom && (childCanvasElDom === e.target || childCanvasElDom.contains(e.target as Node)))
+  const isChildClickInside = child.type === 'text' && !child.latex && !child.content?.includes('<table')
+    ? isClickOnTextCharacters(e, `editable-${child.id}`)
+    : ((childContainerEl && (childContainerEl === e.target || childContainerEl.contains(e.target as Node))) ||
+      (childCanvasElDom && (childCanvasElDom === e.target || childCanvasElDom.contains(e.target as Node))))
 
   if (isEditingText.value && selectedElementId.value === child.id && isChildClickInside) {
     return
   }
 
+  if (child.type === 'text' && !child.latex && !child.content?.includes('<table') && isChildClickInside && !e.ctrlKey && !e.shiftKey) {
+    selectedElementId.value = child.id
+    selectedElementIds.value = [child.id]
+    if (!isEditingText.value) {
+      startEditingTextElement(child.id, e)
+    }
+    return
+  }
+
   if (isEditingText.value && !isChildClickInside) {
-    checkAndExitEditText(undefined, true)
+    checkAndExitEditText(child, true)
   }
   e.preventDefault()
   pauseHistory.value = true
@@ -3982,15 +4037,17 @@ function handleChildMouseDown(e: MouseEvent, child: any, parentGroup: any) {
   if (activeTool.value) return
   const childContainerEl = document.getElementById(`editable-${child.id}`)
   const childCanvasElDom = document.getElementById(`canvas-el-${child.id}`)
-  const isChildClickInside = (childContainerEl && (childContainerEl === e.target || childContainerEl.contains(e.target as Node))) ||
-    (childCanvasElDom && (childCanvasElDom === e.target || childCanvasElDom.contains(e.target as Node)))
+  const isChildClickInside = child.type === 'text' && !child.latex && !child.content?.includes('<table')
+    ? isClickOnTextCharacters(e, `editable-${child.id}`)
+    : ((childContainerEl && (childContainerEl === e.target || childContainerEl.contains(e.target as Node))) ||
+      (childCanvasElDom && (childCanvasElDom === e.target || childCanvasElDom.contains(e.target as Node))))
 
   if (isEditingText.value && selectedElementId.value === child.id && isChildClickInside) {
     return
   }
 
   if (isEditingText.value && !isChildClickInside) {
-    checkAndExitEditText(undefined, true)
+    checkAndExitEditText(child, true)
   }
   e.stopPropagation()
   if (isReadonly.value) return
@@ -4087,6 +4144,9 @@ function handleChildClick(e: MouseEvent, child: any, parentGroup: any) {
     } else {
       selectedElementId.value = child.id
       selectedElementIds.value = [child.id]
+      if (child.type === 'text' && !child.content?.includes('<table') && !child.latex && isClickOnTextCharacters(e, `editable-${child.id}`)) {
+        startEditingTextElement(child.id, e)
+      }
     }
   }
 }
@@ -4158,7 +4218,7 @@ function handleElementClick(e: MouseEvent, elId: string) {
     selectElement(elId, e)
   }
 
-  // Check if they clicked the actual text content rather than the draggable border handles
+  // Check if they clicked the actual text content rather than blank areas or draggable border handles
   const target = e.target as HTMLElement
   const el = activeSlide.value?.elements.find((x: any) => x.id === elId)
   if (el) {
@@ -4173,9 +4233,12 @@ function handleElementClick(e: MouseEvent, elId: string) {
     const isEmptyText = !textVal
     const isPlaceholder = isPlaceholderElement(el)
     const isClickingTextContent = target && (
-      (target.closest('.shape-text-overlay') && (isEmptyText || isPlaceholder || isClickOnTextCharacters(e, `editable-${el.id}`))) ||
-      (target.closest('[id^="editable-"]') && !target.closest('.text-edit-drag-helper') && (isEmptyText || isPlaceholder || isClickOnTextCharacters(e, `editable-${el.id}`))) ||
-      (isPlaceholder && target.closest('.canvas-element') && !target.closest('.text-edit-drag-helper'))
+      el.type === 'text'
+        ? (!target.closest('.text-edit-drag-helper') && isClickOnTextCharacters(e, `editable-${el.id}`))
+        : (
+          (target.closest('.shape-text-overlay') && (isEmptyText || isPlaceholder || isClickOnTextCharacters(e, `editable-${el.id}`))) ||
+          (isPlaceholder && target.closest('.canvas-element') && !target.closest('.text-edit-drag-helper'))
+        )
     )
 
     if (isClickingTextContent && (!isEditingText.value || selectedElementId.value !== el.id) && !e.ctrlKey && !e.shiftKey) {
@@ -4271,16 +4334,26 @@ function getElementWidthHeight(el: any): { width: number; height: number } {
   // 关键：拖拽期间绝不查询 DOM，杜绝强制重排
   const dom = isDragging.value ? null : (document.getElementById(`canvas-el-${el.id}`) || document.getElementById(`editable-${el.id}`))
 
+  let usedSelectedWidth = false
+  let usedSelectedHeight = false
   if (el.id === selectedElementId.value && !isResizing.value && el.type !== 'group') {
     if (selectedElementWidth.value && selectedElementWidth.value !== '0px') {
       const parsedW = parseFloat(selectedElementWidth.value)
-      if (!isNaN(parsedW) && parsedW > 0) width = parsedW
+      if (!isNaN(parsedW) && parsedW > 0) {
+        width = parsedW
+        usedSelectedWidth = true
+      }
     }
     if (selectedElementHeight.value && selectedElementHeight.value !== '0px') {
       const parsedH = parseFloat(selectedElementHeight.value)
-      if (!isNaN(parsedH) && parsedH > 0) height = parsedH
+      if (!isNaN(parsedH) && parsedH > 0) {
+        height = parsedH
+        usedSelectedHeight = true
+      }
     }
-  } else {
+  }
+
+  if (!usedSelectedWidth) {
     if (isWidthAuto && dom) {
       const isVertical = el.type === 'text' && (el.style?.writingMode === 'vertical-rl' || el.style?.writingMode === 'vertical-lr')
       const editableDom = document.getElementById(`editable-${el.id}`)
@@ -4292,7 +4365,9 @@ function getElementWidthHeight(el: any): { width: number; height: number } {
         width = parseFloat(wStr) || 200
       }
     }
+  }
 
+  if (!usedSelectedHeight) {
     if (isHeightAuto && dom) {
       height = dom.offsetHeight
     } else if (el.style?.height !== undefined && el.style.height !== 'auto') {
@@ -4304,6 +4379,8 @@ function getElementWidthHeight(el: any): { width: number; height: number } {
     } else if (el.type === 'text') {
       if (dom) {
         height = dom.offsetHeight
+      } else if (typeof el.height === 'number' && el.height > 0) {
+        height = el.height
       } else {
         height = 40
       }
@@ -4460,59 +4537,92 @@ function isClickOnTextCharacters(e: MouseEvent, containerId: string): boolean {
   if (!container) return false
 
   const target = e.target as HTMLElement
-  if (target && container.contains(target) && !target.closest('.text-edit-drag-helper')) {
-    return true
+  if (target && target.closest('.text-edit-drag-helper')) {
+    return false
   }
 
-  if (typeof (document as any).caretRangeFromPoint === 'function') {
-    try {
-      const range = (document as any).caretRangeFromPoint(e.clientX, e.clientY)
-      if (range && range.startContainer && container.contains(range.startContainer)) {
+  const x = e.clientX
+  const y = e.clientY
+  const tolerance = 2
+
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, null)
+  const range = document.createRange()
+  let node: Node | null
+  while ((node = walker.nextNode())) {
+    const text = node.textContent || ''
+    if (!text.replace(/[\r\n\u200B]/g, '').length) continue
+    range.selectNodeContents(node)
+    const rects = range.getClientRects()
+    for (let i = 0; i < rects.length; i++) {
+      const rect = rects[i]
+      if (rect.width <= 0 || rect.height <= 0) continue
+      if (
+        x >= rect.left - tolerance &&
+        x <= rect.right + tolerance &&
+        y >= rect.top - tolerance &&
+        y <= rect.bottom + tolerance
+      ) {
         return true
       }
-    } catch (_) {}
+    }
+  }
+
+  // 当处于文本编辑状态时，若存在空行（<br>），允许在空行光标位置附近点击定位，其余空白区域保持可拖拽
+  if (isEditingText.value) {
+    const brs = container.querySelectorAll('br')
+    for (let i = 0; i < brs.length; i++) {
+      const rect = brs[i].getBoundingClientRect()
+      if (rect.height > 0 && y >= rect.top - tolerance && y <= rect.bottom + tolerance) {
+        if (x >= rect.left - 4 && x <= rect.left + Math.max(rect.width, 8) + 4) {
+          return true
+        }
+      }
+    }
   }
 
   return false
 }
 
 function handleTextMouseMove(e: MouseEvent, el: any) {
-  if (isDragging.value || isCanvasDragging.value) return
+  if (isReadonly.value || isDragging.value || isCanvasDragging.value) return
   if (el.latex || el.content?.includes('<table')) return
   const containerId = `editable-${el.id}`
   const container = document.getElementById(containerId)
-  if (isEditingText.value && (selectedElementId.value === el.id || editingElementId?.value === el.id)) {
-    if (container) {
-      container.style.cursor = 'text'
-    }
-    return
-  }
+  const canvasElDom = document.getElementById(`canvas-el-${el.id}`)
   if (!container) return
 
-  const textVal = el.type === 'shape'
-    ? (el.text ? String(el.text).replace(/<[^>]*>/g, '').trim() : '')
-    : (el.content ? String(el.content).replace(/<[^>]*>/g, '').trim() : '')
-  const isEmptyText = !textVal
-  const isPlaceholder = isPlaceholderElement(el)
-
-  if (isEmptyText || isPlaceholder) {
-    container.style.cursor = 'text'
-    return
+  if (el.type === 'shape') {
+    if (isEditingText.value && (selectedElementId.value === el.id || editingElementId?.value === el.id)) {
+      container.style.cursor = 'text'
+      return
+    }
+    const textVal = el.text ? String(el.text).replace(/<[^>]*>/g, '').trim() : ''
+    const isEmptyText = !textVal
+    const isPlaceholder = isPlaceholderElement(el)
+    if (isEmptyText || isPlaceholder) {
+      container.style.cursor = 'text'
+      return
+    }
   }
 
   const isOverText = isClickOnTextCharacters(e, containerId)
-  if (isOverText) {
-    container.style.cursor = 'text'
-  } else {
-    container.style.cursor = 'move'
+  const nextCursor = isOverText ? 'text' : 'move'
+  container.style.cursor = nextCursor
+  if (canvasElDom) {
+    canvasElDom.style.cursor = nextCursor
   }
 }
 
 function handleTextMouseLeave(_e: MouseEvent, el: any) {
+  if (isReadonly.value) return
   const container = document.getElementById(`editable-${el.id}`)
-  if (container && (!isEditingText.value || selectedElementId.value !== el.id)) {
+  const canvasElDom = document.getElementById(`canvas-el-${el.id}`)
+  if (container) {
     container.style.cursor = 'move'
   }
+  if (canvasElDom) {
+    canvasElDom.style.cursor = 'move'
+  }
 }
 
 function startDrag(e: MouseEvent, el: any) {
@@ -4520,8 +4630,10 @@ function startDrag(e: MouseEvent, el: any) {
   const target = e.target as HTMLElement
   const container = document.getElementById(`editable-${el.id}`)
   const canvasElDom = document.getElementById(`canvas-el-${el.id}`)
-  const isInsideEditingContainer = (container && (container === target || container.contains(target))) ||
-    (canvasElDom && (canvasElDom === target || canvasElDom.contains(target)))
+  const isInsideEditingContainer = el.type === 'text' && !el.latex && !el.content?.includes('<table')
+    ? isClickOnTextCharacters(e, `editable-${el.id}`)
+    : ((container && (container === target || container.contains(target))) ||
+      (canvasElDom && (canvasElDom === target || canvasElDom.contains(target))))
   if (isEditingText.value && selectedElementId.value === el.id && isInsideEditingContainer) {
     return
   }
@@ -4532,11 +4644,14 @@ function startDrag(e: MouseEvent, el: any) {
   const isEmptyText = !textVal
   const isPlaceholder = isPlaceholderElement(el)
 
-  // Check if they clicked inside the actual text characters (or if it's an empty text box or placeholder)
+  // Check if they clicked inside the actual text characters
   const isClickingTextContent = target && (
-    (target.closest('.shape-text-overlay') && (isEmptyText || isPlaceholder || isClickOnTextCharacters(e, `editable-${el.id}`))) ||
-    (target.closest('[id^="editable-"]') && !target.closest('.text-edit-drag-helper') && (isEmptyText || isPlaceholder || isClickOnTextCharacters(e, `editable-${el.id}`))) ||
-    (isPlaceholder && target.closest('.canvas-element') && !target.closest('.text-edit-drag-helper'))
+    el.type === 'text'
+      ? (!target.closest('.text-edit-drag-helper') && isClickOnTextCharacters(e, `editable-${el.id}`))
+      : (
+        (target.closest('.shape-text-overlay') && (isEmptyText || isPlaceholder || isClickOnTextCharacters(e, `editable-${el.id}`))) ||
+        (isPlaceholder && target.closest('.canvas-element') && !target.closest('.text-edit-drag-helper'))
+      )
   )
 
   if (isClickingTextContent && !e.ctrlKey && !e.shiftKey) {
@@ -4562,7 +4677,7 @@ function startDrag(e: MouseEvent, el: any) {
   }
 
   e.preventDefault()
-  checkAndExitEditText(undefined, true)
+  checkAndExitEditText(el, true)
 
   dragOccurred = false
   hasClonedForCtrlDrag = false
@@ -4589,11 +4704,13 @@ function startDrag(e: MouseEvent, el: any) {
       selectedElementIds.value = [...selectedElementIds.value, ...targetIds.filter(x => !selectedElementIds.value.includes(x))]
       selectedElementId.value = el.id
     }
+    syncSelectedElementDimensionsFromDom(selectedElementId.value)
   } else {
     if (!targetIds.every(tid => selectedElementIds.value.includes(tid))) {
       selectedElementIds.value = targetIds
       selectedElementId.value = el.id
     }
+    syncSelectedElementDimensionsFromDom(selectedElementId.value)
   }
 
   // Abort dragging if any of the selected elements is locked
@@ -4602,11 +4719,7 @@ function startDrag(e: MouseEvent, el: any) {
     return
   }
 
-  pauseHistory.value = true
-  isCanvasDragging.value = true
-  isDragging.value = true
-
-  // 录入活跃拖拽尺寸缓存，拖拽全程绝不二次读 DOM
+  // 在开启 isDragging 锁闭 DOM 读取之前，先同步完成活跃拖拽尺寸缓存采集，确保初次按下拖拽时获取到真实 DOM 高度，拖拽全程绝不二次读 DOM
   activeDragDimensions.clear()
 
   // Get initial client coordinates
@@ -4699,6 +4812,10 @@ function startDrag(e: MouseEvent, el: any) {
     }
   })
 
+  pauseHistory.value = true
+  isCanvasDragging.value = true
+  isDragging.value = true
+
   window.addEventListener('mousemove', handleDrag, { capture: true, passive: false } as any)
   window.addEventListener('mouseup', stopDrag, { capture: true } as any)
   window.addEventListener('pointerup', stopDrag, { capture: true } as any)
@@ -5080,8 +5197,8 @@ const selectedElementKeypoints = computed(() => {
   const actualH = geom.height || 200
   const viewBoxW = el.viewBox?.[0] || 200
   const viewBoxH = el.viewBox?.[1] || 200
-  const w = viewBoxW
-  const h = viewBoxH
+  const w = el.pathFormula === 'roundRect' ? actualW : viewBoxW
+  const h = el.pathFormula === 'roundRect' ? actualH : viewBoxH
 
   return el.keypoints.map((keypoint: any, index: number) => {
     const getBaseSize = formulaObj.getBaseSize?.[index]
@@ -7646,11 +7763,13 @@ async function handleGlobalPaste(e: ClipboardEvent) {
       } else if (block.type === 'text') {
         const textHeightPercent = 8
         const topPos = currentTopPercent
+        const pasteColor = globalFontColor.value || '#000000'
+        const pasteFont = (globalFontFamily.value && globalFontFamily.value !== '默认字体') ? globalFontFamily.value : 'SourceHanSansCN'
 
         const newTextEl = {
           id: 'text-' + Date.now().toString() + Math.random().toString(36).substring(2, 7),
           type: 'text' as const,
-          content: `<div>${block.content.replace(/\r\n/g, '<br>').replace(/\n/g, '<br>')}</div>`,
+          content: `<div style="color:${pasteColor}; font-family:${pasteFont};">${block.content.replace(/\r\n/g, '<br>').replace(/\n/g, '<br>')}</div>`,
           style: {
             top: `${topPos.toFixed(2)}%`,
             left: `${leftPercent}%`,
@@ -7658,8 +7777,13 @@ async function handleGlobalPaste(e: ClipboardEvent) {
             height: 'auto',
             rotate: 0,
             fontSize: '18px',
-            color: '#000000'
-          }
+            color: pasteColor,
+            textColor: pasteColor,
+            fontFamily: pasteFont
+          },
+          color: pasteColor,
+          textColor: pasteColor,
+          fontFamily: pasteFont
         }
 
         currentTopPercent += textHeightPercent + gapPercent
@@ -8030,7 +8154,7 @@ async function handleGlobalPaste(e: ClipboardEvent) {
                       : (el.type === 'line'
                           ? `${el.style?.left}_${el.style?.top}_${el.style?.width}_${el.style?.height}_${el.start?.join(',')}_${el.end?.join(',')}_${el.broken?.join(',')}_${el.broken2?.join(',')}_${el.curve?.join(',')}`
                           : 'frozen'))
-                  : `${el.id}_${el.style?.left}_${el.style?.top}_${el.style?.width}_${el.style?.height}_${el.style?.rotate}_${el.type === 'line' ? `${el.start?.join(',')}_${el.end?.join(',')}_${el.broken?.join(',')}_${el.broken2?.join(',')}_${el.curve?.join(',')}_` : ''}${selectedElementIds.includes(el.id)}_${selectedElementId === el.id}_${isEditingText}_${activeTab}_${activeSlideVersion}`
+                  : `${el.id}_${el.style?.left}_${el.style?.top}_${el.style?.width}_${el.style?.height}_${el.style?.rotate}_${el.type === 'line' ? `${el.start?.join(',')}_${el.end?.join(',')}_${el.broken?.join(',')}_${el.broken2?.join(',')}_${el.curve?.join(',')}_` : ''}${selectedElementIds.includes(el.id)}_${selectedElementId === el.id}_${isEditingText}_${activeTab}_${activeSlideVersion}_${(el.style as any)?.reflection?.enabled}_${(el.style as any)?.reflection?.distance}_${(el.style as any)?.reflection?.size}_${(el.style as any)?.reflection?.blur}_${(el.style as any)?.reflection?.opacity}`
               ]"
               :class="{
                 selected: selectedElementIds.includes(el.id),
@@ -8047,7 +8171,7 @@ async function handleGlobalPaste(e: ClipboardEvent) {
                 width: (el.type === 'text' && !isMasterOrPlaceholder(el) && (el.autoFit?.type === 'shape' || el.style?.width === 'auto') && !el.content?.includes('<table') && !el.latex && (el.style?.writingMode === 'vertical-rl' || el.style?.writingMode === 'vertical-lr')) ? 'auto' : (el.style?.width || 'auto'),
                 height: (el.type === 'text' && !isMasterOrPlaceholder(el) && (el.autoFit?.type === 'shape' || el.style?.height === 'auto') && !el.content?.includes('<table') && !el.latex && el.style?.writingMode !== 'vertical-rl' && el.style?.writingMode !== 'vertical-lr') ? 'auto' : (el.style?.height || (el.height ? `${el.height}px` : 'auto')),
                 zIndex: 3,
-                cursor: isReadonly ? 'default' : ((isEditingText && (selectedElementId === el.id || editingElementId === el.id) && (el.type === 'text' || el.type === 'shape') && !el.latex && !el.content?.includes('<table')) ? 'text' : undefined),
+                cursor: isReadonly ? 'default' : ((isEditingText && (selectedElementId === el.id || editingElementId === el.id) && el.type === 'shape' && !el.latex && !el.content?.includes('<table')) ? 'text' : undefined),
                 transform: el.type === 'line' ? 'none' : `rotate(${el.style?.rotate || 0}deg) scale(${!isTextContainingElement(el) && ((el.style as any)?.flipH || el.flipH || el.isFlipH) ? -1 : 1}, ${!isTextContainingElement(el) && ((el.style as any)?.flipV || el.flipV || el.isFlipV) ? -1 : 1})`,
                 opacity: (el.style as any)?.opacity !== undefined ? (el.style as any)?.opacity : 1,
                 filter: getElementDropShadowFilter(el),
@@ -8236,6 +8360,8 @@ async function handleGlobalPaste(e: ClipboardEvent) {
                     @text-blur="(ev, child) => handleTextBlur(ev, child)"
                     @text-input="(ev, child) => handleInput(ev, child)"
                     @text-key-down="(ev, child) => handleTextKeyDown(ev, child)"
+                    @text-mouse-move="(ev, child) => handleTextMouseMove(ev, child)"
+                    @text-mouse-leave="(ev, child) => handleTextMouseLeave(ev, child)"
                     @start-editing="(id, ev) => { const target = findElementInSlide(id); if (target && target.type === 'shape') startEditingShapeText(target, ev); else startEditingTextElement(id, ev); }"
                     @formula-dbl-click="(child) => handleFormulaDblClick(child)"
                     @table-dbl-click="(ev, child) => handleTableDblClick(ev, child)"
@@ -8302,118 +8428,17 @@ async function handleGlobalPaste(e: ClipboardEvent) {
 
                   <!-- Shape element -->
                   <template v-else-if="el.type === 'shape'">
-                    <div v-if="el.content === 'circle'" :style="{
-                      width: '100%',
-                      height: '100%',
-                      backgroundColor: el.style.fill !== undefined ? el.style.fill : '#3b82f6',
-                      borderRadius: '50%',
-                      borderWidth: el.style.borderWidth || '2px',
-                      borderStyle: el.style.borderStyle || 'solid',
-                      borderColor: el.style.borderColor || '#2563eb',
-                      filter: (el.shadow && el.shadow.type === 'inner') ? `url(#shape-inner-shadow-${el.id})` : ''
-                    }"></div>
-                    <div v-else-if="el.content === 'triangle'" style="width: 100%; height: 100%; overflow: visible;">
-                      <svg viewBox="0 0 100 100" preserveAspectRatio="none"
-                        style="width: 100%; height: 100%; display: block; overflow: visible;"
-                        :style="{ filter: (el.shadow && el.shadow.type === 'inner') ? `url(#shape-inner-shadow-${el.id})` : '' }">
-                        <polygon points="50,0 0,100 100,100"
-                          :fill="el.style.fill !== undefined ? el.style.fill : '#f59e0b'"
-                          :stroke="el.style.borderColor || '#d97706'"
-                          :stroke-width="el.style.borderWidth ? parseInt(el.style.borderWidth) * 1.5 : 3"
-                          :stroke-dasharray="el.style.borderStyle === 'dashed' ? '5 5' : ''" />
-                      </svg>
-                    </div>
-                    <div v-else-if="el.content && (el.content.trim().startsWith('M') || el.content.trim().startsWith('m'))"
-                      style="width: 100%; height: 100%; overflow: visible;">
-                      <svg overflow="visible" style="width: 100%; height: 100%; display: block; overflow: visible;"
-                        :style="{ filter: (el.shadow && el.shadow.type === 'inner') ? `url(#shape-inner-shadow-${el.id})` : '' }">
-                        <g
-                          :transform="el.shapType === 'arc' ? `scale(${getElementWidthHeight(el).width / (el.viewBox ? el.viewBox[0] : 200)}, ${getElementWidthHeight(el).height / (el.viewBox ? el.viewBox[1] : 200)})` : `translate(${(el.style.borderWidth ? parseFloat(el.style.borderWidth) : 2) / 2}, ${(el.style.borderWidth ? parseFloat(el.style.borderWidth) : 2) / 2}) scale(${Math.max(0, getElementWidthHeight(el).width - (el.style.borderWidth ? parseFloat(el.style.borderWidth) : 2)) / (el.viewBox ? el.viewBox[0] : 200)}, ${Math.max(0, getElementWidthHeight(el).height - (el.style.borderWidth ? parseFloat(el.style.borderWidth) : 2)) / (el.viewBox ? el.viewBox[1] : 200)})`">
-                          <path vector-effect="non-scaling-stroke" :d="el.content"
-                            :fill="getElementFill(el) !== undefined ? getElementFill(el) : '#3b82f6'"
-                            :stroke="getElementBorderColor(el) || 'none'" :stroke-width="getElementBorderWidth(el)"
-                            :stroke-linecap="(el.style?.strokeLinecap || el.borderLineCap || el.lineCap || (el.shapType === 'arc' ? 'round' : undefined)) as any"
-                            :stroke-dasharray="el.style?.borderStyle === 'dashed' || (el as any).borderType === 'dashed' ? '5 5' : ''" />
-                        </g>
-                      </svg>
-                    </div>
-                    <div v-else :style="{
-                      width: '100%',
-                      height: '100%',
-                      backgroundColor: (getElementFill(el) !== undefined && getElementFill(el) !== 'none') ? getElementFill(el) : (getElementFill(el) === 'none' ? 'transparent' : '#10b981'),
-                      borderRadius: '4px',
-                      borderWidth: `${getElementBorderWidth(el)}px`,
-                      borderStyle: el.style?.borderStyle || (el as any).borderType || 'solid',
-                      borderColor: getElementBorderColor(el) || 'transparent',
-                      filter: (el.shadow && el.shadow.type === 'inner') ? `url(#shape-inner-shadow-${el.id})` : ''
-                    }"></div>
-
-                    <div class="shape-text-overlay-wrapper"
-                      style="position: absolute; display: flex; flex-direction: column; pointer-events: none; box-sizing: border-box;"
-                      :style="{
-                        left: isEllipseShape(el) ? '14.6%' : '0px',
-                        top: isEllipseShape(el) ? '14.6%' : '0px',
-                        width: isEllipseShape(el) ? '70.8%' : '100%',
-                        height: isEllipseShape(el) ? '70.8%' : '100%',
-                        justifyContent: (el.style.verticalAlign === 'top' || el.style.verticalAlign === 'up') ? 'flex-start' : ((el.style.verticalAlign === 'bottom' || el.style.verticalAlign === 'down') ? 'flex-end' : 'center'),
-                        padding: isEllipseShape(el) ? '0px' : (el.style.padding || '4.8px 9.6px 4.8px 9.6px')
-                      }">
-                      <div class="text-reflection-wrapper" style="position: relative; width: 100%; height: auto;">
-                        <div class="shape-text-overlay" :style="{
-                          display: 'block',
-                          width: '100%',
-                          maxWidth: '100%',
-                          outline: 'none',
-                          padding: '0px',
-                          boxSizing: 'content-box',
-                          overflow: 'wrap',
-                          wordBreak: 'break-word',
-                          pointerEvents: 'none',
-                          userSelect: 'none',
-                          color: el.style.textColor || el.style.color || (el.style.fill === '#ffffff' || el.style.fill === '#FFFFFF' ? '#475569' : '#ffffff'),
-                          fontFamily: el.style.fontFamily || 'inherit',
-                          fontSize: el.style.fontSize || '16px',
-                          fontWeight: el.style.fontWeight || ((getSafeShapeText(el).includes('<')) ? 'normal' : 'normal'),
-                          fontStyle: (el.style as any).fontStyle || 'normal',
-                          textDecoration: (el.style.textDecoration as any) || 'none',
-                          lineHeight: el.style.lineHeight || 1.35,
-                          textAlign: (el.style.textAlign as any) || 'center',
-                          whiteSpace: (el.style as any).whiteSpace || 'normal',
-                          '--paragraphSpace': `${(el.style as any).paragraphSpace === undefined ? 3 : (el.style as any).paragraphSpace}px`
-                        }" v-html="normalizeHtmlFontFamily(getSafeShapeText(el))">
-                        </div>
-
-                        <!-- Shape Text Reflection Clone -->
-                        <div v-if="(el.style as any).textReflection && (el.style as any).textReflection.enabled"
-                          class="text-element-reflection"
-                          style="position: absolute; left: 0; width: 100%; pointer-events: none; z-index: 1;" :style="{
-                            top: `calc(100% + ${(el.style as any).textReflection.distance !== undefined ? (el.style as any).textReflection.distance : 20}px - ${getReflectionLeadingCompensation(el)}px)`,
-                            transform: 'translateY(100%) scaleY(-1)',
-                            opacity: (100 - ((el.style as any).textReflection.opacity !== undefined ? (el.style as any).textReflection.opacity : 10)) / 100,
-                            filter: (el.style as any).textReflection.blur ? `blur(${(((el.style as any).textReflection.blur !== undefined ? (el.style as any).textReflection.blur : 0) * 1.33).toFixed(1)}px)` : 'none',
-                            ['-webkit-mask-image']: `linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) ${((el.style as any).textReflection.size !== undefined ? (el.style as any).textReflection.size : 8)}%, rgba(0,0,0,0) 100%)`,
-                            ['mask-image']: `linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) ${((el.style as any).textReflection.size !== undefined ? (el.style as any).textReflection.size : 8)}%, rgba(0,0,0,0) 100%)`,
-                            color: el.style.textColor || el.style.color || (el.style.fill === '#ffffff' || el.style.fill === '#FFFFFF' ? '#475569' : '#ffffff'),
-                            fontFamily: el.style.fontFamily || 'inherit',
-                            fontSize: el.style.fontSize || '16px',
-                            fontWeight: el.style.fontWeight || 'normal',
-                            fontStyle: (el.style as any).fontStyle || 'normal',
-                            textDecoration: (el.style.textDecoration as any) || 'none',
-                            ['-webkit-text-stroke']: getTextStrokeStyle(el),
-                            ['paint-order']: (el.style as any).enableTextStroke ? 'stroke fill' : 'normal',
-                            ['text-shadow']: (el.style as any).textShadow || 'none',
-                            lineHeight: el.style.lineHeight || 1.35,
-                            textAlign: (el.style.textAlign as any) || 'center',
-                            whiteSpace: (el.style as any).whiteSpace || 'normal',
-                            transformOrigin: 'top left',
-                            height: 'auto'
-                          }"
-                          v-html="el.style.textBackground && el.style.textBackground !== 'transparent'
-                            ? `<span style='background-color: ${el.style.textBackground}; display: inline;'>${normalizeHtmlFontFamily(getSafeShapeText(el))}</span>`
-                            : normalizeHtmlFontFamily(getSafeShapeText(el))">
-                        </div>
-                      </div>
-                    </div>
+                    <CanvasShapeElement
+                      :element="el"
+                      :active-slide="activeSlide"
+                      :is-reflection="true"
+                      :theme-recipe="getActiveSlideThemeRecipe(activeSlide)"
+                      :normalize-html-font-family="normalizeHtmlFontFamily"
+                      :get-text-stroke-style="getTextStrokeStyle"
+                      :get-element-text-shadow="getElementTextShadow"
+                      :get-reflection-leading-compensation="getReflectionLeadingCompensation"
+                      :is-image-placeholder="isImagePlaceholder"
+                    />
                   </template>
 
                   <!-- Image element -->