dees-document/ts_web/elements/page.ts

import * as tsclass from '@tsclass/tsclass';
import {
  DeesElement,
  property,
  html,
  customElement,
  type TemplateResult,
  css,
  cssManager,
  unsafeCSS,
} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';

import * as shared from './shared/index.js';

declare global {
  interface HTMLElementTagNameMap {
    'dedocument-page': DePage;
  }
}

@customElement('dedocument-page')
export class DePage extends DeesElement {
  public static demo = () => html` <dedocument-page .format="${'a4'}"></dedocument-page> `;

  @property()
  viewWidth: number = null;

  @property()
  viewHeight: number = null;

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

  @property({
    type: Number,
  })
  public pageNumber: number = 1;

  @property({
    type: Number,
  })
  public pageTotalNumber: number = 1;

  @property({
    type: Object,
  })
  public letterData: tsclass.business.ILetter = null;

  @property({
    type: Boolean,
    reflect: true,
  })
  printMode = false;

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

  public static styles = [
    domtools.elementBasic.staticStyles,
    css`
      :host {
        display: block;
        max-height: ${shared.a4Height}px;
        max-width: ${shared.a4Width}px;
      }

      #scaleWrapper {
        transform-origin: top left;
      }

      .versionOverlay {
        pointer-events: none;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        font-family: monospace;
        font-size: 16px;

        z-index: 1000;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .topInfo {
        position: absolute;
        top: 60px;
        left: 40px;
        color: red;
        transform: rotate(-5deg);
      }

      .bigDraftText {
        transform: rotate(-45deg);
        font-size: 200px;
        opacity: 0.05;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div id="scaleWrapper">
        <dedocument-pagecontainer .printMode=${this.printMode}>
          ${this.letterData
            ? html`
                <dedocument-pageheader
                  .letterData=${this.letterData}
                  .pageNumber="${this.pageNumber}"
                  .pageTotalNumber="${this.pageTotalNumber}"
                ></dedocument-pageheader>
                ${this.pageNumber === 1
                  ? html`
                      <dedocument-letterheader
                        .pageNumber="${this.pageNumber}"
                        .letterData=${this.letterData}
                        .pageTotalNumber="${this.pageTotalNumber}"
                      ></dedocument-letterheader>
                    `
                  : html``}
                <dedocument-pagecontent
                  .pageNumber="${this.pageNumber}"
                  .pageTotalNumber="${this.pageTotalNumber}"
                  .letterData=${this.letterData}
                  ><slot></slot
                ></dedocument-pagecontent>
                <dedocument-pagefooter
                  .letterData=${this.letterData}
                  .pageNumber="${this.pageNumber}"
                  .pageTotalNumber="${this.pageTotalNumber}"
                ></dedocument-pagefooter>
                <div class="versionOverlay">
                  ${this.letterData.versionInfo.type === 'draft'
                    ? html`
                        <div class="topInfo">
                          Please note: THIS IS A DRAFT ONLY. NO RIGHTS CAN BE DERIVED FROM THIS.<br />
                          -> Revision/Document version: ${this.letterData.versionInfo.version}
                        </div>
                        <div class="bigDraftText">DRAFT</div>
                      `
                    : html``}
                </div>
              `
            : html`
              <slot></slot>
            `}
        </dedocument-pagecontainer>
      </div>
    `;
  }

  public async checkOverflow() {
    await this.elementDomReady;
    const pageContent = this.shadowRoot.querySelector('dedocument-pagecontent');
    return pageContent.checkOverflow();
  }

  updated(changedProperties: Map<string | number | symbol, unknown>): void {
    super.updated(changedProperties);
    if (changedProperties.has('viewHeight') || changedProperties.has('viewWidth')) {
      this.adjustScaling();
    }
  }

  private adjustScaling() {
    console.log('page scale adjustment triggered.');
    const scaleWrapper: HTMLDivElement = this.shadowRoot.querySelector('#scaleWrapper');

    if (!scaleWrapper) return;

    let scale = 1;
    if (this.viewHeight) {
      scale = this.viewHeight / shared.a4Height;
    } else if (this.viewWidth) {
      scale = this.viewWidth / shared.a4Width;
    }
    console.log(`new scale is ${scale}`);
    scaleWrapper.style.transform = `scale(${scale})`;

    // Adjust the outer dimensions so they match the scaled content

    // this.style.width = `${shared.a4Width * scale}px`;
    this.style.height = `${shared.a4Height * scale}px`;
  }
}