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