feat(viewer): Add pagination metadata and thumbnail offset rendering for viewer thumbnails

ts_web/elements/contentinvoice.ts

@@ -49,6 +49,13 @@ export class DeContentInvoice extends DeesElement {
   })
   accessor documentSettings: plugins.shared.interfaces.IDocumentSettings;
 
+  // Offset-based rendering properties for thumbnails
+  @property({ type: Number })
+  accessor renderStartOffset: number = null;
+
+  @property({ type: Number })
+  accessor renderContentLength: number = null;
+
   constructor() {
     super();
     domtools.DomTools.setupDomTools();
@@ -307,7 +314,29 @@ export class DeContentInvoice extends DeesElement {
     _changedProperties: Map<string | number | symbol, unknown>
   ) {
     super.firstUpdated(_changedProperties);
-    this.attachInvoiceDom();
+    await this.attachInvoiceDom();
+
+    // Apply offset-based trimming if specified (used for thumbnails)
+    if (this.renderStartOffset !== null && this.renderContentLength !== null) {
+      await this.applyOffsetTrimming();
+    }
+  }
+
+  /**
+   * Apply pre-computed pagination offsets for thumbnail rendering
+   */
+  private async applyOffsetTrimming(): Promise<void> {
+    // Trim from start
+    if (this.renderStartOffset > 0) {
+      await this.trimStartToOffset(this.renderStartOffset);
+    }
+
+    // Trim from end to match content length
+    let currentLength = await this.getContentLength();
+    while (currentLength > this.renderContentLength) {
+      await this.trimEndByOne();
+      currentLength = await this.getContentLength();
+    }
   }
 
   private renderPaymentTerms(): TemplateResult {

ts_web/elements/document.ts

@@ -26,6 +26,12 @@ import { DeContentInvoice } from "./contentinvoice.js";
 
 import { demoFunc } from "./document.demo.js";
 
+export interface IPagePaginationInfo {
+  pageNumber: number;
+  startOffset: number;
+  contentLength: number;
+}
+
 declare global {
   interface HTMLElementTagNameMap {
     "dedocument-dedocument": DeDocument;
@@ -142,10 +148,12 @@ export class DeDocument extends DeesElement {
     null;
   public latestRenderedLetterData: plugins.tsclass.business.TLetter = null;
   public cleanupStore: any[] = [];
+  public paginationInfo: IPagePaginationInfo[] = [];
 
   public async renderDocument() {
     this.latestDocumentSettings = this.documentSettings;
     this.latestRenderedLetterData = this.letterData;
+    this.paginationInfo = [];
 
     const cleanUpStoreCurrentRender = [];
     const cleanUpStoreNextRender = [];
@@ -198,7 +206,16 @@ export class DeDocument extends DeesElement {
         newPageOverflows = await newPage.checkOverflow();
       }
       currentContentOffset = await currentContent.getContentLength();
+      const pageStartOffset = overallContentOffset;
       overallContentOffset = overallContentOffset + currentContentOffset;
+
+      // Track pagination info for this page
+      this.paginationInfo.push({
+        pageNumber: pageCounter,
+        startOffset: pageStartOffset,
+        contentLength: currentContentOffset,
+      });
+
       if (trimmed === 0) {
         complete = true;
       }
@@ -234,6 +251,16 @@ export class DeDocument extends DeesElement {
       }
     }
     this.adjustDePageScaling();
+
+    // Emit event with pagination info for thumbnails
+    this.dispatchEvent(new CustomEvent('pagination-complete', {
+      detail: {
+        pageCount: pageCounter,
+        paginationInfo: this.paginationInfo,
+      },
+      bubbles: true,
+      composed: true,
+    }));
   }
 
   async updated(

ts_web/elements/viewer.ts

@@ -11,8 +11,9 @@ import {
   type TemplateResult,
 } from "@design.estate/dees-element";
 import { demoFunc } from "./viewer.demo.js";
-import { DeDocument } from "./document.js";
+import { DeDocument, type IPagePaginationInfo } from "./document.js";
 import "./page.js"; // Import DePage for thumbnail rendering
+import "./contentinvoice.js"; // Import DeContentInvoice for thumbnail content
 
 import "@design.estate/dees-catalog";
 
@@ -105,6 +106,9 @@ export class DeDocumentViewer extends DeesElement {
   @state()
   accessor thumbnailPages: number[] = [];
 
+  @state()
+  accessor paginationInfo: IPagePaginationInfo[] = [];
+
   // Zoom animation
   private zoomAnimationId: number | null = null;
 
@@ -667,8 +671,10 @@ export class DeDocumentViewer extends DeesElement {
       <div class="${sidebarClasses}" style="width: ${this.sidebarWidth}px;">
         <div class="sidebar__header">Pages</div>
         <div class="sidebar__thumbnails">
-          ${this.thumbnailPages.map(
-            (_, i) => html`
+          ${this.thumbnailPages.map((_, i) => {
+            const pageInfo = this.paginationInfo[i];
+
+            return html`
               <div
                 class="thumbnail ${currentPage === i + 1 ? "thumbnail--active" : ""}"
                 @click=${() => this.scrollToPage(i + 1)}
@@ -689,13 +695,20 @@ export class DeDocumentViewer extends DeesElement {
                       .documentSettings=${this.documentSettings}
                       .pageNumber=${i + 1}
                       .pageTotalNumber=${this.thumbnailPages.length}
-                    ></dedocument-page>
+                    >${pageInfo ? html`
+                      <dedocument-contentinvoice
+                        .letterData=${this.letterData as unknown as plugins.tsclass.finance.TInvoice}
+                        .documentSettings=${this.documentSettings}
+                        .renderStartOffset=${pageInfo.startOffset}
+                        .renderContentLength=${pageInfo.contentLength}
+                      ></dedocument-contentinvoice>
+                    ` : null}</dedocument-page>
                   </div>
                 </div>
                 <span class="thumbnail__label">${i + 1}</span>
               </div>
-            `
-          )}
+            `;
+          })}
         </div>
         <div
           class="sidebar__resize-handle"
@@ -1216,6 +1229,15 @@ export class DeDocumentViewer extends DeesElement {
       setTimeout(() => this.updateDisplayZoom(), 200);
     }
 
+    // Listen for pagination-complete event from DeDocument
+    this.addEventListener('pagination-complete', (e: CustomEvent) => {
+      this.paginationInfo = e.detail.paginationInfo;
+      const pageCount = e.detail.pageCount;
+      if (pageCount !== this.thumbnailPages.length) {
+        this.thumbnailPages = Array.from({ length: pageCount }, (_, i) => i);
+      }
+    });
+
     // Handle viewport resize and scroll
     const viewport = this.shadowRoot?.querySelector(".viewport");
     if (viewport) {