diff --git a/html/index.ts b/html/index.ts
index 3d9151b..7b1101a 100644
--- a/html/index.ts
+++ b/html/index.ts
@@ -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';
diff --git a/ts/00_commitinfo_data.ts b/ts/00_commitinfo_data.ts
index c64dad8..c82eef3 100644
--- a/ts/00_commitinfo_data.ts
+++ b/ts/00_commitinfo_data.ts
@@ -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'
}
diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index c64dad8..c82eef3 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -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'
}
diff --git a/ts_web/elements/document.ts b/ts_web/elements/document.ts
index 28f555e..a162c5e 100644
--- a/ts_web/elements/document.ts
+++ b/ts_web/elements/document.ts
@@ -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`
-
-
+
`;
}
public async firstUpdated(_changedProperties: Map) {
+ 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): 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);
+ }
+ });
}
}
diff --git a/ts_web/elements/page.ts b/ts_web/elements/page.ts
index 58449dc..494f98d 100644
--- a/ts_web/elements/page.ts
+++ b/ts_web/elements/page.ts
@@ -23,6 +23,12 @@ declare global {
export class DePage extends DeesElement {
public static demo = () => html` `;
+ @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`
-
-
- ${this.pageNumber === 1
- ? html`
-
- `
- : html``}
-
-
-
- ${this.letterData.versionInfo.type === 'draft'
+
+
+
+ ${this.pageNumber === 1
? html`
-
- Please note: THIS IS A DRAFT ONLY. NO RIGHTS CAN BE DERIVED FROM THIS.
- -> Revision/Document version: ${this.letterData.versionInfo.version}
-
- DRAFT
+
`
: 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``}
+
+
+
`;
}
@@ -139,4 +152,32 @@ export class DePage extends DeesElement {
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
+
+ scaleWrapper.style.width = `${shared.a4Width * scale}px`;
+ scaleWrapper.style.height = `${shared.a4Height * scale}px`;
+ }
}