pptxtojson 1.1.1 → 1.2.0

package/index.html

@@ -35,7 +35,7 @@
 			display: flex;
 		}
 		.main {
-			width: 50%;
+			width: 40%;
 			min-width: 600px;
 			height: 100%;
 			margin-right: 10px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pptxtojson",
-	"version": "1.1.1",
+	"version": "1.2.0",
 	"description": "A javascript tool for parsing .pptx file",
 	"type": "module",
 	"main": "./dist/index.umd.js",
@@ -24,7 +24,7 @@
 	"homepage": "https://github.com/pipipi-pikachu/pptxtojson",
 	"license": "MIT",
 	"publishConfig": {
-		"registry": "https://registry.npmjs.com"
+		"registry": "https://registry.npmjs.org"
 	},
 	"dependencies": {
 		"jszip": "^3.10.1",

package/src/chart.js

@@ -1,4 +1,29 @@
 import { eachElement, getTextByPathList } from './utils'
+import { applyTint } from './color'
+
+function extractChartColors(serNode, warpObj) {
+  if (serNode.constructor !== Array) serNode = [serNode]
+  const schemeClrs = []
+  for (const node of serNode) {
+    let schemeClr = getTextByPathList(node, ['c:spPr', 'a:solidFill', 'a:schemeClr'])
+    if (!schemeClr) schemeClr = getTextByPathList(node, ['c:spPr', 'a:ln', 'a:solidFill', 'a:schemeClr'])
+    if (!schemeClr) schemeClr = getTextByPathList(node, ['c:marker', 'c:spPr', 'a:ln', 'a:solidFill', 'a:schemeClr'])
+
+    let clr = getTextByPathList(schemeClr, ['attrs', 'val'])
+    if (clr) {
+      clr = getTextByPathList(warpObj['themeContent'], ['a:theme', 'a:themeElements', 'a:clrScheme', `a:${clr}`, 'a:srgbClr', 'attrs', 'val'])
+      const tint = getTextByPathList(schemeClr, ['a:tint', 'attrs', 'val']) / 100000
+      if (clr && !isNaN(tint)) {
+        clr = applyTint(clr, tint)
+      }
+    }
+    else clr = getTextByPathList(node, ['c:spPr', 'a:solidFill', 'a:srgbClr', 'attrs', 'val'])
+
+    if (clr) clr = '#' + clr
+    schemeClrs.push(clr)
+  }
+  return schemeClrs
+}
 
 function extractChartData(serNode) {
   const dataMat = []
@@ -59,7 +84,7 @@ function extractChartData(serNode) {
   return dataMat
 }
 
-export function getChartInfo(plotArea) {
+export function getChartInfo(plotArea, warpObj) {
   let chart = null
   for (const key in plotArea) {
     switch (key) {
@@ -67,6 +92,7 @@ export function getChartInfo(plotArea) {
         chart = {
           type: 'lineChart',
           data: extractChartData(plotArea[key]['c:ser']),
+          colors: extractChartColors(plotArea[key]['c:ser'], warpObj),
           grouping: getTextByPathList(plotArea[key], ['c:grouping', 'attrs', 'val']),
           marker: plotArea[key]['c:marker'] ? true : false,
         }
@@ -75,6 +101,7 @@ export function getChartInfo(plotArea) {
         chart = {
           type: 'line3DChart',
           data: extractChartData(plotArea[key]['c:ser']),
+          colors: extractChartColors(plotArea[key]['c:ser'], warpObj),
           grouping: getTextByPathList(plotArea[key], ['c:grouping', 'attrs', 'val']),
         }
         break
@@ -82,6 +109,7 @@ export function getChartInfo(plotArea) {
         chart = {
           type: 'barChart',
           data: extractChartData(plotArea[key]['c:ser']),
+          colors: extractChartColors(plotArea[key]['c:ser'], warpObj),
           grouping: getTextByPathList(plotArea[key], ['c:grouping', 'attrs', 'val']),
           barDir: getTextByPathList(plotArea[key], ['c:barDir', 'attrs', 'val']),
         }
@@ -90,6 +118,7 @@ export function getChartInfo(plotArea) {
         chart = {
           type: 'bar3DChart',
           data: extractChartData(plotArea[key]['c:ser']),
+          colors: extractChartColors(plotArea[key]['c:ser'], warpObj),
           grouping: getTextByPathList(plotArea[key], ['c:grouping', 'attrs', 'val']),
           barDir: getTextByPathList(plotArea[key], ['c:barDir', 'attrs', 'val']),
         }
@@ -98,18 +127,21 @@ export function getChartInfo(plotArea) {
         chart = {
           type: 'pieChart',
           data: extractChartData(plotArea[key]['c:ser']),
+          colors: extractChartColors(plotArea[key]['c:ser']['c:dPt'], warpObj),
         }
         break
       case 'c:pie3DChart':
         chart = {
           type: 'pie3DChart',
           data: extractChartData(plotArea[key]['c:ser']),
+          colors: extractChartColors(plotArea[key]['c:ser']['c:dPt'], warpObj),
         }
         break
       case 'c:doughnutChart':
         chart = {
           type: 'doughnutChart',
           data: extractChartData(plotArea[key]['c:ser']),
+          colors: extractChartColors(plotArea[key]['c:ser']['c:dPt'], warpObj),
           holeSize: getTextByPathList(plotArea[key], ['c:holeSize', 'attrs', 'val']),
         }
         break
@@ -117,6 +149,7 @@ export function getChartInfo(plotArea) {
         chart = {
           type: 'areaChart',
           data: extractChartData(plotArea[key]['c:ser']),
+          colors: extractChartColors(plotArea[key]['c:ser'], warpObj),
           grouping: getTextByPathList(plotArea[key], ['c:grouping', 'attrs', 'val']),
         }
         break
@@ -124,6 +157,7 @@ export function getChartInfo(plotArea) {
         chart = {
           type: 'area3DChart',
           data: extractChartData(plotArea[key]['c:ser']),
+          colors: extractChartColors(plotArea[key]['c:ser'], warpObj),
           grouping: getTextByPathList(plotArea[key], ['c:grouping', 'attrs', 'val']),
         }
         break
@@ -131,6 +165,7 @@ export function getChartInfo(plotArea) {
         chart = {
           type: 'scatterChart',
           data: extractChartData(plotArea[key]['c:ser']),
+          colors: extractChartColors(plotArea[key]['c:ser'], warpObj),
           style: getTextByPathList(plotArea[key], ['c:scatterStyle', 'attrs', 'val']),
         }
         break
@@ -138,12 +173,14 @@ export function getChartInfo(plotArea) {
         chart = {
           type: 'bubbleChart',
           data: extractChartData(plotArea[key]['c:ser']),
+          colors: extractChartColors(plotArea[key]['c:ser'], warpObj),
         }
         break
       case 'c:radarChart':
         chart = {
           type: 'radarChart',
           data: extractChartData(plotArea[key]['c:ser']),
+          colors: extractChartColors(plotArea[key]['c:ser'], warpObj),
           style: getTextByPathList(plotArea[key], ['c:radarStyle', 'attrs', 'val']),
         }
         break
@@ -151,18 +188,21 @@ export function getChartInfo(plotArea) {
         chart = {
           type: 'surfaceChart',
           data: extractChartData(plotArea[key]['c:ser']),
+          colors: extractChartColors(plotArea[key]['c:ser'], warpObj),
         }
         break
       case 'c:surface3DChart':
         chart = {
           type: 'surface3DChart',
           data: extractChartData(plotArea[key]['c:ser']),
+          colors: extractChartColors(plotArea[key]['c:ser'], warpObj),
         }
         break
       case 'c:stockChart':
         chart = {
           type: 'stockChart',
           data: extractChartData(plotArea[key]['c:ser']),
+          colors: [],
         }
         break
       default:

package/src/fill.js

@@ -63,10 +63,26 @@ export async function getPicFill(type, node, warpObj) {
     const imgArrayBuffer = await warpObj['zip'].file(imgPath).async('arraybuffer')
     const imgMimeType = getMimeType(imgExt)
     img = `data:${imgMimeType};base64,${base64ArrayBuffer(imgArrayBuffer)}`
+
+    const loadedImages = warpObj['loaded-images'] || {}
+    loadedImages[imgPath] = img
+    warpObj['loaded-images'] = loadedImages
   }
   return img
 }
 
+export function getPicFillOpacity(node) {
+  const aBlipNode = node['a:blip']
+
+  const aphaModFixNode = getTextByPathList(aBlipNode, ['a:alphaModFix', 'attrs'])
+  let opacity = 1
+  if (aphaModFixNode && aphaModFixNode['amt'] && aphaModFixNode['amt'] !== '') {
+    opacity = parseInt(aphaModFixNode['amt']) / 100000
+  }
+
+  return opacity
+}
+
 export async function getBgPicFill(bgPr, sorce, warpObj) {
   const picBase64 = await getPicFill(sorce, bgPr['a:blipFill'], warpObj)
   const aBlipNode = bgPr['a:blipFill']['a:blip']
@@ -83,31 +99,48 @@ export async function getBgPicFill(bgPr, sorce, warpObj) {
   }
 }
 
+export function getGradientFill(node, warpObj) {
+  const gsLst = node['a:gsLst']['a:gs']
+  const colors = []
+  for (let i = 0; i < gsLst.length; i++) {
+    const lo_color = getSolidFill(gsLst[i], undefined, undefined, warpObj)
+    const pos = getTextByPathList(gsLst[i], ['attrs', 'pos'])
+    
+    colors[i] = {
+      pos: pos ? (pos / 1000 + '%') : '',
+      color: lo_color,
+    }
+  }
+  const lin = node['a:lin']
+  let rot = 90
+  if (lin) rot = angleToDegrees(lin['attrs']['ang']) + 90
+  return {
+    rot,
+    colors: colors.sort((a, b) => parseInt(a.pos) - parseInt(b.pos)),
+  }
+}
+
 export function getBgGradientFill(bgPr, phClr, slideMasterContent, warpObj) {
   if (bgPr) {
     const grdFill = bgPr['a:gradFill']
     const gsLst = grdFill['a:gsLst']['a:gs']
-    const color_ary = []
+    const colors = []
     
     for (let i = 0; i < gsLst.length; i++) {
       const lo_color = getSolidFill(gsLst[i], slideMasterContent['p:sldMaster']['p:clrMap']['attrs'], phClr, warpObj)
       const pos = getTextByPathList(gsLst[i], ['attrs', 'pos'])
 
-      color_ary[i] = {
+      colors[i] = {
         pos: pos ? (pos / 1000 + '%') : '',
         color: lo_color,
       }
     }
     const lin = grdFill['a:lin']
     let rot = 90
-    if (lin) {
-      rot = angleToDegrees(lin['attrs']['ang'])
-      rot = rot + 90
-    }
-
+    if (lin) rot = angleToDegrees(lin['attrs']['ang']) + 90
     return {
       rot,
-      colors: color_ary.sort((a, b) => parseInt(a.pos) - parseInt(b.pos)),
+      colors: colors.sort((a, b) => parseInt(a.pos) - parseInt(b.pos)),
     }
   }
   else if (phClr) {
@@ -414,41 +447,43 @@ export async function getSlideBackgroundFill(warpObj) {
   }
 }
 
-export function getShapeFill(node, isSvgMode, warpObj) {
-  if (getTextByPathList(node, ['p:spPr', 'a:noFill'])) {
+export async function getShapeFill(node, isSvgMode, warpObj, source) {
+  const fillType = getFillType(getTextByPathList(node, ['p:spPr']))
+  let type = 'color'
+  let fillValue = ''
+  if (fillType === 'NO_FILL') {
     return isSvgMode ? 'none' : ''
+  } 
+  else if (fillType === 'SOLID_FILL') {
+    const shpFill = node['p:spPr']['a:solidFill']
+    fillValue = getSolidFill(shpFill, undefined, undefined, warpObj)
+    type = 'color'
   }
-
-  let fillColor
-  if (!fillColor) {
-    fillColor = getTextByPathList(node, ['p:spPr', 'a:solidFill', 'a:srgbClr', 'attrs', 'val'])
+  else if (fillType === 'GRADIENT_FILL') {
+    const shpFill = node['p:spPr']['a:gradFill']
+    fillValue = getGradientFill(shpFill, warpObj)
+    type = 'gradient'
   }
-
-  if (!fillColor) {
-    const schemeClr = 'a:' + getTextByPathList(node, ['p:spPr', 'a:solidFill', 'a:schemeClr', 'attrs', 'val'])
-    fillColor = getSchemeColorFromTheme(schemeClr, warpObj)
+  else if (fillType === 'PIC_FILL') {
+    const shpFill = node['p:spPr']['a:blipFill']
+    const picBase64 = await getPicFill(source, shpFill, warpObj)
+    const opacity = getPicFillOpacity(shpFill)
+    fillValue = {
+      picBase64,
+      opacity,
+    }
+    type = 'image'
   }
-
-  if (!fillColor) {
-    const schemeClr = 'a:' + getTextByPathList(node, ['p:style', 'a:fillRef', 'a:schemeClr', 'attrs', 'val'])
-    fillColor = getSchemeColorFromTheme(schemeClr, warpObj)
+  if (!fillValue) {
+    const clrName = getTextByPathList(node, ['p:style', 'a:fillRef'])
+    fillValue = getSolidFill(clrName, undefined, undefined, warpObj)
+    type = 'color'
   }
 
-  if (fillColor) {
-    fillColor = `#${fillColor}`
-
-    let lumMod = parseInt(getTextByPathList(node, ['p:spPr', 'a:solidFill', 'a:schemeClr', 'a:lumMod', 'attrs', 'val'])) / 100000
-    let lumOff = parseInt(getTextByPathList(node, ['p:spPr', 'a:solidFill', 'a:schemeClr', 'a:lumOff', 'attrs', 'val'])) / 100000
-    if (isNaN(lumMod)) lumMod = 1.0
-    if (isNaN(lumOff)) lumOff = 0
-
-    const color = tinycolor(fillColor).toHsl()
-    const lum = color.l * lumMod + lumOff
-    return tinycolor({ h: color.h, s: color.s, l: lum, a: color.a }).toHexString()
-  } 
-
-  if (isSvgMode) return 'none'
-  return fillColor
+  return {
+    type,
+    value: fillValue,
+  }
 }
 
 export function getSolidFill(solidFill, clrMap, phClr, warpObj) {