fix(core): update

ts_web/elements/document.ts

@@ -0,0 +1,168 @@
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  state,
+  cssManager,
+  unsafeCSS,
+  domtools,
+} from '@design.estate/dees-element';
+
+import * as plugins from '../plugins.js';
+
+
+import { DePage } from './page.js';
+import { DeContentInvoice } from './contentinvoice.js';
+
+import * as shared from './shared/index.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dedocument-dedocument': DeDocument;
+  }
+}
+
+@customElement('dedocument-dedocument')
+export class DeDocument extends DeesElement {
+  public static demo = () => html`
+    <dedocument-dedocument .format="${'a4'}" .letterData=${shared.demoLetter}></dedocument-dedocument>
+  `;
+
+  @property({
+    type: String,
+  })
+  public format: 'a4' = 'a4';
+
+  @property({
+    type: Number,
+  })
+  public viewWidth: number = shared.a4Width;
+
+  @property({
+    type: Boolean,
+  })
+  printMode = false;
+
+  @property({
+    type: Object,
+    reflect: true,
+    converter: (valueArg) => {
+      if (typeof valueArg === 'string') {
+        return plugins.smartjson.parseBase64(valueArg)
+      } else {
+        return valueArg;
+      }
+    },
+
+  })
+  public letterData: plugins.tsclass.business.ILetter;
+
+  @property({
+    type: String,
+  })
+  public letterDataUrl: string;
+
+  constructor() {
+    super();
+    domtools.DomTools.setupDomTools();
+  }
+
+  public static styles = [
+    domtools.elementBasic.staticStyles,
+    css`
+      :host {
+        display: block;
+        color: #333;
+        padding: 0px;
+        position: relative;
+      }
+
+      .betweenPagesSpacer {
+        height: 20px;
+      }
+    `,
+  ];
+
+  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>
+    `;
+  }
+
+  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
+    if (this.letterDataUrl) {
+      const response = await fetch(this.letterDataUrl);
+      this.letterData = await response.json();
+    }
+    this.renderDocument();
+  }
+
+  public async renderDocument() {
+    const domtools = await this.domtoolsPromise;
+    const scaleport = this.shadowRoot.querySelector('.scaleport');
+    let pages: DePage[] = [];
+    let pageCounter = 0;
+    let complete = false;
+    const content: DeContentInvoice = document.createElement(
+      'dedocument-contentinvoice'
+    ) as DeContentInvoice;
+    content.letterData = this.letterData;
+    document.body.appendChild(content);
+    await domtools.convenience.smartdelay.delayFor(0);
+    let overallContentOffset: number = 0;
+    let currentContentOffset: number;
+    let trimmed: number;
+    while (!complete) {
+      pageCounter++;
+      const currentContent = content.cloneNode(true) as DeContentInvoice;
+      const newPage = new DePage();
+      newPage.printMode = this.printMode;
+      newPage.letterData = this.letterData;
+      pages.push(newPage);
+      newPage.pageNumber = pageCounter;
+      newPage.append(currentContent);
+      newPage.pageTotalNumber = pageCounter;
+      scaleport.append(newPage);
+      // betweenPagesSpacer
+      if (!this.printMode) {
+        const betweenPagesSpacerDiv = document.createElement('div');
+        betweenPagesSpacerDiv.classList.add('betweenPagesSpacer');
+        scaleport.append(betweenPagesSpacerDiv);
+      }
+      await currentContent.elementDomReady;
+      await currentContent.trimStartToOffset(overallContentOffset);
+      let newPageOverflows = await newPage.checkOverflow();
+      trimmed = 0;
+      while (newPageOverflows) {
+        await currentContent.trimEndByOne();
+        trimmed++;
+        newPageOverflows = await newPage.checkOverflow();
+      }
+      currentContentOffset = await currentContent.getContentLength();
+      overallContentOffset = overallContentOffset + currentContentOffset;
+      if (trimmed === 0) {
+        complete = true;
+      }
+      // complete = true;
+      console.log(currentContentOffset);
+    }
+    document.body.removeChild(content);
+
+    for (const page of pages) {
+      page.pageTotalNumber = pageCounter;
+    }
+  }
+}