chore(chart): support custom image based textures for line markers

Author: singerla

src/classes/shape.ts

@@ -8,6 +8,8 @@ import {
   Workbook,
 } from '../types/types';
 import { RootPresTemplate } from '../interfaces/root-pres-template';
+import { HelperElement } from '../types/xml-types';
+import { ImageTypeMap } from '../enums/image-type-map';
 
 export class Shape {
   mode: string;
@@ -39,6 +41,7 @@ export class Shape {
 
   callbacks: ShapeModificationCallback[];
   hasCreationId: boolean;
+  contentTypeMap: typeof ImageTypeMap;
 
   constructor(shape: ImportedElement) {
     this.mode = shape.mode;
@@ -51,7 +54,7 @@ export class Shape {
     this.hasCreationId = shape.hasCreationId;
 
     this.callbacks = GeneralHelper.arrayify(shape.callback);
-
+    this.contentTypeMap = ImageTypeMap;
     if (shape.target) {
       this.sourceNumber = shape.target.number;
       this.sourceRid = shape.target.rId;
@@ -170,4 +173,22 @@ export class Shape {
       }
     });
   }
+
+  appendImageExtensionToContentType(
+    extension,
+  ): Promise<HelperElement | boolean> {
+    const contentType = this.contentTypeMap[extension]
+      ? this.contentTypeMap[extension]
+      : 'image/' + extension;
+
+    return XmlHelper.appendIf({
+      ...XmlHelper.createContentTypeChild(this.targetArchive, {
+        Extension: extension,
+        ContentType: contentType,
+      }),
+      tag: 'Default',
+      clause: (xml: XMLDocument) =>
+        !XmlHelper.findByAttribute(xml, 'Default', 'Extension', extension),
+    });
+  }
 }

src/shapes/chart.ts

@@ -2,6 +2,7 @@ import JSZip from 'jszip';
 import { FileHelper } from '../helper/file-helper';
 import { XmlHelper } from '../helper/xml-helper';
 import { Shape } from '../classes/shape';
+import path from 'path';
 
 import { RelationshipAttribute, HelperElement } from '../types/xml-types';
 import { ImportedElement, Target, Workbook } from '../types/types';
@@ -17,6 +18,7 @@ export class Chart extends Shape implements IChart {
   wbExtension: string;
   relTypeChartColorStyle: string;
   relTypeChartStyle: string;
+  relTypeChartImage: string;
   wbRelsPath: string;
   styleRelationFiles: {
     [key: string]: string;
@@ -36,6 +38,8 @@ export class Chart extends Shape implements IChart {
       'http://schemas.microsoft.com/office/2011/relationships/chartColorStyle';
     this.relTypeChartStyle =
       'http://schemas.microsoft.com/office/2011/relationships/chartStyle';
+    this.relTypeChartImage =
+      'http://schemas.openxmlformats.org/officeDocument/2006/relationships/image';
     this.styleRelationFiles = {};
   }
 
@@ -116,7 +120,7 @@ export class Chart extends Shape implements IChart {
       'nodebuffer',
     );
     const archive = await FileHelper.extractFileContent(
-      (worksheet as unknown) as Buffer,
+      worksheet as unknown as Buffer,
     );
     const sheet = await XmlHelper.getXmlFromArchive(
       archive,
@@ -247,10 +251,43 @@ export class Chart extends Shape implements IChart {
         `ppt/charts/colors${this.targetNumber}.xml`,
       );
     }
+
+    if (this.styleRelationFiles.relTypeChartImage) {
+      const imageInfo = await this.getTargetChartImageUri(
+        this.styleRelationFiles.relTypeChartImage,
+      );
+      await this.appendImageExtensionToContentType(imageInfo.extension);
+      await FileHelper.zipCopy(
+        this.sourceArchive,
+        imageInfo.source,
+        this.targetArchive,
+        imageInfo.target,
+      );
+    }
+  }
+
+  getTargetChartImageUri(origin: string): {
+    source: string;
+    target: string;
+    rel: string;
+    extension: string;
+  } {
+    const file = origin.replace('../media/', '');
+    const extension = path.extname(file).replace('.', '');
+    return {
+      source: `ppt/media/${file}`,
+      target: `ppt/media/${file}-chart-${this.targetNumber}.${extension}`,
+      rel: `../media/${file}-chart-${this.targetNumber}.${extension}`,
+      extension: extension,
+    };
   }
 
   async getChartStyles(): Promise<void> {
-    const styleTypes = ['relTypeChartStyle', 'relTypeChartColorStyle'];
+    const styleTypes = [
+      'relTypeChartStyle',
+      'relTypeChartColorStyle',
+      'relTypeChartImage',
+    ];
 
     for (const i in styleTypes) {
       const styleType = styleTypes[i];
@@ -273,8 +310,7 @@ export class Chart extends Shape implements IChart {
     );
     const attributes = {
       Id: this.createdRid,
-      Type:
-        'http://schemas.openxmlformats.org/officeDocument/2006/relationships/chart',
+      Type: 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/chart',
       Target: `../charts/chart${this.targetNumber}.xml`,
     } as RelationshipAttribute;
 
@@ -313,6 +349,12 @@ export class Chart extends Shape implements IChart {
           case this.relTypeChartStyle:
             element.setAttribute('Target', `style${this.targetNumber}.xml`);
             break;
+          case this.relTypeChartImage:
+            const target = element.getAttribute('Target');
+            const imageInfo = this.getTargetChartImageUri(target);
+            vd(imageInfo);
+            element.setAttribute('Target', imageInfo.rel);
+            break;
         }
       });
 

src/shapes/image.ts

@@ -12,7 +12,6 @@ import { ElementType } from '../enums/element-type';
 
 export class Image extends Shape implements IImage {
   extension: string;
-  contentTypeMap: typeof ImageTypeMap;
 
   constructor(shape: ImportedElement) {
     super(shape);
@@ -32,8 +31,6 @@ export class Image extends Shape implements IImage {
           element.parentNode.parentNode as Element;
         break;
     }
-
-    this.contentTypeMap = ImageTypeMap;
   }
 
   async modify(
@@ -111,7 +108,7 @@ export class Image extends Shape implements IImage {
   }
 
   async appendTypes(): Promise<void> {
-    await this.appendImageExtensionToContentType();
+    await this.appendImageExtensionToContentType(this.extension);
   }
 
   async appendToSlideRels(): Promise<HelperElement> {
@@ -123,8 +120,7 @@ export class Image extends Shape implements IImage {
 
     const attributes = {
       Id: this.createdRid,
-      Type:
-        'http://schemas.openxmlformats.org/officeDocument/2006/relationships/image',
+      Type: 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/image',
       Target: `../media/image${this.targetNumber}.${this.extension}`,
     } as RelationshipAttribute;
 
@@ -137,23 +133,6 @@ export class Image extends Shape implements IImage {
     );
   }
 
-  appendImageExtensionToContentType(): Promise<HelperElement | boolean> {
-    const extension = this.extension;
-    const contentType = this.contentTypeMap[extension]
-      ? this.contentTypeMap[extension]
-      : 'image/' + extension;
-
-    return XmlHelper.appendIf({
-      ...XmlHelper.createContentTypeChild(this.targetArchive, {
-        Extension: extension,
-        ContentType: contentType,
-      }),
-      tag: 'Default',
-      clause: (xml: XMLDocument) =>
-        !XmlHelper.findByAttribute(xml, 'Default', 'Extension', extension),
-    });
-  }
-
   hasSvgRelation(): boolean {
     return this.targetElement.getElementsByTagName('asvg:svgBlip').length > 0;
   }