1.0.96

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-document",
-  "version": "1.0.93",
+  "version": "1.0.96",
   "private": false,
   "description": "a catalog for creating documents like invoices",
   "main": "dist_ts_web/index.js",
@@ -12,22 +12,23 @@
   "scripts": {
     "test": "npm run build && tstest test/",
     "build": "tsbuild --allowimplicitany && tsbuild element --allowimplicitany && tsbundle element --production",
-    "watch": "tswatch element"
+    "watch": "tswatch element",
+    "buildDocs": "tsdoc"
   },
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@design.estate/dees-domtools": "^2.0.34",
+    "@design.estate/dees-domtools": "^2.0.55",
-    "@design.estate/dees-element": "^2.0.23",
+    "@design.estate/dees-element": "^2.0.32",
     "@design.estate/dees-wcctools": "^1.0.76",
     "@git.zone/tsrun": "^1.2.44",
     "@push.rocks/smartfile": "^10.0.26",
     "@push.rocks/smartjson": "^5.0.10",
     "@push.rocks/smartpath": "^5.0.5",
     "@push.rocks/smartpdf": "^3.0.16",
-    "@push.rocks/smarttime": "^4.0.1",
+    "@push.rocks/smarttime": "^4.0.6",
     "@tsclass/tsclass": "^4.0.46",
-    "@types/qrcode": "^1.5.2",
+    "@types/qrcode": "^1.5.4",
     "qrcode": "^1.5.3"
   },
   "devDependencies": {

ts/00_commitinfo_data.ts

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

ts_web/00_commitinfo_data.ts

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

ts_web/elements/document.demo.ts

@@ -0,0 +1,6 @@
+import * as shared from './shared/index.js';
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+<dedocument-dedocument .format="${'a4'}" .letterData=${shared.demoLetter}></dedocument-dedocument>
+`;

ts_web/elements/document.ts

@@ -18,6 +18,7 @@ import { DePage } from './page.js';
 import { DeContentInvoice } from './contentinvoice.js';
 
 import * as shared from './shared/index.js';
+import { demoFunc } from './document.demo.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -27,9 +28,7 @@ declare global {
 
 @customElement('dedocument-dedocument')
 export class DeDocument extends DeesElement {
-  public static demo = () => html`
+  public static demo = demoFunc;
-    <dedocument-dedocument .format="${'a4'}" .letterData=${shared.demoLetter}></dedocument-dedocument>
-  `;
 
   @property({
     type: String,
@@ -39,7 +38,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,
@@ -81,28 +85,31 @@ export class DeDocument extends DeesElement {
       }
 
       .betweenPagesSpacer {
-        height: 20px;
+        height: 16px;
       }
     `,
   ];
 
   public render(): TemplateResult {
     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>) {
+    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);
+    this.registerGarbageFunction(() => {
+      resizeObserver.disconnect();
+    })
+    
     if (this.letterDataUrl) {
       const response = await fetch(this.letterDataUrl);
       this.letterData = await response.json();
@@ -112,7 +119,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 +142,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 +171,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);
+      }
+    });
   }
 }

ts_web/elements/index.ts

@@ -6,3 +6,6 @@ export * from './pagecontainer.js';
 export * from './pagecontent.js';
 export * from './pagefooter.js';
 export * from './pageheader.js';
+export * from './viewer.js';
+
+export * from './shared/index.js';

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,
   })
@@ -58,7 +64,15 @@ export class DePage extends DeesElement {
     domtools.elementBasic.staticStyles,
     css`
       :host {
+        display: block;
+        max-height: ${shared.a4Height}px;
+        max-width: ${shared.a4Width}px;
       }
+
+      #scaleWrapper {
+        transform-origin: top left;
+      }
+
       .versionOverlay {
         pointer-events: none;
         position: absolute;
@@ -93,44 +107,46 @@ export class DePage extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <dedocument-pagecontainer .printMode=${this.printMode}>
+      <div id="scaleWrapper">
-        <dedocument-pageheader
+        <dedocument-pagecontainer .printMode=${this.printMode}>
-          .letterData=${this.letterData}
+          <dedocument-pageheader
-          .pageNumber="${this.pageNumber}"
+            .letterData=${this.letterData}
-          .pageTotalNumber="${this.pageTotalNumber}"
+            .pageNumber="${this.pageNumber}"
-        ></dedocument-pageheader>
+            .pageTotalNumber="${this.pageTotalNumber}"
-        ${this.pageNumber === 1
+          ></dedocument-pageheader>
-          ? html`
+          ${this.pageNumber === 1
-              <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'
             ? html`
-                <div class="topInfo">
+                <dedocument-letterheader
-                  Please note: THIS IS A DRAFT ONLY. NO RIGHTS CAN BE DERIVED FROM THIS.<br>
+                  .pageNumber="${this.pageNumber}"
-                  -> Revision/Document version: ${this.letterData.versionInfo.version}
+                  .letterData=${this.letterData}
-                </div>
+                  .pageTotalNumber="${this.pageTotalNumber}"
-                <div class="bigDraftText">DRAFT</div>
+                ></dedocument-letterheader>
               `
             : html``}
-        </div>
+          <dedocument-pagecontent
-      </dedocument-pagecontainer>
+            .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 +155,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
+    
+    // this.style.width = `${shared.a4Width * scale}px`;
+    this.style.height = `${shared.a4Height * scale}px`;
+  }
 }

ts_web/elements/viewer.demo.ts

@@ -0,0 +1,6 @@
+import { html } from '@design.estate/dees-element';
+import * as shared from './shared/index.js';
+
+export const demoFunc = () => html`
+  <dedocument-viewer .letterData=${shared.demoLetter}></dedocument-viewer>
+`;

ts_web/elements/viewer.ts

@@ -0,0 +1,83 @@
+import * as plugins from '../plugins.js';
+
+import { DeesElement, css, cssManager, customElement, html } from '@design.estate/dees-element';
+import { demoFunc } from './viewer.demo.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dedocument-viewer': DeDocumentViewer;
+  }
+}
+
+@customElement('dedocument-viewer')
+export class DeDocumentViewer extends DeesElement {
+  // DEMO
+  public static demo = demoFunc;
+
+  // INSTANCE
+  public letterData: plugins.tsclass.business.ILetter = null;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      .maincontainer {
+        position: relative;
+        height: 100%;
+        width: 100%;
+        background: ${cssManager.bdTheme('#eeeeeb', '#111')};
+      }
+      .controls {
+        top: 0px;
+        right: 0px;
+        left: 0px;
+        position: absolute;
+        height: 32px;
+        width: 100%;
+        background: ${cssManager.bdTheme('#eeeeeb', '#111111ee')};
+        box-shadow: 0px 2px 8px 0px #000000;
+      }
+      .controlsShadow {
+        position: absolute;
+        top: 32px;
+        right: 0px;
+        left: 0px;
+        height: 16px;
+        width: 100%;
+        position: absolute;
+        background: linear-gradient(to bottom, #111111cc 0%, #11111100 100%);
+      }
+
+      .viewport {
+        position: absolute;
+        padding: 16px;
+        padding-top: 48px;
+        padding-bottom: 0px;
+        top: 0px;
+        left: 0px;
+        right: 0px;
+        bottom: 0px;
+        overflow-y: scroll;
+        overscroll-behavior: contain;
+      }
+    `,
+  ];
+
+  public render = () => {
+    return html`
+      <div class="maincontainer">
+        <div class="viewport">
+          ${this.letterData
+            ? html` <dedocument-dedocument .letterData=${this.letterData}></dedocument-dedocument> `
+            : html``}
+        </div>
+        <div class="controls"></div>
+      </div>
+    `;
+  };
+
+  public updated = (changedProperties: Map<string | number | symbol, unknown>) => {
+    super.updated(changedProperties);
+    if (changedProperties.has('letterData')) {
+    }
+  };
+}