2023-10-16 16:28:12 +00:00
|
|
|
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` <dedocument-page .format="${'a4'}"></dedocument-page> `;
|
|
|
|
|
2023-10-26 10:26:05 +00:00
|
|
|
@property()
|
|
|
|
viewWidth: number = null;
|
|
|
|
|
|
|
|
@property()
|
|
|
|
viewHeight: number = null;
|
|
|
|
|
2023-10-16 16:28:12 +00:00
|
|
|
@property({
|
|
|
|
type: String,
|
|
|
|
})
|
|
|
|
public format: 'a4' = 'a4';
|
|
|
|
|
|
|
|
@property({
|
|
|
|
type: Number,
|
|
|
|
})
|
|
|
|
public pageNumber: number = 1;
|
|
|
|
|
|
|
|
@property({
|
|
|
|
type: Number,
|
|
|
|
})
|
|
|
|
public pageTotalNumber: number = 1;
|
|
|
|
|
|
|
|
@property({
|
|
|
|
type: Object,
|
|
|
|
})
|
2023-11-26 15:59:04 +00:00
|
|
|
public letterData: tsclass.business.ILetter = null;
|
2023-10-16 16:28:12 +00:00
|
|
|
|
|
|
|
@property({
|
|
|
|
type: Boolean,
|
|
|
|
reflect: true,
|
|
|
|
})
|
|
|
|
printMode = false;
|
|
|
|
|
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
domtools.DomTools.setupDomTools();
|
|
|
|
}
|
|
|
|
|
|
|
|
public static styles = [
|
|
|
|
domtools.elementBasic.staticStyles,
|
|
|
|
css`
|
|
|
|
:host {
|
2023-10-26 15:39:02 +00:00
|
|
|
display: block;
|
|
|
|
max-height: ${shared.a4Height}px;
|
|
|
|
max-width: ${shared.a4Width}px;
|
2023-10-16 16:28:12 +00:00
|
|
|
}
|
2023-10-26 10:26:05 +00:00
|
|
|
|
|
|
|
#scaleWrapper {
|
|
|
|
transform-origin: top left;
|
|
|
|
}
|
|
|
|
|
2023-10-16 16:28:12 +00:00
|
|
|
.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`
|
2023-10-26 10:26:05 +00:00
|
|
|
<div id="scaleWrapper">
|
|
|
|
<dedocument-pagecontainer .printMode=${this.printMode}>
|
2023-11-26 15:59:04 +00:00
|
|
|
${this.letterData
|
2023-10-16 16:28:12 +00:00
|
|
|
? html`
|
2023-11-26 15:59:04 +00:00
|
|
|
<dedocument-pageheader
|
|
|
|
.letterData=${this.letterData}
|
|
|
|
.pageNumber="${this.pageNumber}"
|
|
|
|
.pageTotalNumber="${this.pageTotalNumber}"
|
|
|
|
></dedocument-pageheader>
|
|
|
|
${this.pageNumber === 1
|
|
|
|
? html`
|
|
|
|
<dedocument-letterheader
|
|
|
|
.pageNumber="${this.pageNumber}"
|
|
|
|
.letterData=${this.letterData}
|
|
|
|
.pageTotalNumber="${this.pageTotalNumber}"
|
|
|
|
></dedocument-letterheader>
|
|
|
|
`
|
|
|
|
: html``}
|
|
|
|
<dedocument-pagecontent
|
2023-10-26 10:26:05 +00:00
|
|
|
.pageNumber="${this.pageNumber}"
|
2023-11-26 15:59:04 +00:00
|
|
|
.pageTotalNumber="${this.pageTotalNumber}"
|
|
|
|
.letterData=${this.letterData}
|
|
|
|
><slot></slot
|
|
|
|
></dedocument-pagecontent>
|
|
|
|
<dedocument-pagefooter
|
2023-10-26 10:26:05 +00:00
|
|
|
.letterData=${this.letterData}
|
2023-11-26 15:59:04 +00:00
|
|
|
.pageNumber="${this.pageNumber}"
|
2023-10-26 10:26:05 +00:00
|
|
|
.pageTotalNumber="${this.pageTotalNumber}"
|
2023-11-26 15:59:04 +00:00
|
|
|
></dedocument-pagefooter>
|
|
|
|
<div class="versionOverlay">
|
|
|
|
${this.letterData.versionInfo.type === 'draft'
|
|
|
|
? html`
|
|
|
|
<div class="topInfo">
|
|
|
|
Please note: THIS IS A DRAFT ONLY. NO RIGHTS CAN BE DERIVED FROM THIS.<br />
|
|
|
|
-> Revision/Document version: ${this.letterData.versionInfo.version}
|
|
|
|
</div>
|
|
|
|
<div class="bigDraftText">DRAFT</div>
|
|
|
|
`
|
|
|
|
: html``}
|
|
|
|
</div>
|
2023-10-16 16:28:12 +00:00
|
|
|
`
|
2023-11-26 15:59:04 +00:00
|
|
|
: html`
|
|
|
|
<slot></slot>
|
|
|
|
`}
|
2023-10-26 10:26:05 +00:00
|
|
|
</dedocument-pagecontainer>
|
|
|
|
</div>
|
2023-10-16 16:28:12 +00:00
|
|
|
`;
|
|
|
|
}
|
|
|
|
|
|
|
|
public async checkOverflow() {
|
|
|
|
await this.elementDomReady;
|
|
|
|
const pageContent = this.shadowRoot.querySelector('dedocument-pagecontent');
|
|
|
|
return pageContent.checkOverflow();
|
|
|
|
}
|
2023-10-26 10:26:05 +00:00
|
|
|
|
|
|
|
updated(changedProperties: Map<string | number | symbol, unknown>): void {
|
|
|
|
super.updated(changedProperties);
|
2023-11-26 15:59:04 +00:00
|
|
|
if (changedProperties.has('viewHeight') || changedProperties.has('viewWidth')) {
|
2023-10-26 10:26:05 +00:00
|
|
|
this.adjustScaling();
|
|
|
|
}
|
|
|
|
}
|
2023-11-26 15:59:04 +00:00
|
|
|
|
2023-10-26 10:26:05 +00:00
|
|
|
private adjustScaling() {
|
2023-11-26 15:59:04 +00:00
|
|
|
console.log('page scale adjustment triggered.');
|
|
|
|
const scaleWrapper: HTMLDivElement = this.shadowRoot.querySelector('#scaleWrapper');
|
|
|
|
|
2023-10-26 10:26:05 +00:00
|
|
|
if (!scaleWrapper) return;
|
2023-11-26 15:59:04 +00:00
|
|
|
|
2023-10-26 10:26:05 +00:00
|
|
|
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})`;
|
2023-11-26 15:59:04 +00:00
|
|
|
|
2023-10-26 10:26:05 +00:00
|
|
|
// Adjust the outer dimensions so they match the scaled content
|
2023-11-26 15:59:04 +00:00
|
|
|
|
2023-10-26 15:39:02 +00:00
|
|
|
// this.style.width = `${shared.a4Width * scale}px`;
|
|
|
|
this.style.height = `${shared.a4Height * scale}px`;
|
2023-10-26 10:26:05 +00:00
|
|
|
}
|
2023-10-16 16:28:12 +00:00
|
|
|
}
|