b67c3f5386
This CL deletes the image on the timeline overview which only reflects the last uploaded timeline-track data and updates the timelineOverviewIndicator on mousemove and chunk zoom events. Bug: v8:10644 Change-Id: Ib0a43083d2461cc343a0c946cfddaf4fdc514687 Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2413257 Reviewed-by: Camillo Bruni <cbruni@chromium.org> Commit-Queue: Zeynep Cankara <zcankara@google.com> Cr-Commit-Position: refs/heads/master@{#69936}
94 lines
3.0 KiB
JavaScript
94 lines
3.0 KiB
JavaScript
// 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.
|
|
|
|
import { defineCustomElement, V8CustomElement } from './helper.mjs';
|
|
import { SynchronizeSelectionEvent } from './events.mjs';
|
|
import './timeline/timeline-track.mjs';
|
|
|
|
defineCustomElement('timeline-panel', (templateText) =>
|
|
class TimelinePanel extends V8CustomElement {
|
|
#timeSelection = { start: 0, end: Infinity };
|
|
constructor() {
|
|
super(templateText);
|
|
this.timelineOverview.addEventListener(
|
|
'mousemove', e => this.handleTimelineIndicatorMove(e));
|
|
this.addEventListener(
|
|
'scrolltrack', e => this.handleTrackScroll(e));
|
|
this.addEventListener(
|
|
SynchronizeSelectionEvent.name, e => this.handleMouseMoveSelection(e));
|
|
this.backgroundCanvas = document.createElement('canvas');
|
|
this.isLocked = false;
|
|
}
|
|
|
|
get timelineOverview() {
|
|
return this.$('#timelineOverview');
|
|
}
|
|
|
|
get timelineOverviewIndicator() {
|
|
return this.$('#timelineOverviewIndicator');
|
|
}
|
|
|
|
//TODO(zcankara) Remove dependency to timelineCanvas here
|
|
get timelineCanvas() {
|
|
return this.timelineTracks[0].timelineCanvas;
|
|
}
|
|
//TODO(zcankara) Remove dependency to timeline here
|
|
get timeline() {
|
|
return this.timelineTracks[0].timeline;
|
|
}
|
|
set nofChunks(count) {
|
|
for (const track of this.timelineTracks) {
|
|
track.nofChunks = count;
|
|
}
|
|
}
|
|
get nofChunks() {
|
|
return this.timelineTracks[0].nofChunks;
|
|
}
|
|
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;
|
|
}
|
|
}
|
|
|
|
handleMouseMoveSelection(event) {
|
|
this.selectionMouseMove(event.start, event.end);
|
|
}
|
|
|
|
selectionMouseMove(start, end) {
|
|
for (const track of this.timelineTracks) {
|
|
track.startTime = start;
|
|
track.endTime = end;
|
|
}
|
|
}
|
|
|
|
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);
|
|
}
|
|
this.updateOverviewWindow();
|
|
}
|
|
|
|
updateOverviewWindow() {
|
|
let indicator = this.timelineOverviewIndicator;
|
|
let totalIndicatorWidth =
|
|
this.timelineOverview.offsetWidth;
|
|
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';
|
|
}
|
|
|
|
});
|