71e0331137
This CL aims to clean the code in App Class to handle State, View according to the Model-View-Controller design pattern. Bug: v8:10644, v8:10735 Link: https://docs.google.com/presentation/d/1ssCIWKS5TIp_PHZRUx2BfElEz6JFrYzz_Ce1h1g8ZBg/edit?usp=sharing Change-Id: Ie36d437df0df574f505a4396b26526a82215f237 Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2324247 Commit-Queue: Zeynep Cankara <zcankara@google.com> Reviewed-by: Camillo Bruni <cbruni@chromium.org> Cr-Commit-Position: refs/heads/master@{#69218}
76 lines
2.2 KiB
JavaScript
76 lines
2.2 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.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);
|
|
}
|
|
|
|
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.handleTimelineIndicatorMove(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 + ')';
|
|
}
|
|
|
|
});
|