54fd06268a
This CL sync the timeline-tracks positions upon receiving a horizontal scrolling event. Bug: v8:10644 Change-Id: I69bc1066a3f5da6ddc978ad71fe77820df8066bd Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2336806 Commit-Queue: Zeynep Cankara <zcankara@google.com> Reviewed-by: Camillo Bruni <cbruni@chromium.org> Cr-Commit-Position: refs/heads/master@{#69263}
83 lines
2.5 KiB
JavaScript
83 lines
2.5 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 './timeline/timeline-track.mjs';
|
|
|
|
defineCustomElement('timeline-panel', (templateText) =>
|
|
class TimelinePanel extends V8CustomElement {
|
|
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));
|
|
this.backgroundCanvas = document.createElement('canvas');
|
|
this.isLocked = false;
|
|
}
|
|
|
|
get timelineOverview() {
|
|
return this.$('#timelineOverview');
|
|
}
|
|
|
|
get timelineOverviewIndicator() {
|
|
return this.$('#timelineOverviewIndicator');
|
|
}
|
|
|
|
get timelineCanvas() {
|
|
return this.timelineTracks[0].timelineCanvas;
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
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);
|
|
}
|
|
}
|
|
|
|
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';
|
|
}
|
|
|
|
handleOverviewBackgroundUpdate(e){
|
|
this.timelineOverview.style.backgroundImage =
|
|
'url(' + e.detail + ')';
|
|
}
|
|
|
|
});
|