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, PlaySkMoveToEventDetail } from '../play-sk/play-sk'

import '../play-sk';

export interface TimelineSkMoveFrameEventDetail {
  frame: number,
}

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<TimelineSkMoveFrameEventDetail>(
      'move-frame', {
        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() {
    super.connectedCallback();
    this._render();

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

    this._playSk!.addEventListener('moveto', (e) => {
      this.item = (e as CustomEvent<PlaySkMoveToEventDetail>).detail.item;
    });

    this._render();
  }

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

define('timeline-sk', TimelineSk);