jvs-ppt-ui 0.0.20 → 0.0.21

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jvs-ppt-ui",
   "private": false,
-  "version": "0.0.20",
+  "version": "0.0.21",
   "type": "module",
   "main": "./dist/lib/jvs-ppt-ui.umd.js",
   "module": "./dist/lib/jvs-ppt-ui.es.js",
@@ -41,7 +41,7 @@
     "jszip": "^3.10.1",
     "jvs-picker-color-v3": "^0.0.11",
     "jvs-pptxgenjs": "^0.0.8",
-    "jvs-pptxtojson": "^0.0.26",
+    "jvs-pptxtojson": "^0.0.27",
     "svg-pathdata": "^7.2.0",
     "vue": "^3.5.34",
     "vuedraggable": "^4.1.0",

package/src/components/Header.vue

@@ -3923,7 +3923,12 @@ const parsePPTXJSONData = (json: any, zipMeta?: any) => {
             const metrics = getParagraphMetrics(el.content, fontScale, defaultFontSize)
             const shapeEl: any = {
               type: 'shape',
-              id: generateAndRegisterId(el.id),
+              id: generateAndRegisterId(el.id),
+              name: el.name,
+              phType: el.phType,
+              isPlaceholder: el.isPlaceholder,
+              placeholderType: el.placeholderType,
+              placeholder: el.placeholder,
               order: el.order !== undefined ? el.order : undefined,
               width: el.width,
               height: el.height,
@@ -4058,7 +4063,12 @@ const parsePPTXJSONData = (json: any, zipMeta?: any) => {
             const metrics = getParagraphMetrics(el.content, ratio, defaultFontSize)
             const textEl: any = {
               type: 'text',
-              id: generateAndRegisterId(el.id),
+              id: generateAndRegisterId(el.id),
+              name: el.name,
+              phType: el.phType,
+              isPlaceholder: el.isPlaceholder,
+              placeholderType: el.placeholderType,
+              placeholder: el.placeholder,
               order: el.order !== undefined ? el.order : undefined,
               width: el.width,
               height: el.height,
@@ -4425,7 +4435,12 @@ const parsePPTXJSONData = (json: any, zipMeta?: any) => {
 
             const element: any = {
               type: 'shape',
-              id: generateAndRegisterId(el.id),
+              id: generateAndRegisterId(el.id),
+              name: el.name,
+              phType: el.phType,
+              isPlaceholder: el.isPlaceholder,
+              placeholderType: el.placeholderType,
+              placeholder: el.placeholder,
               order: el.order !== undefined ? el.order : undefined,
               width: el.width,
               height: el.height,
@@ -4471,7 +4486,8 @@ const parsePPTXJSONData = (json: any, zipMeta?: any) => {
             }
             element.style.borderColor = el.borderColor || (el.outline?.color || 'transparent')
             element.style.borderWidth = el.borderWidth !== undefined ? `${+(el.borderWidth * ratio).toFixed(2)}px` : (el.outline?.width !== undefined ? `${el.outline.width}px` : '0px')
-            element.style.borderStyle = el.borderType || (el.outline?.style || 'solid')
+            element.style.borderStyle = el.borderType || (el.outline?.style || 'solid')
+            if (el.placeholderType === 'pic' && el.borderWidth > 0) element.style.enableBorder = true
             if (lineCap) {
               element.style.borderLineCap = lineCap
               element.style.strokeLinecap = lineCap === 'round' ? 'round' : (lineCap === 'square' ? 'square' : 'butt')

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

@@ -331,7 +331,7 @@ function getRawText(el: any): string {
 
 function getImagePlaceholderFill(el: any): string {
   const fill = getElementFill(el)
-  if (!fill || fill === '#f1f5f9' || fill === '#f8fafc') {
+  if (!fill || fill === 'none' || fill === 'transparent' || fill === '#f1f5f9' || fill === '#f8fafc') {
     return '#d9dde3'
   }
   return fill
@@ -668,7 +668,7 @@ function formatShapeHtml(el: any): string {
             :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'"
+            :fill="hasElementFill(element) ? (getElementPattern(element) ? `url(#shape-pattern-${svgIdKey})` : (getElementGradientConfig(element) ? `url(#shape-gradient-${svgIdKey})` : (getElementFill(element) !== undefined ? getElementFill(element) : '#3b82f6'))) : ((isImagePlaceholder && isImagePlaceholder(element)) ? getImagePlaceholderFill(element) : '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))"
@@ -678,7 +678,7 @@ function formatShapeHtml(el: any): string {
             v-else
             vector-effect="non-scaling-stroke"
             :d="element.path || element.content"
-            :fill="hasElementFill(element) ? (getElementPattern(element) ? `url(#shape-pattern-${svgIdKey})` : (getElementGradientConfig(element) ? `url(#shape-gradient-${svgIdKey})` : (getElementFill(element) !== undefined ? getElementFill(element) : '#3b82f6'))) : 'none'"
+            :fill="hasElementFill(element) ? (getElementPattern(element) ? `url(#shape-pattern-${svgIdKey})` : (getElementGradientConfig(element) ? `url(#shape-gradient-${svgIdKey})` : (getElementFill(element) !== undefined ? getElementFill(element) : '#3b82f6'))) : ((isImagePlaceholder && isImagePlaceholder(element)) ? getImagePlaceholderFill(element) : '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))"

package/src/utils/canvas/elementStyles.ts

@@ -804,7 +804,7 @@ export function isImagePlaceholder(el: any): boolean {
 
   if (el.id && typeof el.id === 'string' && (el.id.includes('ph-image') || el.id.includes('image-ph') || el.id.includes('placeholder-image'))) return true
   if (el.name && typeof el.name === 'string' && (el.name.includes('图片占位符') || el.name.includes('图片框'))) return true
-  if (el.role === 'image' || el.placeholderType === 'image' || el.placeholderType === 'pic' || el.placeholder?.type === 'pic' || el.placeholder?.type === 'image') return true
+  if (el.phType === 'pic' || el.phType === 'picture' || el.phType === 'clipArt' || el.role === 'image' || el.placeholderType === 'image' || el.placeholderType === 'pic' || el.placeholder?.type === 'pic' || el.placeholder?.type === 'image') return true
 
   const rawText = typeof el.text === 'string' ? el.text : (typeof el.content === 'string' ? el.content : '')
   const textHtml = rawText.toLowerCase()