import * as tsclass from '@tsclass/tsclass';
import {
DeesElement,
property,
html,
customElement,
type TemplateResult,
css,
cssManager,
unsafeCSS,
} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
import * as shared from './shared/index.js';
declare global {
interface HTMLElementTagNameMap {
'dedocument-page': DePage;
}
}
@customElement('dedocument-page')
export class DePage extends DeesElement {
public static demo = () => html` `;
@property()
viewWidth: number = null;
@property()
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;
constructor() {
super();
domtools.DomTools.setupDomTools();
}
public static styles = [
domtools.elementBasic.staticStyles,
css`
:host {
display: block;
max-height: ${shared.a4Height}px;
max-width: ${shared.a4Width}px;
}
#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.pageNumber === 1
? html`
`
: html``}
${this.letterData.versionInfo.type === 'draft'
? 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 / shared.a4Height;
} else if (this.viewWidth) {
scale = this.viewWidth / 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 = `${shared.a4Height * scale}px`;
}
}