debugger-app/modules/timeline-sk/timeline-sk.ts

/**
 * @module modules/timeline-sk
 * @description An element for displaying a position in a timeline.
 */
import { define } from 'elements-sk/define';
import { html } from 'lit-html';
import { ElementSk } from '../../../infra-sk/modules/ElementSk';
import { PlaySk } from '../play-sk/play-sk';

import '../play-sk';
import {
  MoveToEventDetail, MoveFrameEventDetail, MoveFrameEvent, MoveToEvent,
} from '../events';

export class TimelineSk extends ElementSk {
  private static template = (ele: TimelineSk) => html`
    <div class='horizontal'>
      <play-sk .visual=${'simple'}></play-sk>
      <div class="outer">
        <div class="hallway">
          ${[...Array(ele._count).keys()].map((i) => html`
            <div class="room ${ele._item === i
    ? 'selected'
    : 'not-selected'
              }" @click=${() => { ele._roomClick(i); }}>${(i % ele._modulo) === 0
                ? html`<div class="rel-point">
                    <span class="label">${i}<span>
                  </div>`
                : ''
              }</div>
          `)}
        </div>
        <div class="basement"><div>
      </div>
    </div>`;

  private _count = 50;

  private _item = 0;

  private _modulo = 5;

  // Play submodule
  private _playSk: PlaySk | null = null;

  set item(i: number) {
    this._item = i;
    this._render();
    // notify debugger-page-sk to change the frame
    // TODO(nifong): the timeline element always appears to be one frame late during playback
    // this could be fixed by deferring this event with window.setTimeout, but that would break
    // pretty much any other code that sets timeline.item, such as the inspect button.
    this.dispatchEvent(
      new CustomEvent<MoveFrameEventDetail>(
        MoveFrameEvent, {
          detail: { frame: this._item },
          bubbles: true,
        },
      ),
    );
  }

  set count(c: number) {
    this._count = c;
    this._playSk!.mode = 'pause';
    this._playSk!.size = this._count;
    const hallway = this.querySelector<HTMLElement>('div.hallway')!;
    const strW = window.getComputedStyle(hallway, null).width;
    const width = parseFloat(strW.substring(0, strW.length - 2));
    const space = 70; // minimum pixels of space to give each label.
    this._modulo = Math.ceil((space * this._count) / width);
    this._render();
  }

  get playsk(): PlaySk {
    return this._playSk!;
  }

  constructor() {
    super(TimelineSk.template);
  }

  connectedCallback(): void {
    super.connectedCallback();
    this._render();

    this._playSk = this.querySelector<PlaySk>('play-sk');
    this._playSk!.size = this._count;

    this._playSk!.addEventListener(MoveToEvent, (e: Event) => {
      this.item = (e as CustomEvent<MoveToEventDetail>).detail.item;
    });

    this._render();
  }

  private _roomClick(i: number) {
    this._playSk!.mode = 'pause';
    this.item = i;
  }
}

define('timeline-sk', TimelineSk);