jvs-ppt-ui 0.0.16 → 0.0.18

package/src/components/canvas/elements/CanvasShapeElement.vue

@@ -1,882 +1,894 @@
-<script setup lang="ts">
-import { computed, ref, watch, onBeforeUnmount, nextTick } from 'vue'
-import {
-  getElementPattern,
-  isElementPatternTile,
-  getElementPatternTileSize,
-  getElementGradientConfig,
-  getElementGradientCss,
-  getSvgGradientCoords,
-  getElementFill,
-  hasElementFill,
-  hasElementBorder,
-  getElementBorderColor,
-  getElementBorderWidth,
-  getElementBorderGradientConfig,
-  hasElementBorderGradient,
-  getElementBorderGradientCss,
-  isSvgPathString,
-  getHexColorWithoutAlpha,
-  getAlphaFromColor
-} from '../../../utils/canvas/elementStyles'
-import { isEllipseShape } from '../../../utils/line'
-import { getFontVariantStyle } from '../../../configs/fonts'
-import { useSlides } from '../../../composables/useSlides'
-import { createTextSelectionOverlay, type TextSelectionOverlayHandle } from '../textSelectionOverlay'
-
-const { shapeFormatPainter, isReadonly } = useSlides()
-const isTextPaintActive = computed(() => !!(shapeFormatPainter.value && shapeFormatPainter.value.mode === 'text-range'))
-const svgIdKey = computed(() => props.isReflection ? `${props.element.id}-refl` : `${props.element.id}`)
-const isTextSelectable = computed(() => !props.isReflection && ((props.isEditingText && props.selectedElementId === props.element.id) || isTextPaintActive.value))
-
-function getEffectiveBorderWidth(el: any): number {
-  if (props.isImagePlaceholder && props.isImagePlaceholder(el) && el.style?.enableBorder !== true) return 0
-  if (el.style?.enableBorder === false) return 0
-  const w = getElementBorderWidth(el)
-  if (w > 0) return w
-  if (el.style?.borderColor || el.borderColor) return 1
-  return 0
-}
-
-function getShapePatternTransform(el: any, isTriangle = false): string | undefined {
-  if (!el || !isElementPatternTile(el)) return undefined
-  const { width, height } = getElementWidthHeight(el)
-  if (isTriangle) {
-    const sx = width > 0 ? 100 / width : 1
-    const sy = height > 0 ? 100 / height : 1
-    return `scale(${sx}, ${sy})`
-  }
-  const vbW = el.viewBox ? el.viewBox[0] : (width || 200)
-  const vbH = el.viewBox ? el.viewBox[1] : (height || 200)
-  const hasBorder = hasElementBorder(el)
-  const bw = hasBorder ? getEffectiveBorderWidth(el) : 0
-  const effW = bw > 0 ? Math.max(1, width - bw) : Math.max(1, width)
-  const effH = bw > 0 ? Math.max(1, height - bw) : Math.max(1, height)
-  return `scale(${vbW / effW}, ${vbH / effH})`
-}
-
-function getShapeSvgTransform(el: any): string | undefined {
-  if (!el) return undefined
-  const { width, height } = getElementWidthHeight(el)
-  const vbW = el.viewBox ? el.viewBox[0] : (width || 200)
-  const vbH = el.viewBox ? el.viewBox[1] : (height || 200)
-
-  if (el.shapType === 'arc') {
-    return `scale(${width / vbW}, ${height / vbH})`
-  }
-  if (isOpenLineShape(el)) {
-    return undefined
-  }
-
-  const hasBorder = hasElementBorder(el)
-  const bw = hasBorder ? getEffectiveBorderWidth(el) : 0
-
-  if (bw > 0) {
-    const scaleX = Math.max(0, width - bw) / vbW
-    const scaleY = Math.max(0, height - bw) / vbH
-    return `translate(${bw / 2}, ${bw / 2}) scale(${scaleX}, ${scaleY})`
-  }
-
-  const scaleX = width / vbW
-  const scaleY = height / vbH
-  return `scale(${scaleX}, ${scaleY})`
-}
-
-function getEffectiveBorderColor(el: any, fallback = '#10b981'): string {
-  if (props.isImagePlaceholder && props.isImagePlaceholder(el) && el.style?.enableBorder !== true) return 'transparent'
-  if (el.style?.enableBorder === false) return 'transparent'
-  if (hasElementBorderGradient(el)) return `url(#shape-border-gradient-${svgIdKey.value})`
-  return el.style?.borderColor || getElementBorderColor(el) || fallback
-}
-
-function isOpenLineShape(el: any): boolean {
-  if (!el) return false
-  const shapType = el.shapType || el.type
-  return shapType === 'arc' || shapType === 'straightConnector1' || shapType === 'line' || (typeof el.width === 'number' && el.width <= 0) || (typeof el.height === 'number' && el.height <= 0)
-}
-
-function getShapeVb(el: any): { w: number; h: number } {
-  if (!el) return { w: 200, h: 200 }
-  const { width, height } = getElementWidthHeight(el)
-  const w = el.viewBox ? el.viewBox[0] : (width || 200)
-  const h = el.viewBox ? el.viewBox[1] : (height || 200)
-  return { w, h }
-}
-
-function isRectShape(el: any): boolean {
-  if (!el) return false
-  if (el.shapType === 'rect' || el.shapType === 'roundRect') return true
-  if (el.content === 'rect') return true
-  if (el.pathFormula === 'roundRect') return true
-  if (el.title === '矩形' || el.title === '圆角矩形') return true
-  const raw = (el.path || el.content || '').trim().replace(/\s+/g, '').toUpperCase()
-  if (raw === 'M00L2000L200200L0200Z' || raw === 'M00H200V200H0Z') return true
-  if (raw.startsWith('M500L1500Q200020050L200150Q200200150200')) return true
-  if (/^M00L([0-9.]+)0L\1([0-9.]+)L0\2Z$/i.test(raw)) return true
-  if (/^M00H([0-9.]+)V([0-9.]+)H0Z$/i.test(raw)) return true
-  if ((el.style?.borderRadius && parseFloat(String(el.style.borderRadius)) > 0) || (el.radius && parseFloat(String(el.radius)) > 0)) {
-    if (raw.includes('L2000L200200L0200') || (raw.startsWith('M00L') && raw.endsWith('Z'))) return true
-  }
-  return false
-}
-
-function getRectRadiusInVb(el: any): { rx: number; ry: number } {
-  if (!el) return { rx: 0, ry: 0 }
-  const { width, height } = getElementWidthHeight(el)
-  let r = 0
-  const isRoundRect = el.pathFormula === 'roundRect' || el.shapType === 'roundRect' || el.title === '圆角矩形'
-  const rVal = el.style?.borderRadius !== undefined && el.style?.borderRadius !== null && el.style?.borderRadius !== ''
-    ? el.style.borderRadius
-    : el.radius
-
-  if (isRoundRect && Array.isArray(el.keypoints) && el.keypoints[0] !== undefined && el.keypoints[0] !== null) {
-    const kp = Number(el.keypoints[0])
-    if (!isNaN(kp)) {
-      r = Math.min(width, height) * Math.max(0, Math.min(0.5, kp))
-    }
-  } else if (isRoundRect && el.keypoints && typeof el.keypoints === 'object' && !Array.isArray(el.keypoints) && (el.keypoints as any).adj !== undefined) {
-    const adj = Number((el.keypoints as any).adj)
-    if (!isNaN(adj)) {
-      r = Math.min(width, height) * Math.max(0, Math.min(0.5, adj * 0.5))
-    }
-  } else if (rVal !== undefined && rVal !== null && rVal !== '') {
-    const parsed = parseFloat(String(rVal))
-    if (!isNaN(parsed)) r = parsed
-  } else if (isRoundRect) {
-    r = Math.min(width, height) * 0.125
-  }
-
-  if (r <= 0) return { rx: 0, ry: 0 }
-
-  const { w: vbW, h: vbH } = getShapeVb(el)
-
-  const maxR = Math.min(width, height) / 2
-  const clampedR = Math.min(r, maxR)
-
-  const hasBorder = hasElementBorder(el)
-  const bw = hasBorder ? getEffectiveBorderWidth(el) : 0
-  const effW = bw > 0 ? Math.max(1, width - bw) : width
-  const effH = bw > 0 ? Math.max(1, height - bw) : height
-
-  const rx = (clampedR * vbW) / effW
-  const ry = (clampedR * vbH) / effH
-
-  return { rx, ry }
-}
-
-const props = defineProps<{
-  element: any
-  activeSlide?: any
-  isSelected?: boolean
-  isEditingText?: boolean
-  selectedElementId?: string | null
-  themeRecipe?: any
-  normalizeHtmlFontFamily?: (html: string) => string
-  getTextStrokeStyle?: (el: any) => string
-  getElementTextShadow?: (el: any) => string
-  getReflectionLeadingCompensation?: (el: any) => number
-  isImagePlaceholder?: (el: any) => boolean
-  isReflection?: boolean
-  // 直接父盒子（组合）的像素尺寸，用于把 % 样式的宽高解析成 px。
-  // 由 CanvasGroupElement 传入；顶层元素不传，走 px 样式分支。
-  parentWidthPx?: number
-  parentHeightPx?: number
-}>()
-
-const emit = defineEmits<{
-  (e: 'textFocus'): void
-  (e: 'textBlur', ev: FocusEvent): void
-  (e: 'textInput', ev: Event): void
-  (e: 'textKeyDown', ev: KeyboardEvent): void
-  (e: 'startEditing', ev?: MouseEvent): void
-  (e: 'placeholderUpload', id: string): void
-  (e: 'mousemove', ev: MouseEvent): void
-  (e: 'mouseleave', ev: MouseEvent): void
-  (e: 'dblclick', ev: MouseEvent): void
-}>()
-
-// 编辑态：安装自绘选区高亮（原生 ::selection 几何跟随 CJK 字体度量，条顶空白过大）
-const shapeEditableRef = ref<HTMLElement | null>(null)
-const shapeTextHostRef = ref<HTMLElement | null>(null)
-let selOverlay: TextSelectionOverlayHandle | null = null
-
-const isVerticalWriting = computed(() => {
-  const wm = props.element.style?.writingMode
-  return wm === 'vertical-rl' || wm === 'vertical-lr'
-})
-
-watch([isTextSelectable, isVerticalWriting], ([selectable]) => {
-  nextTick(() => {
-    selOverlay?.destroy()
-    selOverlay = null
-    if (selectable && !isVerticalWriting.value) {
-      const ed = shapeEditableRef.value
-      const host = shapeTextHostRef.value
-      if (ed && host) selOverlay = createTextSelectionOverlay(ed, host)
-    }
-  })
-}, { immediate: true })
-
-onBeforeUnmount(() => {
-  selOverlay?.destroy()
-  selOverlay = null
-})
-
-function getElementWidthHeight(el: any): { width: number; height: number } {
-  if (!el || typeof el !== 'object') return { width: 200, height: 200 }
-
-  const wStr = el.style?.width !== undefined ? String(el.style.width).trim() : ''
-  const hStr = el.style?.height !== undefined ? String(el.style.height).trim() : ''
-
-  // 1. 如果有明确的 px 或非百分比数值（如 '120px', 120）
-  if (wStr && !wStr.endsWith('%') && wStr !== 'auto') {
-    const w = parseFloat(wStr)
-    const h = parseFloat(hStr)
-    if (!isNaN(w) && w > 0) {
-      return { width: w, height: (!isNaN(h) && h > 0) ? h : (typeof el.height === 'number' && el.height > 0 ? el.height : 200) }
-    }
-  }
-
-  // 2. 如果是 % 样式（组合内子元素）：相对直接父盒子的像素尺寸解析
-  if (wStr.endsWith('%')) {
-    const pct = parseFloat(wStr)
-    const pW = Number(props.parentWidthPx)
-    const pH = Number(props.parentHeightPx)
-
-    // 优先：若 props.parentWidthPx 经 props 链传入且有效
-    if (!isNaN(pct) && isFinite(pW) && pW > 0) {
-      const width = (pct / 100) * pW
-      let height = NaN
-      const hPct = parseFloat(hStr)
-      if (hStr.endsWith('%') && !isNaN(hPct) && isFinite(pH) && pH > 0) {
-        height = (hPct / 100) * pH
-      } else if (hStr && hStr !== 'auto' && !hStr.endsWith('%')) {
-        const hn = parseFloat(hStr)
-        if (!isNaN(hn) && hn > 0) height = hn
-      }
-      if (isNaN(height) && typeof el.height === 'number' && el.height > 0) height = el.height
-      if (isNaN(height) && isFinite(pH) && pH > 0) height = pH
-      if (!isNaN(width) && !isNaN(height)) return { width, height: height || 200 }
-    }
-
-    // 关键补救：如果 parentWidthPx 尚未就绪，但 el.width / el.height 本身存在确凿数字（组合时保存的原始像素）
-    if (typeof el.width === 'number' && el.width > 0 && typeof el.height === 'number' && el.height > 0) {
-      return { width: el.width, height: el.height }
-    }
-
-    // 回退到画布基准 1280x720 进行百分比换算（绝不直接使用 parseFloat('38.46%') 变成 38px）
-    if (!isNaN(pct)) {
-      const width = (pct / 100) * 1280
-      const hPct = parseFloat(hStr)
-      const height = (!isNaN(hPct) && hStr.endsWith('%')) ? (hPct / 100) * 720 : (typeof el.height === 'number' && el.height > 0 ? el.height : width)
-      return { width, height }
-    }
-  }
-
-  // 3. 元素自身有数值型 width / height 属性
-  if (typeof el.width === 'number' && el.width > 0 && typeof el.height === 'number' && el.height > 0) {
-    return { width: el.width, height: el.height }
-  }
-
-  // 4. DOM 测量兜底
-  if (typeof window !== 'undefined' && el.id) {
-    const dom = document.getElementById(`canvas-el-${el.id}`)
-    if (dom && dom.offsetWidth > 0 && dom.offsetHeight > 0) {
-      return { width: dom.offsetWidth, height: dom.offsetHeight }
-    }
-  }
-
-  // 5. 最终兜底：如果是 % 严禁直接 parseFloat 当作 px
-  let fallbackW = 200
-  let fallbackH = 200
-  if (wStr && !wStr.endsWith('%') && !isNaN(parseFloat(wStr))) fallbackW = parseFloat(wStr)
-  if (hStr && !hStr.endsWith('%') && !isNaN(parseFloat(hStr))) fallbackH = parseFloat(hStr)
-
-  return { width: fallbackW, height: fallbackH }
-}
-
-function getBevelShadingPaths(el: any) {
-  const vW = el.viewBox ? el.viewBox[0] : 200
-  const vH = el.viewBox ? el.viewBox[1] : 200
-  const val = el.keypoints?.[0] !== undefined ? el.keypoints[0] : 0.15
-  const d = Math.min(vW, vH) * val
-  return {
-    left: `M 0 0 L ${d} ${d} L ${d} ${vH - d} L 0 ${vH} Z`,
-    top: `M 0 0 L ${vW} 0 L ${vW - d} ${d} L ${d} ${d} Z`,
-    bottom: `M 0 ${vH} L ${vW} ${vH} L ${vW - d} ${vH - d} L ${d} ${vH - d} Z`,
-    right: `M ${vW} 0 L ${vW - d} ${d} L ${vW - d} ${vH - d} L ${vW} ${vH} Z`
-  }
-}
-
-function getCubeShadingPaths(el: any) {
-  const vW = el.viewBox ? el.viewBox[0] : 200
-  const vH = el.viewBox ? el.viewBox[1] : 200
-  const val = el.keypoints?.[0] !== undefined ? el.keypoints[0] : 0.25
-  const d = Math.min(vW, vH) * val
-  return {
-    top: `M 0 ${d} L ${d} 0 L ${vW} 0 L ${vW - d} ${d} Z`,
-    right: `M ${vW - d} ${d} L ${vW} 0 L ${vW} ${vH - d} L ${vW - d} ${vH} Z`
-  }
-}
-
-function getRawText(el: any): string {
-  let val = ''
-  if (typeof el.text === 'string') val = el.text
-  else if (el.text && typeof el.text === 'object') {
-    val = el.text.content || el.text.text || ''
-  }
-  if (isSvgPathString(val)) return ''
-  return val
-}
-
-function getImagePlaceholderFill(el: any): string {
-  const fill = getElementFill(el)
-  if (!fill || fill === '#f1f5f9' || fill === '#f8fafc') {
-    return '#d9dde3'
-  }
-  return fill
-}
-
-function getImagePlaceholderRadius(el: any): string {
-  const raw = el.style?.borderRadius !== undefined
-    ? (typeof el.style.borderRadius === 'number' ? `${el.style.borderRadius}px` : el.style.borderRadius)
-    : (el.radius ? `${el.radius}px` : '0px')
-  if (!raw || raw === '0px' || raw === '4px') {
-    return '12px'
-  }
-  return raw
-}
-
-function formatShapeHtml(el: any): string {
-  if (props.isImagePlaceholder && props.isImagePlaceholder(el)) {
-    return ''
-  }
-  const raw = getRawText(el)
-  const norm = props.normalizeHtmlFontFamily ? props.normalizeHtmlFontFamily(raw) : raw
-  if (el.style?.textBackground && el.style.textBackground !== 'transparent') {
-    if (!norm.includes('background-color')) {
-      return `<span style='background-color: ${el.style.textBackground}; display: inline;'>${norm}</span>`
-    }
-  }
-  return norm
-}
-</script>
-
-<template>
-  <div
-    class="element-content shape-element-content"
-    style="width: 100%; height: 100%; position: relative;"
-    @dblclick.stop.prevent="isReadonly ? null : (isImagePlaceholder && isImagePlaceholder(element) ? emit('placeholderUpload', element.id) : (isTextSelectable ? null : emit('startEditing', $event)))"
-  >
-    <!-- Circle Shape (with fill) -->
-    <div
-      v-if="(element.content === 'circle' || isEllipseShape(element) || element.shapType === 'ellipse' || element.style?.borderRadius === '50%') && hasElementFill(element)"
-      :style="{
-        width: '100%',
-        height: '100%',
-        backgroundColor: getElementPattern(element) ? 'transparent' : ((getElementGradientCss(element) || (getElementFill(element) !== undefined && getElementFill(element) !== 'none')) ? (getElementGradientCss(element) ? 'transparent' : getElementFill(element)) : (getElementFill(element) === 'none' ? 'transparent' : '#3b82f6')),
-        backgroundImage: getElementPattern(element) ? `url('${getElementPattern(element)}')` : (getElementGradientCss(element) || 'none'),
-        backgroundSize: getElementPattern(element) ? (isElementPatternTile(element) ? `${getElementPatternTileSize(element).w}px ${getElementPatternTileSize(element).h}px` : 'cover') : undefined,
-        backgroundPosition: getElementPattern(element) ? (isElementPatternTile(element) ? '0 0' : 'center center') : undefined,
-        backgroundRepeat: getElementPattern(element) ? (isElementPatternTile(element) ? 'repeat' : 'no-repeat') : undefined,
-        borderRadius: '50%',
-        borderWidth: (isImagePlaceholder && isImagePlaceholder(element) && element.style?.enableBorder !== true)
-          ? '0px'
-          : (element.style?.enableBorder === false ? '0px' : (element.style?.borderWidth || `${getElementBorderWidth(element)}px`)),
-        borderStyle: element.style?.borderStyle || 'solid',
-        borderColor: (isImagePlaceholder && isImagePlaceholder(element) && element.style?.enableBorder !== true)
-          ? 'transparent'
-          : (element.style?.enableBorder === false ? 'transparent' : (hasElementBorderGradient(element) ? 'transparent' : (element.style?.borderColor || getElementBorderColor(element) || 'transparent'))),
-        borderImage: hasElementBorderGradient(element) ? `${getElementBorderGradientCss(element)} 1` : undefined,
-        filter: (element.shadow && element.shadow.type === 'inner') ? `url(#shape-inner-shadow-${element.id})` : ''
-      }"
-    ></div>
-
-    <!-- Circle Shape (without fill) -->
-    <div
-      v-else-if="element.content === 'circle' || isEllipseShape(element) || element.shapType === 'ellipse' || element.style?.borderRadius === '50%'"
-      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: (element.shadow && element.shadow.type === 'inner') ? `url(#shape-inner-shadow-${element.id})` : '' }"
-      >
-        <defs v-if="getElementBorderGradientConfig(element)">
-          <radialGradient
-            v-if="getElementBorderGradientConfig(element)!.path && getElementBorderGradientConfig(element)!.path !== 'line'"
-            :id="`shape-border-gradient-${svgIdKey}`"
-            :cx="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.x * 100) : 50}%`"
-            :cy="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.y * 100) : 50}%`"
-            :r="getElementBorderGradientConfig(element)!.path === 'rect' ? '60%' : (getElementBorderGradientConfig(element)!.path === 'path' ? '70%' : '50%')"
-            :fx="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.x * 100) : 50}%`"
-            :fy="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.y * 100) : 50}%`"
-          >
-            <stop
-              v-for="(c, idx) in (getElementBorderGradientConfig(element)?.colors || [])"
-              :key="idx"
-              :offset="typeof c.pos === 'string' ? (c.pos.endsWith('%') ? c.pos : c.pos + '%') : `${c.pos}%`"
-              :stop-color="getHexColorWithoutAlpha(c.color)"
-              :stop-opacity="getAlphaFromColor(c.color)"
-            />
-          </radialGradient>
-          <linearGradient
-            v-else
-            :id="`shape-border-gradient-${svgIdKey}`"
-            :x1="getSvgGradientCoords(getElementBorderGradientConfig(element)).x1"
-            :y1="getSvgGradientCoords(getElementBorderGradientConfig(element)).y1"
-            :x2="getSvgGradientCoords(getElementBorderGradientConfig(element)).x2"
-            :y2="getSvgGradientCoords(getElementBorderGradientConfig(element)).y2"
-          >
-            <stop
-              v-for="(c, idx) in (getElementBorderGradientConfig(element)?.colors || [])"
-              :key="idx"
-              :offset="typeof c.pos === 'string' ? (c.pos.endsWith('%') ? c.pos : c.pos + '%') : `${c.pos}%`"
-              :stop-color="getHexColorWithoutAlpha(c.color)"
-              :stop-opacity="getAlphaFromColor(c.color)"
-            />
-          </linearGradient>
-        </defs>
-        <ellipse
-          cx="50"
-          cy="50"
-          rx="50"
-          ry="50"
-          fill="none"
-          :stroke="getEffectiveBorderColor(element, '#2563eb')"
-          :stroke-width="getEffectiveBorderWidth(element)"
-          :stroke-dasharray="element.style?.borderStyle === 'dashed' || element.borderType === 'dashed' ? '5 5' : (element.style?.borderStyle === 'dotted' ? '2 2' : '')"
-          vector-effect="non-scaling-stroke"
-        />
-      </svg>
-    </div>
-
-    <!-- Triangle Shape -->
-    <div v-else-if="element.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: (element.shadow && element.shadow.type === 'inner') ? `url(#shape-inner-shadow-${element.id})` : '' }"
-      >
-        <defs>
-          <pattern
-            v-if="getElementPattern(element)"
-            :id="`shape-pattern-${svgIdKey}`"
-            :width="isElementPatternTile(element) ? getElementPatternTileSize(element).w : '100%'"
-            :height="isElementPatternTile(element) ? getElementPatternTileSize(element).h : '100%'"
-            :patternUnits="isElementPatternTile(element) ? 'userSpaceOnUse' : 'objectBoundingBox'"
-            :patternContentUnits="isElementPatternTile(element) ? 'userSpaceOnUse' : 'objectBoundingBox'"
-            :patternTransform="getShapePatternTransform(element, true)"
-          >
-            <image
-              :href="getElementPattern(element)"
-              :width="isElementPatternTile(element) ? getElementPatternTileSize(element).w : 1"
-              :height="isElementPatternTile(element) ? getElementPatternTileSize(element).h : 1"
-              preserveAspectRatio="none"
-            />
-          </pattern>
-          <template v-if="getElementGradientConfig(element)">
-            <radialGradient
-              v-if="getElementGradientConfig(element)!.path && getElementGradientConfig(element)!.path !== 'line'"
-              :id="`shape-gradient-${svgIdKey}`"
-              :cx="`${getElementGradientConfig(element)!.center ? Math.round(getElementGradientConfig(element)!.center!.x * 100) : 50}%`"
-              :cy="`${getElementGradientConfig(element)!.center ? Math.round(getElementGradientConfig(element)!.center!.y * 100) : 50}%`"
-              :r="getElementGradientConfig(element)!.path === 'rect' ? '60%' : (getElementGradientConfig(element)!.path === 'path' ? '70%' : '50%')"
-              :fx="`${getElementGradientConfig(element)!.center ? Math.round(getElementGradientConfig(element)!.center!.x * 100) : 50}%`"
-              :fy="`${getElementGradientConfig(element)!.center ? Math.round(getElementGradientConfig(element)!.center!.y * 100) : 50}%`"
-            >
-              <stop
-                v-for="(c, idx) in (getElementGradientConfig(element)?.colors || [])"
-                :key="idx"
-                :offset="typeof c.pos === 'string' ? (c.pos.endsWith('%') ? c.pos : c.pos + '%') : `${c.pos}%`"
-                :stop-color="getHexColorWithoutAlpha(c.color)"
-                :stop-opacity="getAlphaFromColor(c.color)"
-              />
-            </radialGradient>
-            <linearGradient
-              v-else
-              :id="`shape-gradient-${svgIdKey}`"
-              :x1="getSvgGradientCoords(element).x1"
-              :y1="getSvgGradientCoords(element).y1"
-              :x2="getSvgGradientCoords(element).x2"
-              :y2="getSvgGradientCoords(element).y2"
-            >
-              <stop
-                v-for="(c, idx) in (getElementGradientConfig(element)?.colors || [])"
-                :key="idx"
-                :offset="typeof c.pos === 'string' ? (c.pos.endsWith('%') ? c.pos : c.pos + '%') : `${c.pos}%`"
-                :stop-color="getHexColorWithoutAlpha(c.color)"
-                :stop-opacity="getAlphaFromColor(c.color)"
-              />
-            </linearGradient>
-          </template>
-          <template v-if="getElementBorderGradientConfig(element)">
-            <radialGradient
-              v-if="getElementBorderGradientConfig(element)!.path && getElementBorderGradientConfig(element)!.path !== 'line'"
-              :id="`shape-border-gradient-${svgIdKey}`"
-              :cx="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.x * 100) : 50}%`"
-              :cy="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.y * 100) : 50}%`"
-              :r="getElementBorderGradientConfig(element)!.path === 'rect' ? '60%' : (getElementBorderGradientConfig(element)!.path === 'path' ? '70%' : '50%')"
-              :fx="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.x * 100) : 50}%`"
-              :fy="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.y * 100) : 50}%`"
-            >
-              <stop
-                v-for="(c, idx) in (getElementBorderGradientConfig(element)?.colors || [])"
-                :key="idx"
-                :offset="typeof c.pos === 'string' ? (c.pos.endsWith('%') ? c.pos : c.pos + '%') : `${c.pos}%`"
-                :stop-color="getHexColorWithoutAlpha(c.color)"
-                :stop-opacity="getAlphaFromColor(c.color)"
-              />
-            </radialGradient>
-            <linearGradient
-              v-else
-              :id="`shape-border-gradient-${svgIdKey}`"
-              :x1="getSvgGradientCoords(getElementBorderGradientConfig(element)).x1"
-              :y1="getSvgGradientCoords(getElementBorderGradientConfig(element)).y1"
-              :x2="getSvgGradientCoords(getElementBorderGradientConfig(element)).x2"
-              :y2="getSvgGradientCoords(getElementBorderGradientConfig(element)).y2"
-            >
-              <stop
-                v-for="(c, idx) in (getElementBorderGradientConfig(element)?.colors || [])"
-                :key="idx"
-                :offset="typeof c.pos === 'string' ? (c.pos.endsWith('%') ? c.pos : c.pos + '%') : `${c.pos}%`"
-                :stop-color="getHexColorWithoutAlpha(c.color)"
-                :stop-opacity="getAlphaFromColor(c.color)"
-              />
-            </linearGradient>
-          </template>
-        </defs>
-        <polygon
-          points="50,0 0,100 100,100"
-          :fill="hasElementFill(element) ? (getElementPattern(element) ? `url(#shape-pattern-${svgIdKey})` : (getElementGradientConfig(element) ? `url(#shape-gradient-${svgIdKey})` : (element.style?.fill !== undefined ? element.style.fill : '#f59e0b'))) : 'none'"
-          :stroke="getEffectiveBorderColor(element, '#d97706')"
-          :stroke-width="getEffectiveBorderWidth(element)"
-          :stroke-dasharray="element.style?.borderStyle === 'dashed' ? '5 5' : ''"
-        />
-      </svg>
-    </div>
-
-    <!-- SVG Path Shapes -->
-    <div
-      v-else-if="(element.path || element.content) && ((element.path || element.content).trim().startsWith('M') || (element.path || element.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: (element.shadow && element.shadow.type === 'inner') ? `url(#shape-inner-shadow-${element.id})` : '' }"
-      >
-        <defs>
-          <pattern
-            v-if="getElementPattern(element)"
-            :id="`shape-pattern-${svgIdKey}`"
-            :width="isElementPatternTile(element) ? getElementPatternTileSize(element).w : '100%'"
-            :height="isElementPatternTile(element) ? getElementPatternTileSize(element).h : '100%'"
-            :patternUnits="isElementPatternTile(element) ? 'userSpaceOnUse' : 'objectBoundingBox'"
-            :patternContentUnits="isElementPatternTile(element) ? 'userSpaceOnUse' : 'objectBoundingBox'"
-            :patternTransform="getShapePatternTransform(element, false)"
-          >
-            <image
-              :href="getElementPattern(element)"
-              :width="isElementPatternTile(element) ? getElementPatternTileSize(element).w : 1"
-              :height="isElementPatternTile(element) ? getElementPatternTileSize(element).h : 1"
-              preserveAspectRatio="none"
-            />
-          </pattern>
-          <template v-if="getElementGradientConfig(element)">
-            <radialGradient
-              v-if="getElementGradientConfig(element)!.path && getElementGradientConfig(element)!.path !== 'line'"
-              :id="`shape-gradient-${svgIdKey}`"
-              :cx="`${getElementGradientConfig(element)!.center ? Math.round(getElementGradientConfig(element)!.center!.x * 100) : 50}%`"
-              :cy="`${getElementGradientConfig(element)!.center ? Math.round(getElementGradientConfig(element)!.center!.y * 100) : 50}%`"
-              :r="getElementGradientConfig(element)!.path === 'rect' ? '60%' : (getElementGradientConfig(element)!.path === 'path' ? '70%' : '50%')"
-              :fx="`${getElementGradientConfig(element)!.center ? Math.round(getElementGradientConfig(element)!.center!.x * 100) : 50}%`"
-              :fy="`${getElementGradientConfig(element)!.center ? Math.round(getElementGradientConfig(element)!.center!.y * 100) : 50}%`"
-            >
-              <stop
-                v-for="(c, idx) in (getElementGradientConfig(element)?.colors || [])"
-                :key="idx"
-                :offset="typeof c.pos === 'string' ? (c.pos.endsWith('%') ? c.pos : c.pos + '%') : `${c.pos}%`"
-                :stop-color="getHexColorWithoutAlpha(c.color)"
-                :stop-opacity="getAlphaFromColor(c.color)"
-              />
-            </radialGradient>
-            <linearGradient
-              v-else
-              :id="`shape-gradient-${svgIdKey}`"
-              :x1="getSvgGradientCoords(element).x1"
-              :y1="getSvgGradientCoords(element).y1"
-              :x2="getSvgGradientCoords(element).x2"
-              :y2="getSvgGradientCoords(element).y2"
-            >
-              <stop
-                v-for="(c, idx) in (getElementGradientConfig(element)?.colors || [])"
-                :key="idx"
-                :offset="typeof c.pos === 'string' ? (c.pos.endsWith('%') ? c.pos : c.pos + '%') : `${c.pos}%`"
-                :stop-color="getHexColorWithoutAlpha(c.color)"
-                :stop-opacity="getAlphaFromColor(c.color)"
-              />
-            </linearGradient>
-          </template>
-          <template v-if="getElementBorderGradientConfig(element)">
-            <radialGradient
-              v-if="getElementBorderGradientConfig(element)!.path && getElementBorderGradientConfig(element)!.path !== 'line'"
-              :id="`shape-border-gradient-${svgIdKey}`"
-              :cx="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.x * 100) : 50}%`"
-              :cy="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.y * 100) : 50}%`"
-              :r="getElementBorderGradientConfig(element)!.path === 'rect' ? '60%' : (getElementBorderGradientConfig(element)!.path === 'path' ? '70%' : '50%')"
-              :fx="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.x * 100) : 50}%`"
-              :fy="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.y * 100) : 50}%`"
-            >
-              <stop
-                v-for="(c, idx) in (getElementBorderGradientConfig(element)?.colors || [])"
-                :key="idx"
-                :offset="typeof c.pos === 'string' ? (c.pos.endsWith('%') ? c.pos : c.pos + '%') : `${c.pos}%`"
-                :stop-color="getHexColorWithoutAlpha(c.color)"
-                :stop-opacity="getAlphaFromColor(c.color)"
-              />
-            </radialGradient>
-            <linearGradient
-              v-else
-              :id="`shape-border-gradient-${svgIdKey}`"
-              :x1="getSvgGradientCoords(getElementBorderGradientConfig(element)).x1"
-              :y1="getSvgGradientCoords(getElementBorderGradientConfig(element)).y1"
-              :x2="getSvgGradientCoords(getElementBorderGradientConfig(element)).x2"
-              :y2="getSvgGradientCoords(getElementBorderGradientConfig(element)).y2"
-            >
-              <stop
-                v-for="(c, idx) in (getElementBorderGradientConfig(element)?.colors || [])"
-                :key="idx"
-                :offset="typeof c.pos === 'string' ? (c.pos.endsWith('%') ? c.pos : c.pos + '%') : `${c.pos}%`"
-                :stop-color="getHexColorWithoutAlpha(c.color)"
-                :stop-opacity="getAlphaFromColor(c.color)"
-              />
-            </linearGradient>
-          </template>
-        </defs>
-        <g
-          :transform="getShapeSvgTransform(element)"
-        >
-          <rect
-            v-if="isRectShape(element)"
-            x="0"
-            y="0"
-            :width="getShapeVb(element).w"
-            :height="getShapeVb(element).h"
-            :rx="getRectRadiusInVb(element).rx"
-            :ry="getRectRadiusInVb(element).ry"
-            vector-effect="non-scaling-stroke"
-            :fill="hasElementFill(element) ? (getElementPattern(element) ? `url(#shape-pattern-${svgIdKey})` : (getElementGradientConfig(element) ? `url(#shape-gradient-${svgIdKey})` : (getElementFill(element) !== undefined ? getElementFill(element) : '#3b82f6'))) : 'none'"
-            :stroke="(isImagePlaceholder && isImagePlaceholder(element) && element.style?.enableBorder !== true) ? 'none' : (element.style?.enableBorder === false ? 'none' : getEffectiveBorderColor(element, 'none'))"
-            :stroke-width="(isImagePlaceholder && isImagePlaceholder(element) && element.style?.enableBorder !== true) ? 0 : (element.style?.enableBorder === false ? 0 : getElementBorderWidth(element))"
-            :stroke-linecap="element.style?.strokeLinecap || element.borderLineCap || element.lineCap || (element.shapType === 'arc' ? 'round' : (isOpenLineShape(element) ? 'butt' : undefined))"
-            :stroke-dasharray="element.style?.borderStyle === 'dashed' || element.borderType === 'dashed' ? '5 5' : ''"
-          />
-          <path
-            v-else
-            vector-effect="non-scaling-stroke"
-            :d="element.path || element.content"
-            :fill="hasElementFill(element) ? (getElementPattern(element) ? `url(#shape-pattern-${svgIdKey})` : (getElementGradientConfig(element) ? `url(#shape-gradient-${svgIdKey})` : (getElementFill(element) !== undefined ? getElementFill(element) : '#3b82f6'))) : 'none'"
-            :stroke="(isImagePlaceholder && isImagePlaceholder(element) && element.style?.enableBorder !== true) ? 'none' : (element.style?.enableBorder === false ? 'none' : getEffectiveBorderColor(element, 'none'))"
-            :stroke-width="(isImagePlaceholder && isImagePlaceholder(element) && element.style?.enableBorder !== true) ? 0 : (element.style?.enableBorder === false ? 0 : getElementBorderWidth(element))"
-            :stroke-linecap="element.style?.strokeLinecap || element.borderLineCap || element.lineCap || (element.shapType === 'arc' ? 'round' : (isOpenLineShape(element) ? 'butt' : undefined))"
-            :stroke-dasharray="element.style?.borderStyle === 'dashed' || element.borderType === 'dashed' ? '5 5' : ''"
-          />
-          <template v-if="element.pathFormula === 'bevel'">
-            <path :d="getBevelShadingPaths(element).left" fill="white" fill-opacity="0.2" stroke="none" pointer-events="none" />
-            <path :d="getBevelShadingPaths(element).top" fill="black" fill-opacity="0.08" stroke="none" pointer-events="none" />
-            <path :d="getBevelShadingPaths(element).bottom" fill="black" fill-opacity="0.15" stroke="none" pointer-events="none" />
-            <path :d="getBevelShadingPaths(element).right" fill="black" fill-opacity="0.25" stroke="none" pointer-events="none" />
-          </template>
-          <template v-if="element.pathFormula === 'cube'">
-            <path :d="getCubeShadingPaths(element).top" fill="white" fill-opacity="0.15" stroke="none" pointer-events="none" />
-            <path :d="getCubeShadingPaths(element).right" fill="black" fill-opacity="0.2" stroke="none" pointer-events="none" />
-          </template>
-        </g>
-      </svg>
-    </div>
-
-    <!-- Default Rectangle Shape (with fill) -->
-    <div
-      v-else-if="hasElementFill(element)"
-      :style="{
-        width: '100%',
-        height: '100%',
-        backgroundColor: getElementPattern(element) ? 'transparent' : ((isImagePlaceholder && isImagePlaceholder(element) && !getElementGradientCss(element)) ? getImagePlaceholderFill(element) : ((getElementGradientCss(element) || (getElementFill(element) !== undefined && getElementFill(element) !== 'none')) ? (getElementGradientCss(element) ? 'transparent' : getElementFill(element)) : (getElementFill(element) === 'none' ? 'transparent' : '#10b981'))),
-        backgroundImage: getElementPattern(element) ? `url('${getElementPattern(element)}')` : (getElementGradientCss(element) || 'none'),
-        backgroundSize: getElementPattern(element) ? (isElementPatternTile(element) ? `${getElementPatternTileSize(element).w}px ${getElementPatternTileSize(element).h}px` : 'cover') : undefined,
-        backgroundPosition: getElementPattern(element) ? (isElementPatternTile(element) ? '0 0' : 'center center') : undefined,
-        backgroundRepeat: getElementPattern(element) ? (isElementPatternTile(element) ? 'repeat' : 'no-repeat') : undefined,
-        borderRadius: (isImagePlaceholder && isImagePlaceholder(element)) ? getImagePlaceholderRadius(element) : (element.style?.borderRadius !== undefined ? (typeof element.style.borderRadius === 'number' ? `${element.style.borderRadius}px` : element.style.borderRadius) : (element.radius ? `${element.radius}px` : '0px')),
-        borderWidth: (isImagePlaceholder && isImagePlaceholder(element) && element.style?.enableBorder !== true)
-          ? '0px'
-          : (element.style?.enableBorder === false ? '0px' : `${getElementBorderWidth(element)}px`),
-        borderStyle: element.style?.borderStyle || element.borderType || 'solid',
-        borderColor: (isImagePlaceholder && isImagePlaceholder(element) && element.style?.enableBorder !== true)
-          ? 'transparent'
-          : (element.style?.enableBorder === false ? 'transparent' : (hasElementBorderGradient(element) ? 'transparent' : (element.style?.borderColor || getElementBorderColor(element) || 'transparent'))),
-        borderImage: hasElementBorderGradient(element) ? `${getElementBorderGradientCss(element)} 1` : undefined,
-        filter: (element.shadow && element.shadow.type === 'inner') ? `url(#shape-inner-shadow-${element.id})` : ''
-      }"
-    ></div>
-
-    <!-- Default Rectangle Shape (without fill) -->
-    <div
-      v-else
-      style="width: 100%; height: 100%; overflow: visible;"
-    >
-      <svg
-        style="width: 100%; height: 100%; display: block; overflow: visible;"
-        :style="{ filter: (element.shadow && element.shadow.type === 'inner') ? `url(#shape-inner-shadow-${element.id})` : '' }"
-      >
-        <defs v-if="getElementBorderGradientConfig(element)">
-          <radialGradient
-            v-if="getElementBorderGradientConfig(element)!.path && getElementBorderGradientConfig(element)!.path !== 'line'"
-            :id="`shape-border-gradient-${svgIdKey}`"
-            :cx="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.x * 100) : 50}%`"
-            :cy="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.y * 100) : 50}%`"
-            :r="getElementBorderGradientConfig(element)!.path === 'rect' ? '60%' : (getElementBorderGradientConfig(element)!.path === 'path' ? '70%' : '50%')"
-            :fx="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.x * 100) : 50}%`"
-            :fy="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.y * 100) : 50}%`"
-          >
-            <stop
-              v-for="(c, idx) in (getElementBorderGradientConfig(element)?.colors || [])"
-              :key="idx"
-              :offset="typeof c.pos === 'string' ? (c.pos.endsWith('%') ? c.pos : c.pos + '%') : `${c.pos}%`"
-              :stop-color="getHexColorWithoutAlpha(c.color)"
-              :stop-opacity="getAlphaFromColor(c.color)"
-            />
-          </radialGradient>
-          <linearGradient
-            v-else
-            :id="`shape-border-gradient-${svgIdKey}`"
-            :x1="getSvgGradientCoords(getElementBorderGradientConfig(element)).x1"
-            :y1="getSvgGradientCoords(getElementBorderGradientConfig(element)).y1"
-            :x2="getSvgGradientCoords(getElementBorderGradientConfig(element)).x2"
-            :y2="getSvgGradientCoords(getElementBorderGradientConfig(element)).y2"
-          >
-            <stop
-              v-for="(c, idx) in (getElementBorderGradientConfig(element)?.colors || [])"
-              :key="idx"
-              :offset="typeof c.pos === 'string' ? (c.pos.endsWith('%') ? c.pos : c.pos + '%') : `${c.pos}%`"
-              :stop-color="getHexColorWithoutAlpha(c.color)"
-              :stop-opacity="getAlphaFromColor(c.color)"
-            />
-          </linearGradient>
-        </defs>
-        <rect
-          x="0"
-          y="0"
-          width="100%"
-          height="100%"
-          :rx="parseFloat(element.style?.borderRadius) || parseFloat(element.radius) || 0"
-          :ry="parseFloat(element.style?.borderRadius) || parseFloat(element.radius) || 0"
-          fill="none"
-          :stroke="getEffectiveBorderColor(element, '#10b981')"
-          :stroke-width="getEffectiveBorderWidth(element)"
-          :stroke-dasharray="element.style?.borderStyle === 'dashed' || element.borderType === 'dashed' ? '5 5' : (element.style?.borderStyle === 'dotted' ? '2 2' : '')"
-          vector-effect="non-scaling-stroke"
-        />
-      </svg>
-    </div>
-
-    <!-- Image Placeholder Centered Icon Overlay -->
-    <div
-      v-if="isImagePlaceholder && isImagePlaceholder(element)"
-      class="image-placeholder-icon-overlay"
-      style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;"
-    >
-      <svg width="56" height="56" viewBox="0 0 24 24" fill="none" style="max-width: 45%; max-height: 45%;">
-        <rect x="3" y="3" width="18" height="18" rx="2" stroke="#475569" stroke-width="2" />
-        <circle cx="8.5" cy="8.5" r="1.5" fill="#475569" />
-        <path d="M21 15l-5-5L5 21" stroke="#475569" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-    </div>
-
-    <!-- Embedded Shape Text Overlay -->
-    <div
-      v-else
-      class="shape-text-overlay-wrapper"
-      style="position: absolute; display: flex; flex-direction: column; box-sizing: border-box; pointer-events: none;"
-      :style="{
-        left: isEllipseShape(element) ? '14.6%' : '0px',
-        top: isEllipseShape(element) ? '14.6%' : '0px',
-        width: isEllipseShape(element) ? '70.8%' : '100%',
-        height: isEllipseShape(element) ? '70.8%' : '100%',
-        justifyContent: (element.style?.verticalAlign === 'top' || element.style?.verticalAlign === 'up') ? 'flex-start' : ((element.style?.verticalAlign === 'bottom' || element.style?.verticalAlign === 'down') ? 'flex-end' : 'center'),
-        padding: isEllipseShape(element) ? '0px' : (element.style?.padding !== undefined ? element.style.padding : '4.8px 9.6px 4.8px 9.6px'),
-        transform: ((element.style as any)?.flipH || element.flipH || element.isFlipH || (element.style as any)?.flipV || element.flipV || element.isFlipV) ? `scale(${((element.style as any)?.flipH || element.flipH || element.isFlipH) ? -1 : 1}, ${((element.style as any)?.flipV || element.flipV || element.isFlipV) ? -1 : 1})` : undefined
-      }"
-    >
-      <div ref="shapeTextHostRef" class="text-reflection-wrapper" style="position: relative; pointer-events: none;" :style="{
-        width: (element.style?.writingMode === 'vertical-rl' || element.style?.writingMode === 'vertical-lr') ? 'auto' : '100%',
-        height: (element.style?.writingMode === 'vertical-rl' || element.style?.writingMode === 'vertical-lr') ? '100%' : 'auto'
-      }">
-        <div
-          ref="shapeEditableRef"
-          :id="isReflection ? undefined : `editable-${element.id}`"
-          :contenteditable="isTextSelectable ? 'true' : 'false'"
-          @mousedown="isTextSelectable ? $event.stopPropagation() : null"
-          @click="isTextSelectable ? $event.stopPropagation() : null"
-          @focusin="emit('textFocus')"
-          @focusout="emit('textBlur', $event)"
-          @input="emit('textInput', $event)"
-          @keydown="emit('textKeyDown', $event)"
-          @mousemove="emit('mousemove', $event)"
-          @mouseleave="emit('mouseleave', $event)"
-          @dblclick.stop.prevent="isReadonly ? null : (isImagePlaceholder && isImagePlaceholder(element) ? emit('placeholderUpload', element.id) : (isTextSelectable ? null : emit('startEditing', $event)))"
-          class="shape-text-overlay"
-          :style="{
-            display: 'block',
-            writingMode: element.style?.writingMode || 'horizontal-tb',
-            width: (element.style?.writingMode === 'vertical-rl' || element.style?.writingMode === 'vertical-lr') ? 'auto' : '100%',
-            height: (element.style?.writingMode === 'vertical-rl' || element.style?.writingMode === 'vertical-lr') ? '100%' : 'auto',
-            zoom: (element.autoFit?.type === 'text' && element.autoFit?.fontScale) ? (element.autoFit.fontScale / 100) : 1,
-            transform: 'none',
-            maxWidth: '100%',
-            outline: 'none',
-            padding: '0px',
-            boxSizing: 'content-box',
-            overflow: 'wrap',
-            wordBreak: 'break-word',
-            pointerEvents: isReflection ? 'none' : (isTextSelectable ? 'auto' : (getRawText(element).trim() ? 'auto' : 'none')),
-            cursor: isTextSelectable ? 'text' : undefined,
-            userSelect: isTextSelectable ? 'text' : 'none',
-            color: element.style?.textColor || element.style?.color || element.textColor || ((isImagePlaceholder && isImagePlaceholder(element)) ? '#6366f1' : (element.style?.fill === '#ffffff' || element.style?.fill === '#FFFFFF' ? '#475569' : (themeRecipe?.shape?.textColor || '#ffffff'))),
-            fontFamily: (element.style?.fontFamily && element.style?.fontFamily !== '默认字体' && element.style?.fontFamily !== 'inherit')
-              ? element.style.fontFamily
-              : ((element.fontFamily && element.fontFamily !== '默认字体' && element.fontFamily !== 'inherit')
-                ? element.fontFamily
-                : (themeRecipe?.styleFonts?.bodyFont || 'SourceHanSansCN')),
-            fontSize: element.style?.fontSize || ((isImagePlaceholder && isImagePlaceholder(element)) ? '15px' : '16px'),
-            fontWeight: element.style?.fontWeight || ((isImagePlaceholder && isImagePlaceholder(element)) ? '600' : (getFontVariantStyle(element.style?.fontFamily || element.fontFamily, element.style?.fontFamilyStyle).fontWeight !== 'normal' ? getFontVariantStyle(element.style?.fontFamily || element.fontFamily, element.style?.fontFamilyStyle).fontWeight : 'normal')),
-            fontStyle: element.style?.fontStyle || getFontVariantStyle(element.style?.fontFamily || element.fontFamily, element.style?.fontFamilyStyle).fontStyle,
-            textDecoration: element.style?.textDecoration || 'none',
-            lineHeight: element.style?.lineHeight || 1.35,
-            textAlign: (element.style?.textAlign === 'distribute' ? 'justify' : (element.style?.textAlign || 'center')) as any,
-            textAlignLast: (element.style?.textAlign === 'distribute' ? 'justify' : 'auto') as any,
-            textJustify: (element.style?.textAlign === 'distribute' ? 'inter-character' : 'auto') as any,
-            whiteSpace: element.style?.whiteSpace || 'normal',
-            ['-webkit-text-stroke']: getTextStrokeStyle ? getTextStrokeStyle(element) : 'none',
-            ['paint-order']: element.style?.enableTextStroke ? 'stroke fill' : 'normal',
-            ['text-shadow']: getElementTextShadow ? getElementTextShadow(element) : 'none',
-            '--paragraphSpace': `${element.style?.paragraphSpace === undefined ? 3 : element.style.paragraphSpace}px`
-          }"
-          v-html="formatShapeHtml(element)"
-        ></div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.shape-element-content {
-  user-select: none;
-}
-.shape-text-overlay {
-  user-select: text;
-  -webkit-user-select: text;
-}
-</style>
+<script setup lang="ts">
+import { computed, ref, watch, onBeforeUnmount, nextTick } from 'vue'
+import {
+  getElementPattern,
+  isElementPatternTile,
+  getElementPatternTileSize,
+  getElementGradientConfig,
+  getElementGradientCss,
+  getSvgGradientCoords,
+  getElementFill,
+  hasElementFill,
+  hasElementBorder,
+  getElementBorderColor,
+  getElementBorderWidth,
+  getElementBorderGradientConfig,
+  hasElementBorderGradient,
+  getElementBorderGradientCss,
+  isSvgPathString,
+  getHexColorWithoutAlpha,
+  getAlphaFromColor
+} from '../../../utils/canvas/elementStyles'
+import { isEllipseShape } from '../../../utils/line'
+import { getFontVariantStyle } from '../../../configs/fonts'
+import { useSlides } from '../../../composables/useSlides'
+import { createTextSelectionOverlay, type TextSelectionOverlayHandle } from '../textSelectionOverlay'
+
+const { shapeFormatPainter, isReadonly } = useSlides()
+const isTextPaintActive = computed(() => !!(shapeFormatPainter.value && shapeFormatPainter.value.mode === 'text-range'))
+const svgIdKey = computed(() => props.isReflection ? `${props.element.id}-refl` : `${props.element.id}`)
+const isTextSelectable = computed(() => !props.isReflection && ((props.isEditingText && props.selectedElementId === props.element.id) || isTextPaintActive.value))
+
+function getEffectiveBorderWidth(el: any): number {
+  if (props.isImagePlaceholder && props.isImagePlaceholder(el) && el.style?.enableBorder !== true) return 0
+  if (el.style?.enableBorder === false) return 0
+  const w = getElementBorderWidth(el)
+  if (w > 0) return w
+  if (el.style?.borderColor || el.borderColor) return 1
+  return 0
+}
+
+function getShapePatternTransform(el: any, isTriangle = false): string | undefined {
+  if (!el || !isElementPatternTile(el)) return undefined
+  const { width, height } = getElementWidthHeight(el)
+  if (isTriangle) {
+    const sx = width > 0 ? 100 / width : 1
+    const sy = height > 0 ? 100 / height : 1
+    return `scale(${sx}, ${sy})`
+  }
+  const vbW = el.viewBox ? el.viewBox[0] : (width || 200)
+  const vbH = el.viewBox ? el.viewBox[1] : (height || 200)
+  const hasBorder = hasElementBorder(el)
+  const bw = hasBorder ? getEffectiveBorderWidth(el) : 0
+  const effW = bw > 0 ? Math.max(1, width - bw) : Math.max(1, width)
+  const effH = bw > 0 ? Math.max(1, height - bw) : Math.max(1, height)
+  return `scale(${vbW / effW}, ${vbH / effH})`
+}
+
+function getShapeSvgTransform(el: any): string | undefined {
+  if (!el) return undefined
+  const { width, height } = getElementWidthHeight(el)
+  const vbW = el.viewBox ? el.viewBox[0] : (width || 200)
+  const vbH = el.viewBox ? el.viewBox[1] : (height || 200)
+
+  if (el.shapType === 'arc') {
+    return `scale(${width / vbW}, ${height / vbH})`
+  }
+  if (isOpenLineShape(el)) {
+    return undefined
+  }
+
+  const hasBorder = hasElementBorder(el)
+  const bw = hasBorder ? getEffectiveBorderWidth(el) : 0
+
+  if (bw > 0) {
+    const scaleX = Math.max(0, width - bw) / vbW
+    const scaleY = Math.max(0, height - bw) / vbH
+    return `translate(${bw / 2}, ${bw / 2}) scale(${scaleX}, ${scaleY})`
+  }
+
+  const scaleX = width / vbW
+  const scaleY = height / vbH
+  return `scale(${scaleX}, ${scaleY})`
+}
+
+function getEffectiveBorderColor(el: any, fallback = '#10b981'): string {
+  if (props.isImagePlaceholder && props.isImagePlaceholder(el) && el.style?.enableBorder !== true) return 'transparent'
+  if (el.style?.enableBorder === false) return 'transparent'
+  if (hasElementBorderGradient(el)) return `url(#shape-border-gradient-${svgIdKey.value})`
+  return el.style?.borderColor || getElementBorderColor(el) || fallback
+}
+
+function isOpenLineShape(el: any): boolean {
+  if (!el) return false
+  const shapType = el.shapType || el.type
+  return shapType === 'arc' || shapType === 'straightConnector1' || shapType === 'line' || (typeof el.width === 'number' && el.width <= 0) || (typeof el.height === 'number' && el.height <= 0)
+}
+
+function getShapeVb(el: any): { w: number; h: number } {
+  if (!el) return { w: 200, h: 200 }
+  const { width, height } = getElementWidthHeight(el)
+  const w = el.viewBox ? el.viewBox[0] : (width || 200)
+  const h = el.viewBox ? el.viewBox[1] : (height || 200)
+  return { w, h }
+}
+
+function isRectShape(el: any): boolean {
+  if (!el) return false
+  if (el.shapType === 'rect' || el.shapType === 'roundRect') return true
+  if (el.content === 'rect') return true
+  if (el.pathFormula === 'roundRect') return true
+  if (el.title === '矩形' || el.title === '圆角矩形') return true
+  const raw = (el.path || el.content || '').trim().replace(/\s+/g, '').toUpperCase()
+  if (raw === 'M00L2000L200200L0200Z' || raw === 'M00H200V200H0Z') return true
+  if (raw.startsWith('M500L1500Q200020050L200150Q200200150200')) return true
+  if (/^M00L([0-9.]+)0L\1([0-9.]+)L0\2Z$/i.test(raw)) return true
+  if (/^M00H([0-9.]+)V([0-9.]+)H0Z$/i.test(raw)) return true
+  if ((el.style?.borderRadius && parseFloat(String(el.style.borderRadius)) > 0) || (el.radius && parseFloat(String(el.radius)) > 0)) {
+    if (raw.includes('L2000L200200L0200') || (raw.startsWith('M00L') && raw.endsWith('Z'))) return true
+  }
+  return false
+}
+
+function getRectRadiusInVb(el: any): { rx: number; ry: number } {
+  if (!el) return { rx: 0, ry: 0 }
+  const { width, height } = getElementWidthHeight(el)
+  let r = 0
+  const isRoundRect = el.pathFormula === 'roundRect' || el.shapType === 'roundRect' || el.title === '圆角矩形'
+  const rVal = el.style?.borderRadius !== undefined && el.style?.borderRadius !== null && el.style?.borderRadius !== ''
+    ? el.style.borderRadius
+    : el.radius
+
+  if (isRoundRect && Array.isArray(el.keypoints) && el.keypoints[0] !== undefined && el.keypoints[0] !== null) {
+    const kp = Number(el.keypoints[0])
+    if (!isNaN(kp)) {
+      r = Math.min(width, height) * Math.max(0, Math.min(0.5, kp))
+    }
+  } else if (isRoundRect && el.keypoints && typeof el.keypoints === 'object' && !Array.isArray(el.keypoints) && (el.keypoints as any).adj !== undefined) {
+    const adj = Number((el.keypoints as any).adj)
+    if (!isNaN(adj)) {
+      r = Math.min(width, height) * Math.max(0, Math.min(0.5, adj * 0.5))
+    }
+  } else if (rVal !== undefined && rVal !== null && rVal !== '') {
+    const parsed = parseFloat(String(rVal))
+    if (!isNaN(parsed)) r = parsed
+  } else if (isRoundRect) {
+    r = Math.min(width, height) * 0.125
+  }
+
+  if (r <= 0) return { rx: 0, ry: 0 }
+
+  const { w: vbW, h: vbH } = getShapeVb(el)
+
+  const maxR = Math.min(width, height) / 2
+  const clampedR = Math.min(r, maxR)
+
+  const hasBorder = hasElementBorder(el)
+  const bw = hasBorder ? getEffectiveBorderWidth(el) : 0
+  const effW = bw > 0 ? Math.max(1, width - bw) : width
+  const effH = bw > 0 ? Math.max(1, height - bw) : height
+
+  const rx = (clampedR * vbW) / effW
+  const ry = (clampedR * vbH) / effH
+
+  return { rx, ry }
+}
+
+const props = defineProps<{
+  element: any
+  activeSlide?: any
+  isSelected?: boolean
+  isEditingText?: boolean
+  selectedElementId?: string | null
+  themeRecipe?: any
+  normalizeHtmlFontFamily?: (html: string) => string
+  getTextStrokeStyle?: (el: any) => string
+  getElementTextShadow?: (el: any) => string
+  getReflectionLeadingCompensation?: (el: any) => number
+  isImagePlaceholder?: (el: any) => boolean
+  isReflection?: boolean
+  // 直接父盒子（组合）的像素尺寸，用于把 % 样式的宽高解析成 px。
+  // 由 CanvasGroupElement 传入；顶层元素不传，走 px 样式分支。
+  parentWidthPx?: number
+  parentHeightPx?: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'textFocus'): void
+  (e: 'textBlur', ev: FocusEvent): void
+  (e: 'textInput', ev: Event): void
+  (e: 'textKeyDown', ev: KeyboardEvent): void
+  (e: 'startEditing', ev?: MouseEvent): void
+  (e: 'placeholderUpload', id: string): void
+  (e: 'mousemove', ev: MouseEvent): void
+  (e: 'mouseleave', ev: MouseEvent): void
+  (e: 'dblclick', ev: MouseEvent): void
+}>()
+
+// 编辑态：安装自绘选区高亮（原生 ::selection 几何跟随 CJK 字体度量，条顶空白过大）
+const shapeEditableRef = ref<HTMLElement | null>(null)
+const shapeTextHostRef = ref<HTMLElement | null>(null)
+let selOverlay: TextSelectionOverlayHandle | null = null
+
+const isVerticalWriting = computed(() => {
+  const wm = props.element.style?.writingMode
+  return wm === 'vertical-rl' || wm === 'vertical-lr'
+})
+
+watch([isTextSelectable, isVerticalWriting], ([selectable]) => {
+  nextTick(() => {
+    selOverlay?.destroy()
+    selOverlay = null
+    if (selectable && !isVerticalWriting.value) {
+      const ed = shapeEditableRef.value
+      const host = shapeTextHostRef.value
+      if (ed && host) selOverlay = createTextSelectionOverlay(ed, host)
+    }
+  })
+}, { immediate: true })
+
+onBeforeUnmount(() => {
+  selOverlay?.destroy()
+  selOverlay = null
+})
+
+function getElementWidthHeight(el: any): { width: number; height: number } {
+  if (!el || typeof el !== 'object') return { width: 200, height: 200 }
+
+  const wStr = el.style?.width !== undefined ? String(el.style.width).trim() : ''
+  const hStr = el.style?.height !== undefined ? String(el.style.height).trim() : ''
+
+  // 1. 如果有明确的 px 或非百分比数值（如 '120px', 120）
+  if (wStr && !wStr.endsWith('%') && wStr !== 'auto') {
+    const w = parseFloat(wStr)
+    const h = parseFloat(hStr)
+    if (!isNaN(w) && w > 0) {
+      return { width: w, height: (!isNaN(h) && h > 0) ? h : (typeof el.height === 'number' && el.height > 0 ? el.height : 200) }
+    }
+  }
+
+  // 2. 如果是 % 样式（组合内子元素）：相对直接父盒子的像素尺寸解析
+  if (wStr.endsWith('%')) {
+    const pct = parseFloat(wStr)
+    const pW = Number(props.parentWidthPx)
+    const pH = Number(props.parentHeightPx)
+
+    // 优先：若 props.parentWidthPx 经 props 链传入且有效
+    if (!isNaN(pct) && isFinite(pW) && pW > 0) {
+      const width = (pct / 100) * pW
+      let height = NaN
+      const hPct = parseFloat(hStr)
+      if (hStr.endsWith('%') && !isNaN(hPct) && isFinite(pH) && pH > 0) {
+        height = (hPct / 100) * pH
+      } else if (hStr && hStr !== 'auto' && !hStr.endsWith('%')) {
+        const hn = parseFloat(hStr)
+        if (!isNaN(hn) && hn > 0) height = hn
+      }
+      if (isNaN(height) && typeof el.height === 'number' && el.height > 0) height = el.height
+      if (isNaN(height) && isFinite(pH) && pH > 0) height = pH
+      if (!isNaN(width) && !isNaN(height)) return { width, height: height || 200 }
+    }
+
+    // 关键补救：如果 parentWidthPx 尚未就绪，但 el.width / el.height 本身存在确凿数字（组合时保存的原始像素）
+    if (typeof el.width === 'number' && el.width > 0 && typeof el.height === 'number' && el.height > 0) {
+      return { width: el.width, height: el.height }
+    }
+
+    // 回退到画布基准 1280x720 进行百分比换算（绝不直接使用 parseFloat('38.46%') 变成 38px）
+    if (!isNaN(pct)) {
+      const width = (pct / 100) * 1280
+      const hPct = parseFloat(hStr)
+      const height = (!isNaN(hPct) && hStr.endsWith('%')) ? (hPct / 100) * 720 : (typeof el.height === 'number' && el.height > 0 ? el.height : width)
+      return { width, height }
+    }
+  }
+
+  // 3. 元素自身有数值型 width / height 属性
+  if (typeof el.width === 'number' && el.width > 0 && typeof el.height === 'number' && el.height > 0) {
+    return { width: el.width, height: el.height }
+  }
+
+  // 4. DOM 测量兜底
+  if (typeof window !== 'undefined' && el.id) {
+    const dom = document.getElementById(`canvas-el-${el.id}`)
+    if (dom && dom.offsetWidth > 0 && dom.offsetHeight > 0) {
+      return { width: dom.offsetWidth, height: dom.offsetHeight }
+    }
+  }
+
+  // 5. 最终兜底：如果是 % 严禁直接 parseFloat 当作 px
+  let fallbackW = 200
+  let fallbackH = 200
+  if (wStr && !wStr.endsWith('%') && !isNaN(parseFloat(wStr))) fallbackW = parseFloat(wStr)
+  if (hStr && !hStr.endsWith('%') && !isNaN(parseFloat(hStr))) fallbackH = parseFloat(hStr)
+
+  return { width: fallbackW, height: fallbackH }
+}
+
+function getBevelShadingPaths(el: any) {
+  const vW = el.viewBox ? el.viewBox[0] : 200
+  const vH = el.viewBox ? el.viewBox[1] : 200
+  const val = el.keypoints?.[0] !== undefined ? el.keypoints[0] : 0.15
+  const d = Math.min(vW, vH) * val
+  return {
+    left: `M 0 0 L ${d} ${d} L ${d} ${vH - d} L 0 ${vH} Z`,
+    top: `M 0 0 L ${vW} 0 L ${vW - d} ${d} L ${d} ${d} Z`,
+    bottom: `M 0 ${vH} L ${vW} ${vH} L ${vW - d} ${vH - d} L ${d} ${vH - d} Z`,
+    right: `M ${vW} 0 L ${vW - d} ${d} L ${vW - d} ${vH - d} L ${vW} ${vH} Z`
+  }
+}
+
+function getCubeShadingPaths(el: any) {
+  const vW = el.viewBox ? el.viewBox[0] : 200
+  const vH = el.viewBox ? el.viewBox[1] : 200
+  const val = el.keypoints?.[0] !== undefined ? el.keypoints[0] : 0.25
+  const d = Math.min(vW, vH) * val
+  return {
+    top: `M 0 ${d} L ${d} 0 L ${vW} 0 L ${vW - d} ${d} Z`,
+    right: `M ${vW - d} ${d} L ${vW} 0 L ${vW} ${vH - d} L ${vW - d} ${vH} Z`
+  }
+}
+
+function getRawText(el: any): string {
+  let val = ''
+  if (typeof el.text === 'string') val = el.text
+  else if (el.text && typeof el.text === 'object') {
+    val = el.text.content || el.text.text || ''
+  }
+  if (isSvgPathString(val)) return ''
+  return val
+}
+
+function getImagePlaceholderFill(el: any): string {
+  const fill = getElementFill(el)
+  if (!fill || fill === '#f1f5f9' || fill === '#f8fafc') {
+    return '#d9dde3'
+  }
+  return fill
+}
+
+function getImagePlaceholderRadius(el: any): string {
+  const raw = el.style?.borderRadius !== undefined
+    ? (typeof el.style.borderRadius === 'number' ? `${el.style.borderRadius}px` : el.style.borderRadius)
+    : (el.radius ? `${el.radius}px` : '0px')
+  if (!raw || raw === '0px' || raw === '4px') {
+    return '12px'
+  }
+  return raw
+}
+
+function formatShapeHtml(el: any): string {
+  if (props.isImagePlaceholder && props.isImagePlaceholder(el)) {
+    return ''
+  }
+  const raw = getRawText(el)
+  const norm = props.normalizeHtmlFontFamily ? props.normalizeHtmlFontFamily(raw) : raw
+  if (el.style?.textBackground && el.style.textBackground !== 'transparent') {
+    if (!norm.includes('background-color')) {
+      return `<span style='background-color: ${el.style.textBackground}; display: inline;'>${norm}</span>`
+    }
+  }
+  return norm
+}
+</script>
+
+<template>
+  <div
+    class="element-content shape-element-content"
+    style="width: 100%; height: 100%; position: relative;"
+    @dblclick.stop.prevent="isReadonly ? null : (isImagePlaceholder && isImagePlaceholder(element) ? emit('placeholderUpload', element.id) : (isTextSelectable ? null : emit('startEditing', $event)))"
+  >
+    <!-- Circle Shape (with fill) -->
+    <div
+      v-if="(element.content === 'circle' || isEllipseShape(element) || element.shapType === 'ellipse' || element.style?.borderRadius === '50%') && hasElementFill(element)"
+      :style="{
+        width: '100%',
+        height: '100%',
+        backgroundColor: getElementPattern(element) ? 'transparent' : ((getElementGradientCss(element) || (getElementFill(element) !== undefined && getElementFill(element) !== 'none')) ? (getElementGradientCss(element) ? 'transparent' : getElementFill(element)) : (getElementFill(element) === 'none' ? 'transparent' : '#3b82f6')),
+        backgroundImage: getElementPattern(element) ? `url('${getElementPattern(element)}')` : (getElementGradientCss(element) || 'none'),
+        backgroundSize: getElementPattern(element) ? (isElementPatternTile(element) ? `${getElementPatternTileSize(element).w}px ${getElementPatternTileSize(element).h}px` : 'cover') : undefined,
+        backgroundPosition: getElementPattern(element) ? (isElementPatternTile(element) ? '0 0' : 'center center') : undefined,
+        backgroundRepeat: getElementPattern(element) ? (isElementPatternTile(element) ? 'repeat' : 'no-repeat') : undefined,
+        borderRadius: '50%',
+        borderWidth: (isImagePlaceholder && isImagePlaceholder(element) && element.style?.enableBorder !== true)
+          ? '0px'
+          : (element.style?.enableBorder === false ? '0px' : (element.style?.borderWidth || `${getElementBorderWidth(element)}px`)),
+        borderStyle: element.style?.borderStyle || 'solid',
+        borderColor: (isImagePlaceholder && isImagePlaceholder(element) && element.style?.enableBorder !== true)
+          ? 'transparent'
+          : (element.style?.enableBorder === false ? 'transparent' : (hasElementBorderGradient(element) ? 'transparent' : (element.style?.borderColor || getElementBorderColor(element) || 'transparent'))),
+        borderImage: hasElementBorderGradient(element) ? `${getElementBorderGradientCss(element)} 1` : undefined,
+        filter: (element.shadow && element.shadow.type === 'inner') ? `url(#shape-inner-shadow-${element.id})` : ''
+      }"
+    ></div>
+
+    <!-- Circle Shape (without fill) -->
+    <div
+      v-else-if="element.content === 'circle' || isEllipseShape(element) || element.shapType === 'ellipse' || element.style?.borderRadius === '50%'"
+      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: (element.shadow && element.shadow.type === 'inner') ? `url(#shape-inner-shadow-${element.id})` : '' }"
+      >
+        <defs v-if="getElementBorderGradientConfig(element)">
+          <radialGradient
+            v-if="getElementBorderGradientConfig(element)!.path && getElementBorderGradientConfig(element)!.path !== 'line'"
+            :id="`shape-border-gradient-${svgIdKey}`"
+            :cx="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.x * 100) : 50}%`"
+            :cy="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.y * 100) : 50}%`"
+            :r="getElementBorderGradientConfig(element)!.path === 'rect' ? '60%' : (getElementBorderGradientConfig(element)!.path === 'path' ? '70%' : '50%')"
+            :fx="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.x * 100) : 50}%`"
+            :fy="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.y * 100) : 50}%`"
+          >
+            <stop
+              v-for="(c, idx) in (getElementBorderGradientConfig(element)?.colors || [])"
+              :key="idx"
+              :offset="typeof c.pos === 'string' ? (c.pos.endsWith('%') ? c.pos : c.pos + '%') : `${c.pos}%`"
+              :stop-color="getHexColorWithoutAlpha(c.color)"
+              :stop-opacity="getAlphaFromColor(c.color)"
+            />
+          </radialGradient>
+          <linearGradient
+            v-else
+            :id="`shape-border-gradient-${svgIdKey}`"
+            :x1="getSvgGradientCoords(getElementBorderGradientConfig(element)).x1"
+            :y1="getSvgGradientCoords(getElementBorderGradientConfig(element)).y1"
+            :x2="getSvgGradientCoords(getElementBorderGradientConfig(element)).x2"
+            :y2="getSvgGradientCoords(getElementBorderGradientConfig(element)).y2"
+          >
+            <stop
+              v-for="(c, idx) in (getElementBorderGradientConfig(element)?.colors || [])"
+              :key="idx"
+              :offset="typeof c.pos === 'string' ? (c.pos.endsWith('%') ? c.pos : c.pos + '%') : `${c.pos}%`"
+              :stop-color="getHexColorWithoutAlpha(c.color)"
+              :stop-opacity="getAlphaFromColor(c.color)"
+            />
+          </linearGradient>
+        </defs>
+        <ellipse
+          cx="50"
+          cy="50"
+          rx="50"
+          ry="50"
+          fill="none"
+          :stroke="getEffectiveBorderColor(element, '#2563eb')"
+          :stroke-width="getEffectiveBorderWidth(element)"
+          :stroke-dasharray="element.style?.borderStyle === 'dashed' || element.borderType === 'dashed' ? '5 5' : (element.style?.borderStyle === 'dotted' ? '2 2' : '')"
+          vector-effect="non-scaling-stroke"
+        />
+      </svg>
+    </div>
+
+    <!-- Triangle Shape -->
+    <div v-else-if="element.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: (element.shadow && element.shadow.type === 'inner') ? `url(#shape-inner-shadow-${element.id})` : '' }"
+      >
+        <defs>
+          <pattern
+            v-if="getElementPattern(element)"
+            :id="`shape-pattern-${svgIdKey}`"
+            :width="isElementPatternTile(element) ? getElementPatternTileSize(element).w : '100%'"
+            :height="isElementPatternTile(element) ? getElementPatternTileSize(element).h : '100%'"
+            :patternUnits="isElementPatternTile(element) ? 'userSpaceOnUse' : 'objectBoundingBox'"
+            :patternContentUnits="isElementPatternTile(element) ? 'userSpaceOnUse' : 'objectBoundingBox'"
+            :patternTransform="getShapePatternTransform(element, true)"
+          >
+            <image
+              :href="getElementPattern(element)"
+              :width="isElementPatternTile(element) ? getElementPatternTileSize(element).w : 1"
+              :height="isElementPatternTile(element) ? getElementPatternTileSize(element).h : 1"
+              preserveAspectRatio="none"
+            />
+          </pattern>
+          <template v-if="getElementGradientConfig(element)">
+            <radialGradient
+              v-if="getElementGradientConfig(element)!.path && getElementGradientConfig(element)!.path !== 'line'"
+              :id="`shape-gradient-${svgIdKey}`"
+              :cx="`${getElementGradientConfig(element)!.center ? Math.round(getElementGradientConfig(element)!.center!.x * 100) : 50}%`"
+              :cy="`${getElementGradientConfig(element)!.center ? Math.round(getElementGradientConfig(element)!.center!.y * 100) : 50}%`"
+              :r="getElementGradientConfig(element)!.path === 'rect' ? '60%' : (getElementGradientConfig(element)!.path === 'path' ? '70%' : '50%')"
+              :fx="`${getElementGradientConfig(element)!.center ? Math.round(getElementGradientConfig(element)!.center!.x * 100) : 50}%`"
+              :fy="`${getElementGradientConfig(element)!.center ? Math.round(getElementGradientConfig(element)!.center!.y * 100) : 50}%`"
+            >
+              <stop
+                v-for="(c, idx) in (getElementGradientConfig(element)?.colors || [])"
+                :key="idx"
+                :offset="typeof c.pos === 'string' ? (c.pos.endsWith('%') ? c.pos : c.pos + '%') : `${c.pos}%`"
+                :stop-color="getHexColorWithoutAlpha(c.color)"
+                :stop-opacity="getAlphaFromColor(c.color)"
+              />
+            </radialGradient>
+            <linearGradient
+              v-else
+              :id="`shape-gradient-${svgIdKey}`"
+              :x1="getSvgGradientCoords(element).x1"
+              :y1="getSvgGradientCoords(element).y1"
+              :x2="getSvgGradientCoords(element).x2"
+              :y2="getSvgGradientCoords(element).y2"
+            >
+              <stop
+                v-for="(c, idx) in (getElementGradientConfig(element)?.colors || [])"
+                :key="idx"
+                :offset="typeof c.pos === 'string' ? (c.pos.endsWith('%') ? c.pos : c.pos + '%') : `${c.pos}%`"
+                :stop-color="getHexColorWithoutAlpha(c.color)"
+                :stop-opacity="getAlphaFromColor(c.color)"
+              />
+            </linearGradient>
+          </template>
+          <template v-if="getElementBorderGradientConfig(element)">
+            <radialGradient
+              v-if="getElementBorderGradientConfig(element)!.path && getElementBorderGradientConfig(element)!.path !== 'line'"
+              :id="`shape-border-gradient-${svgIdKey}`"
+              :cx="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.x * 100) : 50}%`"
+              :cy="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.y * 100) : 50}%`"
+              :r="getElementBorderGradientConfig(element)!.path === 'rect' ? '60%' : (getElementBorderGradientConfig(element)!.path === 'path' ? '70%' : '50%')"
+              :fx="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.x * 100) : 50}%`"
+              :fy="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.y * 100) : 50}%`"
+            >
+              <stop
+                v-for="(c, idx) in (getElementBorderGradientConfig(element)?.colors || [])"
+                :key="idx"
+                :offset="typeof c.pos === 'string' ? (c.pos.endsWith('%') ? c.pos : c.pos + '%') : `${c.pos}%`"
+                :stop-color="getHexColorWithoutAlpha(c.color)"
+                :stop-opacity="getAlphaFromColor(c.color)"
+              />
+            </radialGradient>
+            <linearGradient
+              v-else
+              :id="`shape-border-gradient-${svgIdKey}`"
+              :x1="getSvgGradientCoords(getElementBorderGradientConfig(element)).x1"
+              :y1="getSvgGradientCoords(getElementBorderGradientConfig(element)).y1"
+              :x2="getSvgGradientCoords(getElementBorderGradientConfig(element)).x2"
+              :y2="getSvgGradientCoords(getElementBorderGradientConfig(element)).y2"
+            >
+              <stop
+                v-for="(c, idx) in (getElementBorderGradientConfig(element)?.colors || [])"
+                :key="idx"
+                :offset="typeof c.pos === 'string' ? (c.pos.endsWith('%') ? c.pos : c.pos + '%') : `${c.pos}%`"
+                :stop-color="getHexColorWithoutAlpha(c.color)"
+                :stop-opacity="getAlphaFromColor(c.color)"
+              />
+            </linearGradient>
+          </template>
+        </defs>
+        <polygon
+          points="50,0 0,100 100,100"
+          :fill="hasElementFill(element) ? (getElementPattern(element) ? `url(#shape-pattern-${svgIdKey})` : (getElementGradientConfig(element) ? `url(#shape-gradient-${svgIdKey})` : (element.style?.fill !== undefined ? element.style.fill : '#f59e0b'))) : 'none'"
+          :stroke="getEffectiveBorderColor(element, '#d97706')"
+          :stroke-width="getEffectiveBorderWidth(element)"
+          :stroke-dasharray="element.style?.borderStyle === 'dashed' ? '5 5' : ''"
+        />
+      </svg>
+    </div>
+
+    <!-- SVG Path Shapes -->
+    <div
+      v-else-if="(element.path || element.content) && ((element.path || element.content).trim().startsWith('M') || (element.path || element.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: (element.shadow && element.shadow.type === 'inner') ? `url(#shape-inner-shadow-${element.id})` : '' }"
+      >
+        <defs>
+          <pattern
+            v-if="getElementPattern(element)"
+            :id="`shape-pattern-${svgIdKey}`"
+            :width="isElementPatternTile(element) ? getElementPatternTileSize(element).w : '100%'"
+            :height="isElementPatternTile(element) ? getElementPatternTileSize(element).h : '100%'"
+            :patternUnits="isElementPatternTile(element) ? 'userSpaceOnUse' : 'objectBoundingBox'"
+            :patternContentUnits="isElementPatternTile(element) ? 'userSpaceOnUse' : 'objectBoundingBox'"
+            :patternTransform="getShapePatternTransform(element, false)"
+          >
+            <image
+              :href="getElementPattern(element)"
+              :width="isElementPatternTile(element) ? getElementPatternTileSize(element).w : 1"
+              :height="isElementPatternTile(element) ? getElementPatternTileSize(element).h : 1"
+              preserveAspectRatio="none"
+            />
+          </pattern>
+          <template v-if="getElementGradientConfig(element)">
+            <radialGradient
+              v-if="getElementGradientConfig(element)!.path && getElementGradientConfig(element)!.path !== 'line'"
+              :id="`shape-gradient-${svgIdKey}`"
+              :cx="`${getElementGradientConfig(element)!.center ? Math.round(getElementGradientConfig(element)!.center!.x * 100) : 50}%`"
+              :cy="`${getElementGradientConfig(element)!.center ? Math.round(getElementGradientConfig(element)!.center!.y * 100) : 50}%`"
+              :r="getElementGradientConfig(element)!.path === 'rect' ? '60%' : (getElementGradientConfig(element)!.path === 'path' ? '70%' : '50%')"
+              :fx="`${getElementGradientConfig(element)!.center ? Math.round(getElementGradientConfig(element)!.center!.x * 100) : 50}%`"
+              :fy="`${getElementGradientConfig(element)!.center ? Math.round(getElementGradientConfig(element)!.center!.y * 100) : 50}%`"
+            >
+              <stop
+                v-for="(c, idx) in (getElementGradientConfig(element)?.colors || [])"
+                :key="idx"
+                :offset="typeof c.pos === 'string' ? (c.pos.endsWith('%') ? c.pos : c.pos + '%') : `${c.pos}%`"
+                :stop-color="getHexColorWithoutAlpha(c.color)"
+                :stop-opacity="getAlphaFromColor(c.color)"
+              />
+            </radialGradient>
+            <linearGradient
+              v-else
+              :id="`shape-gradient-${svgIdKey}`"
+              :x1="getSvgGradientCoords(element).x1"
+              :y1="getSvgGradientCoords(element).y1"
+              :x2="getSvgGradientCoords(element).x2"
+              :y2="getSvgGradientCoords(element).y2"
+            >
+              <stop
+                v-for="(c, idx) in (getElementGradientConfig(element)?.colors || [])"
+                :key="idx"
+                :offset="typeof c.pos === 'string' ? (c.pos.endsWith('%') ? c.pos : c.pos + '%') : `${c.pos}%`"
+                :stop-color="getHexColorWithoutAlpha(c.color)"
+                :stop-opacity="getAlphaFromColor(c.color)"
+              />
+            </linearGradient>
+          </template>
+          <template v-if="getElementBorderGradientConfig(element)">
+            <radialGradient
+              v-if="getElementBorderGradientConfig(element)!.path && getElementBorderGradientConfig(element)!.path !== 'line'"
+              :id="`shape-border-gradient-${svgIdKey}`"
+              :cx="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.x * 100) : 50}%`"
+              :cy="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.y * 100) : 50}%`"
+              :r="getElementBorderGradientConfig(element)!.path === 'rect' ? '60%' : (getElementBorderGradientConfig(element)!.path === 'path' ? '70%' : '50%')"
+              :fx="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.x * 100) : 50}%`"
+              :fy="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.y * 100) : 50}%`"
+            >
+              <stop
+                v-for="(c, idx) in (getElementBorderGradientConfig(element)?.colors || [])"
+                :key="idx"
+                :offset="typeof c.pos === 'string' ? (c.pos.endsWith('%') ? c.pos : c.pos + '%') : `${c.pos}%`"
+                :stop-color="getHexColorWithoutAlpha(c.color)"
+                :stop-opacity="getAlphaFromColor(c.color)"
+              />
+            </radialGradient>
+            <linearGradient
+              v-else
+              :id="`shape-border-gradient-${svgIdKey}`"
+              :x1="getSvgGradientCoords(getElementBorderGradientConfig(element)).x1"
+              :y1="getSvgGradientCoords(getElementBorderGradientConfig(element)).y1"
+              :x2="getSvgGradientCoords(getElementBorderGradientConfig(element)).x2"
+              :y2="getSvgGradientCoords(getElementBorderGradientConfig(element)).y2"
+            >
+              <stop
+                v-for="(c, idx) in (getElementBorderGradientConfig(element)?.colors || [])"
+                :key="idx"
+                :offset="typeof c.pos === 'string' ? (c.pos.endsWith('%') ? c.pos : c.pos + '%') : `${c.pos}%`"
+                :stop-color="getHexColorWithoutAlpha(c.color)"
+                :stop-opacity="getAlphaFromColor(c.color)"
+              />
+            </linearGradient>
+          </template>
+        </defs>
+        <g
+          :transform="getShapeSvgTransform(element)"
+        >
+          <rect
+            v-if="isRectShape(element)"
+            x="0"
+            y="0"
+            :width="getShapeVb(element).w"
+            :height="getShapeVb(element).h"
+            :rx="getRectRadiusInVb(element).rx"
+            :ry="getRectRadiusInVb(element).ry"
+            vector-effect="non-scaling-stroke"
+            :fill="hasElementFill(element) ? (getElementPattern(element) ? `url(#shape-pattern-${svgIdKey})` : (getElementGradientConfig(element) ? `url(#shape-gradient-${svgIdKey})` : (getElementFill(element) !== undefined ? getElementFill(element) : '#3b82f6'))) : 'none'"
+            :stroke="(isImagePlaceholder && isImagePlaceholder(element) && element.style?.enableBorder !== true) ? 'none' : (element.style?.enableBorder === false ? 'none' : getEffectiveBorderColor(element, 'none'))"
+            :stroke-width="(isImagePlaceholder && isImagePlaceholder(element) && element.style?.enableBorder !== true) ? 0 : (element.style?.enableBorder === false ? 0 : getElementBorderWidth(element))"
+            :stroke-linecap="element.style?.strokeLinecap || element.borderLineCap || element.lineCap || (element.shapType === 'arc' ? 'round' : (isOpenLineShape(element) ? 'butt' : undefined))"
+            :stroke-dasharray="element.style?.borderStyle === 'dashed' || element.borderType === 'dashed' ? '5 5' : ''"
+          />
+          <path
+            v-else
+            vector-effect="non-scaling-stroke"
+            :d="element.path || element.content"
+            :fill="hasElementFill(element) ? (getElementPattern(element) ? `url(#shape-pattern-${svgIdKey})` : (getElementGradientConfig(element) ? `url(#shape-gradient-${svgIdKey})` : (getElementFill(element) !== undefined ? getElementFill(element) : '#3b82f6'))) : 'none'"
+            :stroke="(isImagePlaceholder && isImagePlaceholder(element) && element.style?.enableBorder !== true) ? 'none' : (element.style?.enableBorder === false ? 'none' : getEffectiveBorderColor(element, 'none'))"
+            :stroke-width="(isImagePlaceholder && isImagePlaceholder(element) && element.style?.enableBorder !== true) ? 0 : (element.style?.enableBorder === false ? 0 : getElementBorderWidth(element))"
+            :stroke-linecap="element.style?.strokeLinecap || element.borderLineCap || element.lineCap || (element.shapType === 'arc' ? 'round' : (isOpenLineShape(element) ? 'butt' : undefined))"
+            :stroke-dasharray="element.style?.borderStyle === 'dashed' || element.borderType === 'dashed' ? '5 5' : ''"
+          />
+          <template v-if="element.pathFormula === 'bevel'">
+            <path :d="getBevelShadingPaths(element).left" fill="white" fill-opacity="0.2" stroke="none" pointer-events="none" />
+            <path :d="getBevelShadingPaths(element).top" fill="black" fill-opacity="0.08" stroke="none" pointer-events="none" />
+            <path :d="getBevelShadingPaths(element).bottom" fill="black" fill-opacity="0.15" stroke="none" pointer-events="none" />
+            <path :d="getBevelShadingPaths(element).right" fill="black" fill-opacity="0.25" stroke="none" pointer-events="none" />
+          </template>
+          <template v-if="element.pathFormula === 'cube'">
+            <path :d="getCubeShadingPaths(element).top" fill="white" fill-opacity="0.15" stroke="none" pointer-events="none" />
+            <path :d="getCubeShadingPaths(element).right" fill="black" fill-opacity="0.2" stroke="none" pointer-events="none" />
+          </template>
+        </g>
+      </svg>
+    </div>
+
+    <!-- Default Rectangle Shape (with fill) -->
+    <div
+      v-else-if="hasElementFill(element)"
+      :style="{
+        width: '100%',
+        height: '100%',
+        backgroundColor: getElementPattern(element) ? 'transparent' : ((isImagePlaceholder && isImagePlaceholder(element) && !getElementGradientCss(element)) ? getImagePlaceholderFill(element) : ((getElementGradientCss(element) || (getElementFill(element) !== undefined && getElementFill(element) !== 'none')) ? (getElementGradientCss(element) ? 'transparent' : getElementFill(element)) : (getElementFill(element) === 'none' ? 'transparent' : '#10b981'))),
+        backgroundImage: getElementPattern(element) ? `url('${getElementPattern(element)}')` : (getElementGradientCss(element) || 'none'),
+        backgroundSize: getElementPattern(element) ? (isElementPatternTile(element) ? `${getElementPatternTileSize(element).w}px ${getElementPatternTileSize(element).h}px` : 'cover') : undefined,
+        backgroundPosition: getElementPattern(element) ? (isElementPatternTile(element) ? '0 0' : 'center center') : undefined,
+        backgroundRepeat: getElementPattern(element) ? (isElementPatternTile(element) ? 'repeat' : 'no-repeat') : undefined,
+        borderRadius: (isImagePlaceholder && isImagePlaceholder(element)) ? getImagePlaceholderRadius(element) : (element.style?.borderRadius !== undefined ? (typeof element.style.borderRadius === 'number' ? `${element.style.borderRadius}px` : element.style.borderRadius) : (element.radius ? `${element.radius}px` : '0px')),
+        borderWidth: (isImagePlaceholder && isImagePlaceholder(element) && element.style?.enableBorder !== true)
+          ? '0px'
+          : (element.style?.enableBorder === false ? '0px' : `${getElementBorderWidth(element)}px`),
+        borderStyle: element.style?.borderStyle || element.borderType || 'solid',
+        borderColor: (isImagePlaceholder && isImagePlaceholder(element) && element.style?.enableBorder !== true)
+          ? 'transparent'
+          : (element.style?.enableBorder === false ? 'transparent' : (hasElementBorderGradient(element) ? 'transparent' : (element.style?.borderColor || getElementBorderColor(element) || 'transparent'))),
+        borderImage: hasElementBorderGradient(element) ? `${getElementBorderGradientCss(element)} 1` : undefined,
+        filter: (element.shadow && element.shadow.type === 'inner') ? `url(#shape-inner-shadow-${element.id})` : ''
+      }"
+    ></div>
+
+    <!-- Default Rectangle Shape (without fill) -->
+    <div
+      v-else
+      style="width: 100%; height: 100%; overflow: visible;"
+    >
+      <svg
+        style="width: 100%; height: 100%; display: block; overflow: visible;"
+        :style="{ filter: (element.shadow && element.shadow.type === 'inner') ? `url(#shape-inner-shadow-${element.id})` : '' }"
+      >
+        <defs v-if="getElementBorderGradientConfig(element)">
+          <radialGradient
+            v-if="getElementBorderGradientConfig(element)!.path && getElementBorderGradientConfig(element)!.path !== 'line'"
+            :id="`shape-border-gradient-${svgIdKey}`"
+            :cx="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.x * 100) : 50}%`"
+            :cy="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.y * 100) : 50}%`"
+            :r="getElementBorderGradientConfig(element)!.path === 'rect' ? '60%' : (getElementBorderGradientConfig(element)!.path === 'path' ? '70%' : '50%')"
+            :fx="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.x * 100) : 50}%`"
+            :fy="`${getElementBorderGradientConfig(element)!.center ? Math.round(getElementBorderGradientConfig(element)!.center!.y * 100) : 50}%`"
+          >
+            <stop
+              v-for="(c, idx) in (getElementBorderGradientConfig(element)?.colors || [])"
+              :key="idx"
+              :offset="typeof c.pos === 'string' ? (c.pos.endsWith('%') ? c.pos : c.pos + '%') : `${c.pos}%`"
+              :stop-color="getHexColorWithoutAlpha(c.color)"
+              :stop-opacity="getAlphaFromColor(c.color)"
+            />
+          </radialGradient>
+          <linearGradient
+            v-else
+            :id="`shape-border-gradient-${svgIdKey}`"
+            :x1="getSvgGradientCoords(getElementBorderGradientConfig(element)).x1"
+            :y1="getSvgGradientCoords(getElementBorderGradientConfig(element)).y1"
+            :x2="getSvgGradientCoords(getElementBorderGradientConfig(element)).x2"
+            :y2="getSvgGradientCoords(getElementBorderGradientConfig(element)).y2"
+          >
+            <stop
+              v-for="(c, idx) in (getElementBorderGradientConfig(element)?.colors || [])"
+              :key="idx"
+              :offset="typeof c.pos === 'string' ? (c.pos.endsWith('%') ? c.pos : c.pos + '%') : `${c.pos}%`"
+              :stop-color="getHexColorWithoutAlpha(c.color)"
+              :stop-opacity="getAlphaFromColor(c.color)"
+            />
+          </linearGradient>
+        </defs>
+        <rect
+          x="0"
+          y="0"
+          width="100%"
+          height="100%"
+          :rx="parseFloat(element.style?.borderRadius) || parseFloat(element.radius) || 0"
+          :ry="parseFloat(element.style?.borderRadius) || parseFloat(element.radius) || 0"
+          fill="none"
+          :stroke="getEffectiveBorderColor(element, '#10b981')"
+          :stroke-width="getEffectiveBorderWidth(element)"
+          :stroke-dasharray="element.style?.borderStyle === 'dashed' || element.borderType === 'dashed' ? '5 5' : (element.style?.borderStyle === 'dotted' ? '2 2' : '')"
+          vector-effect="non-scaling-stroke"
+        />
+      </svg>
+    </div>
+
+    <!-- Image Placeholder Centered Icon Overlay -->
+    <div
+      v-if="isImagePlaceholder && isImagePlaceholder(element)"
+      class="image-placeholder-icon-overlay"
+      style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;"
+    >
+      <svg
+        class="image-placeholder-icon-btn"
+        width="56"
+        height="56"
+        viewBox="0 0 24 24"
+        fill="none"
+        style="max-width: 45%; max-height: 45%; cursor: pointer; transition: opacity 0.15s ease, transform 0.15s ease;"
+        :style="{ pointerEvents: isReflection ? 'none' : 'auto' }"
+      >
+        <rect x="3" y="3" width="18" height="18" rx="2" stroke="#475569" stroke-width="2" />
+        <circle cx="8.5" cy="8.5" r="1.5" fill="#475569" />
+        <path d="M21 15l-5-5L5 21" stroke="#475569" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+    </div>
+
+    <!-- Embedded Shape Text Overlay -->
+    <div
+      v-else
+      class="shape-text-overlay-wrapper"
+      style="position: absolute; display: flex; flex-direction: column; box-sizing: border-box; pointer-events: none;"
+      :style="{
+        left: isEllipseShape(element) ? '14.6%' : '0px',
+        top: isEllipseShape(element) ? '14.6%' : '0px',
+        width: isEllipseShape(element) ? '70.8%' : '100%',
+        height: isEllipseShape(element) ? '70.8%' : '100%',
+        justifyContent: (element.style?.verticalAlign === 'top' || element.style?.verticalAlign === 'up') ? 'flex-start' : ((element.style?.verticalAlign === 'bottom' || element.style?.verticalAlign === 'down') ? 'flex-end' : 'center'),
+        padding: isEllipseShape(element) ? '0px' : (element.style?.padding !== undefined ? element.style.padding : '4.8px 9.6px 4.8px 9.6px'),
+        transform: ((element.style as any)?.flipH || element.flipH || element.isFlipH || (element.style as any)?.flipV || element.flipV || element.isFlipV) ? `scale(${((element.style as any)?.flipH || element.flipH || element.isFlipH) ? -1 : 1}, ${((element.style as any)?.flipV || element.flipV || element.isFlipV) ? -1 : 1})` : undefined
+      }"
+    >
+      <div ref="shapeTextHostRef" class="text-reflection-wrapper" style="position: relative; pointer-events: none;" :style="{
+        width: (element.style?.writingMode === 'vertical-rl' || element.style?.writingMode === 'vertical-lr') ? 'auto' : '100%',
+        height: (element.style?.writingMode === 'vertical-rl' || element.style?.writingMode === 'vertical-lr') ? '100%' : 'auto'
+      }">
+        <div
+          ref="shapeEditableRef"
+          :id="isReflection ? undefined : `editable-${element.id}`"
+          :contenteditable="isTextSelectable ? 'true' : 'false'"
+          @mousedown="isTextSelectable ? $event.stopPropagation() : null"
+          @click="isTextSelectable ? $event.stopPropagation() : null"
+          @focusin="emit('textFocus')"
+          @focusout="emit('textBlur', $event)"
+          @input="emit('textInput', $event)"
+          @keydown="emit('textKeyDown', $event)"
+          @mousemove="emit('mousemove', $event)"
+          @mouseleave="emit('mouseleave', $event)"
+          @dblclick.stop.prevent="isReadonly ? null : (isImagePlaceholder && isImagePlaceholder(element) ? emit('placeholderUpload', element.id) : (isTextSelectable ? null : emit('startEditing', $event)))"
+          class="shape-text-overlay"
+          :style="{
+            display: 'block',
+            writingMode: element.style?.writingMode || 'horizontal-tb',
+            width: (element.style?.writingMode === 'vertical-rl' || element.style?.writingMode === 'vertical-lr') ? 'auto' : '100%',
+            height: (element.style?.writingMode === 'vertical-rl' || element.style?.writingMode === 'vertical-lr') ? '100%' : 'auto',
+            zoom: (element.autoFit?.type === 'text' && element.autoFit?.fontScale) ? (element.autoFit.fontScale / 100) : 1,
+            transform: 'none',
+            maxWidth: '100%',
+            outline: 'none',
+            padding: '0px',
+            boxSizing: 'content-box',
+            overflow: 'wrap',
+            wordBreak: 'break-word',
+            pointerEvents: isReflection ? 'none' : (isTextSelectable ? 'auto' : (getRawText(element).trim() ? 'auto' : 'none')),
+            cursor: isTextSelectable ? 'text' : undefined,
+            userSelect: isTextSelectable ? 'text' : 'none',
+            color: element.style?.textColor || element.style?.color || element.textColor || ((isImagePlaceholder && isImagePlaceholder(element)) ? '#6366f1' : (element.style?.fill === '#ffffff' || element.style?.fill === '#FFFFFF' ? '#475569' : (themeRecipe?.shape?.textColor || '#ffffff'))),
+            fontFamily: (element.style?.fontFamily && element.style?.fontFamily !== '默认字体' && element.style?.fontFamily !== 'inherit')
+              ? element.style.fontFamily
+              : ((element.fontFamily && element.fontFamily !== '默认字体' && element.fontFamily !== 'inherit')
+                ? element.fontFamily
+                : (themeRecipe?.styleFonts?.bodyFont || 'SourceHanSansCN')),
+            fontSize: element.style?.fontSize || ((isImagePlaceholder && isImagePlaceholder(element)) ? '15px' : '16px'),
+            fontWeight: element.style?.fontWeight || ((isImagePlaceholder && isImagePlaceholder(element)) ? '600' : (getFontVariantStyle(element.style?.fontFamily || element.fontFamily, element.style?.fontFamilyStyle).fontWeight !== 'normal' ? getFontVariantStyle(element.style?.fontFamily || element.fontFamily, element.style?.fontFamilyStyle).fontWeight : 'normal')),
+            fontStyle: element.style?.fontStyle || getFontVariantStyle(element.style?.fontFamily || element.fontFamily, element.style?.fontFamilyStyle).fontStyle,
+            textDecoration: element.style?.textDecoration || 'none',
+            lineHeight: element.style?.lineHeight || 1.35,
+            textAlign: (element.style?.textAlign === 'distribute' ? 'justify' : (element.style?.textAlign || 'center')) as any,
+            textAlignLast: (element.style?.textAlign === 'distribute' ? 'justify' : 'auto') as any,
+            textJustify: (element.style?.textAlign === 'distribute' ? 'inter-character' : 'auto') as any,
+            whiteSpace: element.style?.whiteSpace || 'normal',
+            ['-webkit-text-stroke']: getTextStrokeStyle ? getTextStrokeStyle(element) : 'none',
+            ['paint-order']: element.style?.enableTextStroke ? 'stroke fill' : 'normal',
+            ['text-shadow']: getElementTextShadow ? getElementTextShadow(element) : 'none',
+            '--paragraphSpace': `${element.style?.paragraphSpace === undefined ? 3 : element.style.paragraphSpace}px`
+          }"
+          v-html="formatShapeHtml(element)"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.shape-element-content {
+  user-select: none;
+}
+.shape-text-overlay {
+  user-select: text;
+  -webkit-user-select: text;
+}
+.image-placeholder-icon-btn:hover {
+  opacity: 0.78;
+  transform: scale(1.06);
+}
+</style>