1<!DOCTYPE html> 2<!-- 3Copyright (c) 2015 The Chromium Authors. All rights reserved. 4Use of this source code is governed by a BSD-style license that can be 5found in the LICENSE file. 6--> 7 8<link rel="import" href="/tracing/ui/annotations/annotation_view.html"> 9 10<script> 11'use strict'; 12 13tr.exportTo('tr.ui.annotations', function() { 14 /** 15 * A view responsible for drawing a single highlight rectangle box on 16 * the timeline. 17 * @extends {AnnotationView} 18 * @constructor 19 */ 20 function RectAnnotationView(viewport, annotation) { 21 this.viewport_ = viewport; 22 this.annotation_ = annotation; 23 } 24 25 RectAnnotationView.prototype = { 26 __proto__: tr.ui.annotations.AnnotationView.prototype, 27 28 draw: function(ctx) { 29 var dt = this.viewport_.currentDisplayTransform; 30 var startCoords = 31 this.annotation_.startLocation.toViewCoordinates(this.viewport_); 32 var endCoords = 33 this.annotation_.endLocation.toViewCoordinates(this.viewport_); 34 35 // Prevent drawing into the ruler track by clamping the initial Y 36 // point and the rect's Y size. 37 var startY = startCoords.viewY - ctx.canvas.getBoundingClientRect().top; 38 var sizeY = endCoords.viewY - startCoords.viewY; 39 if (startY + sizeY < 0) { 40 // In this case sizeY is negative. If final Y is negative, 41 // overwrite startY so that the rectangle ends at y=0. 42 startY = sizeY; 43 } else if (startY < 0) { 44 startY = 0; 45 } 46 47 ctx.fillStyle = this.annotation_.fillStyle; 48 ctx.fillRect(startCoords.viewX, startY, 49 endCoords.viewX - startCoords.viewX, sizeY); 50 } 51 }; 52 53 return { 54 RectAnnotationView: RectAnnotationView 55 }; 56}); 57</script> 58