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 = shared.demoLetter;

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

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

  public static styles = [
    domtools.elementBasic.staticStyles,
    css`
      :host {
      }

      #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}>
          <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>
        </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
    
    scaleWrapper.style.width = `${shared.a4Width * scale}px`;
    scaleWrapper.style.height = `${shared.a4Height * scale}px`;
  }
}