src/third_party/trace-viewer/src/tracing/tracks/drawing_container.js

   1 // Copyright (c) 2013 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 'use strict';
   6
   7 tvcm.requireStylesheet('tracing.tracks.drawing_container');
   8
   9 tvcm.require('tracing.tracks.track');
  10 tvcm.require('tvcm.raf');
  11 tvcm.require('tvcm.ui');
  12
  13 tvcm.exportTo('tracing.tracks', function() {
  14   var DrawType = {
  15     SLICE: 1,
  16     INSTANT_EVENT: 2,
  17     BACKGROUND: 3,
  18     GRID: 4,
  19     FLOW_ARROWS: 5,
  20     MARKERS: 6
  21   };
  22
  23   var DrawingContainer = tvcm.ui.define('drawing-container',
  24                                         tracing.tracks.Track);
  25
  26   DrawingContainer.prototype = {
  27     __proto__: tracing.tracks.Track.prototype,
  28
  29     decorate: function(viewport) {
  30       tracing.tracks.Track.prototype.decorate.call(this, viewport);
  31       this.classList.add('drawing-container');
  32
  33       this.canvas_ = document.createElement('canvas');
  34       this.canvas_.className = 'drawing-container-canvas';
  35       this.canvas_.style.left = tracing.constants.HEADING_WIDTH + 'px';
  36       this.appendChild(this.canvas_);
  37
  38       this.ctx_ = this.canvas_.getContext('2d');
  39
  40       this.viewportChange_ = this.viewportChange_.bind(this);
  41       this.viewport.addEventListener('change', this.viewportChange_);
  42     },
  43
  44     // Needed to support the calls in TimelineTrackView.
  45     get canvas() {
  46       return this.canvas_;
  47     },
  48
  49     context: function() {
  50       return this.ctx_;
  51     },
  52
  53     viewportChange_: function() {
  54       this.invalidate();
  55     },
  56
  57     invalidate: function() {
  58       if (this.rafPending_)
  59         return;
  60       this.rafPending_ = true;
  61
  62       tvcm.requestPreAnimationFrame(function() {
  63         this.rafPending_ = false;
  64         this.updateCanvasSizeIfNeeded_();
  65
  66         tvcm.requestAnimationFrameInThisFrameIfPossible(function() {
  67           this.drawTrackContents_();
  68         }, this);
  69       }, this);
  70     },
  71
  72     drawTrackContents_: function() {
  73       this.ctx_.clearRect(0, 0, this.canvas_.width, this.canvas_.height);
  74
  75       var typesToDraw = [
  76         DrawType.BACKGROUND,
  77         DrawType.GRID,
  78         DrawType.INSTANT_EVENT,
  79         DrawType.SLICE,
  80         DrawType.MARKERS,
  81         DrawType.FLOW_ARROWS
  82       ];
  83
  84       for (var idx in typesToDraw) {
  85         for (var i = 0; i < this.children.length; ++i) {
  86           if (!(this.children[i] instanceof tracing.tracks.Track))
  87             continue;
  88           this.children[i].drawTrack(typesToDraw[idx]);
  89         }
  90       }
  91
  92       var pixelRatio = window.devicePixelRatio || 1;
  93       var bounds = this.canvas_.getBoundingClientRect();
  94       var dt = this.viewport.currentDisplayTransform;
  95       var viewLWorld = dt.xViewToWorld(0);
  96       var viewRWorld = dt.xViewToWorld(
  97           bounds.width * pixelRatio);
  98
  99       this.viewport.drawGridLines(this.ctx_, viewLWorld, viewRWorld);
 100     },
 101
 102     updateCanvasSizeIfNeeded_: function() {
 103       var visibleChildTracks =
 104           tvcm.asArray(this.children).filter(this.visibleFilter_);
 105
 106       var thisBounds = this.getBoundingClientRect();
 107
 108       var firstChildTrackBounds = visibleChildTracks[0].getBoundingClientRect();
 109       var lastChildTrackBounds =
 110           visibleChildTracks[visibleChildTracks.length - 1].
 111               getBoundingClientRect();
 112
 113       var innerWidth = firstChildTrackBounds.width -
 114           tracing.constants.HEADING_WIDTH;
 115       var innerHeight = lastChildTrackBounds.bottom - firstChildTrackBounds.top;
 116
 117       var pixelRatio = window.devicePixelRatio || 1;
 118       if (this.canvas_.width != innerWidth * pixelRatio) {
 119         this.canvas_.width = innerWidth * pixelRatio;
 120         this.canvas_.style.width = innerWidth + 'px';
 121       }
 122
 123       if (this.canvas_.height != innerHeight * pixelRatio) {
 124         this.canvas_.height = innerHeight * pixelRatio;
 125         this.canvas_.style.height = innerHeight + 'px';
 126       }
 127
 128       var canvasTop =
 129           firstChildTrackBounds.top - thisBounds.top + this.scrollTop;
 130       if (this.canvas_.style.top + 'px' !== canvasTop)
 131         this.canvas_.style.top = canvasTop + 'px';
 132     },
 133
 134     visibleFilter_: function(element) {
 135       if (!(element instanceof tracing.tracks.Track))
 136         return false;
 137       return window.getComputedStyle(element).display !== 'none';
 138     },
 139
 140     addClosestEventToSelection: function(
 141         worldX, worldMaxDist, loY, hiY, selection) {
 142       for (var i = 0; i < this.children.length; ++i) {
 143         if (!(this.children[i] instanceof tracing.tracks.Track))
 144           continue;
 145         var trackClientRect = this.children[i].getBoundingClientRect();
 146         var a = Math.max(loY, trackClientRect.top);
 147         var b = Math.min(hiY, trackClientRect.bottom);
 148         if (a <= b) {
 149           this.children[i].addClosestEventToSelection(
 150               worldX, worldMaxDist, loY, hiY, selection);
 151         }
 152       }
 153
 154       tracing.tracks.Track.prototype.addClosestEventToSelection.
 155           apply(this, arguments);
 156     },
 157
 158     addEventsToTrackMap: function(eventToTrackMap) {
 159       for (var i = 0; i < this.children.length; ++i) {
 160         if (!(this.children[i] instanceof tracing.tracks.Track))
 161           continue;
 162         this.children[i].addEventsToTrackMap(eventToTrackMap);
 163       }
 164     }
 165   };
 166
 167   return {
 168     DrawingContainer: DrawingContainer,
 169     DrawType: DrawType
 170   };
 171 });