fix(core): update

2023-10-26 12:26:05 +02:00 · 2023-10-26 12:26:05 +02:00 · e994c80e34
commit e994c80e34
parent 861b7875d3
5 changed files with 128 additions and 54 deletions
--- 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';
--- 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'
 }
--- 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'
 }
--- 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`
-      <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);
+      }
+    });
  }
 }
--- 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` <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`;
+  }
 }