fix(DeDocument): Fix rendering of documents by properly moving new pages back to the document container

changelog.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 2024-11-27 - 1.0.103 - fix(DeDocument)
+Fix rendering of documents by properly moving new pages back to the document container
+
+- Resolved an issue in the DeDocument component where new pages were wrongly managed, causing errors in the rendering of documents.
+- Added a documentBuildContainer for temporary storage during page setup, ensuring correct page ordering.
+
 ## 2024-11-27 - 1.0.102 - fix(contentinvoice)
 Fixed currency display issues in invoice content rendering.
 

ts/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-document',
-  version: '1.0.102',
+  version: '1.0.103',
   description: 'A comprehensive solution for generating documents like invoices, integrating elements, templates, and services to streamline document creation.'
 }

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-document',
-  version: '1.0.102',
+  version: '1.0.103',
   description: 'A comprehensive solution for generating documents like invoices, integrating elements, templates, and services to streamline document creation.'
 }

ts_web/elements/document.ts

@@ -117,7 +117,6 @@ export class DeDocument extends DeesElement {
       const response = await fetch(this.letterDataUrl);
       this.letterData = await response.json();
     }
-    this.renderDocument();
   }
 
   public latestRenderedLetterData: plugins.tsclass.business.ILetter = null;
@@ -125,11 +124,15 @@ export class DeDocument extends DeesElement {
 
   public async renderDocument() {
     const domtools = await this.domtoolsPromise;
-    const documentContainer = this.shadowRoot.querySelector('.documentContainer');
+    
+
+    const documentBuildContainer = document.createElement('div');
+    document.body.appendChild(documentBuildContainer);
+
     let pages: DePage[] = [];
     let pageCounter = 0;
     let complete = false;
-    
+
     // lets append the content
     const content: DeContentInvoice = new DeContentInvoice();
     content.letterData = this.letterData;
@@ -149,13 +152,8 @@ export class DeDocument extends DeesElement {
       newPage.pageNumber = pageCounter;
       newPage.append(currentContent);
       newPage.pageTotalNumber = pageCounter;
-      documentContainer.append(newPage);
+      documentBuildContainer.append(newPage);
-      // betweenPagesSpacer
+      
-      if (!this.printMode) {
-        const betweenPagesSpacerDiv = document.createElement('div');
-        betweenPagesSpacerDiv.classList.add('betweenPagesSpacer');
-        documentContainer.append(betweenPagesSpacerDiv);
-      }
       await currentContent.elementDomReady;
       await currentContent.trimStartToOffset(overallContentOffset);
       let newPageOverflows = await newPage.checkOverflow();
@@ -174,9 +172,22 @@ export class DeDocument extends DeesElement {
       console.log(currentContentOffset);
     }
     document.body.removeChild(content);
+    document.body.removeChild(documentBuildContainer);
 
+    const documentContainer = this.shadowRoot.querySelector('.documentContainer');
+    if (documentContainer) {
+      const children = Array.from(documentContainer.children);
+      children.forEach((child) => documentContainer.removeChild(child));
+    }
     for (const page of pages) {
       page.pageTotalNumber = pageCounter;
+      documentContainer.append(page);
+      // betweenPagesSpacer
+      if (!this.printMode) {
+        const betweenPagesSpacerDiv = document.createElement('div');
+        betweenPagesSpacerDiv.classList.add('betweenPagesSpacer');
+        documentContainer.appendChild(betweenPagesSpacerDiv);
+      }
     }
     this.adjustDePageScaling();
     this.latestRenderedLetterData = this.letterData;