dees-document/ts_web/elements/document.ts

239 lines
6.3 KiB
TypeScript
Raw Normal View History

2023-10-16 16:28:12 +00:00
import {
DeesElement,
property,
html,
customElement,
type TemplateResult,
css,
state,
cssManager,
unsafeCSS,
domtools,
} from '@design.estate/dees-element';
import * as interfaces from '../../ts/interfaces/index.js';
2023-10-16 16:28:12 +00:00
import * as plugins from '../plugins.js';
export const defaultDocumentSettings: interfaces.IDocumentSettings = {
enableTopDraftText: true,
enableDefaultHeader: true,
enableDefaultFooter: true,
};
2023-10-16 16:28:12 +00:00
import { DePage } from './page.js';
import { DeContentInvoice } from './contentinvoice.js';
import * as shared from './shared/index.js';
2023-10-26 15:39:02 +00:00
import { demoFunc } from './document.demo.js';
2023-10-16 16:28:12 +00:00
declare global {
interface HTMLElementTagNameMap {
'dedocument-dedocument': DeDocument;
}
}
@customElement('dedocument-dedocument')
export class DeDocument extends DeesElement {
2023-10-26 15:39:02 +00:00
public static demo = demoFunc;
2023-10-16 16:28:12 +00:00
@property({
type: String,
reflect: true,
2023-10-16 16:28:12 +00:00
})
public format: 'a4' = 'a4';
@property({
type: Number,
reflect: true,
2023-10-16 16:28:12 +00:00
})
2023-10-26 10:26:05 +00:00
public viewWidth: number = null;
@property({
type: Number,
reflect: true,
2023-10-26 10:26:05 +00:00
})
public viewHeight: number = null;
2023-10-16 16:28:12 +00:00
@property({
type: Boolean,
reflect: true,
2023-10-16 16:28:12 +00:00
})
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: Object,
reflect: true,
converter: (valueArg) => {
if (typeof valueArg === 'string') {
return plugins.smartjson.parseBase64(valueArg)
} else {
return valueArg;
}
},
2023-10-16 16:28:12 +00:00
})
public documentSettings: interfaces.IDocumentSettings = defaultDocumentSettings;
2023-10-16 16:28:12 +00:00
constructor() {
super();
domtools.DomTools.setupDomTools();
}
public static styles = [
domtools.elementBasic.staticStyles,
css`
:host {
display: block;
color: #333;
padding: 0px;
position: relative;
}
.betweenPagesSpacer {
2023-10-26 15:39:02 +00:00
height: 16px;
2023-10-16 16:28:12 +00:00
}
`,
];
public render(): TemplateResult {
return html`
2023-10-26 10:26:05 +00:00
<div class="documentContainer"></div>
2023-10-16 16:28:12 +00:00
`;
}
public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
2023-10-26 10:26:05 +00:00
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);
2023-10-26 15:39:02 +00:00
this.registerGarbageFunction(() => {
resizeObserver.disconnect();
})
2023-10-16 16:28:12 +00:00
}
public latestRenderedLetterData: plugins.tsclass.business.ILetter = null;
2023-10-16 16:28:12 +00:00
public async renderDocument() {
const domtools = await this.domtoolsPromise;
const documentBuildContainer = document.createElement('div');
document.body.appendChild(documentBuildContainer);
2023-10-16 16:28:12 +00:00
let pages: DePage[] = [];
let pageCounter = 0;
let complete = false;
// lets append the content
const content: DeContentInvoice = new DeContentInvoice();
2023-10-16 16:28:12 +00:00
content.letterData = this.letterData;
document.body.appendChild(content);
2023-10-16 16:28:12 +00:00
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;
documentBuildContainer.append(newPage);
2023-10-16 16:28:12 +00:00
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);
document.body.removeChild(documentBuildContainer);
2023-10-16 16:28:12 +00:00
const documentContainer = this.shadowRoot.querySelector('.documentContainer');
if (documentContainer) {
const children = Array.from(documentContainer.children);
children.forEach((child) => documentContainer.removeChild(child));
}
2023-10-16 16:28:12 +00:00
for (const page of pages) {
page.pageTotalNumber = pageCounter;
documentContainer.append(page);
// betweenPagesSpacer
if (!this.printMode) {
const betweenPagesSpacerDiv = document.createElement('div');
betweenPagesSpacerDiv.classList.add('betweenPagesSpacer');
documentContainer.appendChild(betweenPagesSpacerDiv);
}
2023-10-16 16:28:12 +00:00
}
2023-10-26 10:26:05 +00:00
this.adjustDePageScaling();
this.latestRenderedLetterData = this.letterData;
2023-10-26 10:26:05 +00:00
}
async updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
2023-10-26 10:26:05 +00:00
super.updated(changedProperties);
const domtools = await this.domtoolsPromise;
const renderedDocIsUpToDate = domtools.convenience.smartjson.deepEqualObjects(this.letterData, this.latestRenderedLetterData);
if (!renderedDocIsUpToDate) {
this.renderDocument();
}
2023-10-26 10:26:05 +00:00
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);
}
});
2023-10-16 16:28:12 +00:00
}
}