update

ts_web/elements/document.ts

@@ -87,6 +87,12 @@ export class DeDocument extends DeesElement {
   accessor documentSettings: plugins.shared.interfaces.IDocumentSettings =
     defaultDocumentSettings;
 
+  @property({ type: Number })
+  accessor zoomLevel: number = null; // null = auto-fit, otherwise percentage (e.g., 100 = 100%)
+
+  @property({ type: Number })
+  accessor pageGap: number = 16; // pixels between pages
+
   constructor() {
     super();
     domtools.DomTools.setupDomTools();
@@ -223,6 +229,7 @@ export class DeDocument extends DeesElement {
       if (!this.printMode) {
         const betweenPagesSpacerDiv = document.createElement("div");
         betweenPagesSpacerDiv.classList.add("betweenPagesSpacer");
+        betweenPagesSpacerDiv.style.height = `${this.pageGap}px`;
         documentContainer.appendChild(betweenPagesSpacerDiv);
       }
     }
@@ -249,10 +256,25 @@ export class DeDocument extends DeesElement {
 
     if (
       changedProperties.has("viewHeight") ||
-      changedProperties.has("viewWidth")
+      changedProperties.has("viewWidth") ||
+      changedProperties.has("zoomLevel")
     ) {
       this.adjustDePageScaling();
     }
+
+    if (changedProperties.has("pageGap")) {
+      this.updatePageGaps();
+    }
+  }
+
+  /**
+   * Update page gap spacing without re-rendering document
+   */
+  private updatePageGaps(): void {
+    const spacers = this.shadowRoot.querySelectorAll(".betweenPagesSpacer");
+    spacers.forEach((spacer: HTMLElement) => {
+      spacer.style.height = `${this.pageGap}px`;
+    });
   }
 
   private adjustDePageScaling() {
@@ -263,8 +285,11 @@ export class DeDocument extends DeesElement {
     // Find all DePage instances within this DeDocument
     const pages = this.shadowRoot.querySelectorAll("dedocument-page");
 
-    // Update each DePage instance's viewHeight and viewWidth
+    // Update each DePage instance's viewHeight, viewWidth, and zoomLevel
     pages.forEach((page: DePage) => {
+      // Pass manual zoom level if set
+      page.manualZoomLevel = this.zoomLevel;
+
       if (this.viewHeight) {
         page.viewHeight = this.viewHeight;
       }
@@ -273,4 +298,25 @@ export class DeDocument extends DeesElement {
       }
     });
   }
+
+  /**
+   * Set zoom level manually. Pass null to return to auto-fit mode.
+   * @param level - Zoom percentage (e.g., 100 for 100%) or null for auto-fit
+   */
+  public setZoomLevel(level: number | null): void {
+    this.zoomLevel = level;
+    this.adjustDePageScaling();
+  }
+
+  /**
+   * Get the current effective zoom percentage
+   */
+  public getEffectiveZoom(): number {
+    if (this.zoomLevel !== null) {
+      return this.zoomLevel;
+    }
+    // Calculate auto-fit zoom percentage
+    const scale = this.viewWidth / plugins.shared.A4_WIDTH;
+    return Math.round(scale * 100);
+  }
 }