import { DeesElement, property, html, customElement, type TemplateResult, css, state, cssManager, unsafeCSS, domtools, } from '@design.estate/dees-element'; import * as plugins from '../plugins.js'; import { DePage } from './page.js'; import { DeContentInvoice } from './contentinvoice.js'; import * as shared from './shared/index.js'; import { demoFunc } from './document.demo.js'; declare global { interface HTMLElementTagNameMap { 'dedocument-dedocument': DeDocument; } } @customElement('dedocument-dedocument') export class DeDocument extends DeesElement { public static demo = demoFunc; @property({ type: String, }) public format: 'a4' = 'a4'; @property({ type: Number, }) public viewWidth: number = null; @property({ type: Number, }) public viewHeight: number = null; @property({ type: Boolean, }) printMode = false; @property({ type: Object, reflect: true, converter: (valueArg) => { if (typeof valueArg === 'string') { return plugins.smartjson.parseBase64(valueArg) } else { return valueArg; } }, }) public letterData: plugins.tsclass.business.ILetter; @property({ type: String, }) public letterDataUrl: string; constructor() { super(); domtools.DomTools.setupDomTools(); } public static styles = [ domtools.elementBasic.staticStyles, css` :host { display: block; color: #333; padding: 0px; position: relative; } .betweenPagesSpacer { height: 16px; } `, ]; public render(): TemplateResult { return html`
`; } public async firstUpdated(_changedProperties: Map) { const resizeObserver = new ResizeObserver((entries) => { for (const entry of entries) { const width = entry.contentRect.width; const height = entry.contentRect.height; // Handle the new dimensions here this.adjustDePageScaling(); } }); resizeObserver.observe(this); this.registerGarbageFunction(() => { resizeObserver.disconnect(); }) if (this.letterDataUrl) { const response = await fetch(this.letterDataUrl); this.letterData = await response.json(); } this.renderDocument(); } public async renderDocument() { const domtools = await this.domtoolsPromise; const documentContainer = this.shadowRoot.querySelector('.documentContainer'); let pages: DePage[] = []; let pageCounter = 0; let complete = false; const content: DeContentInvoice = document.createElement( 'dedocument-contentinvoice' ) as DeContentInvoice; content.letterData = this.letterData; document.body.appendChild(content); await domtools.convenience.smartdelay.delayFor(0); let overallContentOffset: number = 0; let currentContentOffset: number; let trimmed: number; while (!complete) { pageCounter++; const currentContent = content.cloneNode(true) as DeContentInvoice; const newPage = new DePage(); newPage.printMode = this.printMode; newPage.letterData = this.letterData; pages.push(newPage); newPage.pageNumber = pageCounter; newPage.append(currentContent); newPage.pageTotalNumber = pageCounter; documentContainer.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(); trimmed = 0; while (newPageOverflows) { await currentContent.trimEndByOne(); trimmed++; newPageOverflows = await newPage.checkOverflow(); } currentContentOffset = await currentContent.getContentLength(); overallContentOffset = overallContentOffset + currentContentOffset; if (trimmed === 0) { complete = true; } // complete = true; console.log(currentContentOffset); } document.body.removeChild(content); for (const page of pages) { page.pageTotalNumber = pageCounter; } this.adjustDePageScaling(); } updated(changedProperties: Map): void { super.updated(changedProperties); if (changedProperties.has('viewHeight') || changedProperties.has('viewWidth')) { this.adjustDePageScaling(); } } private adjustDePageScaling() { if (this.printMode) { return; } this.viewWidth = this.clientWidth; // Find all DePage instances within this DeDocument const pages = this.shadowRoot.querySelectorAll('dedocument-page'); // Update each DePage instance's viewHeight and viewWidth pages.forEach((page: DePage) => { if (this.viewHeight) { page.viewHeight = this.viewHeight; } if (this.viewWidth) { page.viewWidth = this.viewWidth; console.log('setting viewWidth: ', this.viewWidth); } }); } }