| // Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| // Use of this source code is governed by a BSD-style license that can be |
| // found in the LICENSE file. |
| |
| 'use strict'; |
| |
| /** |
| * @fileoverview Interactive visualizaiton of TimelineModel objects |
| * based loosely on gantt charts. Each thread in the TimelineModel is given a |
| * set of TimelineTracks, one per subrow in the thread. The Timeline class |
| * acts as a controller, creating the individual tracks, while TimelineTracks |
| * do actual drawing. |
| * |
| * Visually, the Timeline produces (prettier) visualizations like the following: |
| * Thread1: AAAAAAAAAA AAAAA |
| * BBBB BB |
| * Thread2: CCCCCC CCCCC |
| * |
| */ |
| base.requireStylesheet('timeline'); |
| base.require('event_target'); |
| base.require('measuring_stick'); |
| base.require('timeline_filter'); |
| base.require('timeline_selection'); |
| base.require('timeline_viewport'); |
| base.require('tracks.timeline_model_track'); |
| base.require('tracks.timeline_viewport_track'); |
| base.require('ui'); |
| |
| base.exportTo('tracing', function() { |
| |
| var TimelineSelection = tracing.TimelineSelection; |
| var TimelineViewport = tracing.TimelineViewport; |
| |
| function intersectRect_(r1, r2) { |
| var results = new Object; |
| if (r2.left > r1.right || r2.right < r1.left || |
| r2.top > r1.bottom || r2.bottom < r1.top) { |
| return false; |
| } |
| results.left = Math.max(r1.left, r2.left); |
| results.top = Math.max(r1.top, r2.top); |
| results.right = Math.min(r1.right, r2.right); |
| results.bottom = Math.min(r1.bottom, r2.bottom); |
| results.width = (results.right - results.left); |
| results.height = (results.bottom - results.top); |
| return results; |
| } |
| |
| /** |
| * Renders a TimelineModel into a div element, making one |
| * TimelineTrack for each subrow in each thread of the model, managing |
| * overall track layout, and handling user interaction with the |
| * viewport. |
| * |
| * @constructor |
| * @extends {HTMLDivElement} |
| */ |
| var Timeline = base.ui.define('div'); |
| |
| Timeline.prototype = { |
| __proto__: HTMLDivElement.prototype, |
| |
| model_: null, |
| |
| decorate: function() { |
| this.classList.add('timeline'); |
| |
| this.categoryFilter_ = new tracing.TimelineCategoryFilter(); |
| |
| this.viewport_ = new TimelineViewport(this); |
| |
| // Add the viewport track. |
| this.viewportTrack_ = new tracks.TimelineViewportTrack(); |
| this.viewportTrack_.viewport = this.viewport_; |
| this.appendChild(this.viewportTrack_); |
| |
| this.modelTrackContainer_ = document.createElement('div'); |
| this.modelTrackContainer_.className = 'timeline-model-track-container'; |
| this.appendChild(this.modelTrackContainer_); |
| |
| this.modelTrack_ = new tracks.TimelineModelTrack(); |
| this.modelTrackContainer_.appendChild(this.modelTrack_); |
| |
| this.dragBox_ = this.ownerDocument.createElement('div'); |
| this.dragBox_.className = 'timeline-drag-box'; |
| this.appendChild(this.dragBox_); |
| this.hideDragBox_(); |
| |
| this.bindEventListener_(document, 'keypress', this.onKeypress_, this); |
| this.bindEventListener_(document, 'keydown', this.onKeydown_, this); |
| this.bindEventListener_(document, 'keyup', this.onKeyup_, this); |
| this.bindEventListener_(document, 'mousemove', this.onMouseMove_, this); |
| this.bindEventListener_(document, 'mouseup', this.onMouseUp_, this); |
| |
| this.addEventListener('mousewheel', this.onMouseWheel_); |
| this.addEventListener('mousedown', this.onMouseDown_); |
| this.addEventListener('dblclick', this.onDblClick_); |
| |
| this.lastMouseViewPos_ = {x: 0, y: 0}; |
| this.maxHeadingWidth_ = 0; |
| |
| this.selection_ = new TimelineSelection(); |
| }, |
| |
| /** |
| * Wraps the standard addEventListener but automatically binds the provided |
| * func to the provided target, tracking the resulting closure. When detach |
| * is called, these listeners will be automatically removed. |
| */ |
| bindEventListener_: function(object, event, func, target) { |
| if (!this.boundListeners_) |
| this.boundListeners_ = []; |
| var boundFunc = func.bind(target); |
| this.boundListeners_.push({object: object, |
| event: event, |
| boundFunc: boundFunc}); |
| object.addEventListener(event, boundFunc); |
| }, |
| |
| detach: function() { |
| this.modelTrack_.detach(); |
| |
| for (var i = 0; i < this.boundListeners_.length; i++) { |
| var binding = this.boundListeners_[i]; |
| binding.object.removeEventListener(binding.event, binding.boundFunc); |
| } |
| this.boundListeners_ = undefined; |
| this.viewport_.detach(); |
| }, |
| |
| get viewport() { |
| return this.viewport_; |
| }, |
| |
| get categoryFilter() { |
| return this.categoryFilter_; |
| }, |
| |
| set categoryFilter(filter) { |
| this.categoryFilter_ = filter; |
| this.modelTrack_.categoryFilter = filter; |
| }, |
| |
| get model() { |
| return this.model_; |
| }, |
| |
| set model(model) { |
| if (!model) |
| throw new Error('Model cannot be null'); |
| |
| var modelInstanceChanged = this.model_ != model; |
| this.model_ = model; |
| this.modelTrack_.model = model; |
| this.modelTrack_.viewport = this.viewport_; |
| this.modelTrack_.categoryFilter = this.categoryFilter; |
| this.viewportTrack_.headingWidth = this.modelTrack_.headingWidth; |
| |
| // Set up a reasonable viewport. |
| if (modelInstanceChanged) |
| this.viewport_.setWhenPossible(this.setInitialViewport_.bind(this)); |
| }, |
| |
| get numVisibleTracks() { |
| return this.modelTrack_.numVisibleTracks; |
| }, |
| |
| setInitialViewport_: function() { |
| var w = this.firstCanvas.width; |
| var boost = |
| (this.model_.maxTimestamp - this.model_.minTimestamp) * 0.15; |
| this.viewport_.xSetWorldRange(this.model_.minTimestamp - boost, |
| this.model_.maxTimestamp + boost, |
| w); |
| }, |
| |
| /** |
| * @param {TimelineFilter} filter The filter to use for finding matches. |
| * @param {TimelineSelection} selection The selection to add matches to. |
| * @return {Array} An array of objects that match the provided |
| * TimelineTitleFilter. |
| */ |
| addAllObjectsMatchingFilterToSelection: function(filter, selection) { |
| this.modelTrack_.addAllObjectsMatchingFilterToSelection(filter, |
| selection); |
| }, |
| |
| /** |
| * @return {Element} The element whose focused state determines |
| * whether to respond to keyboard inputs. |
| * Defaults to the parent element. |
| */ |
| get focusElement() { |
| if (this.focusElement_) |
| return this.focusElement_; |
| return this.parentElement; |
| }, |
| |
| /** |
| * Sets the element whose focus state will determine whether |
| * to respond to keybaord input. |
| */ |
| set focusElement(value) { |
| this.focusElement_ = value; |
| }, |
| |
| get listenToKeys_() { |
| if (!this.viewport_.isAttachedToDocument_) |
| return false; |
| if (this.activeElement instanceof tracing.TimelineFindControl) |
| return false; |
| if (!this.focusElement_) |
| return true; |
| if (this.focusElement.tabIndex >= 0) |
| return document.activeElement == this.focusElement; |
| return true; |
| }, |
| |
| onKeypress_: function(e) { |
| var vp = this.viewport_; |
| if (!this.firstCanvas) |
| return; |
| if (!this.listenToKeys_) |
| return; |
| if (document.activeElement.nodeName == 'INPUT') |
| return; |
| var viewWidth = this.firstCanvas.clientWidth; |
| var curMouseV, curCenterW; |
| switch (e.keyCode) { |
| case 119: // w |
| case 44: // , |
| this.zoomBy_(1.5); |
| break; |
| case 115: // s |
| case 111: // o |
| this.zoomBy_(1 / 1.5); |
| break; |
| case 103: // g |
| this.onGridToggle_(true); |
| break; |
| case 71: // G |
| this.onGridToggle_(false); |
| break; |
| case 87: // W |
| case 60: // < |
| this.zoomBy_(10); |
| break; |
| case 83: // S |
| case 79: // O |
| this.zoomBy_(1 / 10); |
| break; |
| case 97: // a |
| vp.panX += vp.xViewVectorToWorld(viewWidth * 0.1); |
| break; |
| case 100: // d |
| case 101: // e |
| vp.panX -= vp.xViewVectorToWorld(viewWidth * 0.1); |
| break; |
| case 65: // A |
| vp.panX += vp.xViewVectorToWorld(viewWidth * 0.5); |
| break; |
| case 68: // D |
| vp.panX -= vp.xViewVectorToWorld(viewWidth * 0.5); |
| break; |
| case 48: // 0 |
| case 122: // z |
| this.setInitialViewport_(); |
| break; |
| case 102: // f |
| this.zoomToSelection_(); |
| break; |
| } |
| }, |
| |
| onMouseWheel_: function(e) { |
| if (e.altKey) { |
| var delta = e.wheelDeltaY / 120; |
| var zoomScale = Math.pow(1.5, delta); |
| this.zoomBy_(zoomScale); |
| e.preventDefault(); |
| } |
| }, |
| |
| // Not all keys send a keypress. |
| onKeydown_: function(e) { |
| if (!this.listenToKeys_) |
| return; |
| var sel; |
| var vp = this.viewport_; |
| var viewWidth = this.firstCanvas.clientWidth; |
| switch (e.keyCode) { |
| case 37: // left arrow |
| sel = this.selection.getShiftedSelection(-1); |
| if (sel) { |
| this.setSelectionAndMakeVisible(sel); |
| e.preventDefault(); |
| } else { |
| if (!this.firstCanvas) |
| return; |
| vp.panX += vp.xViewVectorToWorld(viewWidth * 0.1); |
| } |
| break; |
| case 39: // right arrow |
| sel = this.selection.getShiftedSelection(1); |
| if (sel) { |
| this.setSelectionAndMakeVisible(sel); |
| e.preventDefault(); |
| } else { |
| if (!this.firstCanvas) |
| return; |
| vp.panX -= vp.xViewVectorToWorld(viewWidth * 0.1); |
| } |
| break; |
| case 9: // TAB |
| if (this.focusElement.tabIndex == -1) { |
| if (e.shiftKey) |
| this.selectPrevious_(e); |
| else |
| this.selectNext_(e); |
| e.preventDefault(); |
| } |
| break; |
| } |
| if (e.shiftKey && this.dragBeginEvent_) { |
| var vertical = e.shiftKey; |
| if (this.dragBeginEvent_) { |
| this.setDragBoxPosition_(this.dragBoxXStart_, this.dragBoxYStart_, |
| this.dragBoxXEnd_, this.dragBoxYEnd_, vertical); |
| } |
| } |
| }, |
| |
| onKeyup_: function(e) { |
| if (!this.listenToKeys_) |
| return; |
| if (!e.shiftKey) { |
| if (this.dragBeginEvent_) { |
| var vertical = e.shiftKey; |
| this.setDragBoxPosition_(this.dragBoxXStart_, this.dragBoxYStart_, |
| this.dragBoxXEnd_, this.dragBoxYEnd_, vertical); |
| } |
| } |
| }, |
| |
| /** |
| * Zoom in or out on the timeline by the given scale factor. |
| * @param {integer} scale The scale factor to apply. If <1, zooms out. |
| */ |
| zoomBy_: function(scale) { |
| if (!this.firstCanvas) |
| return; |
| var vp = this.viewport_; |
| var viewWidth = this.firstCanvas.clientWidth; |
| var curMouseV = this.lastMouseViewPos_.x; |
| var curCenterW = vp.xViewToWorld(curMouseV); |
| vp.scaleX = vp.scaleX * scale; |
| vp.xPanWorldPosToViewPos(curCenterW, curMouseV, viewWidth); |
| }, |
| |
| /** |
| * Zoom into the current selection. |
| */ |
| zoomToSelection_: function() { |
| if (!this.selection) |
| return; |
| var range = this.selection.range; |
| var worldCenter = range.min + (range.max - range.min) * 0.5; |
| var worldRange = (range.max - range.min) * 0.5; |
| var boost = worldRange * 0.15; |
| this.viewport_.xSetWorldRange(worldCenter - worldRange - boost, |
| worldCenter + worldRange + boost, |
| this.firstCanvas.width); |
| }, |
| |
| get keyHelp() { |
| var mod = navigator.platform.indexOf('Mac') == 0 ? 'cmd' : 'ctrl'; |
| var help = 'Qwerty Controls\n' + |
| ' w/s : Zoom in/out (with shift: go faster)\n' + |
| ' a/d : Pan left/right\n\n' + |
| 'Dvorak Controls\n' + |
| ' ,/o : Zoom in/out (with shift: go faster)\n' + |
| ' a/e : Pan left/right\n\n' + |
| 'Mouse Controls\n' + |
| ' drag : Select slices (with ' + mod + |
| ': zoom to slices)\n' + |
| ' drag + shift : Select all slices vertically\n\n'; |
| |
| if (this.focusElement.tabIndex) { |
| help += |
| ' <- : Select previous event on current timeline\n' + |
| ' -> : Select next event on current timeline\n'; |
| } else { |
| help += 'General Navigation\n' + |
| ' g/General : Shows grid at the start/end of the selected' + |
| ' task\n' + |
| ' <-,^TAB : Select previous event on current timeline\n' + |
| ' ->, TAB : Select next event on current timeline\n'; |
| } |
| help += |
| '\n' + |
| 'Alt + Scroll to zoom in/out\n' + |
| 'Dbl-click to zoom in; Shift dbl-click to zoom out\n' + |
| 'f to zoom into selection\n' + |
| 'z to reset zoom and pan to initial view\n'; |
| return help; |
| }, |
| |
| get selection() { |
| return this.selection_; |
| }, |
| |
| set selection(selection) { |
| if (!(selection instanceof TimelineSelection)) |
| throw new Error('Expected TimelineSelection'); |
| |
| // Clear old selection. |
| var i; |
| for (i = 0; i < this.selection_.length; i++) |
| this.selection_[i].selected = false; |
| |
| this.selection_ = selection; |
| |
| base.dispatchSimpleEvent(this, 'selectionChange'); |
| for (i = 0; i < this.selection_.length; i++) |
| this.selection_[i].selected = true; |
| this.viewport_.dispatchChangeEvent(); // Triggers a redraw. |
| }, |
| |
| setSelectionAndMakeVisible: function(selection, zoomAllowed) { |
| if (!(selection instanceof TimelineSelection)) |
| throw new Error('Expected TimelineSelection'); |
| this.selection = selection; |
| var range = this.selection.range; |
| var size = this.viewport_.xWorldVectorToView(range.max - range.min); |
| if (zoomAllowed && size < 50) { |
| var worldCenter = range.min + (range.max - range.min) * 0.5; |
| var worldRange = (range.max - range.min) * 5; |
| this.viewport_.xSetWorldRange(worldCenter - worldRange * 0.5, |
| worldCenter + worldRange * 0.5, |
| this.firstCanvas.width); |
| return; |
| } |
| |
| this.viewport_.xPanWorldRangeIntoView(range.min, range.max, |
| this.firstCanvas.width); |
| }, |
| |
| get firstCanvas() { |
| if (this.viewportTrack_) |
| return this.viewportTrack_.firstCanvas; |
| if (this.modelTrack_) |
| return this.modelTrack_.firstCanvas; |
| return undefined; |
| }, |
| |
| hideDragBox_: function() { |
| this.dragBox_.style.left = '-1000px'; |
| this.dragBox_.style.top = '-1000px'; |
| this.dragBox_.style.width = 0; |
| this.dragBox_.style.height = 0; |
| }, |
| |
| setDragBoxPosition_: function(xStart, yStart, xEnd, yEnd, vertical) { |
| var loY; |
| var hiY; |
| var loX = Math.min(xStart, xEnd); |
| var hiX = Math.max(xStart, xEnd); |
| var modelTrackRect = this.modelTrack_.getBoundingClientRect(); |
| |
| if (vertical) { |
| loY = modelTrackRect.top; |
| hiY = modelTrackRect.bottom; |
| } else { |
| loY = Math.min(yStart, yEnd); |
| hiY = Math.max(yStart, yEnd); |
| } |
| |
| var dragRect = {left: loX, top: loY, width: hiX - loX, height: hiY - loY}; |
| dragRect.right = dragRect.left + dragRect.width; |
| dragRect.bottom = dragRect.top + dragRect.height; |
| var modelTrackContainerRect = |
| this.modelTrackContainer_.getBoundingClientRect(); |
| var clipRect = { |
| left: modelTrackContainerRect.left, |
| top: modelTrackContainerRect.top, |
| right: modelTrackContainerRect.right, |
| bottom: modelTrackContainerRect.bottom, |
| }; |
| var trackTitleWidth = parseInt(this.modelTrack_.headingWidth); |
| clipRect.left = clipRect.left + trackTitleWidth; |
| |
| var finalDragBox = intersectRect_(clipRect, dragRect); |
| |
| this.dragBox_.style.left = finalDragBox.left + 'px'; |
| this.dragBox_.style.width = finalDragBox.width + 'px'; |
| this.dragBox_.style.top = finalDragBox.top + 'px'; |
| this.dragBox_.style.height = finalDragBox.height + 'px'; |
| |
| var canv = this.firstCanvas; |
| var loWX = this.viewport_.xViewToWorld(loX - canv.offsetLeft); |
| var hiWX = this.viewport_.xViewToWorld(hiX - canv.offsetLeft); |
| |
| var roundedDuration = Math.round((hiWX - loWX) * 100) / 100; |
| this.dragBox_.textContent = roundedDuration + 'ms'; |
| |
| var e = new base.Event('selectionChanging'); |
| e.loWX = loWX; |
| e.hiWX = hiWX; |
| this.dispatchEvent(e); |
| }, |
| |
| onGridToggle_: function(left) { |
| var tb; |
| if (left) |
| tb = this.selection_.range.min; |
| else |
| tb = this.selection_.range.max; |
| |
| // Shift the timebase left until its just left of minTimestamp. |
| var numInterfvalsSinceStart = Math.ceil((tb - this.model_.minTimestamp) / |
| this.viewport_.gridStep_); |
| this.viewport_.gridTimebase = tb - |
| (numInterfvalsSinceStart + 1) * this.viewport_.gridStep_; |
| this.viewport_.gridEnabled = true; |
| }, |
| |
| isChildOfThis_: function(el) { |
| if (el == this) |
| return; |
| |
| var isChildOfThis = false; |
| var cur = el; |
| while (cur.parentNode) { |
| if (cur == this) |
| return true; |
| cur = cur.parentNode; |
| } |
| return false; |
| }, |
| |
| onMouseDown_: function(e) { |
| if (e.button !== 0) |
| return; |
| |
| if (e.shiftKey) { |
| this.viewportTrack_.placeAndBeginDraggingMarker(e.clientX); |
| return; |
| } |
| |
| var canv = this.firstCanvas; |
| var rect = this.modelTrack_.getBoundingClientRect(); |
| var canvRect = this.firstCanvas.getBoundingClientRect(); |
| |
| var inside = rect && |
| e.clientX >= rect.left && |
| e.clientX < rect.right && |
| e.clientY >= rect.top && |
| e.clientY < rect.bottom && |
| e.clientX >= canvRect.left && |
| e.clientX < canvRect.right; |
| |
| if (!inside) |
| return; |
| |
| var pos = { |
| x: e.clientX - canv.offsetLeft, |
| y: e.clientY - canv.offsetTop |
| }; |
| |
| var wX = this.viewport_.xViewToWorld(pos.x); |
| |
| this.dragBeginEvent_ = e; |
| e.preventDefault(); |
| if (document.activeElement) |
| document.activeElement.blur(); |
| if (this.focusElement.tabIndex >= 0) |
| this.focusElement.focus(); |
| }, |
| |
| onMouseMove_: function(e) { |
| if (!this.firstCanvas) |
| return; |
| var canv = this.firstCanvas; |
| var pos = { |
| x: e.clientX - canv.offsetLeft, |
| y: e.clientY - canv.offsetTop |
| }; |
| |
| // Remember position. Used during keyboard zooming. |
| this.lastMouseViewPos_ = pos; |
| |
| // Update the drag box |
| if (this.dragBeginEvent_) { |
| this.dragBoxXStart_ = this.dragBeginEvent_.clientX; |
| this.dragBoxXEnd_ = e.clientX; |
| this.dragBoxYStart_ = this.dragBeginEvent_.clientY; |
| this.dragBoxYEnd_ = e.clientY; |
| var vertical = e.shiftKey; |
| this.setDragBoxPosition_(this.dragBoxXStart_, this.dragBoxYStart_, |
| this.dragBoxXEnd_, this.dragBoxYEnd_, vertical); |
| } |
| }, |
| |
| onMouseUp_: function(e) { |
| var i; |
| if (this.dragBeginEvent_) { |
| // Stop the dragging. |
| this.hideDragBox_(); |
| var eDown = this.dragBeginEvent_; |
| this.dragBeginEvent_ = null; |
| |
| // Figure out extents of the drag. |
| var loY; |
| var hiY; |
| var loX = Math.min(eDown.clientX, e.clientX); |
| var hiX = Math.max(eDown.clientX, e.clientX); |
| var tracksContainer = this.modelTrackContainer_.getBoundingClientRect(); |
| var topBoundary = tracksContainer.height; |
| var vertical = e.shiftKey; |
| if (vertical) { |
| var modelTrackRect = this.modelTrack_.getBoundingClientRect(); |
| loY = modelTrackRect.top; |
| hiY = modelTrackRect.bottom; |
| } else { |
| loY = Math.min(eDown.clientY, e.clientY); |
| hiY = Math.max(eDown.clientY, e.clientY); |
| } |
| |
| // Convert to worldspace. |
| var canv = this.firstCanvas; |
| var loVX = loX - canv.offsetLeft; |
| var hiVX = hiX - canv.offsetLeft; |
| |
| // Figure out what has been hit. |
| var selection = new TimelineSelection(); |
| this.modelTrack_.addIntersectingItemsInRangeToSelection( |
| loVX, hiVX, loY, hiY, selection); |
| |
| // Activate the new selection, and zoom if ctrl key held down. |
| this.selection = selection; |
| var isMac = navigator.platform.indexOf('Mac') == 0; |
| if ((isMac && e.metaKey) || (!isMac && e.ctrlKey)) { |
| this.zoomToSelection_(); |
| } |
| } |
| }, |
| |
| onDblClick_: function(e) { |
| var canv = this.firstCanvas; |
| |
| var scale = 4; |
| if (e.shiftKey) |
| scale = 1 / scale; |
| this.zoomBy_(scale); |
| e.preventDefault(); |
| } |
| }; |
| |
| /** |
| * The TimelineModel being viewed by the timeline |
| * @type {TimelineModel} |
| */ |
| base.defineProperty(Timeline, 'model', base.PropertyKind.JS); |
| |
| return { |
| Timeline: Timeline |
| }; |
| }); |
