design.estate/dees-document
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(core): update

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

4
html/index.ts
View File

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

2
ts/00_commitinfo_data.ts
View File

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

2
ts_web/00_commitinfo_data.ts
View File

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

63
ts_web/elements/document.ts
View File

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

111
ts_web/elements/page.ts
View File

@@ -23,6 +23,12 @@ declare global {
export class DePage extends DeesElement {
public static demo = () => html` <dedocument-page .format="${'a4'}"></dedocument-page> `;
@property()
viewWidth: number = null;
@property()
viewHeight: number = null;
@property({
type: String,
})
@@ -59,6 +65,11 @@ export class DePage extends DeesElement {
css`
:host {
}
#scaleWrapper {
transform-origin: top left;
}
.versionOverlay {
pointer-events: none;
position: absolute;
@@ -93,44 +104,46 @@ export class DePage extends DeesElement {
public render(): TemplateResult {
return html`
<dedocument-pagecontainer .printMode=${this.printMode}>
<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
.pageNumber="${this.pageNumber}"
.pageTotalNumber="${this.pageTotalNumber}"
.letterData=${this.letterData}
><slot></slot
></dedocument-pagecontent>
<dedocument-pagefooter
.letterData=${this.letterData}
.pageNumber="${this.pageNumber}"
.pageTotalNumber="${this.pageTotalNumber}"
></dedocument-pagefooter>
<div class="versionOverlay">
${this.letterData.versionInfo.type === 'draft'
<div id="scaleWrapper">
<dedocument-pagecontainer .printMode=${this.printMode}>
<dedocument-pageheader
.letterData=${this.letterData}
.pageNumber="${this.pageNumber}"
.pageTotalNumber="${this.pageTotalNumber}"
></dedocument-pageheader>
${this.pageNumber === 1
? 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>
<dedocument-letterheader
.pageNumber="${this.pageNumber}"
.letterData=${this.letterData}
.pageTotalNumber="${this.pageTotalNumber}"
></dedocument-letterheader>
`
: html``}
</div>
</dedocument-pagecontainer>
<dedocument-pagecontent
.pageNumber="${this.pageNumber}"
.pageTotalNumber="${this.pageTotalNumber}"
.letterData=${this.letterData}
><slot></slot
></dedocument-pagecontent>
<dedocument-pagefooter
.letterData=${this.letterData}
.pageNumber="${this.pageNumber}"
.pageTotalNumber="${this.pageTotalNumber}"
></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>
</dedocument-pagecontainer>
</div>
`;
}
@@ -139,4 +152,32 @@ export class DePage extends DeesElement {
const pageContent = this.shadowRoot.querySelector('dedocument-pagecontent');
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`;
}
}