src/third_party/trace-viewer/trace_viewer/tracing/tracks/drawing_container.html

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