diff --git a/.npmrc b/.npmrc deleted file mode 100644 index 214c29d..0000000 --- a/.npmrc +++ /dev/null @@ -1 +0,0 @@ -registry=https://registry.npmjs.org/ diff --git a/changelog.md b/changelog.md index 4519fb2..75e9c07 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,16 @@ # Changelog +## 2025-12-11 - 2.2.0 - feat(viewer) +Add pagination metadata and thumbnail offset rendering for viewer thumbnails + +- Expose per-page pagination metadata (IPagePaginationInfo) from DeDocument during rendering (pageNumber, startOffset, contentLength). +- DeDocument now collects pagination info while paginating and dispatches a 'pagination-complete' CustomEvent with pageCount and paginationInfo (bubbled & composed). +- DeContentInvoice: add renderStartOffset and renderContentLength properties and applyOffsetTrimming to support rendering trimmed content (used for thumbnails). +- DeDocumentViewer: listen for 'pagination-complete', store paginationInfo, and render thumbnail previews by mounting DeContentInvoice instances with precomputed offsets to produce accurate thumbnails. +- Viewer: wire thumbnail generation to use per-page offsets so thumbnails show exactly the content slice for each page. +- Demo data: extended demo invoice items in ts_shared/demoletter.ts to better exercise pagination and thumbnail rendering. +- Remove registry override from .npmrc (previously pointed to registry.npmjs.org). + ## 2025-12-11 - 2.1.1 - fix(viewer) Improve sidebar resizing UX and update deps diff --git a/ts/00_commitinfo_data.ts b/ts/00_commitinfo_data.ts index 6dc5b22..1086882 100644 --- a/ts/00_commitinfo_data.ts +++ b/ts/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@design.estate/dees-document', - version: '2.1.1', + version: '2.2.0', description: 'A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.' } diff --git a/ts_shared/demoletter.ts b/ts_shared/demoletter.ts index 0f61639..619add9 100644 --- a/ts_shared/demoletter.ts +++ b/ts_shared/demoletter.ts @@ -237,6 +237,86 @@ export const demoLetter: plugins.tsclass.finance.TInvoice = { vatPercentage: 0, position: 20, }, + { + name: "Consulting Services", + unitQuantity: 5, + unitNetPrice: 150, + unitType: "hours", + vatPercentage: 19, + position: 21, + }, + { + name: "Development Work", + unitQuantity: 12, + unitNetPrice: 120, + unitType: "hours", + vatPercentage: 19, + position: 22, + }, + { + name: "Project Management", + unitQuantity: 3, + unitNetPrice: 180, + unitType: "hours", + vatPercentage: 19, + position: 23, + }, + { + name: "Technical Support", + unitQuantity: 8, + unitNetPrice: 90, + unitType: "hours", + vatPercentage: 7, + position: 24, + }, + { + name: "Documentation", + unitQuantity: 4, + unitNetPrice: 75, + unitType: "hours", + vatPercentage: 7, + position: 25, + }, + { + name: "Code Review", + unitQuantity: 6, + unitNetPrice: 110, + unitType: "hours", + vatPercentage: 19, + position: 26, + }, + { + name: "Testing & QA", + unitQuantity: 10, + unitNetPrice: 95, + unitType: "hours", + vatPercentage: 19, + position: 27, + }, + { + name: "Infrastructure Setup", + unitQuantity: 2, + unitNetPrice: 250, + unitType: "hours", + vatPercentage: 19, + position: 28, + }, + { + name: "Training Session", + unitQuantity: 4, + unitNetPrice: 200, + unitType: "hours", + vatPercentage: 7, + position: 29, + }, + { + name: "Maintenance Package", + unitQuantity: 1, + unitNetPrice: 500, + unitType: "units", + vatPercentage: 19, + position: 30, + }, ], }; diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 6dc5b22..1086882 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@design.estate/dees-document', - version: '2.1.1', + version: '2.2.0', description: 'A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.' } diff --git a/ts_web/elements/contentinvoice.ts b/ts_web/elements/contentinvoice.ts index 4684153..684749b 100644 --- a/ts_web/elements/contentinvoice.ts +++ b/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 ) { 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 { + // 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 { diff --git a/ts_web/elements/document.ts b/ts_web/elements/document.ts index 4390653..28ec1d8 100644 --- a/ts_web/elements/document.ts +++ b/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( diff --git a/ts_web/elements/viewer.ts b/ts_web/elements/viewer.ts index 83185a9..5e5c85d 100644 --- a/ts_web/elements/viewer.ts +++ b/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 {
Pages
- ${this.thumbnailPages.map( - (_, i) => html` + ${this.thumbnailPages.map((_, i) => { + const pageInfo = this.paginationInfo[i]; + + return html`
this.scrollToPage(i + 1)} @@ -689,13 +695,20 @@ export class DeDocumentViewer extends DeesElement { .documentSettings=${this.documentSettings} .pageNumber=${i + 1} .pageTotalNumber=${this.thumbnailPages.length} - > + >${pageInfo ? html` + + ` : null}
${i + 1}
- ` - )} + `; + })}
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) {