dees-document/ts_web/elements/document.ts

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