jvs-ppt-ui 0.0.15 → 0.0.16

package/src/composables/sidebar/useSidebarShapeFormat.ts

@@ -96,15 +96,128 @@ export function generateGradientEndColor(hex: string): string {
   }
 }
 
+function encodeSvgColor(color: string, fallback = '#3B82F6'): string {
+  const c = (color || fallback).trim()
+  if (!c || c === 'none') return 'transparent'
+  return c.replace(/#/g, '%23')
+}
+
+export function buildPatternSvgDataUrl(type: string, fgColor = '#3B82F6', bgColor = '#FFFFFF'): string {
+  const fg = encodeSvgColor(fgColor, '#3B82F6')
+  const bg = encodeSvgColor(bgColor, '#FFFFFF')
+  const rawFg = (fgColor || '#3B82F6').trim().replace(/#/g, '%23')
+  const rawBg = (bgColor || '#FFFFFF').trim().replace(/#/g, '%23')
+
+  let w = 10
+  let h = 10
+  let body = ''
+
+  switch (type) {
+    case 'dots-sparse':
+      w = 10; h = 10
+      body = `<circle cx='2.5' cy='2.5' r='1.1' fill='${fg}'/><circle cx='7.5' cy='7.5' r='1.1' fill='${fg}'/>`
+      break
+    case 'dots-dense':
+      w = 10; h = 10
+      body = `<circle cx='5' cy='5' r='2' fill='${fg}'/>`
+      break
+    case 'diag-up':
+      w = 10; h = 10
+      body = `<path d='M0 10L10 0M-2 2L2 -2M8 12L12 8' stroke='${fg}' stroke-width='1.5'/>`
+      break
+    case 'diag-down':
+      w = 10; h = 10
+      body = `<path d='M0 0L10 10M-2 8L2 12M8 -2L12 2' stroke='${fg}' stroke-width='1.5'/>`
+      break
+    case 'cross-diag':
+      w = 10; h = 10
+      body = `<path d='M0 10L10 0M0 0L10 10' stroke='${fg}' stroke-width='1.2'/>`
+      break
+    case 'grid':
+      w = 12; h = 12
+      body = `<path d='M12 0H0V12' fill='none' stroke='${fg}' stroke-width='1.2'/>`
+      break
+    case 'horizontal':
+      w = 8; h = 8
+      body = `<line x1='0' y1='4' x2='8' y2='4' stroke='${fg}' stroke-width='1.5'/>`
+      break
+    case 'vertical':
+      w = 8; h = 8
+      body = `<line x1='4' y1='0' x2='4' y2='8' stroke='${fg}' stroke-width='1.5'/>`
+      break
+    case 'brick':
+      w = 16; h = 16
+      body = `<path d='M0 8h16M8 0v8M0 16v-8' fill='none' stroke='${fg}' stroke-width='1.2'/>`
+      break
+    case 'wave':
+      w = 16; h = 8
+      body = `<path d='M0 4 Q4 0, 8 4 T16 4' fill='none' stroke='${fg}' stroke-width='1.3'/>`
+      break
+    case 'checker':
+      w = 12; h = 12
+      body = `<rect width='6' height='6' fill='${fg}'/><rect x='6' y='6' width='6' height='6' fill='${fg}'/>`
+      break
+    case 'zigzag':
+      w = 12; h = 8
+      body = `<path d='M0 6L6 2L12 6' fill='none' stroke='${fg}' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/>`
+      break
+    default:
+      w = 10; h = 10
+      body = `<path d='M0 10L10 0M-2 2L2 -2M8 12L12 8' stroke='${fg}' stroke-width='1.5'/>`
+      break
+  }
+
+  const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='${w}' height='${h}' data-pattern-type='${type}' data-fg='${rawFg}' data-bg='${rawBg}'><rect width='${w}' height='${h}' fill='${bg}'/>${body}</svg>`
+  const encoded = svg
+    .replace(/'/g, '%22')
+    .replace(/</g, '%3C')
+    .replace(/>/g, '%3E')
+    .replace(/\s+/g, '%20')
+  return `data:image/svg+xml;utf8,${encoded}`
+}
+
+export function parsePatternSvgMeta(url?: string): { type?: string; fg?: string; bg?: string } {
+  if (!url || typeof url !== 'string' || !url.startsWith('data:image/svg+xml')) return {}
+  let decoded = url
+  try {
+    decoded = decodeURIComponent(url)
+  } catch {
+    decoded = url.replace(/%22/g, '"').replace(/%27/g, "'").replace(/%23/g, '#')
+  }
+  const typeMatch = decoded.match(/data-pattern-type=['"]([^'"]+)['"]/)
+  const fgMatch = decoded.match(/data-fg=['"]([^'"]+)['"]/)
+  const bgMatch = decoded.match(/data-bg=['"]([^'"]+)['"]/)
+  let type = typeMatch ? typeMatch[1] : undefined
+  if (!type) {
+    if (decoded.includes('M0 10L10 0M0 0L10 10')) type = 'cross-diag'
+    else if (decoded.includes('M0 10L10 0')) type = 'diag-up'
+    else if (decoded.includes('M12 0H0V12')) type = 'grid'
+    else if (decoded.includes('cx="5" cy="5" r="2"') || decoded.includes("cx='5' cy='5' r='2'")) type = 'dots-dense'
+    else if (decoded.includes('M0 8h16')) type = 'brick'
+    else if (decoded.includes('y1="4" x2="8"') || decoded.includes("y1='4' x2='8'")) type = 'horizontal'
+    else if (decoded.includes('Q4 0, 8 4')) type = 'wave'
+    else if (decoded.includes('width="6" height="6"') || decoded.includes("width='6' height='6'")) type = 'checker'
+  }
+  return {
+    type,
+    fg: fgMatch ? fgMatch[1].replace(/%23/g, '#') : undefined,
+    bg: bgMatch ? bgMatch[1].replace(/%23/g, '#') : undefined
+  }
+}
+
 export const PATTERN_PRESETS = [
-  { name: '斜线', url: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><rect width='10' height='10' fill='%23ffffff'/><path d='M0 10L10 0M-2 2L2 -2M8 12L12 8' stroke='%233b82f6' stroke-width='1.5'/></svg>" },
-  { name: '网格', url: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12'><rect width='12' height='12' fill='%23ffffff'/><path d='M12 0H0V12' fill='none' stroke='%233b82f6' stroke-width='1.2'/></svg>" },
-  { name: '圆点', url: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><rect width='10' height='10' fill='%23ffffff'/><circle cx='5' cy='5' r='2' fill='%233b82f6'/></svg>" },
-  { name: '砖块', url: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><rect width='16' height='16' fill='%23ffffff'/><path d='M0 8h16M8 0v8M0 16v-8' fill='none' stroke='%233b82f6' stroke-width='1.2'/></svg>" },
-  { name: '横线', url: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><rect width='8' height='8' fill='%23ffffff'/><line x1='0' y1='4' x2='8' y2='4' stroke='%233b82f6' stroke-width='1.5'/></svg>" },
-  { name: '波浪', url: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='8'><rect width='16' height='8' fill='%23ffffff'/><path d='M0 4 Q4 0, 8 4 T16 4' fill='none' stroke='%233b82f6' stroke-width='1.2'/></svg>" },
-  { name: '棋盘格', url: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12'><rect width='12' height='12' fill='%23ffffff'/><rect width='6' height='6' fill='%233b82f6'/><rect x='6' y='6' width='6' height='6' fill='%233b82f6'/></svg>" },
-  { name: '交叉线', url: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><rect width='10' height='10' fill='%23ffffff'/><path d='M0 10L10 0M0 0L10 10' stroke='%233b82f6' stroke-width='1.2'/></svg>" }
+  { key: 'dots-sparse', name: '稀疏圆点', url: buildPatternSvgDataUrl('dots-sparse', '#3B82F6', '#FFFFFF') },
+  { key: 'dots-dense', name: '密集圆点', url: buildPatternSvgDataUrl('dots-dense', '#3B82F6', '#FFFFFF') },
+  { key: 'diag-up', name: '上对角线', url: buildPatternSvgDataUrl('diag-up', '#3B82F6', '#FFFFFF') },
+  { key: 'diag-down', name: '下对角线', url: buildPatternSvgDataUrl('diag-down', '#3B82F6', '#FFFFFF') },
+  { key: 'cross-diag', name: '交叉斜线', url: buildPatternSvgDataUrl('cross-diag', '#3B82F6', '#FFFFFF') },
+  { key: 'grid', name: '细网格', url: buildPatternSvgDataUrl('grid', '#3B82F6', '#FFFFFF') },
+  { key: 'horizontal', name: '横线', url: buildPatternSvgDataUrl('horizontal', '#3B82F6', '#FFFFFF') },
+  { key: 'vertical', name: '竖线', url: buildPatternSvgDataUrl('vertical', '#3B82F6', '#FFFFFF') },
+  { key: 'brick', name: '砖块', url: buildPatternSvgDataUrl('brick', '#3B82F6', '#FFFFFF') },
+  { key: 'wave', name: '波浪', url: buildPatternSvgDataUrl('wave', '#3B82F6', '#FFFFFF') },
+  { key: 'checker', name: '棋盘格', url: buildPatternSvgDataUrl('checker', '#3B82F6', '#FFFFFF') },
+  { key: 'zigzag', name: '之字形', url: buildPatternSvgDataUrl('zigzag', '#3B82F6', '#FFFFFF') }
 ]
 
 export function useSidebarShapeFormat(
@@ -359,7 +472,7 @@ export function useSidebarShapeFormat(
       const patternVal = el.pattern || el.style?.pattern || (rawFill && typeof rawFill === 'object' && (rawFill.type === 'image' || rawFill.type === 'pattern') ? (rawFill.value?.src || rawFill.value?.url || rawFill.value) : '')
 
       if (hasPattern || patternVal) {
-        if (patternVal && PATTERN_PRESETS.some(item => item.url === patternVal)) {
+        if (patternVal && (String(patternVal).startsWith('data:image/svg+xml') || el.patternType || el.style?.patternType || PATTERN_PRESETS.some(item => item.url === patternVal))) {
           return 'pattern'
         }
         return 'image'
@@ -444,7 +557,7 @@ export function useSidebarShapeFormat(
           delete el.gradient
           delete el.style.gradient
           const existing = el.pattern || el.style?.pattern || ''
-          const isPreset = PATTERN_PRESETS.some(item => item.url === existing)
+          const isPreset = String(existing).startsWith('data:image/svg+xml') || PATTERN_PRESETS.some(item => item.url === existing)
           const patVal = (!existing || isPreset) ? '' : existing
           el.pattern = patVal
           el.style.pattern = patVal
@@ -458,9 +571,18 @@ export function useSidebarShapeFormat(
           }
           delete el.gradient
           delete el.style.gradient
-          const defaultPat = PATTERN_PRESETS[0].url
-          el.pattern = defaultPat
-          el.style.pattern = defaultPat
+          const pType = el.patternType || el.style?.patternType || 'diag-up'
+          const pFg = el.patternFg || el.style?.patternFg || (el._lastSolidFill && el._lastSolidFill !== 'none' && el._lastSolidFill !== 'transparent' ? el._lastSolidFill : '#3B82F6')
+          const pBg = el.patternBg || el.style?.patternBg || '#FFFFFF'
+          el.patternType = pType
+          el.patternFg = pFg
+          el.patternBg = pBg
+          el.style.patternType = pType
+          el.style.patternFg = pFg
+          el.style.patternBg = pBg
+          const patUrl = buildPatternSvgDataUrl(pType, pFg, pBg)
+          el.pattern = patUrl
+          el.style.pattern = patUrl
           el.style.fill = 'none'
         }
       })
@@ -848,10 +970,116 @@ export function useSidebarShapeFormat(
     },
     set(val: string) {
       if (!selectedElement.value) return
-      if (!selectedElement.value.style) selectedElement.value.style = {}
-      selectedElement.value.pattern = val
-      selectedElement.value.style.pattern = val
-      selectedElement.value.style.fill = 'none'
+      const elements = getFormattingElements()
+      const meta = parsePatternSvgMeta(val)
+      elements.forEach((el: any) => {
+        if (!el.style) el.style = {}
+        if (meta.type) {
+          el.patternType = meta.type
+          el.style.patternType = meta.type
+        }
+        if (meta.fg) {
+          el.patternFg = meta.fg
+          el.style.patternFg = meta.fg
+        }
+        if (meta.bg) {
+          el.patternBg = meta.bg
+          el.style.patternBg = meta.bg
+        }
+        el.pattern = val
+        el.style.pattern = val
+        el.style.fill = 'none'
+      })
+      addHistorySnapshot()
+    }
+  })
+
+  const shapePatternType = computed({
+    get() {
+      if (!selectedElement.value) return 'diag-up'
+      const el = selectedElement.value
+      if (el.patternType || el.style?.patternType) return el.patternType || el.style.patternType
+      const meta = parsePatternSvgMeta(el.pattern || el.style?.pattern)
+      return meta.type || 'diag-up'
+    },
+    set(val: string) {
+      if (!selectedElement.value) return
+      const elements = getFormattingElements()
+      const fg = shapePatternFg.value || '#3B82F6'
+      const bg = shapePatternBg.value || '#FFFFFF'
+      const url = buildPatternSvgDataUrl(val, fg, bg)
+      elements.forEach((el: any) => {
+        if (!el.style) el.style = {}
+        el.patternType = val
+        el.style.patternType = val
+        el.patternFg = fg
+        el.style.patternFg = fg
+        el.patternBg = bg
+        el.style.patternBg = bg
+        el.pattern = url
+        el.style.pattern = url
+        el.style.fill = 'none'
+      })
+      addHistorySnapshot()
+    }
+  })
+
+  const shapePatternFg = computed({
+    get() {
+      if (!selectedElement.value) return '#3B82F6'
+      const el = selectedElement.value
+      if (el.patternFg || el.style?.patternFg) return el.patternFg || el.style.patternFg
+      const meta = parsePatternSvgMeta(el.pattern || el.style?.pattern)
+      return meta.fg || '#3B82F6'
+    },
+    set(val: string) {
+      if (!selectedElement.value) return
+      const elements = getFormattingElements()
+      const pType = shapePatternType.value || 'diag-up'
+      const bg = shapePatternBg.value || '#FFFFFF'
+      const url = buildPatternSvgDataUrl(pType, val, bg)
+      elements.forEach((el: any) => {
+        if (!el.style) el.style = {}
+        el.patternType = pType
+        el.style.patternType = pType
+        el.patternFg = val
+        el.style.patternFg = val
+        el.patternBg = bg
+        el.style.patternBg = bg
+        el.pattern = url
+        el.style.pattern = url
+        el.style.fill = 'none'
+      })
+      addHistorySnapshot()
+    }
+  })
+
+  const shapePatternBg = computed({
+    get() {
+      if (!selectedElement.value) return '#FFFFFF'
+      const el = selectedElement.value
+      if (el.patternBg || el.style?.patternBg) return el.patternBg || el.style.patternBg
+      const meta = parsePatternSvgMeta(el.pattern || el.style?.pattern)
+      return meta.bg || '#FFFFFF'
+    },
+    set(val: string) {
+      if (!selectedElement.value) return
+      const elements = getFormattingElements()
+      const pType = shapePatternType.value || 'diag-up'
+      const fg = shapePatternFg.value || '#3B82F6'
+      const url = buildPatternSvgDataUrl(pType, fg, val)
+      elements.forEach((el: any) => {
+        if (!el.style) el.style = {}
+        el.patternType = pType
+        el.style.patternType = pType
+        el.patternFg = fg
+        el.style.patternFg = fg
+        el.patternBg = val
+        el.style.patternBg = val
+        el.pattern = url
+        el.style.pattern = url
+        el.style.fill = 'none'
+      })
       addHistorySnapshot()
     }
   })
@@ -1529,6 +1757,9 @@ export function useSidebarShapeFormat(
     updateGradientConfig,
     updateElementGradient,
     shapePatternFill,
+    shapePatternType,
+    shapePatternFg,
+    shapePatternBg,
     handleShapePatternUpload,
     clearShapePatternFill,
     styleBorderStyle,

package/src/composables/useSlides.ts

@@ -1032,12 +1032,18 @@ function applyBackgroundToAll() {
   const type = activeSlide.value.bgType || 'color'
   const imgMode = (activeSlide.value as any).bgImageMode
   const isPattern = (activeSlide.value as any).isPattern
+  const bgPatternType = (activeSlide.value as any).bgPatternType
+  const bgPatternFg = (activeSlide.value as any).bgPatternFg
+  const bgPatternBg = (activeSlide.value as any).bgPatternBg
   const lastImgUrl = (activeSlide.value as any)._lastBgImageUrl
   slides.value.forEach(slide => {
     slide.background = bg
     slide.bgType = type
     if (imgMode !== undefined) (slide as any).bgImageMode = imgMode
     if (isPattern !== undefined) (slide as any).isPattern = isPattern
+    if (bgPatternType !== undefined) (slide as any).bgPatternType = bgPatternType
+    if (bgPatternFg !== undefined) (slide as any).bgPatternFg = bgPatternFg
+    if (bgPatternBg !== undefined) (slide as any).bgPatternBg = bgPatternBg
     if (lastImgUrl !== undefined) (slide as any)._lastBgImageUrl = lastImgUrl
   })
   if (isMasterEditingView.value || slideMasters.value.length > 0) {
@@ -1046,12 +1052,18 @@ function applyBackgroundToAll() {
       m.bgType = type
       if (imgMode !== undefined) (m as any).bgImageMode = imgMode
       if (isPattern !== undefined) (m as any).isPattern = isPattern
+      if (bgPatternType !== undefined) (m as any).bgPatternType = bgPatternType
+      if (bgPatternFg !== undefined) (m as any).bgPatternFg = bgPatternFg
+      if (bgPatternBg !== undefined) (m as any).bgPatternBg = bgPatternBg
       if (lastImgUrl !== undefined) (m as any)._lastBgImageUrl = lastImgUrl
       m.layouts?.forEach(l => {
         l.background = bg
         l.bgType = type
         if (imgMode !== undefined) (l as any).bgImageMode = imgMode
         if (isPattern !== undefined) (l as any).isPattern = isPattern
+        if (bgPatternType !== undefined) (l as any).bgPatternType = bgPatternType
+        if (bgPatternFg !== undefined) (l as any).bgPatternFg = bgPatternFg
+        if (bgPatternBg !== undefined) (l as any).bgPatternBg = bgPatternBg
         if (lastImgUrl !== undefined) (l as any)._lastBgImageUrl = lastImgUrl
       })
     })

package/src/style.css

@@ -3841,8 +3841,10 @@ td.selected-cell.focused-cell,
   border: 1px solid #edf0f5 !important;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
   background: #ffffff !important;
-  width: 516px !important;
-  max-width: 516px !important;
+  width: 568px !important;
+  max-width: 568px !important;
+  height: 538px !important;
+  box-sizing: border-box !important;
 }
 
 .chart-popover-popper .el-popper__arrow {

package/src/utils/canvas/elementStyles.ts

@@ -218,6 +218,28 @@ export function getElementPattern(el: any): string | undefined {
   return `data:image/png;base64,${str}`
 }
 
+export function isElementPatternTile(el: any): boolean {
+  const p = getElementPattern(el)
+  if (!p) return false
+  return p.startsWith('data:image/svg+xml') || Boolean(el?.patternType || el?.style?.patternType)
+}
+
+export function getElementPatternTileSize(el: any): { w: number; h: number } {
+  const p = getElementPattern(el)
+  if (!p || !p.startsWith('data:image/svg+xml')) return { w: 12, h: 12 }
+  let decoded = p
+  try {
+    decoded = decodeURIComponent(p)
+  } catch {
+    decoded = p.replace(/%22/g, '"').replace(/%27/g, "'")
+  }
+  const wMatch = decoded.match(/width=['"](\d+(?:\.\d+)?)['"]/)
+  const hMatch = decoded.match(/height=['"](\d+(?:\.\d+)?)['"]/)
+  const w = wMatch ? parseFloat(wMatch[1]) : 12
+  const h = hMatch ? parseFloat(hMatch[1]) : 12
+  return { w: w > 0 ? w : 12, h: h > 0 ? h : 12 }
+}
+
 export interface GradientColorStop {
   pos: number | string
   color: string