refactor(image): unify Xml types; apply modifyElement to images

Author: singerla

src/automizer.ts

@@ -10,7 +10,7 @@ import { IPresentationProps } from './interfaces/ipresentation-props';
 import { PresTemplate } from './interfaces/pres-template';
 import { RootPresTemplate } from './interfaces/root-pres-template';
 import { Template } from './classes/template';
-import { ModifyXmlCallback, TemplateInfo } from './types/xml-types';
+import { ModifyXmlCallback, TemplateInfo, XmlElement } from './types/xml-types';
 import { GeneralHelper, vd } from './helper/general-helper';
 import { Master } from './classes/master';
 import path from 'path';
@@ -21,6 +21,7 @@ import { ContentTracker } from './helper/content-tracker';
 import JSZip from 'jszip';
 import { ISlide } from './interfaces/islide';
 import { IMaster } from './interfaces/imaster';
+import { ContentTypeExtension } from './enums/content-type-map';
 
 /**
  * Automizer
@@ -203,7 +204,9 @@ export default class Automizer implements IPresentationProps {
     files.forEach((file) => {
       const directory = dir || this.params.mediaDir;
       const filepath = path.join(directory, file);
-      const extension = path.extname(file).replace('.', '');
+      const extension = path
+        .extname(file)
+        .replace('.', '') as ContentTypeExtension;
       try {
         fs.accessSync(filepath, fs.constants.F_OK);
       } catch (e) {

src/classes/has-shapes.ts

@@ -6,6 +6,7 @@ import { IPresentationProps } from '../interfaces/ipresentation-props';
 import {
   AnalyzedElementType,
   AutomizerParams,
+  ElementOnSlide,
   FindElementSelector,
   FindElementStrategy,
   ImportedElement,
@@ -191,13 +192,15 @@ export default class HasShapes {
     const presName = this.sourceTemplate.name;
     const slideNumber = this.sourceNumber;
 
-    return this.addElementToModificationsList(
+    this.addElementToModificationsList(
       presName,
       slideNumber,
       selector,
       'modify',
       callback,
     );
+
+    return this;
   }
 
   /**
@@ -214,13 +217,15 @@ export default class HasShapes {
     selector: FindElementSelector,
     callback?: ShapeModificationCallback | ShapeModificationCallback[],
   ): this {
-    return this.addElementToModificationsList(
+    this.addElementToModificationsList(
       presName,
       slideNumber,
       selector,
       'append',
       callback,
     );
+
+    return this;
   }
 
   /**
@@ -231,13 +236,15 @@ export default class HasShapes {
     const presName = this.sourceTemplate.name;
     const slideNumber = this.sourceNumber;
 
-    return this.addElementToModificationsList(
+    this.addElementToModificationsList(
       presName,
       slideNumber,
       selector,
       'remove',
       undefined,
     );
+
+    return this;
   }
 
   /**
@@ -256,16 +263,14 @@ export default class HasShapes {
     selector: FindElementSelector,
     mode: string,
     callback?: ShapeModificationCallback | ShapeModificationCallback[],
-  ): this {
+  ): void {
     this.importElements.push({
       presName,
       slideNumber,
       selector,
       mode,
       callback,
     });
-
-    return this;
   }
 
   /**
@@ -416,11 +421,7 @@ export default class HasShapes {
     sourceArchive: IArchive,
     sourcePath: string,
     useCreationIds: boolean,
-  ): Promise<{
-    sourceElement: XmlDocument;
-    selector: string;
-    mode?: 'findByElementCreationId' | 'findByElementName';
-  }> {
+  ): Promise<ElementOnSlide> {
     const strategies: FindElementStrategy[] = [];
     if (typeof selector === 'string') {
       if (useCreationIds) {
@@ -725,7 +726,7 @@ export default class HasShapes {
    * @returns element
    */
   async analyzeElement(
-    sourceElement: XmlDocument,
+    sourceElement: XmlElement,
     sourceArchive: IArchive,
     slideNumber: number,
   ): Promise<AnalyzedElementType> {

src/classes/shape.ts

@@ -9,7 +9,10 @@ import {
 } from '../types/types';
 import { RootPresTemplate } from '../interfaces/root-pres-template';
 import { HelperElement, XmlDocument, XmlElement } from '../types/xml-types';
-import { ImageTypeMap } from '../enums/image-type-map';
+import {
+  ContentTypeExtension,
+  ContentTypeMap,
+} from '../enums/content-type-map';
 import { ElementSubtype } from '../enums/element-type';
 import IArchive from '../interfaces/iarchive';
 
@@ -23,7 +26,7 @@ export class Shape {
   sourceNumber: number;
   sourceFile: string;
   sourceRid: string;
-  sourceElement: XmlDocument;
+  sourceElement: XmlElement;
 
   targetFile: string;
   targetArchive: IArchive;
@@ -39,13 +42,13 @@ export class Shape {
   relAttribute: string;
   relParent: (element: XmlElement) => XmlElement;
 
-  targetElement: XmlDocument;
+  targetElement: XmlElement;
   targetType: ShapeTargetType;
   target: Target;
 
   callbacks: ShapeModificationCallback[];
   hasCreationId: boolean;
-  contentTypeMap: typeof ImageTypeMap;
+  contentTypeMap: typeof ContentTypeMap;
   subtype: ElementSubtype;
 
   constructor(shape: ImportedElement, targetType: ShapeTargetType) {
@@ -60,7 +63,7 @@ export class Shape {
     this.hasCreationId = shape.hasCreationId;
 
     this.callbacks = GeneralHelper.arrayify(shape.callback);
-    this.contentTypeMap = ImageTypeMap;
+    this.contentTypeMap = ContentTypeMap;
 
     if (shape.target) {
       this.sourceNumber = shape.target.number;
@@ -84,7 +87,7 @@ export class Shape {
   }
 
   async setTargetElement(): Promise<void> {
-    this.targetElement = this.sourceElement.cloneNode(true) as XmlDocument;
+    this.targetElement = this.sourceElement.cloneNode(true) as XmlElement;
   }
 
   async appendToSlideTree(): Promise<void> {
@@ -128,7 +131,7 @@ export class Shape {
       this.name,
     );
 
-    if (!sourceElementOnTargetSlide) {
+    if (!sourceElementOnTargetSlide?.parentNode) {
       console.error(`Can't modify slide tree for ${this.name}`);
       return;
     }
@@ -195,8 +198,8 @@ export class Shape {
 
   applyCallbacks(
     callbacks: ShapeModificationCallback[],
-    element: XmlDocument,
-    arg1?: XmlDocument,
+    element: XmlElement | XmlDocument,
+    arg1?: XmlElement | XmlDocument,
     arg2?: Workbook,
   ): void {
     callbacks.forEach((callback) => {
@@ -210,7 +213,9 @@ export class Shape {
     });
   }
 
-  appendImageExtensionToContentType(extension): Promise<XmlElement | boolean> {
+  appendImageExtensionToContentType(
+    extension: ContentTypeExtension,
+  ): Promise<XmlElement | boolean> {
     return XmlHelper.appendImageExtensionToContentType(
       this.targetArchive,
       extension,

src/dev.ts

@@ -15,8 +15,8 @@ const run = async () => {
     .load(`SlideWithImages.pptx`, 'images');
 
   await pres
-    .addSlide('shapes', 1, (slide) => {
-      slide.addElement('images', 2, 'imagePNGduotone', [
+    .addSlide('images', 2, (slide) => {
+      slide.modifyElement('imagePNG', [
         ModifyShapeHelper.setPosition({
           w: CmToDxa(5),
           h: CmToDxa(5),
@@ -30,7 +30,38 @@ const run = async () => {
           },
         }),
       ]);
+
+      slide.modifyElement('Textfeld 1', [
+        ModifyShapeHelper.setPosition({
+          w: CmToDxa(5),
+          h: CmToDxa(5),
+        }),
+        // ModifyImageHelper.setRelationTarget('feather.png'),
+        // ModifyImageHelper.setDuotoneFill({
+        //   tint: 100000,
+        //   color: {
+        //     type: 'srgbClr',
+        //     value: 'ff850c',
+        //   },
+        // }),
+      ]);
     })
+    // .addSlide('shapes', 1, (slide) => {
+    //   slide.addElement('images', 2, 'imagePNGduotone', [
+    //     ModifyShapeHelper.setPosition({
+    //       w: CmToDxa(5),
+    //       h: CmToDxa(5),
+    //     }),
+    //     ModifyImageHelper.setRelationTarget('feather.png'),
+    //     ModifyImageHelper.setDuotoneFill({
+    //       tint: 100000,
+    //       color: {
+    //         type: 'srgbClr',
+    //         value: 'ff850c',
+    //       },
+    //     }),
+    //   ]);
+    // })
     .write(`modify-shapes.test.pptx`);
 };
 

src/enums/image-type-map.ts src/enums/content-type-map.tssrc/enums/image-type-map.ts renamed to src/enums/content-type-map.ts

@@ -1,4 +1,4 @@
-export enum ImageTypeMap {
+export enum ContentTypeMap {
   jpg = 'image/jpeg',
   jpeg = 'image/jpeg',
   png = 'image/png',
@@ -14,3 +14,5 @@ export enum ImageTypeMap {
   bin = 'application/vnd.openxmlformats-officedocument.oleObject',
   vml = 'application/vnd.openxmlformats-officedocument.vmlDrawing',
 }
+
+export type ContentTypeExtension = keyof typeof ContentTypeMap;

src/helper/file-helper.ts

@@ -10,6 +10,7 @@ import IArchive, {
 import ArchiveJszip from './archive/archive-jszip';
 import ArchiveFs from './archive/archive-fs';
 import { vd } from './general-helper';
+import { ContentTypeExtension } from '../enums/content-type-map';
 
 export class FileHelper {
   static importArchive(location: string, params: ArchiveParams): IArchive {
@@ -42,8 +43,8 @@ export class FileHelper {
     return removed;
   }
 
-  static getFileExtension(filename: string): string {
-    return path.extname(filename).replace('.', '');
+  static getFileExtension(filename: string): ContentTypeExtension {
+    return path.extname(filename).replace('.', '') as ContentTypeExtension;
   }
 
   static getFileInfo(filename: string): FileInfo {

src/helper/modify-shape-helper.ts

@@ -25,7 +25,7 @@ export default class ModifyShapeHelper {
   /**
    * Set solid fill of modified shape
    */
-  static setSolidFill = (element: XmlDocument | XmlElement): void => {
+  static setSolidFill = (element: XmlElement): void => {
     element
       .getElementsByTagName('a:solidFill')[0]
       .getElementsByTagName('a:schemeClr')[0]
@@ -37,7 +37,7 @@ export default class ModifyShapeHelper {
    */
   static setText =
     (text: string) =>
-    (element: XmlDocument | XmlElement): void => {
+    (element: XmlElement): void => {
       ModifyTextHelper.setText(text)(element as XmlElement);
     };
 
@@ -46,7 +46,7 @@ export default class ModifyShapeHelper {
    */
   static replaceText =
     (replaceText: ReplaceText | ReplaceText[], options?: ReplaceTextOptions) =>
-    (element: XmlDocument | XmlElement): void => {
+    (element: XmlElement): void => {
       const replaceTexts = GeneralHelper.arrayify(replaceText);
 
       new TextReplaceHelper(options, element as XmlElement)
@@ -59,7 +59,7 @@ export default class ModifyShapeHelper {
    */
   static setPosition =
     (pos: ShapeCoordinates) =>
-    (element: XmlDocument | XmlElement): void => {
+    (element: XmlElement): void => {
       const aOff = element.getElementsByTagName('a:off');
       if (!aOff?.item(0)) {
         return;
@@ -83,7 +83,7 @@ export default class ModifyShapeHelper {
    */
   static updatePosition =
     (pos: ShapeCoordinates) =>
-    (element: XmlDocument | XmlElement): void => {
+    (element: XmlElement): void => {
       const xfrm = element.getElementsByTagName('a:off')[0]
         .parentNode as XmlElement;
 
@@ -119,5 +119,4 @@ export default class ModifyShapeHelper {
         xfrm.setAttribute('rot', String(Math.round(degrees * 60000)));
       }
     };
-
 }