jvs-ppt-ui 0.0.14 → 0.0.16

package/src/components/canvas/CanvasQuickToolbar.vue

@@ -468,7 +468,7 @@ function handleFpClick(el: any) {
 
       <!-- Shape Selector (Only for shapes, single selection) -->
       <template v-if="!((selectedElementIds || []).length > 1) && selectedElement.type === 'shape' && !isImagePlaceholderHelper(selectedElement)">
-        <el-popover v-model:visible="quickShapePopoverVisible" placement="bottom" :width="380" trigger="click"
+        <el-popover v-model:visible="quickShapePopoverVisible" placement="bottom" :offset="4" :width="380" trigger="click"
           popper-class="shape-popover-popper" :show-arrow="false">
           <template #reference>
             <button class="quick-toolbar-btn shape-dropdown-btn" title="更换形状"
@@ -539,7 +539,7 @@ function handleFpClick(el: any) {
 
       <!-- Line Selector (Only for lines) -->
       <template v-if="selectedElement.type === 'line'">
-        <el-popover v-model:visible="quickLineTypePopoverVisible" placement="bottom" :width="240" trigger="click"
+        <el-popover v-model:visible="quickLineTypePopoverVisible" placement="bottom" :offset="4" :width="240" trigger="click"
           popper-class="line-dropdown-popper" :show-arrow="false">
           <template #reference>
             <button class="quick-toolbar-btn shape-dropdown-btn" title="更换线条"
@@ -606,44 +606,31 @@ function handleFpClick(el: any) {
                 :class="{ active: getSelectedLineTypeHelper(selectedElement) === 'solid' }"
                 @click="emit('changeLineType', selectedElement, 'solid'); quickLineTypePopoverVisible = false"
                 title="实线">
-                <svg viewBox="0 0 40 40" width="28" height="28" class="line-thumb-svg">
-                  <line x1="8" y1="32" x2="32" y2="8" />
-                </svg>
+                <img src="/jvs-ppt-ui/img/l.png" class="line-img" alt="实线" />
               </div>
               <div class="line-grid-item"
                 :class="{ active: getSelectedLineTypeHelper(selectedElement) === 'dashed' }"
                 @click="emit('changeLineType', selectedElement, 'dashed'); quickLineTypePopoverVisible = false"
                 title="虚线">
-                <svg viewBox="0 0 40 40" width="28" height="28" class="line-thumb-svg dashed">
-                  <line x1="8" y1="32" x2="32" y2="8" />
-                </svg>
+                <img src="/jvs-ppt-ui/img/d.png" class="line-img" alt="虚线" />
               </div>
               <div class="line-grid-item"
                 :class="{ active: getSelectedLineTypeHelper(selectedElement) === 'arrow' }"
                 @click="emit('changeLineType', selectedElement, 'arrow'); quickLineTypePopoverVisible = false"
                 title="单向箭头线">
-                <svg viewBox="0 0 40 40" width="28" height="28" class="line-thumb-svg fill-none">
-                  <line x1="8" y1="32" x2="30" y2="10" />
-                  <polygon points="30,10 22,12 28,18" fill="currentColor" class="line-polygon-head" />
-                </svg>
+                <img src="/jvs-ppt-ui/img/al.png" class="line-img" alt="实线单向箭头" />
               </div>
               <div class="line-grid-item"
                 :class="{ active: getSelectedLineTypeHelper(selectedElement) === 'dashed-arrow' }"
                 @click="emit('changeLineType', selectedElement, 'dashed-arrow'); quickLineTypePopoverVisible = false"
                 title="虚线单向箭头线">
-                <svg viewBox="0 0 40 40" width="28" height="28" class="line-thumb-svg fill-none">
-                  <line x1="8" y1="32" x2="30" y2="10" class="line-thumb-svg dashed" />
-                  <polygon points="30,10 22,12 28,18" fill="currentColor" class="line-polygon-head" />
-                </svg>
+                <img src="/jvs-ppt-ui/img/dl.png" class="line-img" alt="虚线单向箭头" />
               </div>
               <div class="line-grid-item"
                 :class="{ active: getSelectedLineTypeHelper(selectedElement) === 'dot' }"
                 @click="emit('changeLineType', selectedElement, 'dot'); quickLineTypePopoverVisible = false"
-                title="圆点连接线">
-                <svg viewBox="0 0 40 40" width="28" height="28" class="line-thumb-svg fill-none">
-                  <line x1="8" y1="32" x2="28" y2="12" />
-                  <circle cx="30" cy="10" r="3.2" fill="currentColor" class="line-polygon-head" />
-                </svg>
+                title="直线">
+                <img src="/jvs-ppt-ui/img/l.png" class="line-img" alt="直线" />
               </div>
             </div>
 
@@ -653,7 +640,7 @@ function handleFpClick(el: any) {
                 :class="{ active: getSelectedLineTypeHelper(selectedElement) === 'elbow' }"
                 @click="emit('changeLineType', selectedElement, 'elbow'); quickLineTypePopoverVisible = false"
                 title="直角折线连接线">
-                <svg viewBox="0 0 40 40" width="28" height="28" class="line-thumb-svg fill-none">
+                <svg viewBox="0 0 40 40" width="16" height="16" class="line-thumb-svg fill-none">
                   <path d="M10 10 v20 h20" />
                   <polygon points="30,30 24,27 24,33" fill="currentColor" class="line-polygon-head" />
                 </svg>
@@ -662,7 +649,7 @@ function handleFpClick(el: any) {
                 :class="{ active: getSelectedLineTypeHelper(selectedElement) === 'double-elbow' }"
                 @click="emit('changeLineType', selectedElement, 'double-elbow'); quickLineTypePopoverVisible = false"
                 title="双折折线连接线">
-                <svg viewBox="0 0 40 40" width="28" height="28" class="line-thumb-svg fill-none">
+                <svg viewBox="0 0 40 40" width="16" height="16" class="line-thumb-svg fill-none">
                   <path d="M10 10 h10 v20 h10" />
                   <polygon points="30,30 24,27 24,33" fill="currentColor" class="line-polygon-head" />
                 </svg>
@@ -671,7 +658,7 @@ function handleFpClick(el: any) {
                 :class="{ active: getSelectedLineTypeHelper(selectedElement) === 'curve' }"
                 @click="emit('changeLineType', selectedElement, 'curve'); quickLineTypePopoverVisible = false"
                 title="圆弧曲线连接线">
-                <svg viewBox="0 0 40 40" width="28" height="28" class="line-thumb-svg fill-none">
+                <svg viewBox="0 0 40 40" width="16" height="16" class="line-thumb-svg fill-none">
                   <path d="M10 10 Q30 10 30 30" />
                   <polygon points="30,30 27,24 33,24" fill="currentColor" class="line-polygon-head" />
                 </svg>
@@ -680,7 +667,7 @@ function handleFpClick(el: any) {
                 :class="{ active: getSelectedLineTypeHelper(selectedElement) === 'wavy' }"
                 @click="emit('changeLineType', selectedElement, 'wavy'); quickLineTypePopoverVisible = false"
                 title="波浪曲线连接线">
-                <svg viewBox="0 0 40 40" width="28" height="28" class="line-thumb-svg fill-none">
+                <svg viewBox="0 0 40 40" width="16" height="16" class="line-thumb-svg fill-none">
                   <path d="M10 10 C20 10 20 30 30 30" />
                   <polygon points="30,30 24,27 24,33" fill="currentColor" class="line-polygon-head" />
                 </svg>
@@ -754,7 +741,7 @@ function handleFpClick(el: any) {
       <!-- Multiple Elements Alignment & Grouping (When multiple elements are selected) -->
       <template v-if="(selectedElementIds || []).length > 1">
         <!-- Alignment Popover -->
-        <el-popover v-model:visible="quickMultiAlignPopoverVisible" placement="top" :width="168" trigger="click"
+        <el-popover v-model:visible="quickMultiAlignPopoverVisible" placement="top" :offset="4" :width="168" trigger="click"
           popper-class="quick-multi-align-popover" :show-arrow="false">
           <template #reference>
             <button class="quick-toolbar-btn" :class="{ 'panel-active': quickMultiAlignPopoverVisible }" title="对齐排版">
@@ -887,7 +874,7 @@ function handleFpClick(el: any) {
         </el-select>
 
         <!-- Text Align / Font Style Popover -->
-        <el-popover v-model:visible="quickAlignPopoverVisible" placement="bottom" :width="260" trigger="click"
+        <el-popover v-model:visible="quickAlignPopoverVisible" placement="bottom" :offset="4" :width="260" trigger="click"
           popper-class="quick-align-popover" :show-arrow="false">
           <template #reference>
             <button class="quick-toolbar-btn" title="对齐与样式"
@@ -1021,7 +1008,7 @@ function handleFpClick(el: any) {
         </el-popover>
 
         <!-- Unordered List Quick Button & Popover -->
-        <el-popover v-model:visible="isQuickUlVisible" placement="bottom" :width="250" trigger="click"
+        <el-popover v-model:visible="isQuickUlVisible" placement="bottom" :offset="4" :width="250" trigger="click"
           popper-class="list-popover-panel" :show-arrow="false">
           <template #reference>
             <button class="quick-toolbar-btn"
@@ -1086,7 +1073,7 @@ function handleFpClick(el: any) {
         </el-popover>
 
         <!-- Ordered List Quick Button & Popover -->
-        <el-popover v-model:visible="isQuickOlVisible" placement="bottom" :width="250" trigger="click"
+        <el-popover v-model:visible="isQuickOlVisible" placement="bottom" :offset="4" :width="250" trigger="click"
           popper-class="list-popover-panel" :show-arrow="false">
           <template #reference>
             <button class="quick-toolbar-btn"
@@ -1167,7 +1154,7 @@ function handleFpClick(el: any) {
       </button>
 
       <!-- Z-Index Layer Control -->
-      <el-popover v-model:visible="quickZIndexPopoverVisible" placement="top" :width="140" trigger="click"
+      <el-popover v-model:visible="quickZIndexPopoverVisible" placement="top" :offset="4" :width="140" trigger="click"
         popper-class="quick-z-index-popover" :show-arrow="false">
         <template #reference>
           <button class="quick-toolbar-btn" :class="{ 'panel-active': quickZIndexPopoverVisible }" title="层级">

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

@@ -63,6 +63,8 @@ const emit = defineEmits<{
   (e: 'textBlur', ev: FocusEvent, child: any): void
   (e: 'textInput', ev: Event, child: any): void
   (e: 'textKeyDown', ev: KeyboardEvent, child: any): void
+  (e: 'textMouseMove', ev: MouseEvent, child: any): void
+  (e: 'textMouseLeave', ev: MouseEvent, child: any): void
   (e: 'startEditing', id: string, ev?: MouseEvent): void
   (e: 'formulaDblClick', child: any): void
   (e: 'tableDblClick', ev: MouseEvent, child: any): void
@@ -118,6 +120,8 @@ function sortGroupElements(elements: any[]) {
           @focusout="emit('textBlur', $event, child)"
           @input="emit('textInput', $event, child)"
           @keydown="emit('textKeyDown', $event, child)"
+          @mousemove="emit('textMouseMove', $event, child)"
+          @mouseleave="emit('textMouseLeave', $event, child)"
           @dblclick="emit('startEditing', child.id)"
           @formula-dbl-click="emit('formulaDblClick', child)"
           @table-dbl-click="emit('tableDblClick', $event, child)"
@@ -193,6 +197,8 @@ function sortGroupElements(elements: any[]) {
           @text-blur="(ev, c) => emit('textBlur', ev, c)"
           @text-input="(ev, c) => emit('textInput', ev, c)"
           @text-key-down="(ev, c) => emit('textKeyDown', ev, c)"
+          @text-mouse-move="(ev, c) => emit('textMouseMove', ev, c)"
+          @text-mouse-leave="(ev, c) => emit('textMouseLeave', ev, c)"
           @start-editing="(id, ev) => emit('startEditing', id, ev)"
         />
       </template>

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

@@ -2,6 +2,8 @@
 import { computed, ref, watch, onBeforeUnmount, nextTick } from 'vue'
 import {
   getElementPattern,
+  isElementPatternTile,
+  getElementPatternTileSize,
   getElementGradientConfig,
   getElementGradientCss,
   getSvgGradientCoords,
@@ -24,7 +26,8 @@ import { createTextSelectionOverlay, type TextSelectionOverlayHandle } from '../
 
 const { shapeFormatPainter, isReadonly } = useSlides()
 const isTextPaintActive = computed(() => !!(shapeFormatPainter.value && shapeFormatPainter.value.mode === 'text-range'))
-const isTextSelectable = computed(() => (props.isEditingText && props.selectedElementId === props.element.id) || isTextPaintActive.value)
+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
@@ -35,6 +38,23 @@ function getEffectiveBorderWidth(el: any): number {
   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)
@@ -65,7 +85,7 @@ function getShapeSvgTransform(el: any): string | undefined {
 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-${el.id})`
+  if (hasElementBorderGradient(el)) return `url(#shape-border-gradient-${svgIdKey.value})`
   return el.style?.borderColor || getElementBorderColor(el) || fallback
 }
 
@@ -75,6 +95,75 @@ function isOpenLineShape(el: any): boolean {
   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
@@ -87,6 +176,7 @@ const props = defineProps<{
   getElementTextShadow?: (el: any) => string
   getReflectionLeadingCompensation?: (el: any) => number
   isImagePlaceholder?: (el: any) => boolean
+  isReflection?: boolean
   // 直接父盒子（组合）的像素尺寸，用于把 % 样式的宽高解析成 px。
   // 由 CanvasGroupElement 传入；顶层元素不传，走 px 样式分支。
   parentWidthPx?: number
@@ -239,15 +329,29 @@ function getRawText(el: any): string {
   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 {
-  let raw = getRawText(el)
   if (props.isImagePlaceholder && props.isImagePlaceholder(el)) {
-    const stripped = raw ? raw.replace(/<[^>]*>/g, '').trim() : ''
-    if (!stripped) {
-      const prompt = el.placeholder?.prompt || el.name || '图片占位符'
-      raw = `<div>${prompt}</div>`
-    }
+    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')) {
@@ -272,9 +376,9 @@ function formatShapeHtml(el: any): string {
         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) ? 'cover' : undefined,
-        backgroundPosition: getElementPattern(element) ? 'center center' : undefined,
-        backgroundRepeat: getElementPattern(element) ? 'no-repeat' : undefined,
+        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'
@@ -302,7 +406,7 @@ function formatShapeHtml(el: any): string {
         <defs v-if="getElementBorderGradientConfig(element)">
           <radialGradient
             v-if="getElementBorderGradientConfig(element)!.path && getElementBorderGradientConfig(element)!.path !== 'line'"
-            :id="`shape-border-gradient-${element.id}`"
+            :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%')"
@@ -319,7 +423,7 @@ function formatShapeHtml(el: any): string {
           </radialGradient>
           <linearGradient
             v-else
-            :id="`shape-border-gradient-${element.id}`"
+            :id="`shape-border-gradient-${svgIdKey}`"
             :x1="getSvgGradientCoords(getElementBorderGradientConfig(element)).x1"
             :y1="getSvgGradientCoords(getElementBorderGradientConfig(element)).y1"
             :x2="getSvgGradientCoords(getElementBorderGradientConfig(element)).x2"
@@ -357,13 +461,26 @@ function formatShapeHtml(el: any): string {
         :style="{ filter: (element.shadow && element.shadow.type === 'inner') ? `url(#shape-inner-shadow-${element.id})` : '' }"
       >
         <defs>
-          <pattern v-if="getElementPattern(element)" :id="`shape-pattern-${element.id}`" width="100%" height="100%" patternContentUnits="objectBoundingBox">
-            <image :href="getElementPattern(element)" width="1" height="1" preserveAspectRatio="none" />
+          <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-${element.id}`"
+              :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%')"
@@ -380,7 +497,7 @@ function formatShapeHtml(el: any): string {
             </radialGradient>
             <linearGradient
               v-else
-              :id="`shape-gradient-${element.id}`"
+              :id="`shape-gradient-${svgIdKey}`"
               :x1="getSvgGradientCoords(element).x1"
               :y1="getSvgGradientCoords(element).y1"
               :x2="getSvgGradientCoords(element).x2"
@@ -398,7 +515,7 @@ function formatShapeHtml(el: any): string {
           <template v-if="getElementBorderGradientConfig(element)">
             <radialGradient
               v-if="getElementBorderGradientConfig(element)!.path && getElementBorderGradientConfig(element)!.path !== 'line'"
-              :id="`shape-border-gradient-${element.id}`"
+              :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%')"
@@ -415,7 +532,7 @@ function formatShapeHtml(el: any): string {
             </radialGradient>
             <linearGradient
               v-else
-              :id="`shape-border-gradient-${element.id}`"
+              :id="`shape-border-gradient-${svgIdKey}`"
               :x1="getSvgGradientCoords(getElementBorderGradientConfig(element)).x1"
               :y1="getSvgGradientCoords(getElementBorderGradientConfig(element)).y1"
               :x2="getSvgGradientCoords(getElementBorderGradientConfig(element)).x2"
@@ -433,7 +550,7 @@ function formatShapeHtml(el: any): string {
         </defs>
         <polygon
           points="50,0 0,100 100,100"
-          :fill="hasElementFill(element) ? (getElementPattern(element) ? `url(#shape-pattern-${element.id})` : (getElementGradientConfig(element) ? `url(#shape-gradient-${element.id})` : (element.style?.fill !== undefined ? element.style.fill : '#f59e0b'))) : 'none'"
+          :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' : ''"
@@ -452,13 +569,26 @@ function formatShapeHtml(el: any): string {
         :style="{ filter: (element.shadow && element.shadow.type === 'inner') ? `url(#shape-inner-shadow-${element.id})` : '' }"
       >
         <defs>
-          <pattern v-if="getElementPattern(element)" :id="`shape-pattern-${element.id}`" width="100%" height="100%" patternContentUnits="objectBoundingBox">
-            <image :href="getElementPattern(element)" width="1" height="1" preserveAspectRatio="none" />
+          <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-${element.id}`"
+              :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%')"
@@ -475,7 +605,7 @@ function formatShapeHtml(el: any): string {
             </radialGradient>
             <linearGradient
               v-else
-              :id="`shape-gradient-${element.id}`"
+              :id="`shape-gradient-${svgIdKey}`"
               :x1="getSvgGradientCoords(element).x1"
               :y1="getSvgGradientCoords(element).y1"
               :x2="getSvgGradientCoords(element).x2"
@@ -493,7 +623,7 @@ function formatShapeHtml(el: any): string {
           <template v-if="getElementBorderGradientConfig(element)">
             <radialGradient
               v-if="getElementBorderGradientConfig(element)!.path && getElementBorderGradientConfig(element)!.path !== 'line'"
-              :id="`shape-border-gradient-${element.id}`"
+              :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%')"
@@ -510,7 +640,7 @@ function formatShapeHtml(el: any): string {
             </radialGradient>
             <linearGradient
               v-else
-              :id="`shape-border-gradient-${element.id}`"
+              :id="`shape-border-gradient-${svgIdKey}`"
               :x1="getSvgGradientCoords(getElementBorderGradientConfig(element)).x1"
               :y1="getSvgGradientCoords(getElementBorderGradientConfig(element)).y1"
               :x2="getSvgGradientCoords(getElementBorderGradientConfig(element)).x2"
@@ -529,10 +659,26 @@ function formatShapeHtml(el: any): string {
         <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-${element.id})` : (getElementGradientConfig(element) ? `url(#shape-gradient-${element.id})` : (getElementFill(element) !== undefined ? getElementFill(element) : '#3b82f6'))) : 'none'"
+            :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))"
@@ -558,12 +704,12 @@ function formatShapeHtml(el: any): string {
       :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' : '#10b981')),
+        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) ? 'cover' : undefined,
-        backgroundPosition: getElementPattern(element) ? 'center center' : undefined,
-        backgroundRepeat: getElementPattern(element) ? 'no-repeat' : undefined,
-        borderRadius: element.style?.borderRadius !== undefined ? element.style.borderRadius : '0px',
+        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`),
@@ -588,7 +734,7 @@ function formatShapeHtml(el: any): string {
         <defs v-if="getElementBorderGradientConfig(element)">
           <radialGradient
             v-if="getElementBorderGradientConfig(element)!.path && getElementBorderGradientConfig(element)!.path !== 'line'"
-            :id="`shape-border-gradient-${element.id}`"
+            :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%')"
@@ -605,7 +751,7 @@ function formatShapeHtml(el: any): string {
           </radialGradient>
           <linearGradient
             v-else
-            :id="`shape-border-gradient-${element.id}`"
+            :id="`shape-border-gradient-${svgIdKey}`"
             :x1="getSvgGradientCoords(getElementBorderGradientConfig(element)).x1"
             :y1="getSvgGradientCoords(getElementBorderGradientConfig(element)).y1"
             :x2="getSvgGradientCoords(getElementBorderGradientConfig(element)).x2"
@@ -625,8 +771,8 @@ function formatShapeHtml(el: any): string {
           y="0"
           width="100%"
           height="100%"
-          :rx="parseFloat(element.style?.borderRadius) || 0"
-          :ry="parseFloat(element.style?.borderRadius) || 0"
+          :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)"
@@ -636,8 +782,22 @@ function formatShapeHtml(el: any): string {
       </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="{
@@ -656,7 +816,7 @@ function formatShapeHtml(el: any): string {
       }">
         <div
           ref="shapeEditableRef"
-          :id="`editable-${element.id}`"
+          :id="isReflection ? undefined : `editable-${element.id}`"
           :contenteditable="isTextSelectable ? 'true' : 'false'"
           @mousedown="isTextSelectable ? $event.stopPropagation() : null"
           @click="isTextSelectable ? $event.stopPropagation() : null"
@@ -681,7 +841,7 @@ function formatShapeHtml(el: any): string {
             boxSizing: 'content-box',
             overflow: 'wrap',
             wordBreak: 'break-word',
-            pointerEvents: isTextSelectable ? 'auto' : (getRawText(element).trim() ? 'auto' : 'none'),
+            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'))),