timeline-panel.mjs 3.18 KB
Newer Older
zeynepCankara's avatar
zeynepCankara committed
1 2 3
// Copyright 2020 the V8 project authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
4

5
import { defineCustomElement, V8CustomElement } from './helper.mjs';
6
import { SynchronizeSelectionEvent } from './events.mjs';
7
import './timeline/timeline-track.mjs';
zeynepCankara's avatar
zeynepCankara committed
8 9

defineCustomElement('timeline-panel', (templateText) =>
10
  class TimelinePanel extends V8CustomElement {
11
    #timeSelection = { start: 0, end: Infinity };
12 13 14 15 16 17 18 19
    constructor() {
      super(templateText);
      this.timelineOverview.addEventListener(
        'mousemove', e => this.handleTimelineIndicatorMove(e));
      this.addEventListener(
        'overviewupdate', e => this.handleOverviewBackgroundUpdate(e));
      this.addEventListener(
        'scrolltrack', e => this.handleTrackScroll(e));
20 21
      this.addEventListener(
        SynchronizeSelectionEvent.name, e => this.handleMouseMoveSelection(e));
22 23 24
      this.backgroundCanvas = document.createElement('canvas');
      this.isLocked = false;
    }
zeynepCankara's avatar
zeynepCankara committed
25

26 27 28
    get timelineOverview() {
      return this.$('#timelineOverview');
    }
zeynepCankara's avatar
zeynepCankara committed
29

30 31 32
    get timelineOverviewIndicator() {
      return this.$('#timelineOverviewIndicator');
    }
zeynepCankara's avatar
zeynepCankara committed
33

34
    //TODO(zcankara) Remove dependency to timelineCanvas here
35 36 37
    get timelineCanvas() {
      return this.timelineTracks[0].timelineCanvas;
    }
38
    //TODO(zcankara) Remove dependency to timeline here
39 40 41 42 43 44 45
    get timeline() {
      return this.timelineTracks[0].timeline;
    }
    set nofChunks(count) {
      for (const track of this.timelineTracks) {
        track.nofChunks = count;
      }
46
    }
47 48
    get nofChunks() {
      return this.timelineTracks[0].nofChunks;
49
    }
50 51 52 53 54 55 56 57 58 59
    get timelineTracks() {
      return this.$("slot").assignedNodes().filter(
        track => track.nodeType === Node.ELEMENT_NODE);
    }
    handleTrackScroll(event) {
      //TODO(zcankara) add forEachTrack  helper method
      for (const track of this.timelineTracks) {
        track.scrollLeft = event.detail;
      }
    }
60 61 62 63 64 65 66 67 68 69 70 71

    handleMouseMoveSelection(event) {
      this.selectionMouseMove(event.start, event.end);
    }

    selectionMouseMove(start, end) {
      for (const track of this.timelineTracks) {
        track.startTime = start;
        track.endTime = end;
      }
    }

72 73 74 75 76 77 78
    handleTimelineIndicatorMove(event) {
      if (event.buttons == 0) return;
      let timelineTotalWidth = this.timelineCanvas.offsetWidth;
      let factor = this.timelineOverview.offsetWidth / timelineTotalWidth;
      for (const track of this.timelineTracks) {
        track.timelineIndicatorMove(event.movementX / factor);
      }
79
    }
zeynepCankara's avatar
zeynepCankara committed
80

81 82 83
    updateOverviewWindow() {
      let indicator = this.timelineOverviewIndicator;
      let totalIndicatorWidth =
84
        this.timelineOverview.offsetWidth;
85 86 87 88 89 90 91 92
      let div = this.timeline;
      let timelineTotalWidth = this.timelineCanvas.offsetWidth;
      let factor = totalIndicatorWidth / timelineTotalWidth;
      let width = div.offsetWidth * factor;
      let left = div.scrollLeft * factor;
      indicator.style.width = width + 'px';
      indicator.style.left = left + 'px';
    }
93

94 95 96 97
    handleOverviewBackgroundUpdate(e) {
      this.timelineOverview.style.backgroundImage =
        'url(' + e.detail + ')';
    }
98

99
  });