src/third_party/trace-viewer/trace_viewer/tracing/timeline_interest_range.js

   1 // Copyright (c) 2014 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.require('tvcm.range');
   8
   9 tvcm.exportTo('tracing', function() {
  10
  11   /**
  12    * @constructor
  13    */
  14   function SnapIndicator(y, height) {
  15     this.y = y;
  16     this.height = height;
  17   }
  18
  19   /**
  20    * The interesting part of the world.
  21    *
  22    * @constructor
  23    */
  24   function TimelineInterestRange(vp) {
  25     this.viewport_ = vp;
  26
  27     this.range_ = new tvcm.Range();
  28
  29     this.leftSelected_ = false;
  30     this.rightSelected_ = false;
  31
  32     this.leftSnapIndicator_ = undefined;
  33     this.rightSnapIndicator_ = undefined;
  34   }
  35
  36   TimelineInterestRange.prototype = {
  37     get isEmpty() {
  38       return this.range_.isEmpty;
  39     },
  40
  41     reset: function() {
  42       this.range_.reset();
  43       this.leftSelected_ = false;
  44       this.rightSelected_ = false;
  45       this.leftSnapIndicator_ = undefined;
  46       this.rightSnapIndicator_ = undefined;
  47       this.viewport_.dispatchChangeEvent();
  48     },
  49
  50     get min() {
  51       return this.range_.min;
  52     },
  53
  54     set min(min) {
  55       this.range_.min = min;
  56       this.viewport_.dispatchChangeEvent();
  57     },
  58
  59     get max() {
  60       return this.range_.max;
  61     },
  62
  63     set max(max) {
  64       this.range_.max = max;
  65       this.viewport_.dispatchChangeEvent();
  66     },
  67
  68     set: function(range) {
  69       this.range_.reset();
  70       this.range_.addRange(range);
  71       this.viewport_.dispatchChangeEvent();
  72     },
  73
  74     setMinAndMax: function(min, max) {
  75       this.range_.min = min;
  76       this.range_.max = max;
  77       this.viewport_.dispatchChangeEvent();
  78     },
  79
  80     get range() {
  81       return this.range_.range;
  82     },
  83
  84     asRangeObject: function() {
  85       var range = new tvcm.Range();
  86       range.addRange(this.range_);
  87       return range;
  88     },
  89
  90     get leftSelected() {
  91       return this.leftSelected_;
  92     },
  93
  94     set leftSelected(leftSelected) {
  95       if (this.leftSelected_ == leftSelected)
  96         return;
  97       this.leftSelected_ = leftSelected;
  98       this.viewport_.dispatchChangeEvent();
  99     },
 100
 101     get rightSelected() {
 102       return this.rightSelected_;
 103     },
 104
 105     set rightSelected(rightSelected) {
 106       if (this.rightSelected_ == rightSelected)
 107         return;
 108       this.rightSelected_ = rightSelected;
 109       this.viewport_.dispatchChangeEvent();
 110     },
 111
 112     get leftSnapIndicator() {
 113       return this.leftSnapIndicator_;
 114     },
 115
 116     set leftSnapIndicator(leftSnapIndicator) {
 117       this.leftSnapIndicator_ = leftSnapIndicator;
 118       this.viewport_.dispatchChangeEvent();
 119     },
 120
 121     get rightSnapIndicator() {
 122       return this.rightSnapIndicator_;
 123     },
 124
 125     set rightSnapIndicator(rightSnapIndicator) {
 126       this.rightSnapIndicator_ = rightSnapIndicator;
 127       this.viewport_.dispatchChangeEvent();
 128     },
 129
 130     draw: function(ctx, viewLWorld, viewRWorld) {
 131       if (this.range_.isEmpty)
 132         return;
 133       var dt = this.viewport_.currentDisplayTransform;
 134
 135       var markerLWorld = this.min;
 136       var markerRWorld = this.max;
 137
 138       var markerLView = Math.round(dt.xWorldToView(markerLWorld));
 139       var markerRView = Math.round(dt.xWorldToView(markerRWorld));
 140
 141       ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
 142       if (markerLWorld > viewLWorld) {
 143         ctx.fillRect(dt.xWorldToView(viewLWorld), 0,
 144             markerLView, ctx.canvas.height);
 145       }
 146
 147       if (markerRWorld < viewRWorld) {
 148         ctx.fillRect(markerRView, 0,
 149             dt.xWorldToView(viewRWorld), ctx.canvas.height);
 150       }
 151
 152       var pixelRatio = window.devicePixelRatio || 1;
 153       ctx.lineWidth = Math.round(pixelRatio);
 154       if (this.range_.range > 0) {
 155         this.drawLine_(ctx, viewLWorld, viewRWorld,
 156                        ctx.canvas.height, this.min, this.leftSelected_);
 157         this.drawLine_(ctx, viewLWorld, viewRWorld,
 158                        ctx.canvas.height, this.max, this.rightSelected_);
 159       } else {
 160         this.drawLine_(ctx, viewLWorld, viewRWorld,
 161                        ctx.canvas.height, this.min,
 162                        this.leftSelected_ || this.rightSelected_);
 163       }
 164       ctx.lineWidth = 1;
 165     },
 166
 167     drawLine_: function(ctx, viewLWorld, viewRWorld, height, ts, selected) {
 168       if (ts < viewLWorld || ts >= viewRWorld)
 169         return;
 170
 171       var dt = this.viewport_.currentDisplayTransform;
 172       var viewX = Math.round(dt.xWorldToView(ts));
 173
 174       // Apply subpixel translate to get crisp lines.
 175       // http://www.mobtowers.com/html5-canvas-crisp-lines-every-time/
 176       ctx.save();
 177       ctx.translate((Math.round(ctx.lineWidth) % 2) / 2, 0);
 178
 179       ctx.beginPath();
 180       tracing.drawLine(ctx, viewX, 0, viewX, height);
 181       if (selected)
 182         ctx.strokeStyle = 'rgb(255, 0, 0)';
 183       else
 184         ctx.strokeStyle = 'rgb(0, 0, 0)';
 185       ctx.stroke();
 186
 187       ctx.restore();
 188     },
 189
 190     drawIndicators: function(ctx, viewLWorld, viewRWorld) {
 191       if (this.leftSnapIndicator_) {
 192         this.drawIndicator_(ctx, viewLWorld, viewRWorld,
 193                             this.range_.min,
 194                             this.leftSnapIndicator_,
 195                             this.leftSelected_);
 196       }
 197       if (this.rightSnapIndicator_) {
 198         this.drawIndicator_(ctx, viewLWorld, viewRWorld,
 199                             this.range_.max,
 200                             this.rightSnapIndicator_,
 201                             this.rightSelected_);
 202       }
 203     },
 204
 205     drawIndicator_: function(ctx, viewLWorld, viewRWorld,
 206                              xWorld, si, selected) {
 207       var dt = this.viewport_.currentDisplayTransform;
 208
 209       var viewX = Math.round(dt.xWorldToView(xWorld));
 210
 211       // Apply subpixel translate to get crisp lines.
 212       // http://www.mobtowers.com/html5-canvas-crisp-lines-every-time/
 213       ctx.save();
 214       ctx.translate((Math.round(ctx.lineWidth) % 2) / 2, 0);
 215
 216       var pixelRatio = window.devicePixelRatio || 1;
 217       var viewY = si.y * devicePixelRatio;
 218       var viewHeight = si.height * devicePixelRatio;
 219       var arrowSize = 4 * pixelRatio;
 220
 221       if (selected)
 222         ctx.fillStyle = 'rgb(255, 0, 0)';
 223       else
 224         ctx.fillStyle = 'rgb(0, 0, 0)';
 225       tracing.drawTriangle(ctx,
 226           viewX - arrowSize * 0.75, viewY,
 227           viewX + arrowSize * 0.75, viewY,
 228           viewX, viewY + arrowSize);
 229       ctx.fill();
 230       tracing.drawTriangle(ctx,
 231           viewX - arrowSize * 0.75, viewY + viewHeight,
 232           viewX + arrowSize * 0.75, viewY + viewHeight,
 233           viewX, viewY + viewHeight - arrowSize);
 234       ctx.fill();
 235
 236       ctx.restore();
 237     }
 238   };
 239
 240   return {
 241     SnapIndicator: SnapIndicator,
 242     TimelineInterestRange: TimelineInterestRange
 243   };
 244 });