| <!DOCTYPE html> |
| <!-- |
| Copyright (c) 2015 The Chromium Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. |
| --> |
| |
| <link rel="import" href="/core/test_utils.html"> |
| <link rel="import" href="/extras/chrome/chrome_test_utils.html"> |
| |
| <polymer-element name="tr-e-rail-ir-verifier-row"> |
| <template> |
| <style> |
| :host { |
| display: table-row; |
| border-spacing: 0px; |
| } |
| #label { |
| width: 1px; |
| } |
| td { |
| vertical-align: top; |
| padding: 0px; |
| } |
| </style> |
| |
| <td id="label"></td> |
| <td><canvas id="canvas"></td> |
| </template> |
| <script> |
| 'use strict'; |
| |
| // Returns a list of non-overlapping lists of events. |
| // |events| must be sorted by start time. |
| // C.f. AsyncSliceGroupTrack.buildSubRows_() |
| function organizeEventsIntoTracks(events) { |
| if (events.length === 0) |
| return [[]]; |
| |
| var tracks = [[events.shift()]]; |
| events.forEach(function(event) { |
| for (var tracki = 0; tracki < tracks.length; ++tracki) { |
| var track = tracks[tracki]; |
| var lastEvent = track[track.length - 1]; |
| if (event.start >= lastEvent.end) { |
| track.push(event); |
| return; |
| } |
| } |
| tracks.push([event]); |
| }); |
| return tracks; |
| } |
| |
| function getEventColor(event) { |
| var typeNameOrTitle = event.typeName || event.title; |
| var colorId = tr.ui.b.getColorIdForGeneralPurposeString( |
| typeNameOrTitle); |
| if (event.railTypeName_) { |
| colorId = tr.ui.b.getColorIdForReservedName(event.railTypeName_); |
| } |
| return tr.ui.b.getColorPalette()[colorId]; |
| } |
| |
| Polymer({ |
| created: function() { |
| this.events_ = undefined; |
| this.bounds_ = undefined; |
| }, |
| |
| // |events| must be sorted by start time. |
| set events(events) { |
| this.events_ = events; |
| }, |
| |
| set bounds(bounds) { |
| this.bounds_ = bounds; |
| }, |
| |
| set labelString(s) { |
| this.$.label.textContent = s; |
| }, |
| |
| update: function() { |
| var tracks = organizeEventsIntoTracks(this.events_); |
| var totalWidth = this.getBoundingClientRect().width; |
| var labelWidth = this.$.label.getBoundingClientRect().width; |
| this.$.canvas.width = totalWidth - labelWidth; |
| var xScale = this.$.canvas.width / this.bounds_.max; |
| var ROW_HEIGHT = 20; |
| this.$.canvas.height = ROW_HEIGHT * tracks.length; |
| var context = this.$.canvas.getContext('2d'); |
| tracks.forEach(function(track, trackIndex) { |
| var y = 20 * trackIndex; |
| track.forEach(function(event) { |
| var x = event.start * xScale; |
| var w = (event.end - event.start) * xScale; |
| |
| context.beginPath(); |
| context.rect(x, y, w, ROW_HEIGHT - 1); |
| context.fillStyle = getEventColor(event); |
| context.fill(); |
| context.lineWidth = 1; |
| context.strokeStyle = 'black'; |
| context.stroke(); |
| |
| context.beginPath(); |
| context.font = '15px Arial'; |
| context.fillStyle = 'black'; |
| context.textAlign = 'center'; |
| var textString = event.typeName || event.title; |
| context.fillText(textString, x + (w / 2), y + (3 * ROW_HEIGHT / 4)); |
| context.stroke(); |
| }); |
| }); |
| } |
| }); |
| </script> |
| </polymer-element> |
