import * as tsclass from '@tsclass/tsclass'; import { DeesElement, property, html, customElement, type TemplateResult, css, cssManager, unsafeCSS, domtools, } from '@design.estate/dees-element'; import * as plugins from '../plugins.js'; import { defaultDocumentSettings } from './document.js'; declare global { interface HTMLElementTagNameMap { 'dedocument-page': DePage; } } @customElement('dedocument-page') export class DePage extends DeesElement { public static demo = () => html` `; @property({ type: Number, }) viewWidth: number = null; @property({ type: Number, }) viewHeight: number = null; @property({ type: String, }) public format: 'a4' = 'a4'; @property({ type: Number, }) public pageNumber: number = 1; @property({ type: Number, }) public pageTotalNumber: number = 1; @property({ type: Object, }) public letterData: tsclass.business.ILetter = null; @property({ type: Boolean, reflect: true, }) printMode = false; @property({ type: Object, reflect: true, }) public documentSettings: plugins.shared.interfaces.IDocumentSettings = defaultDocumentSettings; constructor() { super(); domtools.DomTools.setupDomTools(); } public static styles = [ domtools.elementBasic.staticStyles, css` :host { display: block; font-family: inherit; } #scaleWrapper { transform-origin: top left; } .versionOverlay { pointer-events: none; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; font-family: monospace; font-size: 16px; z-index: 1000; display: flex; justify-content: center; align-items: center; } .topInfo { position: absolute; top: 60px; left: 40px; color: red; transform: rotate(-5deg); } .bigDraftText { transform: rotate(-45deg); font-size: 200px; opacity: 0.05; } `, ]; public render(): TemplateResult { return html`
${this.letterData ? html` ${this.documentSettings.enableDefaultHeader ? html` ` : ``} ${this.pageNumber === 1 ? html` ` : html``} ${this.documentSettings.enableDefaultFooter ? html` ` : ``}
${this.letterData.versionInfo.type === 'draft' ? html` ${this.documentSettings.enableTopDraftText ? html`
Please note: THIS IS A DRAFT ONLY. NO RIGHTS CAN BE DERIVED FROM THIS.
-> Revision/Document version: ${this.letterData.versionInfo.version}
` : ``}
DRAFT
` : html``}
` : html` `}
`; } public async checkOverflow() { await this.elementDomReady; const pageContent = this.shadowRoot.querySelector('dedocument-pagecontent'); return pageContent.checkOverflow(); } updated(changedProperties: Map): void { super.updated(changedProperties); if (changedProperties.has('viewHeight') || changedProperties.has('viewWidth')) { this.adjustScaling(); } } private adjustScaling() { console.log('page scale adjustment triggered.'); const scaleWrapper: HTMLDivElement = this.shadowRoot.querySelector('#scaleWrapper'); if (!scaleWrapper) return; let scale = 1; if (this.viewHeight) { scale = this.viewHeight / plugins.shared.a4Height; } else if (this.viewWidth) { scale = this.viewWidth / plugins.shared.a4Width; } console.log(`new scale is ${scale}`); scaleWrapper.style.transform = `scale(${scale})`; // Adjust the outer dimensions so they match the scaled content // this.style.width = `${shared.a4Width * scale}px`; this.style.height = `${plugins.shared.a4Height * scale}px`; } }