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

export const defaultDocumentSettings: plugins.shared.interfaces.IDocumentSettings = {
  enableTopDraftText: true,
  enableDefaultHeader: true,
  enableDefaultFooter: true,
  languageCode: 'EN',
  vatGroupPositions: true,
};


import { DePage } from './page.js';
import { DeContentInvoice } from './contentinvoice.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: Object,
    reflect: true,
    converter: (valueArg) => {
      if (typeof valueArg === 'string') {
        return plugins.smartjson.parseBase64(valueArg)
      } else {
        return valueArg;
      }
    },
  })
  public documentSettings: plugins.shared.interfaces.IDocumentSettings = defaultDocumentSettings;

  constructor() {
    super();
    domtools.DomTools.setupDomTools();
  }

  public static styles = [
    domtools.elementBasic.staticStyles,
    css`
      :host {
        display: block;
        color: #333;
        padding: 0px;
        position: relative;
        font-family: 'Dees Sans', sans-serif;
      }

      .betweenPagesSpacer {
        height: 16px;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="documentContainer"></div>
    `;
  }

  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
    domtools.plugins.smartdelay.delayFor(0).then(async () => {
      this.documentSettings = {
        ...defaultDocumentSettings,
        ...this.documentSettings,
      }

      while (false) {
        await domtools.plugins.smartdelay.delayFor(1000);
        this.letterData = {
          ...this.letterData,
          content: {
            ...this.letterData.content,
            invoiceData: {
              ...this.letterData.content.invoiceData,
              items: [
                ...this.letterData.content.invoiceData.items,
                {
                  name: 'Test Item',
                  unitQuantity: 1,
                  unitNetPrice: 100,
                  unitType: 'hours',
                  vatPercentage: 19,
                  position: 1,
                },
              ],
            },
          }
        }
      }
    });
    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();
    })
  }

  public latestDocumentSettings: plugins.shared.interfaces.IDocumentSettings = null;
  public latestRenderedLetterData: plugins.tsclass.business.ILetter = null;
  public cleanupStore: any[] = [];


  public async renderDocument() {

    this.latestDocumentSettings = this.documentSettings;
    this.latestRenderedLetterData = this.letterData;

    const cleanUpStoreCurrentRender = [];
    const cleanUpStoreNextRender = [];

    const domtools = await this.domtoolsPromise;
    const documentBuildContainer = document.createElement('div');
    cleanUpStoreCurrentRender.push(documentBuildContainer);
    document.body.appendChild(documentBuildContainer);

    let pages: DePage[] = [];
    let pageCounter = 0;
    let complete = false;

    // lets append the content
    const content: DeContentInvoice = new DeContentInvoice();
    cleanUpStoreCurrentRender.push(content);
    content.letterData = this.letterData;
    content.documentSettings = this.documentSettings;
    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;
      cleanUpStoreNextRender.push(currentContent);
      const newPage = new DePage();
      newPage.printMode = this.printMode;
      newPage.letterData = this.letterData;
      newPage.documentSettings = this.documentSettings;
      pages.push(newPage);
      newPage.pageNumber = pageCounter;
      newPage.append(currentContent);
      newPage.pageTotalNumber = pageCounter;

      // store current page
      cleanUpStoreNextRender.push(newPage);
      documentBuildContainer.append(newPage);
      
      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;
      }
    }
    
    for (const cleanUp of this.cleanupStore) {
      cleanUp.remove();
    }
    this.cleanupStore = cleanUpStoreNextRender

    cleanUpStoreCurrentRender.forEach((cleanUp) => {
      cleanUp.remove();
    });

    const documentContainer = this.shadowRoot.querySelector('.documentContainer');
    if (documentContainer) {
      const children = Array.from(documentContainer.children);
      children.forEach((child) => {
        documentContainer.removeChild(child);
        child.remove();
      });
    }
    for (const page of pages) {
      page.pageTotalNumber = pageCounter;
      documentContainer.append(page);
      // betweenPagesSpacer
      if (!this.printMode) {
        const betweenPagesSpacerDiv = document.createElement('div');
        betweenPagesSpacerDiv.classList.add('betweenPagesSpacer');
        documentContainer.appendChild(betweenPagesSpacerDiv);
      }
    }
    this.adjustDePageScaling();
  }

  async updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
    super.updated(changedProperties);
    const domtools = await this.domtoolsPromise;
    let renderedDocIsUpToDate = domtools.convenience.smartjson.deepEqualObjects(this.letterData, this.latestRenderedLetterData)
     && domtools.convenience.smartjson.deepEqualObjects(this.documentSettings, this.latestDocumentSettings);
    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;
      }
    });
  }
}