jvs-ppt-ui 0.0.15 → 0.0.16

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jvs-ppt-ui",
   "private": false,
-  "version": "0.0.15",
+  "version": "0.0.16",
   "type": "module",
   "main": "./dist/lib/jvs-ppt-ui.umd.js",
   "module": "./dist/lib/jvs-ppt-ui.es.js",

package/src/components/CanvasArea.vue

@@ -5197,8 +5197,8 @@ const selectedElementKeypoints = computed(() => {
   const actualH = geom.height || 200
   const viewBoxW = el.viewBox?.[0] || 200
   const viewBoxH = el.viewBox?.[1] || 200
-  const w = viewBoxW
-  const h = viewBoxH
+  const w = el.pathFormula === 'roundRect' ? actualW : viewBoxW
+  const h = el.pathFormula === 'roundRect' ? actualH : viewBoxH
 
   return el.keypoints.map((keypoint: any, index: number) => {
     const getBaseSize = formulaObj.getBaseSize?.[index]
@@ -8154,7 +8154,7 @@ async function handleGlobalPaste(e: ClipboardEvent) {
                       : (el.type === 'line'
                           ? `${el.style?.left}_${el.style?.top}_${el.style?.width}_${el.style?.height}_${el.start?.join(',')}_${el.end?.join(',')}_${el.broken?.join(',')}_${el.broken2?.join(',')}_${el.curve?.join(',')}`
                           : 'frozen'))
-                  : `${el.id}_${el.style?.left}_${el.style?.top}_${el.style?.width}_${el.style?.height}_${el.style?.rotate}_${el.type === 'line' ? `${el.start?.join(',')}_${el.end?.join(',')}_${el.broken?.join(',')}_${el.broken2?.join(',')}_${el.curve?.join(',')}_` : ''}${selectedElementIds.includes(el.id)}_${selectedElementId === el.id}_${isEditingText}_${activeTab}_${activeSlideVersion}`
+                  : `${el.id}_${el.style?.left}_${el.style?.top}_${el.style?.width}_${el.style?.height}_${el.style?.rotate}_${el.type === 'line' ? `${el.start?.join(',')}_${el.end?.join(',')}_${el.broken?.join(',')}_${el.broken2?.join(',')}_${el.curve?.join(',')}_` : ''}${selectedElementIds.includes(el.id)}_${selectedElementId === el.id}_${isEditingText}_${activeTab}_${activeSlideVersion}_${(el.style as any)?.reflection?.enabled}_${(el.style as any)?.reflection?.distance}_${(el.style as any)?.reflection?.size}_${(el.style as any)?.reflection?.blur}_${(el.style as any)?.reflection?.opacity}`
               ]"
               :class="{
                 selected: selectedElementIds.includes(el.id),
@@ -8428,118 +8428,17 @@ async function handleGlobalPaste(e: ClipboardEvent) {
 
                   <!-- Shape element -->
                   <template v-else-if="el.type === 'shape'">
-                    <div v-if="el.content === 'circle'" :style="{
-                      width: '100%',
-                      height: '100%',
-                      backgroundColor: el.style.fill !== undefined ? el.style.fill : '#3b82f6',
-                      borderRadius: '50%',
-                      borderWidth: el.style.borderWidth || '2px',
-                      borderStyle: el.style.borderStyle || 'solid',
-                      borderColor: el.style.borderColor || '#2563eb',
-                      filter: (el.shadow && el.shadow.type === 'inner') ? `url(#shape-inner-shadow-${el.id})` : ''
-                    }"></div>
-                    <div v-else-if="el.content === 'triangle'" style="width: 100%; height: 100%; overflow: visible;">
-                      <svg viewBox="0 0 100 100" preserveAspectRatio="none"
-                        style="width: 100%; height: 100%; display: block; overflow: visible;"
-                        :style="{ filter: (el.shadow && el.shadow.type === 'inner') ? `url(#shape-inner-shadow-${el.id})` : '' }">
-                        <polygon points="50,0 0,100 100,100"
-                          :fill="el.style.fill !== undefined ? el.style.fill : '#f59e0b'"
-                          :stroke="el.style.borderColor || '#d97706'"
-                          :stroke-width="el.style.borderWidth ? parseInt(el.style.borderWidth) * 1.5 : 3"
-                          :stroke-dasharray="el.style.borderStyle === 'dashed' ? '5 5' : ''" />
-                      </svg>
-                    </div>
-                    <div v-else-if="el.content && (el.content.trim().startsWith('M') || el.content.trim().startsWith('m'))"
-                      style="width: 100%; height: 100%; overflow: visible;">
-                      <svg overflow="visible" style="width: 100%; height: 100%; display: block; overflow: visible;"
-                        :style="{ filter: (el.shadow && el.shadow.type === 'inner') ? `url(#shape-inner-shadow-${el.id})` : '' }">
-                        <g
-                          :transform="el.shapType === 'arc' ? `scale(${getElementWidthHeight(el).width / (el.viewBox ? el.viewBox[0] : 200)}, ${getElementWidthHeight(el).height / (el.viewBox ? el.viewBox[1] : 200)})` : `translate(${(el.style.borderWidth ? parseFloat(el.style.borderWidth) : 2) / 2}, ${(el.style.borderWidth ? parseFloat(el.style.borderWidth) : 2) / 2}) scale(${Math.max(0, getElementWidthHeight(el).width - (el.style.borderWidth ? parseFloat(el.style.borderWidth) : 2)) / (el.viewBox ? el.viewBox[0] : 200)}, ${Math.max(0, getElementWidthHeight(el).height - (el.style.borderWidth ? parseFloat(el.style.borderWidth) : 2)) / (el.viewBox ? el.viewBox[1] : 200)})`">
-                          <path vector-effect="non-scaling-stroke" :d="el.content"
-                            :fill="getElementFill(el) !== undefined ? getElementFill(el) : '#3b82f6'"
-                            :stroke="getElementBorderColor(el) || 'none'" :stroke-width="getElementBorderWidth(el)"
-                            :stroke-linecap="(el.style?.strokeLinecap || el.borderLineCap || el.lineCap || (el.shapType === 'arc' ? 'round' : undefined)) as any"
-                            :stroke-dasharray="el.style?.borderStyle === 'dashed' || (el as any).borderType === 'dashed' ? '5 5' : ''" />
-                        </g>
-                      </svg>
-                    </div>
-                    <div v-else :style="{
-                      width: '100%',
-                      height: '100%',
-                      backgroundColor: (getElementFill(el) !== undefined && getElementFill(el) !== 'none') ? getElementFill(el) : (getElementFill(el) === 'none' ? 'transparent' : '#10b981'),
-                      borderRadius: '4px',
-                      borderWidth: `${getElementBorderWidth(el)}px`,
-                      borderStyle: el.style?.borderStyle || (el as any).borderType || 'solid',
-                      borderColor: getElementBorderColor(el) || 'transparent',
-                      filter: (el.shadow && el.shadow.type === 'inner') ? `url(#shape-inner-shadow-${el.id})` : ''
-                    }"></div>
-
-                    <div class="shape-text-overlay-wrapper"
-                      style="position: absolute; display: flex; flex-direction: column; pointer-events: none; box-sizing: border-box;"
-                      :style="{
-                        left: isEllipseShape(el) ? '14.6%' : '0px',
-                        top: isEllipseShape(el) ? '14.6%' : '0px',
-                        width: isEllipseShape(el) ? '70.8%' : '100%',
-                        height: isEllipseShape(el) ? '70.8%' : '100%',
-                        justifyContent: (el.style.verticalAlign === 'top' || el.style.verticalAlign === 'up') ? 'flex-start' : ((el.style.verticalAlign === 'bottom' || el.style.verticalAlign === 'down') ? 'flex-end' : 'center'),
-                        padding: isEllipseShape(el) ? '0px' : (el.style.padding || '4.8px 9.6px 4.8px 9.6px')
-                      }">
-                      <div class="text-reflection-wrapper" style="position: relative; width: 100%; height: auto;">
-                        <div class="shape-text-overlay" :style="{
-                          display: 'block',
-                          width: '100%',
-                          maxWidth: '100%',
-                          outline: 'none',
-                          padding: '0px',
-                          boxSizing: 'content-box',
-                          overflow: 'wrap',
-                          wordBreak: 'break-word',
-                          pointerEvents: 'none',
-                          userSelect: 'none',
-                          color: el.style.textColor || el.style.color || (el.style.fill === '#ffffff' || el.style.fill === '#FFFFFF' ? '#475569' : '#ffffff'),
-                          fontFamily: el.style.fontFamily || 'inherit',
-                          fontSize: el.style.fontSize || '16px',
-                          fontWeight: el.style.fontWeight || ((getSafeShapeText(el).includes('<')) ? 'normal' : 'normal'),
-                          fontStyle: (el.style as any).fontStyle || 'normal',
-                          textDecoration: (el.style.textDecoration as any) || 'none',
-                          lineHeight: el.style.lineHeight || 1.35,
-                          textAlign: (el.style.textAlign as any) || 'center',
-                          whiteSpace: (el.style as any).whiteSpace || 'normal',
-                          '--paragraphSpace': `${(el.style as any).paragraphSpace === undefined ? 3 : (el.style as any).paragraphSpace}px`
-                        }" v-html="normalizeHtmlFontFamily(getSafeShapeText(el))">
-                        </div>
-
-                        <!-- Shape Text Reflection Clone -->
-                        <div v-if="(el.style as any).textReflection && (el.style as any).textReflection.enabled"
-                          class="text-element-reflection"
-                          style="position: absolute; left: 0; width: 100%; pointer-events: none; z-index: 1;" :style="{
-                            top: `calc(100% + ${(el.style as any).textReflection.distance !== undefined ? (el.style as any).textReflection.distance : 20}px - ${getReflectionLeadingCompensation(el)}px)`,
-                            transform: 'translateY(100%) scaleY(-1)',
-                            opacity: (100 - ((el.style as any).textReflection.opacity !== undefined ? (el.style as any).textReflection.opacity : 10)) / 100,
-                            filter: (el.style as any).textReflection.blur ? `blur(${(((el.style as any).textReflection.blur !== undefined ? (el.style as any).textReflection.blur : 0) * 1.33).toFixed(1)}px)` : 'none',
-                            ['-webkit-mask-image']: `linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) ${((el.style as any).textReflection.size !== undefined ? (el.style as any).textReflection.size : 8)}%, rgba(0,0,0,0) 100%)`,
-                            ['mask-image']: `linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) ${((el.style as any).textReflection.size !== undefined ? (el.style as any).textReflection.size : 8)}%, rgba(0,0,0,0) 100%)`,
-                            color: el.style.textColor || el.style.color || (el.style.fill === '#ffffff' || el.style.fill === '#FFFFFF' ? '#475569' : '#ffffff'),
-                            fontFamily: el.style.fontFamily || 'inherit',
-                            fontSize: el.style.fontSize || '16px',
-                            fontWeight: el.style.fontWeight || 'normal',
-                            fontStyle: (el.style as any).fontStyle || 'normal',
-                            textDecoration: (el.style.textDecoration as any) || 'none',
-                            ['-webkit-text-stroke']: getTextStrokeStyle(el),
-                            ['paint-order']: (el.style as any).enableTextStroke ? 'stroke fill' : 'normal',
-                            ['text-shadow']: (el.style as any).textShadow || 'none',
-                            lineHeight: el.style.lineHeight || 1.35,
-                            textAlign: (el.style.textAlign as any) || 'center',
-                            whiteSpace: (el.style as any).whiteSpace || 'normal',
-                            transformOrigin: 'top left',
-                            height: 'auto'
-                          }"
-                          v-html="el.style.textBackground && el.style.textBackground !== 'transparent'
-                            ? `<span style='background-color: ${el.style.textBackground}; display: inline;'>${normalizeHtmlFontFamily(getSafeShapeText(el))}</span>`
-                            : normalizeHtmlFontFamily(getSafeShapeText(el))">
-                        </div>
-                      </div>
-                    </div>
+                    <CanvasShapeElement
+                      :element="el"
+                      :active-slide="activeSlide"
+                      :is-reflection="true"
+                      :theme-recipe="getActiveSlideThemeRecipe(activeSlide)"
+                      :normalize-html-font-family="normalizeHtmlFontFamily"
+                      :get-text-stroke-style="getTextStrokeStyle"
+                      :get-element-text-shadow="getElementTextShadow"
+                      :get-reflection-leading-compensation="getReflectionLeadingCompensation"
+                      :is-image-placeholder="isImagePlaceholder"
+                    />
                   </template>
 
                   <!-- Image element -->

package/src/components/ChartTypeSelector.vue

@@ -122,7 +122,7 @@ function handleSelect(chartType: string, isMini = false) {
           <div class="chart-card-item" @click="handleSelect('donut')">
             <div class="chart-card-thumb">
               <div class="chart-thumb-box">
-                <svg viewBox="0 0 36 36" width="34" height="34" fill="none">
+                <svg viewBox="0 0 36 36" width="72" height="72" fill="none">
                   <path d="M18 5 A13 13 0 0 1 31 18 L25 18 A7 7 0 0 0 18 11 Z" fill="#2563eb" />
                   <path d="M28 18 A10 10 0 0 1 18 28 L18 23 A5 5 0 0 0 23 18 Z" fill="#60a5fa" />
                   <path d="M18 26 A8 8 0 0 1 10 18 L14 18 A4 4 0 0 0 18 22 Z" fill="#93c5fd" />
@@ -153,7 +153,7 @@ function handleSelect(chartType: string, isMini = false) {
           <div class="chart-card-item" @click="handleSelect('bar')">
             <div class="chart-card-thumb">
               <div class="chart-thumb-box">
-                <svg viewBox="0 0 36 36" width="34" height="34" fill="none">
+                <svg viewBox="0 0 36 36" width="72" height="72" fill="none">
                   <rect x="5" y="7" width="6" height="5" fill="#93c5fd" />
                   <rect x="5" y="13" width="6" height="8" fill="#60a5fa" />
                   <rect x="5" y="22" width="6" height="7" fill="#2563eb" />
@@ -177,7 +177,7 @@ function handleSelect(chartType: string, isMini = false) {
           <div class="chart-card-item" @click="handleSelect('bar')">
             <div class="chart-card-thumb">
               <div class="chart-thumb-box">
-                <svg viewBox="0 0 36 36" width="34" height="34" fill="none">
+                <svg viewBox="0 0 36 36" width="72" height="72" fill="none">
                   <rect x="5" y="16" width="6" height="6" fill="#60a5fa" />
                   <rect x="5" y="23" width="6" height="6" fill="#2563eb" />
 
@@ -214,7 +214,7 @@ function handleSelect(chartType: string, isMini = false) {
           <div class="chart-card-item" @click="handleSelect('line')">
             <div class="chart-card-thumb">
               <div class="chart-thumb-box">
-                <svg viewBox="0 0 36 36" width="34" height="34" fill="none">
+                <svg viewBox="0 0 36 36" width="72" height="72" fill="none">
                   <path d="M5 23 L12 16 L20 21 L31 10" stroke="#2563eb" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
                   <path d="M5 19 L12 23 L20 14 L31 17" stroke="#93c5fd" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
                   <line x1="3" y1="28" x2="33" y2="28" stroke="#cbd5e1" stroke-width="1.2" />
@@ -228,7 +228,7 @@ function handleSelect(chartType: string, isMini = false) {
           <div class="chart-card-item" @click="handleSelect('line')">
             <div class="chart-card-thumb">
               <div class="chart-thumb-box">
-                <svg viewBox="0 0 36 36" width="34" height="34" fill="none">
+                <svg viewBox="0 0 36 36" width="72" height="72" fill="none">
                   <path d="M5 22 L13 22 L21 16 L31 10" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                   <line x1="3" y1="28" x2="33" y2="28" stroke="#cbd5e1" stroke-width="1.2" />
                 </svg>
@@ -264,7 +264,7 @@ function handleSelect(chartType: string, isMini = false) {
           <div class="chart-card-item" @click="handleSelect('horizontal-bar')">
             <div class="chart-card-thumb">
               <div class="chart-thumb-box">
-                <svg viewBox="0 0 36 36" width="34" height="34" fill="none">
+                <svg viewBox="0 0 36 36" width="72" height="72" fill="none">
                   <rect x="7" y="6" width="10" height="5" fill="#2563eb" />
                   <rect x="18" y="6" width="8" height="5" fill="#60a5fa" />
                   <rect x="7" y="15" width="14" height="5" fill="#2563eb" />
@@ -295,7 +295,7 @@ function handleSelect(chartType: string, isMini = false) {
           <div class="chart-card-item" @click="handleSelect('area')">
             <div class="chart-card-thumb">
               <div class="chart-thumb-box">
-                <svg viewBox="0 0 36 36" width="34" height="34" fill="none">
+                <svg viewBox="0 0 36 36" width="72" height="72" fill="none">
                   <path d="M5 24 C10 24 15 14 20 16 C25 18 28 21 31 19 L31 29 L5 29 Z" fill="#60a5fa" opacity="0.5" />
                   <path d="M5 27 C10 27 15 20 20 22 C25 24 28 26 31 25 L31 29 L5 29 Z" fill="#2563eb" opacity="0.8" />
                   <line x1="3" y1="29" x2="33" y2="29" stroke="#cbd5e1" stroke-width="1.2" />
@@ -360,26 +360,33 @@ function handleSelect(chartType: string, isMini = false) {
   display: flex;
   flex-direction: column;
   width: 100%;
+  height: 100%;
   box-sizing: border-box;
 }
 
 .chart-category-tabs {
   display: flex;
   align-items: center;
-  gap: 5px;
+  gap: 8px;
   padding-bottom: 10px;
   overflow-x: hidden;
   border-bottom: 1px solid #f1f5f9;
 }
 
 .chart-tab-pill {
-  padding: 4px 9px;
+  width: 60px;
+  height: 36px;
+  padding: 0 9px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
   border-radius: 6px;
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 400;
   color: #475569;
   background: #ffffff;
-  border: 1px solid #e2e8f0;
+  border: 1px solid #E5E7EB;
   cursor: pointer;
   user-select: none;
   white-space: nowrap;
@@ -393,14 +400,16 @@ function handleSelect(chartType: string, isMini = false) {
 }
 
 .chart-tab-pill.active {
-  background: #ebf3fe;
-  color: #2563eb;
-  border-color: #bfdbfe;
-  font-weight: 600;
+  background: rgba(30, 111, 255, 0.12);
+  background-clip: padding-box;
+  color: #1E6FFF;
+  border-color: rgba(30, 111, 255, 0.12);
+  font-weight: 400;
 }
 
 .chart-scroll-content {
-  max-height: 380px;
+  flex: 1;
+  min-height: 0;
   overflow-y: auto;
   overflow-x: hidden;
   padding-right: 4px;
@@ -452,8 +461,8 @@ function handleSelect(chartType: string, isMini = false) {
 }
 
 .chart-card-thumb {
-  width: 100%;
-  height: 68px;
+  width: 120px;
+  height: 88px;
   background: #f8fafc;
   border-radius: 6px;
   display: flex;
@@ -463,20 +472,20 @@ function handleSelect(chartType: string, isMini = false) {
 }
 
 .chart-thumb-box {
-  width: 50px;
-  height: 50px;
-  border: 1px dashed #cbd5e1;
-  border-radius: 4px;
-  background: #ffffff;
+  width: 72px;
+  height: 72px;
+  border: none;
+  background: transparent;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.15s ease;
 }
 
+.chart-thumb-box svg,
 .chart-thumb-box img {
-  width: 34px;
-  height: 34px;
+  width: 72px;
+  height: 72px;
   object-fit: contain;
   display: block;
 }
@@ -494,11 +503,6 @@ function handleSelect(chartType: string, isMini = false) {
   background: #f1f5f9;
 }
 
-.chart-card-item:hover .chart-thumb-box {
-  border-color: #3b82f6;
-  border-style: solid;
-}
-
 .chart-card-item:hover .chart-card-name {
   color: #2563eb;
 }

package/src/components/Header.vue

@@ -1758,7 +1758,33 @@ const generatePptxBlob = async (): Promise<Blob | null> => {
             const match = bgStr.match(/url\(['"]?([^'"]+)['"]?\)/)
             if (match && match[1]) {
               let bgUrl = match[1]
-              if (bgUrl.startsWith('data:image')) {
+              if (/^data:image\/svg\+xml/i.test(bgUrl)) {
+                const tiledPng = await new Promise<string | undefined>((resolve) => {
+                  const img = new Image()
+                  img.onload = () => {
+                    try {
+                      const canvas = document.createElement('canvas')
+                      canvas.width = Math.max(1, Math.min(4096, Math.round(logicalWidth.value || 1280)))
+                      canvas.height = Math.max(1, Math.min(4096, Math.round(logicalHeight.value || 720)))
+                      const ctx = canvas.getContext('2d')
+                      if (!ctx) return resolve(undefined)
+                      const pat = ctx.createPattern(img, 'repeat')
+                      if (pat) {
+                        ctx.fillStyle = pat
+                        ctx.fillRect(0, 0, canvas.width, canvas.height)
+                      } else {
+                        ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
+                      }
+                      resolve(canvas.toDataURL('image/png'))
+                    } catch {
+                      resolve(undefined)
+                    }
+                  }
+                  img.onerror = () => resolve(undefined)
+                  img.src = bgUrl
+                })
+                pptxBg = tiledPng ? { data: tiledPng } : { color: 'FFFFFF', transparency: 0 }
+              } else if (bgUrl.startsWith('data:image')) {
                 pptxBg = { data: bgUrl }
               } else {
                 if (!bgUrl.startsWith('http') && !bgUrl.startsWith('data:')) {
@@ -2208,8 +2234,7 @@ const generatePptxBlob = async (): Promise<Blob | null> => {
           const patternUrl = getElementPatternUrl(el)
           const g = getElementGradientConfig(el)
 
-          // SVG 图片填充 PowerPoint 无法可靠渲染 a:blipFill，先按形状显示尺寸栅格化为 PNG
-          // （画布上图案填充本身是 preserveAspectRatio="none" 拉伸铺满，与 a:stretch 语义一致）
+          // SVG 图案填充 PowerPoint 无法直接渲染 SVG a:blipFill，先按形状显示尺寸以 1:1 平铺栅格化为 PNG
           const rasterizeSvgFill = (svgUrl: string, widthPx: number, heightPx: number): Promise<string | undefined> => {
             return new Promise((resolve) => {
               const img = new Image()
@@ -2220,7 +2245,13 @@ const generatePptxBlob = async (): Promise<Blob | null> => {
                   canvas.height = Math.max(1, Math.min(4096, Math.round(heightPx)))
                   const ctx = canvas.getContext('2d')
                   if (!ctx) return resolve(undefined)
-                  ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
+                  const pat = ctx.createPattern(img, 'repeat')
+                  if (pat) {
+                    ctx.fillStyle = pat
+                    ctx.fillRect(0, 0, canvas.width, canvas.height)
+                  } else {
+                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
+                  }
                   resolve(canvas.toDataURL('image/png'))
                 } catch {
                   resolve(undefined)
@@ -2232,8 +2263,12 @@ const generatePptxBlob = async (): Promise<Blob | null> => {
           }
 
           const buildNativeShapeFill = async (): Promise<any> => {
-            // 图片填充 → 原生 a:blipFill
+            // 图片/图案填充 → 原生 a:blipFill
             if (patternUrl) {
+              if (/^data:image\/svg\+xml/i.test(patternUrl)) {
+                const pngUrl = await rasterizeSvgFill(patternUrl, pixelWidth, pixelHeight)
+                return pngUrl ? { type: 'image', data: pngUrl } : undefined
+              }
               const pUrl = await resolveMediaSrc(patternUrl, 'image')
               if (pUrl && /^data:image\/svg\+xml/i.test(pUrl)) {
                 const pngUrl = await rasterizeSvgFill(pUrl, pixelWidth, pixelHeight)

package/src/components/PresentationGroupChild.vue

@@ -26,7 +26,9 @@ import {
   getGradientAngleDeg,
   getSvgGradientCoords,
   getHexColorWithoutAlpha,
-  getAlphaFromColor
+  getAlphaFromColor,
+  isElementPatternTile,
+  getElementPatternTileSize
 } from '../utils/canvas/elementStyles'
 
 const props = defineProps<{
@@ -48,6 +50,21 @@ function resolvePx(val: any, parentPx: number): number {
 const selfW = computed(() => resolvePx(props.el?.style?.width, props.parentW))
 const selfH = computed(() => resolvePx(props.el?.style?.height, props.parentH))
 
+function getGroupShapePatternTransform(el: any, isTriangle = false): string | undefined {
+  if (!isElementPatternTile(el)) return undefined
+  const w = Math.max(1, selfW.value || 100)
+  const h = Math.max(1, selfH.value || 100)
+  if (isTriangle) {
+    return `scale(${+(100 / w).toFixed(4)}, ${+(100 / h).toFixed(4)})`
+  }
+  const vbW = el.viewBox ? el.viewBox[0] : 200
+  const vbH = el.viewBox ? el.viewBox[1] : 200
+  const bw = el.shapType === 'arc' ? 0 : (el.style?.borderWidth ? parseFloat(el.style.borderWidth) : 2)
+  const effW = Math.max(1, w - bw)
+  const effH = Math.max(1, h - bw)
+  return `scale(${+(vbW / effW).toFixed(4)}, ${+(vbH / effH).toFixed(4)})`
+}
+
 const boxStyle = computed(() => {
   const el = props.el || {}
   const st = el.style || {}
@@ -326,9 +343,9 @@ const MARKER_PATHS: Record<string, string> = {
           height: '100%',
           backgroundColor: getElementPattern(el) ? 'transparent' : ((getElementGradientCss(el) || (getElementFill(el) !== undefined && getElementFill(el) !== 'none')) ? (getElementGradientCss(el) ? 'transparent' : getElementFill(el)) : (getElementFill(el) === 'none' ? 'transparent' : '#3b82f6')),
           backgroundImage: getElementPattern(el) ? `url('${getElementPattern(el)}')` : (getElementGradientCss(el) || 'none'),
-          backgroundSize: getElementPattern(el) ? 'cover' : undefined,
-          backgroundPosition: getElementPattern(el) ? 'center center' : undefined,
-          backgroundRepeat: getElementPattern(el) ? 'no-repeat' : undefined,
+          backgroundSize: getElementPattern(el) ? (isElementPatternTile(el) ? `${getElementPatternTileSize(el).w}px ${getElementPatternTileSize(el).h}px` : 'cover') : undefined,
+          backgroundPosition: getElementPattern(el) ? (isElementPatternTile(el) ? '0 0' : 'center center') : undefined,
+          backgroundRepeat: getElementPattern(el) ? (isElementPatternTile(el) ? 'repeat' : 'no-repeat') : undefined,
           borderRadius: '50%',
           borderWidth: `${getElementBorderWidth(el)}px`,
           borderStyle: el.style?.borderStyle || (el as any).borderType || 'solid',
@@ -341,9 +358,16 @@ const MARKER_PATHS: Record<string, string> = {
           <svg viewBox="0 0 100 100" preserveAspectRatio="none"
             style="width: 100%; height: 100%; display: block; overflow: visible;">
             <defs>
-              <pattern v-if="getElementPattern(el)" :id="`pres-group-shape-pattern-${el.id}`" width="100%" height="100%"
-                patternContentUnits="objectBoundingBox">
-                <image :href="getElementPattern(el)" width="1" height="1" preserveAspectRatio="none" />
+              <pattern v-if="getElementPattern(el)" :id="`pres-group-shape-pattern-${el.id}`"
+                :width="isElementPatternTile(el) ? getElementPatternTileSize(el).w : '100%'"
+                :height="isElementPatternTile(el) ? getElementPatternTileSize(el).h : '100%'"
+                :patternUnits="isElementPatternTile(el) ? 'userSpaceOnUse' : 'objectBoundingBox'"
+                :patternContentUnits="isElementPatternTile(el) ? 'userSpaceOnUse' : 'objectBoundingBox'"
+                :patternTransform="getGroupShapePatternTransform(el, true)">
+                <image :href="getElementPattern(el)"
+                  :width="isElementPatternTile(el) ? getElementPatternTileSize(el).w : 1"
+                  :height="isElementPatternTile(el) ? getElementPatternTileSize(el).h : 1"
+                  preserveAspectRatio="none" />
               </pattern>
               <template v-if="getElementGradientConfig(el)">
                 <radialGradient
@@ -397,9 +421,16 @@ const MARKER_PATHS: Record<string, string> = {
           style="width: 100%; height: 100%; overflow: visible;">
           <svg overflow="visible" style="width: 100%; height: 100%; display: block; overflow: visible;">
             <defs>
-              <pattern v-if="getElementPattern(el)" :id="`pres-group-shape-pattern-${el.id}`" width="100%" height="100%"
-                patternContentUnits="objectBoundingBox">
-                <image :href="getElementPattern(el)" width="1" height="1" preserveAspectRatio="none" />
+              <pattern v-if="getElementPattern(el)" :id="`pres-group-shape-pattern-${el.id}`"
+                :width="isElementPatternTile(el) ? getElementPatternTileSize(el).w : '100%'"
+                :height="isElementPatternTile(el) ? getElementPatternTileSize(el).h : '100%'"
+                :patternUnits="isElementPatternTile(el) ? 'userSpaceOnUse' : 'objectBoundingBox'"
+                :patternContentUnits="isElementPatternTile(el) ? 'userSpaceOnUse' : 'objectBoundingBox'"
+                :patternTransform="getGroupShapePatternTransform(el, false)">
+                <image :href="getElementPattern(el)"
+                  :width="isElementPatternTile(el) ? getElementPatternTileSize(el).w : 1"
+                  :height="isElementPatternTile(el) ? getElementPatternTileSize(el).h : 1"
+                  preserveAspectRatio="none" />
               </pattern>
               <template v-if="getElementGradientConfig(el)">
                 <radialGradient
@@ -458,9 +489,9 @@ const MARKER_PATHS: Record<string, string> = {
           height: '100%',
           backgroundColor: getElementPattern(el) ? 'transparent' : ((getElementGradientCss(el) || (getElementFill(el) !== undefined && getElementFill(el) !== 'none')) ? (getElementGradientCss(el) ? 'transparent' : getElementFill(el)) : (getElementFill(el) === 'none' ? 'transparent' : '#10b981')),
           backgroundImage: getElementPattern(el) ? `url('${getElementPattern(el)}')` : (getElementGradientCss(el) || 'none'),
-          backgroundSize: getElementPattern(el) ? 'cover' : undefined,
-          backgroundPosition: getElementPattern(el) ? 'center center' : undefined,
-          backgroundRepeat: getElementPattern(el) ? 'no-repeat' : undefined,
+          backgroundSize: getElementPattern(el) ? (isElementPatternTile(el) ? `${getElementPatternTileSize(el).w}px ${getElementPatternTileSize(el).h}px` : 'cover') : undefined,
+          backgroundPosition: getElementPattern(el) ? (isElementPatternTile(el) ? '0 0' : 'center center') : undefined,
+          backgroundRepeat: getElementPattern(el) ? (isElementPatternTile(el) ? 'repeat' : 'no-repeat') : undefined,
           borderRadius: el.style?.borderRadius !== undefined ? el.style.borderRadius : '0px',
           borderWidth: `${getElementBorderWidth(el)}px`,
           borderStyle: el.style?.borderStyle || (el as any).borderType || 'solid',