fix(core): update

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);
+      }
+    });
   }
 }