• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (C) 2022 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this 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 */
15
16import { BaseStruct, dataFilterHandler, isFrameContainPoint, Render } from './ProcedureWorkerCommon.js';
17import { TraceRow } from '../../component/trace/base/TraceRow.js';
18import { ColorUtils } from '../../component/trace/base/ColorUtils.js';
19
20export class ClockRender extends Render {
21  renderMainThread(
22    clockReq: {
23      context: CanvasRenderingContext2D;
24      useCache: boolean;
25      type: string;
26      maxValue: number;
27      index: number;
28      maxName: string;
29    },
30    row: TraceRow<ClockStruct>
31  ) {
32    ClockStruct.index = clockReq.index;
33    let clockList = row.dataList;
34    let clockFilter = row.dataListCache;
35    dataFilterHandler(clockList, clockFilter, {
36      startKey: 'startNS',
37      durKey: 'dur',
38      startNS: TraceRow.range?.startNS ?? 0,
39      endNS: TraceRow.range?.endNS ?? 0,
40      totalNS: TraceRow.range?.totalNS ?? 0,
41      frame: row.frame,
42      paddingTop: 5,
43      useCache: clockReq.useCache || !(TraceRow.range?.refresh ?? false),
44    });
45    clockReq.context.beginPath();
46    let find = false;
47    for (let re of clockFilter) {
48      ClockStruct.draw(clockReq.context, re, clockReq.maxValue);
49      if (row.isHover && re.frame && isFrameContainPoint(re.frame, row.hoverX, row.hoverY)) {
50        ClockStruct.hoverClockStruct = re;
51        find = true;
52      }
53    }
54    if (!find && row.isHover) ClockStruct.hoverClockStruct = undefined;
55    clockReq.context.closePath();
56    let s = clockReq.maxName;
57    let textMetrics = clockReq.context.measureText(s);
58    clockReq.context.globalAlpha = 0.8;
59    clockReq.context.fillStyle = '#f0f0f0';
60    clockReq.context.fillRect(0, 5, textMetrics.width + 8, 18);
61    clockReq.context.globalAlpha = 1;
62    clockReq.context.fillStyle = '#333';
63    clockReq.context.textBaseline = 'middle';
64    clockReq.context.fillText(s, 4, 5 + 9);
65  }
66}
67
68export class ClockStruct extends BaseStruct {
69  static maxValue: number = 0;
70  static maxName: string = '';
71  static hoverClockStruct: ClockStruct | undefined;
72  static selectClockStruct: ClockStruct | undefined;
73  static index = 0;
74  filterId: number | undefined;
75  value: number | undefined;
76  startNS: number | undefined;
77  dur: number | undefined; //自补充，数据库没有返回
78  delta: number | undefined; //自补充，数据库没有返回
79
80  static draw(clockContext: CanvasRenderingContext2D, data: ClockStruct, maxValue: number) {
81    if (data.frame) {
82      let width = data.frame.width || 0;
83      clockContext.fillStyle = ColorUtils.colorForTid(ClockStruct.index);
84      clockContext.strokeStyle = ColorUtils.colorForTid(ClockStruct.index);
85      let drawHeight: number = Math.floor(((data.value || 0) * (data.frame.height || 0) * 1.0) / maxValue);
86      if (drawHeight === 0) {
87        drawHeight = 1;
88      }
89      if (ClockStruct.isHover(data)) {
90        clockContext.lineWidth = 1;
91        clockContext.globalAlpha = 0.6;
92        clockContext.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
93        clockContext.beginPath();
94        clockContext.arc(data.frame.x, data.frame.y + data.frame.height - drawHeight, 3, 0, 2 * Math.PI, true);
95        clockContext.fill();
96        clockContext.globalAlpha = 1.0;
97        clockContext.stroke();
98        clockContext.beginPath();
99        clockContext.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight);
100        clockContext.lineWidth = 3;
101        clockContext.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight);
102        clockContext.stroke();
103      } else {
104        clockContext.lineWidth = 1;
105        clockContext.globalAlpha = 1.0;
106        clockContext.strokeRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight)
107        clockContext.globalAlpha = 0.6;
108        clockContext.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
109      }
110    }
111    clockContext.globalAlpha = 1.0;
112    clockContext.lineWidth = 1;
113  }
114
115  static isHover(clock: ClockStruct) {
116    return clock === ClockStruct.hoverClockStruct || clock === ClockStruct.selectClockStruct;
117  }
118}
119