fix(core): update

This commit is contained in:
Philipp Kunz 2023-10-26 12:26:05 +02:00
parent 861b7875d3
commit e994c80e34
5 changed files with 128 additions and 54 deletions

View File

@ -1,6 +1,6 @@
// dees tools // dees tools
import * as deesWccTools from '@designestate/dees-wcctools'; import * as deesWccTools from '@design.estate/dees-wcctools';
import * as deesDomTools from '@designestate/dees-domtools'; import * as deesDomTools from '@design.estate/dees-domtools';
// elements and pages // elements and pages
import * as elements from '../ts_web/elements/index.js'; import * as elements from '../ts_web/elements/index.js';

View File

@ -3,6 +3,6 @@
*/ */
export const commitinfo = { export const commitinfo = {
name: '@design.estate/dees-document', name: '@design.estate/dees-document',
version: '1.0.94', version: '1.0.95',
description: 'a catalog for creating documents like invoices' description: 'a catalog for creating documents like invoices'
} }

View File

@ -3,6 +3,6 @@
*/ */
export const commitinfo = { export const commitinfo = {
name: '@design.estate/dees-document', name: '@design.estate/dees-document',
version: '1.0.94', version: '1.0.95',
description: 'a catalog for creating documents like invoices' description: 'a catalog for creating documents like invoices'
} }

View File

@ -39,7 +39,12 @@ export class DeDocument extends DeesElement {
@property({ @property({
type: Number, type: Number,
}) })
public viewWidth: number = shared.a4Width; public viewWidth: number = null;
@property({
type: Number,
})
public viewHeight: number = null;
@property({ @property({
type: Boolean, type: Boolean,
@ -88,21 +93,20 @@ export class DeDocument extends DeesElement {
public render(): TemplateResult { public render(): TemplateResult {
return html` return html`
<style> <div class="documentContainer"></div>
:host {
transform-origin: top left;
transform: ${this.viewWidth
? unsafeCSS(
`scale(${this.viewWidth / shared.a4Width}, ${this.viewWidth / shared.a4Width})`
)
: unsafeCSS('')};
}
</style>
<div class="scaleport"></div>
`; `;
} }
public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) { public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
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);
if (this.letterDataUrl) { if (this.letterDataUrl) {
const response = await fetch(this.letterDataUrl); const response = await fetch(this.letterDataUrl);
this.letterData = await response.json(); this.letterData = await response.json();
@ -112,7 +116,7 @@ export class DeDocument extends DeesElement {
public async renderDocument() { public async renderDocument() {
const domtools = await this.domtoolsPromise; const domtools = await this.domtoolsPromise;
const scaleport = this.shadowRoot.querySelector('.scaleport'); const documentContainer = this.shadowRoot.querySelector('.documentContainer');
let pages: DePage[] = []; let pages: DePage[] = [];
let pageCounter = 0; let pageCounter = 0;
let complete = false; let complete = false;
@ -135,12 +139,12 @@ export class DeDocument extends DeesElement {
newPage.pageNumber = pageCounter; newPage.pageNumber = pageCounter;
newPage.append(currentContent); newPage.append(currentContent);
newPage.pageTotalNumber = pageCounter; newPage.pageTotalNumber = pageCounter;
scaleport.append(newPage); documentContainer.append(newPage);
// betweenPagesSpacer // betweenPagesSpacer
if (!this.printMode) { if (!this.printMode) {
const betweenPagesSpacerDiv = document.createElement('div'); const betweenPagesSpacerDiv = document.createElement('div');
betweenPagesSpacerDiv.classList.add('betweenPagesSpacer'); betweenPagesSpacerDiv.classList.add('betweenPagesSpacer');
scaleport.append(betweenPagesSpacerDiv); documentContainer.append(betweenPagesSpacerDiv);
} }
await currentContent.elementDomReady; await currentContent.elementDomReady;
await currentContent.trimStartToOffset(overallContentOffset); await currentContent.trimStartToOffset(overallContentOffset);
@ -164,5 +168,34 @@ export class DeDocument extends DeesElement {
for (const page of pages) { for (const page of pages) {
page.pageTotalNumber = pageCounter; page.pageTotalNumber = pageCounter;
} }
this.adjustDePageScaling();
}
updated(changedProperties: Map<string | number | symbol, unknown>): 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);
}
});
} }
} }

View File

@ -23,6 +23,12 @@ declare global {
export class DePage extends DeesElement { export class DePage extends DeesElement {
public static demo = () => html` <dedocument-page .format="${'a4'}"></dedocument-page> `; public static demo = () => html` <dedocument-page .format="${'a4'}"></dedocument-page> `;
@property()
viewWidth: number = null;
@property()
viewHeight: number = null;
@property({ @property({
type: String, type: String,
}) })
@ -59,6 +65,11 @@ export class DePage extends DeesElement {
css` css`
:host { :host {
} }
#scaleWrapper {
transform-origin: top left;
}
.versionOverlay { .versionOverlay {
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
@ -93,6 +104,7 @@ export class DePage extends DeesElement {
public render(): TemplateResult { public render(): TemplateResult {
return html` return html`
<div id="scaleWrapper">
<dedocument-pagecontainer .printMode=${this.printMode}> <dedocument-pagecontainer .printMode=${this.printMode}>
<dedocument-pageheader <dedocument-pageheader
.letterData=${this.letterData} .letterData=${this.letterData}
@ -123,7 +135,7 @@ export class DePage extends DeesElement {
${this.letterData.versionInfo.type === 'draft' ${this.letterData.versionInfo.type === 'draft'
? html` ? html`
<div class="topInfo"> <div class="topInfo">
Please note: THIS IS A DRAFT ONLY. NO RIGHTS CAN BE DERIVED FROM THIS.<br> Please note: THIS IS A DRAFT ONLY. NO RIGHTS CAN BE DERIVED FROM THIS.<br />
-> Revision/Document version: ${this.letterData.versionInfo.version} -> Revision/Document version: ${this.letterData.versionInfo.version}
</div> </div>
<div class="bigDraftText">DRAFT</div> <div class="bigDraftText">DRAFT</div>
@ -131,6 +143,7 @@ export class DePage extends DeesElement {
: html``} : html``}
</div> </div>
</dedocument-pagecontainer> </dedocument-pagecontainer>
</div>
`; `;
} }
@ -139,4 +152,32 @@ export class DePage extends DeesElement {
const pageContent = this.shadowRoot.querySelector('dedocument-pagecontent'); const pageContent = this.shadowRoot.querySelector('dedocument-pagecontent');
return pageContent.checkOverflow(); return pageContent.checkOverflow();
} }
updated(changedProperties: Map<string | number | symbol, unknown>): 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
scaleWrapper.style.width = `${shared.a4Width * scale}px`;
scaleWrapper.style.height = `${shared.a4Height * scale}px`;
}
} }