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