| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <!-- | 2 <!-- |
| 3 Copyright (c) 2015 The Chromium Authors. All rights reserved. | 3 Copyright (c) 2015 The Chromium Authors. All rights reserved. |
| 4 Use of this source code is governed by a BSD-style license that can be | 4 Use of this source code is governed by a BSD-style license that can be |
| 5 found in the LICENSE file. | 5 found in the LICENSE file. |
| 6 --> | 6 --> |
| 7 | 7 |
| 8 <link rel="import" href="/tracing/base/color_scheme.html"> | 8 <link rel="import" href="/tracing/base/color_scheme.html"> |
| 9 <link rel="import" href="/tracing/base/range.html"> | 9 <link rel="import" href="/tracing/base/math/range.html"> |
| 10 <link rel="import" href="/tracing/model/proxy_selectable_item.html"> | 10 <link rel="import" href="/tracing/model/proxy_selectable_item.html"> |
| 11 <link rel="import" href="/tracing/model/selection_state.html"> | 11 <link rel="import" href="/tracing/model/selection_state.html"> |
| 12 <link rel="import" href="/tracing/ui/base/event_presenter.html"> | 12 <link rel="import" href="/tracing/ui/base/event_presenter.html"> |
| 13 | 13 |
| 14 <script> | 14 <script> |
| 15 'use strict'; | 15 'use strict'; |
| 16 | 16 |
| 17 tr.exportTo('tr.ui.tracks', function() { | 17 tr.exportTo('tr.ui.tracks', function() { |
| 18 var ColorScheme = tr.b.ColorScheme; | 18 var ColorScheme = tr.b.ColorScheme; |
| 19 var EventPresenter = tr.ui.b.EventPresenter; | 19 var EventPresenter = tr.ui.b.EventPresenter; |
| (...skipping 99 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 119 value = defaultValue; | 119 value = defaultValue; |
| 120 this[key + '_'] = value; | 120 this[key + '_'] = value; |
| 121 } | 121 } |
| 122 | 122 |
| 123 // Avoid unnecessary recomputation in getters. | 123 // Avoid unnecessary recomputation in getters. |
| 124 this.topPadding = this.bottomPadding = Math.max( | 124 this.topPadding = this.bottomPadding = Math.max( |
| 125 this.selectedPointSize_, this.unselectedPointSize_) / 2; | 125 this.selectedPointSize_, this.unselectedPointSize_) / 2; |
| 126 }, | 126 }, |
| 127 | 127 |
| 128 get range() { | 128 get range() { |
| 129 var range = new tr.b.Range(); | 129 var range = new tr.b.math.Range(); |
| 130 this.points.forEach(function(point) { | 130 this.points.forEach(function(point) { |
| 131 range.addValue(point.y); | 131 range.addValue(point.y); |
| 132 }, this); | 132 }, this); |
| 133 return range; | 133 return range; |
| 134 }, | 134 }, |
| 135 | 135 |
| 136 draw: function(ctx, transform, highDetails) { | 136 draw: function(ctx, transform, highDetails) { |
| 137 if (this.points === undefined || this.points.length === 0) | 137 if (this.points === undefined || this.points.length === 0) |
| 138 return; | 138 return; |
| 139 | 139 |
| (...skipping 22 matching lines...) Expand all Loading... |
| 162 extraPixels = Math.max( | 162 extraPixels = Math.max( |
| 163 this.selectedPointSize_, this.unselectedPointSize_); | 163 this.selectedPointSize_, this.unselectedPointSize_); |
| 164 } | 164 } |
| 165 var pixelRatio = transform.pixelRatio; | 165 var pixelRatio = transform.pixelRatio; |
| 166 var leftViewX = transform.leftViewX - extraPixels * pixelRatio; | 166 var leftViewX = transform.leftViewX - extraPixels * pixelRatio; |
| 167 var rightViewX = transform.rightViewX + extraPixels * pixelRatio; | 167 var rightViewX = transform.rightViewX + extraPixels * pixelRatio; |
| 168 var leftTimestamp = transform.leftTimestamp - extraPixels; | 168 var leftTimestamp = transform.leftTimestamp - extraPixels; |
| 169 var rightTimestamp = transform.rightTimestamp + extraPixels; | 169 var rightTimestamp = transform.rightTimestamp + extraPixels; |
| 170 | 170 |
| 171 // Find the index of the first and last (partially) visible points. | 171 // Find the index of the first and last (partially) visible points. |
| 172 var firstVisibleIndex = tr.b.findLowIndexInSortedArray( | 172 var firstVisibleIndex = tr.b.math.findLowIndexInSortedArray( |
| 173 this.points, | 173 this.points, |
| 174 function(point) { return point.x; }, | 174 function(point) { return point.x; }, |
| 175 leftTimestamp); | 175 leftTimestamp); |
| 176 var lastVisibleIndex = tr.b.findLowIndexInSortedArray( | 176 var lastVisibleIndex = tr.b.math.findLowIndexInSortedArray( |
| 177 this.points, | 177 this.points, |
| 178 function(point) { return point.x; }, | 178 function(point) { return point.x; }, |
| 179 rightTimestamp); | 179 rightTimestamp); |
| 180 if (lastVisibleIndex >= this.points.length || | 180 if (lastVisibleIndex >= this.points.length || |
| 181 this.points[lastVisibleIndex].x > rightTimestamp) { | 181 this.points[lastVisibleIndex].x > rightTimestamp) { |
| 182 lastVisibleIndex--; | 182 lastVisibleIndex--; |
| 183 } | 183 } |
| 184 | 184 |
| 185 // Pre-calculate component style which does not depend on individual | 185 // Pre-calculate component style which does not depend on individual |
| 186 // points: | 186 // points: |
| (...skipping 45 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 232 } | 232 } |
| 233 var visibleViewXRange = | 233 var visibleViewXRange = |
| 234 transform.worldXToViewX(this.points[lastVisibleIndex].x) - | 234 transform.worldXToViewX(this.points[lastVisibleIndex].x) - |
| 235 transform.worldXToViewX(this.points[firstVisibleIndex].x); | 235 transform.worldXToViewX(this.points[firstVisibleIndex].x); |
| 236 if (visibleViewXRange === 0) { | 236 if (visibleViewXRange === 0) { |
| 237 // Multiple visible points which all have the same timestamp. | 237 // Multiple visible points which all have the same timestamp. |
| 238 squareOpacity = 1; | 238 squareOpacity = 1; |
| 239 break; | 239 break; |
| 240 } | 240 } |
| 241 var density = visibleIndexRange / visibleViewXRange; | 241 var density = visibleIndexRange / visibleViewXRange; |
| 242 var clampedDensity = tr.b.clamp(density, | 242 var clampedDensity = tr.b.math.clamp(density, |
| 243 this.unselectedPointDensityOpaque_, | 243 this.unselectedPointDensityOpaque_, |
| 244 this.unselectedPointDensityTransparent_); | 244 this.unselectedPointDensityTransparent_); |
| 245 var densityRange = this.unselectedPointDensityTransparent_ - | 245 var densityRange = this.unselectedPointDensityTransparent_ - |
| 246 this.unselectedPointDensityOpaque_; | 246 this.unselectedPointDensityOpaque_; |
| 247 squareOpacity = | 247 squareOpacity = |
| 248 (this.unselectedPointDensityTransparent_ - clampedDensity) / | 248 (this.unselectedPointDensityTransparent_ - clampedDensity) / |
| 249 densityRange; | 249 densityRange; |
| 250 break; | 250 break; |
| 251 | 251 |
| 252 case ChartSeriesComponent.LINE: | 252 case ChartSeriesComponent.LINE: |
| (...skipping 253 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 506 if (i === points.length - 1) | 506 if (i === points.length - 1) |
| 507 return LAST_POINT_WIDTH * viewPixWidthWorld; | 507 return LAST_POINT_WIDTH * viewPixWidthWorld; |
| 508 var nextPoint = points[i + 1]; | 508 var nextPoint = points[i + 1]; |
| 509 return nextPoint.x - point.x; | 509 return nextPoint.x - point.x; |
| 510 } | 510 } |
| 511 | 511 |
| 512 function selectPoint(point) { | 512 function selectPoint(point) { |
| 513 point.addToSelection(selection); | 513 point.addToSelection(selection); |
| 514 } | 514 } |
| 515 | 515 |
| 516 tr.b.iterateOverIntersectingIntervals( | 516 tr.b.math.iterateOverIntersectingIntervals( |
| 517 this.points, | 517 this.points, |
| 518 function(point) { return point.x; }, | 518 function(point) { return point.x; }, |
| 519 getPointWidth, | 519 getPointWidth, |
| 520 loWX, | 520 loWX, |
| 521 hiWX, | 521 hiWX, |
| 522 selectPoint); | 522 selectPoint); |
| 523 }, | 523 }, |
| 524 | 524 |
| 525 addEventNearToProvidedEventToSelection: function(event, offset, selection) { | 525 addEventNearToProvidedEventToSelection: function(event, offset, selection) { |
| 526 if (this.points === undefined) | 526 if (this.points === undefined) |
| (...skipping 11 matching lines...) Expand all Loading... |
| 538 | 538 |
| 539 this.points[newIndex].addToSelection(selection); | 539 this.points[newIndex].addToSelection(selection); |
| 540 return true; | 540 return true; |
| 541 }, | 541 }, |
| 542 | 542 |
| 543 addClosestEventToSelection: function(worldX, worldMaxDist, loY, hiY, | 543 addClosestEventToSelection: function(worldX, worldMaxDist, loY, hiY, |
| 544 selection) { | 544 selection) { |
| 545 if (this.points === undefined) | 545 if (this.points === undefined) |
| 546 return; | 546 return; |
| 547 | 547 |
| 548 var item = tr.b.findClosestElementInSortedArray( | 548 var item = tr.b.math.findClosestElementInSortedArray( |
| 549 this.points, | 549 this.points, |
| 550 function(point) { return point.x; }, | 550 function(point) { return point.x; }, |
| 551 worldX, | 551 worldX, |
| 552 worldMaxDist); | 552 worldMaxDist); |
| 553 | 553 |
| 554 if (!item) | 554 if (!item) |
| 555 return; | 555 return; |
| 556 | 556 |
| 557 item.addToSelection(selection); | 557 item.addToSelection(selection); |
| 558 } | 558 } |
| 559 }; | 559 }; |
| 560 | 560 |
| 561 return { | 561 return { |
| 562 ChartSeries, | 562 ChartSeries, |
| 563 ChartSeriesType, | 563 ChartSeriesType, |
| 564 }; | 564 }; |
| 565 }); | 565 }); |
| 566 </script> | 566 </script> |
| OLD | NEW |