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, isFrameContainPoint, ns2x, Rect, Render } from './ProcedureWorkerCommon';
17import { TraceRow } from '../../component/trace/base/TraceRow';
18
19export class FpsRender extends Render {
20  renderMainThread(
21    req: {
22      context: CanvasRenderingContext2D;
23      useCache: boolean;
24      type: string;
25    },
26    row: TraceRow<FpsStruct>
27  ): void {
28    let fpsList = row.dataList;
29    let fpsFilter = row.dataListCache;
30    fps(
31      fpsList,
32      fpsFilter,
33      TraceRow.range!.startNS || 0,
34      TraceRow.range!.endNS || 0,
35      TraceRow.range!.totalNS || 0,
36      row.frame,
37      req.useCache || !TraceRow.range!.refresh
38    );
39    req.context.beginPath();
40    let fpsFind = false;
41    for (let re of fpsFilter) {
42      FpsStruct.draw(req.context, re);
43      if (row.isHover && re.frame && isFrameContainPoint(re.frame, row.hoverX, row.hoverY)) {
44        FpsStruct.hoverFpsStruct = re;
45        fpsFind = true;
46      }
47    }
48    if (!fpsFind && row.isHover) {
49      FpsStruct.hoverFpsStruct = undefined;
50    }
51    req.context.closePath();
52    let maxFps = FpsStruct.maxFps + 'FPS';
53    let textMetrics = req.context.measureText(maxFps);
54    req.context.globalAlpha = 0.8;
55    req.context.fillStyle = '#f0f0f0';
56    req.context.fillRect(0, 5, textMetrics.width + 8, 18);
57    req.context.globalAlpha = 1;
58    req.context.fillStyle = '#333';
59    req.context.textBaseline = 'middle';
60    req.context.fillText(maxFps, 4, 5 + 9);
61  }
62}
63
64export function fps(
65  list: Array<FpsStruct>,
66  res: Array<FpsStruct>,
67  startNS: number,
68  endNS: number,
69  totalNS: number,
70  frame: Rect,
71  use: boolean
72): void {
73  if (use && res.length > 0) {
74    res.forEach((it) => FpsStruct.setFrame(it, 5, startNS, endNS, totalNS, frame));
75    return;
76  }
77  FpsStruct.maxFps = 0;
78  res.length = 0;
79  if (list) {
80    for (let i = 0, len = list.length; i < len; i++) {
81      let it = list[i];
82      if ((it.fps || 0) > FpsStruct.maxFps) {
83        FpsStruct.maxFps = it.fps || 0;
84      }
85      if (i === list.length - 1) {
86        it.dur = endNS - (it.startNS || 0);
87      } else {
88        it.dur = (list[i + 1].startNS || 0) - (it.startNS || 0);
89      }
90      if ((it.startNS || 0) + (it.dur || 0) > startNS && (it.startNS || 0) < endNS) {
91        FpsStruct.setFrame(list[i], 5, startNS, endNS, totalNS, frame);
92        setFPSFilter(list, i, res);
93      }
94    }
95  }
96}
97
98function setFPSFilter(list: Array<FpsStruct>, i: number, res: Array<FpsStruct>): void {
99  if (
100    i > 0 &&
101    (list[i - 1].frame?.x || 0) === (list[i].frame?.x || 0) &&
102    (list[i - 1].frame?.width || 0) === (list[i].frame?.width || 0)
103  ) {
104  } else {
105    res.push(list[i]);
106  }
107}
108
109export class FpsStruct extends BaseStruct {
110  static maxFps: number = 0;
111  static maxFpsName: string = '0 FPS';
112  static hoverFpsStruct: FpsStruct | undefined;
113  static selectFpsStruct: FpsStruct | undefined;
114  fps: number | undefined;
115  startNS: number | undefined = 0;
116  dur: number | undefined; //自补充，数据库没有返回
117
118  static draw(fpsContext: CanvasRenderingContext2D, data: FpsStruct): void {
119    if (data.frame) {
120      let width = data.frame.width || 0;
121      fpsContext.fillStyle = '#535da6';
122      fpsContext.strokeStyle = '#535da6';
123      if (data === FpsStruct.hoverFpsStruct) {
124        fpsContext.lineWidth = 1;
125        fpsContext.globalAlpha = 0.6;
126        let drawHeight: number = ((data.fps || 0) * (data.frame.height || 0) * 1.0) / FpsStruct.maxFps;
127        fpsContext.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
128        fpsContext.beginPath();
129        fpsContext.arc(data.frame.x, data.frame.y + data.frame.height - drawHeight, 3, 0, 2 * Math.PI, true);
130        fpsContext.fill();
131        fpsContext.globalAlpha = 1.0;
132        fpsContext.stroke();
133        fpsContext.beginPath();
134        fpsContext.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight);
135        fpsContext.lineWidth = 3;
136        fpsContext.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight);
137        fpsContext.stroke();
138      } else {
139        fpsContext.globalAlpha = 0.6;
140        fpsContext.lineWidth = 1;
141        let drawHeight: number = ((data.fps || 0) * (data.frame.height || 0) * 1.0) / FpsStruct.maxFps;
142        fpsContext.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight, width, drawHeight);
143      }
144    }
145    fpsContext.globalAlpha = 1.0;
146    fpsContext.lineWidth = 1;
147  }
148
149  static setFrame(
150    fpsNode: FpsStruct,
151    padding: number,
152    startNS: number,
153    endNS: number,
154    totalNS: number,
155    frame: Rect
156  ): void {
157    let fpsLeftPointX: number;
158    let fpsRightPointX: number;
159    if ((fpsNode.startNS || 0) < startNS) {
160      fpsLeftPointX = 0;
161    } else {
162      fpsLeftPointX = ns2x(fpsNode.startNS || 0, startNS, endNS, totalNS, frame);
163    }
164    if ((fpsNode.startNS || 0) + (fpsNode.dur || 0) > endNS) {
165      fpsRightPointX = frame.width;
166    } else {
167      fpsRightPointX = ns2x((fpsNode.startNS || 0) + (fpsNode.dur || 0), startNS, endNS, totalNS, frame);
168    }
169    let getV: number = fpsRightPointX - fpsLeftPointX <= 1 ? 1 : fpsRightPointX - fpsLeftPointX;
170    let rectangle: Rect = new Rect(
171      Math.floor(fpsLeftPointX),
172      Math.ceil(frame.y + padding),
173      Math.ceil(getV),
174      Math.floor(frame.height - padding * 2)
175    );
176    fpsNode.frame = rectangle;
177  }
178}
179
180const textPadding = 2;
181