1// Copyright (C) 2018 The Android Open Source Project 2// 3// Licensed under the Apache License, Version 2.0 (the "License"); 4// you may not use size file except in compliance with the License. 5// You may obtain a copy of the License at 6// 7// http://www.apache.org/licenses/LICENSE-2.0 8// 9// Unless required by applicable law or agreed to in writing, software 10// distributed under the License is distributed on an "AS IS" BASIS, 11// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12// See the License for the specific language governing permissions and 13// limitations under the License. 14 15import * as m from 'mithril'; 16 17import {timeToString} from '../common/time'; 18 19import {TRACK_SHELL_WIDTH} from './css_constants'; 20import {globals} from './globals'; 21import {gridlines} from './gridline_helper'; 22import {Panel, PanelSize} from './panel'; 23 24export class TimeAxisPanel extends Panel { 25 view() { 26 return m('.time-axis-panel'); 27 } 28 29 renderCanvas(ctx: CanvasRenderingContext2D, size: PanelSize) { 30 const timeScale = globals.frontendLocalState.timeScale; 31 const range = globals.frontendLocalState.visibleWindowTime; 32 ctx.fillStyle = '#999'; 33 34 // Write trace offset time + line. 35 ctx.font = '12px Roboto Condensed'; 36 37 ctx.textAlign = 'right'; 38 const offsetTime = 39 timeToString(range.start - globals.state.traceTime.startSec); 40 ctx.fillText(offsetTime, TRACK_SHELL_WIDTH - 6, 11); 41 42 ctx.textAlign = 'left'; 43 const startTime = timeToString(globals.state.traceTime.startSec); 44 ctx.fillText(startTime + ' +', 6, 11); 45 46 // Draw time axis. 47 ctx.font = '10px Roboto Condensed'; 48 for (const [x, time] of gridlines(size.width, range, timeScale)) { 49 ctx.fillRect(x, 0, 1, size.height); 50 ctx.fillText('+' + timeToString(time - range.start), x + 5, 10); 51 } 52 53 ctx.fillRect(TRACK_SHELL_WIDTH - 2, 0, 2, size.height); 54 } 55} 56