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';
import { demoFunc } from './document.demo.js';

declare global {
  interface HTMLElementTagNameMap {
    'dedocument-dedocument': DeDocument;
  }
}

@customElement('dedocument-dedocument')
export class DeDocument extends DeesElement {
  public static demo = demoFunc;

  @property({
    type: String,
    reflect: true,
  })
  public format: 'a4' = 'a4';

  @property({
    type: Number,
    reflect: true,
  })
  public viewWidth: number = null;

  @property({
    type: Number,
    reflect: true,
  })
  public viewHeight: number = null;

  @property({
    type: Boolean,
    reflect: true,
  })
  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: 16px;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <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);
    this.registerGarbageFunction(() => {
      resizeObserver.disconnect();
    })
    
    if (this.letterDataUrl) {
      const response = await fetch(this.letterDataUrl);
      this.letterData = await response.json();
    }
    this.renderDocument();
  }

  public latestRenderedLetterData: plugins.tsclass.business.ILetter = null;
  public async renderDocument() {
    const domtools = await this.domtoolsPromise;
    const documentContainer = this.shadowRoot.querySelector('.documentContainer');
    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;
      documentContainer.append(newPage);
      // betweenPagesSpacer
      if (!this.printMode) {
        const betweenPagesSpacerDiv = document.createElement('div');
        betweenPagesSpacerDiv.classList.add('betweenPagesSpacer');
        documentContainer.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;
    }
    this.adjustDePageScaling();
    this.latestRenderedLetterData = this.letterData;
  }

  async updated(changedProperties: Map<string | number | symbol, unknown>): void {
    super.updated(changedProperties);
    const domtools = await this.domtoolsPromise;
    const renderedDocIsUpToDate = domtools.convenience.smartjson.deepEqualObjects(this.letterData, this.latestRenderedLetterData);
    if (!renderedDocIsUpToDate) {
      this.renderDocument();
    }

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