jvs-ppt-ui 0.0.15 → 0.0.16

package/src/components/PresentationMode.vue

@@ -16,7 +16,9 @@ import {
   hasElementBorderGradient,
   getElementBorderGradientCss,
   getGradientAngleDeg,
-  getSvgGradientCoords
+  getSvgGradientCoords,
+  isElementPatternTile,
+  getElementPatternTileSize
 } from '../utils/canvas/elementStyles'
 import {
   getLineElementPath, getLineElementRenderPath, getLineDashArray, getSvgWidth, getSvgHeight, isEllipseShape
@@ -532,6 +534,22 @@ function getElementWidthHeight(el: any) {
   return { width, height }
 }
 
+function getShapePatternTransform(el: any, isTriangle = false): string | undefined {
+  if (!isElementPatternTile(el)) return undefined
+  const dim = getElementWidthHeight(el)
+  const w = Math.max(1, dim.width || 100)
+  const h = Math.max(1, dim.height || 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)})`
+}
+
 function parseColorString(fill: any, fallback = 'none'): string {
   if (!fill) return fallback
   if (typeof fill === 'string') return fill
@@ -1120,14 +1138,17 @@ function getSafeShapeText(el: any): string {
               <svg v-if="el.path || (el.content && (el.content.trim().startsWith('M') || el.content.trim().startsWith('m')))"
                 :viewBox="`0 0 ${el.viewBox ? el.viewBox[0] : (el.width || 200)} ${el.viewBox ? el.viewBox[1] : (el.height || 200)}`"
                 preserveAspectRatio="none" style="width: 100%; height: 100%; display: block; overflow: visible;">
-                <defs v-if="getElementPattern(el)">
-                  <pattern :id="`pres-master-pat-${slide.id || activeIndex}-${el.id}`" width="100%" height="100%" patternContentUnits="objectBoundingBox">
-                    <image :href="getElementPattern(el)" width="1" height="1" preserveAspectRatio="none" />
-                  </pattern>
-                </defs>
                 <defs>
-                  <pattern v-if="getElementPattern(el)" :id="`pres-master-pat-${slide.id || activeIndex}-${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-master-pat-${slide.id || activeIndex}-${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="getShapePatternTransform(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 v-if="getElementGradientConfig(el)!.path && getElementGradientConfig(el)!.path !== 'line'"
@@ -1169,7 +1190,9 @@ function getSafeShapeText(el: any): string {
               <div v-else :style="{
                 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,
+                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,
                 width: '100%',
                 height: '100%',
                 borderRadius: el.style?.borderRadius || '0px',
@@ -1321,9 +1344,9 @@ function getSafeShapeText(el: any): 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',
@@ -1337,9 +1360,16 @@ function getSafeShapeText(el: any): string {
                     style="width: 100%; height: 100%; display: block; overflow: visible;"
                     :style="{ filter: (el.shadow && el.shadow.type === 'inner') ? `url(#pres-shape-inner-shadow-${el.id})` : '' }">
                     <defs>
-                      <pattern v-if="getElementPattern(el)" :id="`pres-main-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-main-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="getShapePatternTransform(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
@@ -1394,9 +1424,16 @@ function getSafeShapeText(el: any): string {
                   <svg overflow="visible" style="width: 100%; height: 100%; display: block; overflow: visible;"
                     :style="{ filter: (el.shadow && el.shadow.type === 'inner') ? `url(#pres-shape-inner-shadow-${el.id})` : '' }">
                     <defs>
-                      <pattern v-if="getElementPattern(el)" :id="`pres-main-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-main-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="getShapePatternTransform(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
@@ -1453,9 +1490,9 @@ function getSafeShapeText(el: any): 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',
@@ -1765,9 +1802,9 @@ function getSafeShapeText(el: any): 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',
@@ -1781,9 +1818,16 @@ function getSafeShapeText(el: any): string {
                       style="width: 100%; height: 100%; display: block; overflow: visible;"
                       :style="{ filter: (el.shadow && el.shadow.type === 'inner') ? `url(#pres-shape-inner-shadow-${el.id})` : '' }">
                       <defs>
-                        <pattern v-if="getElementPattern(el)" :id="`pres-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-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="getShapePatternTransform(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
@@ -1838,9 +1882,16 @@ function getSafeShapeText(el: any): string {
                     <svg overflow="visible" style="width: 100%; height: 100%; display: block; overflow: visible;"
                       :style="{ filter: (el.shadow && el.shadow.type === 'inner') ? `url(#pres-shape-inner-shadow-${el.id})` : '' }">
                       <defs>
-                        <pattern v-if="getElementPattern(el)" :id="`pres-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-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="getShapePatternTransform(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
@@ -1897,9 +1948,9 @@ function getSafeShapeText(el: any): string {
                     height: '100%',
                     backgroundColor: getElementPattern(el) ? 'transparent' : ((getElementGradientCss(el) || getElementFill(el) !== undefined) ? (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: '4px',
                     borderWidth: `${getElementBorderWidth(el)}px`,
                     borderStyle: el.style?.borderStyle || (el as any).borderType || 'solid',

package/src/components/SidebarLeft.vue

@@ -20,7 +20,9 @@ import {
   getElementBorderGradientCss,
   getGradientAngleDeg,
   getSvgGradientCoords,
-  isImagePlaceholder
+  isImagePlaceholder,
+  isElementPatternTile,
+  getElementPatternTileSize
 } from '../utils/canvas/elementStyles'
 import CanvasImageElement from './canvas/elements/CanvasImageElement.vue'
 
@@ -75,29 +77,59 @@ function observeThumbItem(el: HTMLElement | null, index: number) {
   if (!el || typeof IntersectionObserver === 'undefined') return
   if (!thumbObserver) {
     thumbObserver = new IntersectionObserver((entries) => {
+      let mutated = false
       entries.forEach(entry => {
         if (entry.isIntersecting) {
           const idx = Number((entry.target as HTMLElement).dataset.slideIndex)
           if (!isNaN(idx) && !renderedThumbIndexes.value.has(idx)) {
             renderedThumbIndexes.value.add(idx)
+            mutated = true
           }
         }
       })
+      if (mutated) {
+        renderedThumbIndexes.value = new Set(renderedThumbIndexes.value)
+      }
     }, {
       rootMargin: '300px 0px'
     })
   }
-  thumbObserver.observe(el)
+  if (!renderedThumbIndexes.value.has(index)) {
+    thumbObserver.observe(el)
+  }
 }
 
 watch(activeIndex, (newIdx) => {
   if (!renderedThumbIndexes.value.has(newIdx)) {
-    renderedThumbIndexes.value.add(newIdx)
+    const next = new Set(renderedThumbIndexes.value)
+    next.add(newIdx)
+    renderedThumbIndexes.value = next
   }
 })
 
-watch(() => slides.value.length, () => {
-  renderedThumbIndexes.value = new Set([0, 1, 2, 3, 4, 5, activeIndex.value])
+watch(() => slides.value.length, (newLen, oldLen) => {
+  const delta = typeof oldLen === 'number' ? newLen - oldLen : 0
+  const isBulkImport = typeof oldLen === 'number' && delta > 5 && activeIndex.value === 0
+  if (isBulkImport) {
+    if (thumbObserver) {
+      thumbObserver.disconnect()
+      thumbObserver = null
+    }
+    renderedThumbIndexes.value = new Set<number>([0, 1, 2, 3, 4, 5, activeIndex.value])
+    return
+  }
+  const next = new Set<number>([0, 1, 2, 3, 4, 5, activeIndex.value])
+  renderedThumbIndexes.value.forEach(idx => {
+    if (idx >= 0 && idx < newLen) {
+      next.add(idx)
+    }
+    if (delta > 0 && delta <= 5 && idx + delta >= 0 && idx + delta < newLen) {
+      next.add(idx + delta)
+    }
+  })
+  if (activeIndex.value - 1 >= 0) next.add(activeIndex.value - 1)
+  if (activeIndex.value + 1 < newLen) next.add(activeIndex.value + 1)
+  renderedThumbIndexes.value = next
 })
 
 onUnmounted(() => {
@@ -744,6 +776,7 @@ const addSlideWithLayout = (layoutId: string) => {
     newSlide.subtitle = ''
   }
 
+  activeSlideVersion.value++
   presetPopoverVisible.value = false
 }
 
@@ -1035,6 +1068,22 @@ function getElementWidthHeight(el: any, parentGroup?: any, anchorGroup?: any): {
   return { width, height }
 }
 
+function getShapePatternTransform(el: any, isTriangle = false): string | undefined {
+  if (!isElementPatternTile(el)) return undefined
+  const dim = getElementWidthHeight(el)
+  const w = Math.max(1, dim.width || 100)
+  const h = Math.max(1, dim.height || 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)})`
+}
+
 function getTextStrokeStyle(el: any) {
   if (!el.style || !el.style.enableTextStroke) return 'none'
   const width = el.style.textStrokeWidth || '1px'
@@ -2290,8 +2339,9 @@ const masterGroupedLayouts = computed(() => {
                     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,
+                    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: el.style?.borderWidth || '0px',
                     borderStyle: el.style?.borderStyle || 'solid',
@@ -2302,8 +2352,16 @@ const masterGroupedLayouts = computed(() => {
                     :viewBox="`0 0 ${el.viewBox ? el.viewBox[0] : (el.width || 200)} ${el.viewBox ? el.viewBox[1] : (el.height || 200)}`"
                     preserveAspectRatio="none" style="width: 100%; height: 100%; display: block; overflow: visible;">
                     <defs>
-                      <pattern v-if="getElementPattern(el)" :id="`thumb-master-pat-${slide.id || index}-${el.id}`" width="100%" height="100%" patternContentUnits="objectBoundingBox">
-                        <image :href="getElementPattern(el)" width="1" height="1" preserveAspectRatio="none" />
+                      <pattern v-if="getElementPattern(el)" :id="`thumb-master-pat-${slide.id || index}-${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="getShapePatternTransform(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 v-if="getElementGradientConfig(el)!.path && getElementGradientConfig(el)!.path !== 'line'"
@@ -2345,7 +2403,9 @@ const masterGroupedLayouts = computed(() => {
                   <div v-else :style="{
                     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,
+                    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,
                     width: '100%',
                     height: '100%',
                     borderRadius: el.style?.borderRadius || '0px',
@@ -2463,8 +2523,9 @@ const masterGroupedLayouts = computed(() => {
                       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,
+                      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',
@@ -2478,8 +2539,16 @@ const masterGroupedLayouts = computed(() => {
                         style="width: 100%; height: 100%; display: block; overflow: visible;"
                         :style="{ filter: (el.shadow && el.shadow.type === 'inner') ? `url(#thumb-shape-inner-shadow-${el.id})` : '' }">
                         <defs>
-                          <pattern v-if="getElementPattern(el)" :id="`thumb-shape-pattern-${slide.id || index}-${el.id}`" width="100%" height="100%" patternContentUnits="objectBoundingBox">
-                            <image :href="getElementPattern(el)" width="1" height="1" preserveAspectRatio="none" />
+                          <pattern v-if="getElementPattern(el)" :id="`thumb-shape-pattern-${slide.id || index}-${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="getShapePatternTransform(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 v-if="getElementGradientConfig(el)!.path && getElementGradientConfig(el)!.path !== 'line'"
@@ -2523,8 +2592,16 @@ const masterGroupedLayouts = computed(() => {
                       <svg overflow="visible" style="width: 100%; height: 100%; display: block; overflow: visible;"
                         :style="{ filter: (el.shadow && el.shadow.type === 'inner') ? `url(#thumb-shape-inner-shadow-${el.id})` : '' }">
                         <defs>
-                          <pattern v-if="getElementPattern(el)" :id="`thumb-shape-pattern-${slide.id || index}-${el.id}`" width="100%" height="100%" patternContentUnits="objectBoundingBox">
-                            <image :href="getElementPattern(el)" width="1" height="1" preserveAspectRatio="none" />
+                          <pattern v-if="getElementPattern(el)" :id="`thumb-shape-pattern-${slide.id || index}-${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="getShapePatternTransform(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 v-if="getElementGradientConfig(el)!.path && getElementGradientConfig(el)!.path !== 'line'"
@@ -2572,8 +2649,9 @@ const masterGroupedLayouts = computed(() => {
                       height: '100%',
                       backgroundColor: getElementPattern(el) ? 'transparent' : ((isImagePlaceholder(el) && !getElementGradientCss(el)) ? ((getElementFill(el) && getElementFill(el) !== '#f1f5f9' && getElementFill(el) !== '#f8fafc') ? getElementFill(el) : '#d9dde3') : ((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,
+                      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: isImagePlaceholder(el) ? ((el.style?.borderRadius && el.style.borderRadius !== '0px' && el.style.borderRadius !== '4px') ? el.style.borderRadius : '12px') : (el.style?.borderRadius !== undefined ? el.style.borderRadius : '0px'),
                       borderWidth: (isImagePlaceholder(el) && (el.style as any)?.enableBorder !== true) ? '0px' : `${getElementBorderWidth(el)}px`,
                       borderStyle: el.style?.borderStyle || (el as any).borderType || 'solid',

package/src/components/SidebarRight.vue

@@ -916,6 +916,9 @@ const {
   gradientDirection,
   updateElementGradient,
   shapePatternFill,
+  shapePatternType,
+  shapePatternFg,
+  shapePatternBg,
   handleShapePatternUpload,
   clearShapePatternFill,
   styleBorderStyle,
@@ -1709,9 +1712,9 @@ function handleUndockToPopover() {
               v-model:gradient-angle="gradientAngle"
               @update:element-gradient="updateElementGradient"
               v-model:shape-pattern-fill="shapePatternFill"
-              :shape-pattern-type="shapeFillType"
-              :shape-pattern-fg="fillHex"
-              :shape-pattern-bg="fillHex"
+              v-model:shape-pattern-type="shapePatternType"
+              v-model:shape-pattern-fg="shapePatternFg"
+              v-model:shape-pattern-bg="shapePatternBg"
               :fill-opacity="fillAlpha"
               :is-border-enabled="enableBorder"
               v-model:is-border-expanded="isBorderExpanded"

package/src/components/Toolbar.vue

@@ -1359,7 +1359,7 @@ async function handleAudioFileChange(e: Event) {
               </el-popover>
 
               <!-- Chart Popover -->
-              <el-popover trigger="click" placement="bottom-start" :width="516" popper-class="chart-popover-popper"
+              <el-popover trigger="click" placement="bottom-start" :width="568" popper-class="chart-popover-popper"
                 v-model:visible="chartPopoverVisible" :show-arrow="false" :offset="2">
                 <template #reference>
                   <div class="toolbar-btn-stacked" :class="{ 'btn-active': chartPopoverVisible }" title="插入图表"