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