refactor: separate append from modify

Author: singerla

__tests__/create-presentation-modify-exisiting-chart.test.ts

@@ -0,0 +1,35 @@
+import Automizer from "../src/automizer"
+import { setChartData, setSolidFill, setText } from "../src/helper/modify"
+
+test("create presentation, add slide with charts from template and modify existing chart.", async () => {
+  const automizer = new Automizer({
+    templateDir: `${__dirname}/pptx-templates`,
+    outputDir: `${__dirname}/pptx-output`
+  })
+
+  let pres = automizer
+    .loadRoot(`RootTemplate.pptx`)
+    .load(`SlideWithCharts.pptx`, 'charts')
+
+  let result = await pres
+    .addSlide('charts', 2, (slide) => {
+      slide.modifyElement('ColumnChart', [
+        setChartData({
+          series: [
+            { label: 'series 1' },
+            { label: 'series 2' },
+            { label: 'series 3' },
+          ],
+          categories: [
+            { label: 'cat 2-1', values: [ 50, 50, 20 ] },
+            { label: 'cat 2-2', values: [ 14, 50, 20 ] },
+            { label: 'cat 2-3', values: [ 15, 50, 20 ] },
+            { label: 'cat 2-4', values: [ 26, 50, 20 ] }
+          ]
+        })
+      ])
+    })
+    .write(`create-presentation-modify-existing-chart.test.pptx`)
+
+  expect(result.charts).toBe(3)
+})

__tests__/create-presentation-modify-exisiting-shape.test.ts

@@ -0,0 +1,21 @@
+import Automizer from "../src/automizer"
+import { setPosition } from "../src/helper/modify"
+
+test("create presentation, add slide with shapes from template and modify existing shape.", async () => {
+  const automizer = new Automizer({
+    templateDir: `${__dirname}/pptx-templates`,
+    outputDir: `${__dirname}/pptx-output`
+  })
+
+  let pres = automizer
+    .loadRoot(`RootTemplate.pptx`)
+    .load(`SlideWithShapes.pptx`, 'shapes')
+
+  let result = await pres
+    .addSlide('shapes', 2, (slide) => {
+      slide.modifyElement('Drum', [setPosition({x: 1000000, h:5000000, w:5000000})])
+    })
+    .write(`create-presentation-modify-existing-shape.test.pptx`)
+
+  expect(result.slides).toBe(2)
+})

package.json

@@ -16,6 +16,11 @@
     "test": "npx jest",
     "test-coverage": "npx jest --coverage"
   },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/helper/{!(pretty),}.js"
+    ]
+  },
   "files": [
     "dist",
     "README"

src/automizer.ts

@@ -1,19 +1,19 @@
 import {
   AutomizerParams,
   AutomizerSummary,
-	IPresentationProps, PresTemplate, RootPresTemplate,
+  IPresentationProps, PresTemplate, RootPresTemplate,
 } from './definitions/app'
 
 import Template from './template'
 import Slide from './slide'
 import FileHelper from './helper/file'
 
 export default class Automizer implements IPresentationProps {
-	rootTemplate: RootPresTemplate
-	templates: PresTemplate[]
-	templateDir: string
-	outputDir: string
-	timer: number
+  rootTemplate: RootPresTemplate
+  templates: PresTemplate[]
+  templateDir: string
+  outputDir: string
+  timer: number
   params: AutomizerParams
 
   /**
@@ -31,21 +31,21 @@ export default class Automizer implements IPresentationProps {
     this.timer = Date.now()
   }
 
-	/**
-	 * Load a pptx file and set it as root template. 
-	 * @param {string} location - Filename or path to the template. Will be prefixed with 'templateDir'
-	 * @return {Automizer} Instance of Automizer
-	 */
+  /**
+   * Load a pptx file and set it as root template. 
+   * @param {string} location - Filename or path to the template. Will be prefixed with 'templateDir'
+   * @return {Automizer} Instance of Automizer
+   */
    public loadRoot(location: string): this {
     return this.loadTemplate(location)
   }
 
-	/**
-	 * Load a template pptx file. 
-	 * @param {string} location - Filename or path to the template. Will be prefixed with 'templateDir'
-	 * @param {string} name - Optional: A short name for the template. If skipped, the template will be named by its location.
-	 * @return {Automizer} Instance of Automizer
-	 */
+  /**
+   * Load a template pptx file. 
+   * @param {string} location - Filename or path to the template. Will be prefixed with 'templateDir'
+   * @param {string} name - Optional: A short name for the template. If skipped, the template will be named by its location.
+   * @return {Automizer} Instance of Automizer
+   */
    public load(location: string, name?: string): this {
     name = (name === undefined) ? location : name
     return this.loadTemplate(location, name)
@@ -69,12 +69,12 @@ export default class Automizer implements IPresentationProps {
     return 'name' in template; 
   }
 
-	/**
-	 * Find imported template by given name and return a certain slide by number.
-	 * @param {string} name - Name of template; must be imported by Automizer.importTemplate()
-	 * @param {number} slideNumber - Number of slide in template presentation
-	 * @return {Automizer} Instance of Automizer
-	 */
+  /**
+   * Find imported template by given name and return a certain slide by number.
+   * @param {string} name - Name of template; must be imported by Automizer.importTemplate()
+   * @param {number} slideNumber - Number of slide in template presentation
+   * @return {Automizer} Instance of Automizer
+   */
   public addSlide(name: string, slideNumber: number, callback?: Function): this {
     if(this.rootTemplate === undefined) {
       throw new Error('You have to set a root template first.')
@@ -98,13 +98,13 @@ export default class Automizer implements IPresentationProps {
     return this
   }
 
-	public template(name: string): PresTemplate {
-		let template = this.templates.find(template => template.name === name)
+  public template(name: string): PresTemplate {
+    let template = this.templates.find(template => template.name === name)
     if(template === undefined) {
       throw new Error(`Template not found: ${name}`)
     }
     return template
-	}
+  }
 
   public getLocation(location: string, type?: string): string {
     switch(type) {

src/definitions/app.ts

@@ -83,13 +83,23 @@ export type Target = {
 	rId?: string
 }
 
+export type ImportElement = {
+	presName: string
+	slideNumber: number
+	selector: string
+	mode:string
+	callback?: Function | Function[]
+}
+
 export type ImportedElement = {
+	mode: string
+	name?: string
 	sourceArchive: JSZip
 	sourceSlideNumber: number
-	target?: Target
-	type?: ElementType
 	callback?: any
-	element?: HTMLElement
+	target?: AnalyzedElementType["target"]
+	type?: AnalyzedElementType["type"]
+	sourceElement?: AnalyzedElementType["element"]
 }
 
 export type AnalyzedElementType = {

src/definitions/enums.ts

@@ -1,8 +1,8 @@
 
 export enum ElementType {
-  Chart,
-  Image,
-  Shape
+  Chart = "Chart",
+  Image = "Image",
+  Shape = "Generic"
 }
 
 export enum ImageTypeMap {

src/dev.ts

@@ -1,6 +1,6 @@
 import Automizer from "./index"
 import Slide from "./slide"
-import { setChartData, setPosition } from "./helper/modify"
+import { dump, setPosition } from "./helper/modify"
 
 const automizer = new Automizer({
   templateDir: `${__dirname}/../__tests__/pptx-templates`,
@@ -12,48 +12,12 @@ let pres = automizer.loadRoot(`RootTemplate.pptx`)
   .load(`SlideWithLink.pptx`, 'link')
   .load(`SlideWithCharts.pptx`, 'charts')
   .load(`EmptySlide.pptx`, 'empty')
+  .load(`SlideWithShapes.pptx`, 'shapes')
 
 pres
-  // .addSlide('images', 2)
-  .addSlide('empty', 1, (slide: Slide) => {
-    slide.addElement('charts', 2, 'PieChart', [
-      setChartData({
-        series: [
-          { label: 'فارسی 1' },
-        ],
-        categories: [
-          { label: 'নাগরিক', values: [ 12.5 ] },
-          { label: 'cat 2', values: [ 14 ] },
-          { label: 'cat 3', values: [ 15 ] },
-          { label: 'cat 4', values: [ 26 ] }
-        ]
-      }), 
-      setPosition({x: 8000000}) 
-    ])
-
-    slide.addElement('charts', 1, 'StackedBars', [
-      setChartData({
-        series: [
-          { label: 'series 1' },
-        ],
-        categories: [
-          { label: 'cat 2-1', values: [ 50 ] },
-          { label: 'cat 2-2', values: [ 14 ] },
-          { label: 'cat 2-3', values: [ 15 ] },
-          { label: 'cat 2-4', values: [ 26 ] }
-        ]
-      }), 
-      setPosition({x: 8000000})
-    ])
-
-    // slide.addElement('charts', 2, 'PieChart')
-    // slide.addElement('charts', 2, 'PieChart')
-    slide.addElement('images', 2, 'imageSVG', setPosition({x: 8000000}))
-    // slide.addElement('link', 1, 'Link')
-    // slide.addElement('images', 2, 'imageSVG')
-    // slide.addElement('images', 2, 'imageSVG')
-    // slide.addElement('images', 2, 'imageSVG')
-    // slide.addElement('charts', 1, 'StackedBars')
+  .addSlide('shapes', 2, (slide: Slide) => {
+  
+    slide.modifyElement('Drum', [dump, setPosition({x: 1000000, h:5000000, w:5000000})])
   })
 
   .write(`myPresentation.pptx`).then(result => {

src/helper/modify.ts

@@ -13,16 +13,37 @@ export const setText = (text: string) => (element) => {
     .data = text
 }
 
-export const revertElements = (doc: Document) => {
-  // console.log(doc)
+export const revertElements = (slide: Document) => {
+  // dump(slide)
 }
 
+// e.g. setPosition({x: 8000000, h:5000000})
 export const setPosition = (pos: any) => (element: HTMLElement) => {
-  console.log(element.getElementsByTagName('p:cNvPr')[0].getAttribute('name'))
+  let map = {
+    x: { tag: 'a:off', attribute: 'x' },
+    y: { tag: 'a:off', attribute: 'y' },
+    w: { tag: 'a:ext', attribute: 'cx' },
+    h: { tag: 'a:ext', attribute: 'cy' },
+  }
 
-  element.getElementsByTagName('a:off')[0].setAttribute('x', pos.x)
+  let parent = 'a:xfrm'
+
+  for(let key in pos) {
+    element.getElementsByTagName(parent)[0]
+      .getElementsByTagName(map[key].tag)[0]
+      .setAttribute(map[key].attribute, pos[key])
+  }
+}
+
+export const setAttribute = (tagName:string, attribute:string, value: string | number, count?: number) => (element: HTMLElement) => {
+  element.getElementsByTagName(tagName)[count || 0]
+    .setAttribute(attribute, String(value))
 }
 
 export const setChartData = (data: any) => (element: HTMLElement, chart: Document, workbook: Workbook) => {
   XmlHelper.setChartData(chart, workbook, data)
+}
+
+export const dump = (element: HTMLElement | Document) => {
+  XmlHelper.dump(element)
 }