chore(slide): select shapes without creationId by name and nameIdx

Author: singerla

src/classes/has-shapes.ts

@@ -38,7 +38,7 @@ import { XmlSlideHelper } from '../helper/xml-slide-helper';
 import { OLEObject } from '../shapes/ole';
 import { Hyperlink } from '../shapes/hyperlink';
 import { HyperlinkProcessor } from '../helper/hyperlink-processor';
-import { GeneralHelper, vd } from '../helper/general-helper';
+import { vd } from '../helper/general-helper';
 
 export default class HasShapes {
   /**
@@ -343,14 +343,29 @@ export default class HasShapes {
     mode: string,
     callback?: ShapeModificationCallback | ShapeModificationCallback[],
   ): void {
+    this.importElements.push({
+      presName,
+      slideNumber,
+      selector,
+      mode,
+      callback,
+    });
+  }
+
+  getAlreadyModifiedElement(selector: FindElementSelector) {
     // Check if an element with the same selector is already imported in modify mode
     const existingElement = this.importElements.find((element) => {
       if (
-        typeof selector === 'object' &&
-        typeof element.selector === 'object' &&
-        selector.creationId &&
-        element.selector?.creationId
+        typeof selector !== 'object' ||
+        typeof element.selector !== 'object'
       ) {
+        return;
+      }
+
+      if (!selector.creationId) {
+        // Match by name and nameIdx only if the shape has no creationId
+        return selector.name === element.selector.name && selector.nameIdx === element.selector.nameIdx;
+      } else if (selector.creationId && element.selector?.creationId) {
         const creaId1 = selector.creationId.replace('{', '').replace('}', '');
         const creaId2 = element.selector.creationId
           .replace('{', '')
@@ -359,31 +374,7 @@ export default class HasShapes {
         return selector.name === element.selector.name && creaId1 === creaId2;
       }
     });
-
-    if (existingElement && mode === 'modify') {
-      if (callback) {
-        const addCallback = GeneralHelper.arrayify(callback);
-
-        if (existingElement.callback) {
-          existingElement.callback = GeneralHelper.arrayify(
-            existingElement.callback,
-          );
-        }
-
-        if (Array.isArray(existingElement.callback)) {
-          existingElement.callback.push(...addCallback);
-        }
-      }
-    } else {
-      // If the element is not already imported or not in modify mode, add it as a new import
-      this.importElements.push({
-        presName,
-        slideNumber,
-        selector,
-        mode,
-        callback,
-      });
-    }
+    return existingElement;
   }
 
   /**
@@ -573,14 +564,18 @@ export default class HasShapes {
         mode: 'findByElementName',
         selector: selector,
       });
-    } else if (selector.name) {
-      strategies.push({
-        mode: 'findByElementCreationId',
-        selector: selector.creationId,
-      });
+    } else {
+      if(selector.creationId) {
+        strategies.push({
+          mode: 'findByElementCreationId',
+          selector: selector.creationId,
+        });
+      }
+
       strategies.push({
         mode: 'findByElementName',
         selector: selector.name,
+        nameIdx: selector.nameIdx
       });
     }
 
@@ -591,6 +586,7 @@ export default class HasShapes {
         sourceArchive,
         sourcePath,
         findElement.selector,
+        findElement.nameIdx,
       );
 
       if (sourceElement) {

src/helper/xml-helper.ts

@@ -419,6 +419,7 @@ export class XmlHelper {
     archive: IArchive,
     path: string,
     creationId: string,
+    nameIdx?: number
   ): Promise<XmlElement> {
     const slideXml = await XmlHelper.getXmlFromArchive(archive, path);
 
@@ -429,18 +430,28 @@ export class XmlHelper {
     archive: IArchive,
     path: string,
     name: string,
+    nameIdx?: number
   ): Promise<XmlElement> {
     const slideXml = await XmlHelper.getXmlFromArchive(archive, path);
 
-    return XmlHelper.findByName(slideXml, name);
+    return XmlHelper.findByName(slideXml, name, nameIdx);
   }
 
-  static findByName(doc: Document, name: string): XmlElement {
+  static findByName(doc: Document, name: string, nameIdx?: number): XmlElement {
     const names = doc.getElementsByTagName('p:cNvPr');
+    let matchCount = 0;
 
-    for (const i in names) {
-      if (names[i].getAttribute && names[i].getAttribute('name') === name) {
-        return names[i].parentNode.parentNode as XmlElement;
+    // Default nameIdx to 0 if not provided
+    const targetIdx = nameIdx !== undefined ? nameIdx : 0;
+
+    for (let i = 0; i < names.length; i++) {
+      const item = names.item(i);
+      if (item && item.getAttribute && item.getAttribute('name') === name) {
+        // Check if this is the occurrence we're looking for
+        if (matchCount === targetIdx) {
+          return item.parentNode.parentNode as XmlElement;
+        }
+        matchCount++;
       }
     }
 

src/helper/xml-slide-helper.ts

@@ -114,10 +114,14 @@ export class XmlSlideHelper {
   }
 
   static getElementInfo(slideElement: XmlElement): ElementInfo {
+    const creationId = XmlSlideHelper.getElementCreationId(slideElement, true);
+    const nameIdx = (!creationId) ? XmlSlideHelper.getElementNameIdx(slideElement) : 0;
+
     return {
       name: XmlSlideHelper.getElementName(slideElement),
       id: XmlSlideHelper.getElementCreationId(slideElement),
-      creationId: XmlSlideHelper.getElementCreationId(slideElement, true),
+      creationId,
+      nameIdx,
       type: XmlSlideHelper.getElementType(slideElement),
       position: XmlSlideHelper.parseShapeCoordinates(slideElement),
       placeholder: XmlSlideHelper.parsePlaceholderInfo(slideElement),
@@ -369,6 +373,45 @@ export class XmlSlideHelper {
     }
   }
 
+  static getElementNameIdx(
+    slideElement: XmlElement,
+  ): number {
+    const elementName = XmlSlideHelper.getElementName(slideElement);
+    if (!elementName) {
+      return 0;
+    }
+
+    // Find the parent slide element (spTree) to search all elements on the slide
+    const currentNode = XmlHelper.getClosestParent('p:spTree', slideElement)
+
+    if (!currentNode) {
+      return 0; // Unable to find slide parent
+    }
+
+    const spTree = currentNode as XmlElement;
+
+    // Get all named elements from the slide
+    const namedElements: XmlElement[] = [];
+    const nvPrs = spTree.getElementsByTagNameNS(nsMain, 'cNvPr');
+
+    XmlHelper.modifyCollection(nvPrs, (nvPr: any) => {
+      const parentNode = nvPr.parentNode.parentNode;
+      const name = nvPr.getAttribute('name');
+      if (name === elementName) {
+        namedElements.push(parentNode);
+      }
+    });
+
+    // Find the index of the current element in the array of elements with the same name
+    for (let i = 0; i < namedElements.length; i++) {
+      if (namedElements[i] === slideElement) {
+        return i;
+      }
+    }
+
+    return 0;
+  }
+
   /**
    * Parses local tag name to specify element type in case it is a 'graphicFrame'.
    * @param slideElementParent

src/types/types.ts

@@ -251,18 +251,22 @@ export type GenerateElements = {
   addedObjects?: AddedObject[];
 };
 export type AddedObject = {
-  objectName: string,
-  callbacks: ModificationCallback[]
-}
+  objectName: string;
+  callbacks: ModificationCallback[];
+};
 export type FindElementSelector =
   | string
   | {
-      creationId: string;
+      creationId?: string;
       name: string;
+      // Specify the nth occurance in case you have more than one
+      // shape with the same name on your template slide:
+      nameIdx?: number;
     };
 export type FindElementStrategy = {
   mode: 'findByElementCreationId' | 'findByElementName';
   selector: string;
+  nameIdx?: number;
 };
 export type ImportedElement = {
   mode: string;

src/types/xml-types.ts

@@ -76,6 +76,7 @@ export type ElementInfo = {
   type: ElementType;
   id: string;
   creationId: string;
+  nameIdx: number;
   position: {
     x: number;
     y: number;