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, Render } from './ProcedureWorkerCommon'; 17import { TraceRow } from '../../component/trace/base/TraceRow'; 18 19export class SdkCounterRender extends Render { 20 renderMainThread( 21 req: { 22 context: CanvasRenderingContext2D; 23 useCache: boolean; 24 type: string; 25 maxName: string; 26 maxValue: number; 27 }, 28 row: TraceRow<CounterStruct> 29 ): void { 30 let counterList = row.dataList; 31 let counterFilter = row.dataListCache; 32 let maxCounter = req.maxValue; 33 let maxCounterName = req.maxName; 34 this.counter( 35 counterList, 36 counterFilter, 37 TraceRow.range?.startNS ?? 0, 38 TraceRow.range?.endNS ?? 0, 39 TraceRow.range?.totalNS ?? 0, 40 row.frame, 41 req.useCache || (TraceRow.range?.refresh ?? false) 42 ); 43 req.context.beginPath(); 44 let sdkCounterFind = false; 45 for (let re of counterFilter) { 46 if (row.isHover && re.frame && isFrameContainPoint(re.frame, row.hoverX, row.hoverY)) { 47 CounterStruct.hoverCounterStruct = re; 48 sdkCounterFind = true; 49 } 50 CounterStruct.draw(req.context, re, maxCounter); 51 } 52 if (!sdkCounterFind && row.isHover) { 53 CounterStruct.hoverCounterStruct = undefined; 54 } 55 req.context.closePath(); 56 let textMetrics = req.context.measureText(maxCounterName); 57 req.context.globalAlpha = 0.8; 58 req.context.fillStyle = '#f0f0f0'; 59 req.context.fillRect(0, 5, textMetrics.width + 8, 18); 60 req.context.globalAlpha = 1; 61 req.context.fillStyle = '#333'; 62 req.context.textBaseline = 'middle'; 63 req.context.fillText(maxCounterName, 4, 5 + 9); 64 } 65 66 counter( 67 sdkCounterList: Array<any>, 68 sdkCounterFilters: Array<any>, 69 startNS: number, 70 endNS: number, 71 totalNS: number, 72 frame: any, 73 use: boolean 74 ) { 75 if (use && sdkCounterFilters.length > 0) { 76 for (let index = 0; index < sdkCounterFilters.length; index++) { 77 let item = sdkCounterFilters[index]; 78 if ((item.ts || 0) + (item.dur || 0) > startNS && (item.ts || 0) < endNS) { 79 CounterStruct.setCounterFrame(sdkCounterFilters[index], 5, startNS, endNS, totalNS, frame); 80 } else { 81 sdkCounterFilters[index].frame = null; 82 } 83 } 84 return; 85 } 86 sdkCounterFilters.length = 0; 87 setSdkCounterFilter(sdkCounterList, sdkCounterFilters, startNS, endNS, totalNS, frame); 88 } 89} 90function setSdkCounterFilter( 91 sdkCounterList: Array<any>, 92 sdkCounterFilters: Array<any>, 93 startNS: number, 94 endNS: number, 95 totalNS: number, 96 frame: any 97) { 98 if (sdkCounterList) { 99 for (let index = 0; index < sdkCounterList.length; index++) { 100 let item = sdkCounterList[index]; 101 item.dur = 102 index === sdkCounterList.length - 1 103 ? endNS - (item.ts || 0) 104 : (sdkCounterList[index + 1].ts || 0) - (item.ts || 0); 105 if ((item.ts || 0) + (item.dur || 0) > startNS && (item.ts || 0) < endNS) { 106 CounterStruct.setCounterFrame(sdkCounterList[index], 5, startNS, endNS, totalNS, frame); 107 if ( 108 !( 109 index > 0 && 110 (sdkCounterList[index - 1].frame?.x || 0) === (sdkCounterList[index].frame?.x || 0) && 111 (sdkCounterList[index - 1].frame?.width || 0) === (sdkCounterList[index].frame?.width || 0) 112 ) 113 ) { 114 sdkCounterFilters.push(item); 115 } 116 } 117 } 118 } 119} 120 121export class CounterStruct extends BaseStruct { 122 static maxCounter: number = 0; 123 static maxCounterName: string = ''; 124 static hoverCounterStruct: CounterStruct | undefined; 125 static selectCounterStruct: CounterStruct | undefined; 126 127 value: number | undefined; 128 ts: number | undefined; 129 counter_id: number | undefined; 130 131 static draw(sdkCounterContext: CanvasRenderingContext2D, data: CounterStruct, maxCounter: number) { 132 if (data.frame) { 133 let width = data.frame.width || 0; 134 sdkCounterContext.fillStyle = '#67B0FC'; 135 sdkCounterContext.strokeStyle = '#67B0FC'; 136 if (data.ts === CounterStruct.hoverCounterStruct?.ts) { 137 sdkCounterContext.lineWidth = 1; 138 let drawHeight: number = Math.floor(((data.value || 0) * (data.frame.height || 0) * 1.0) / maxCounter); 139 sdkCounterContext.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, width, drawHeight); 140 sdkCounterContext.beginPath(); 141 sdkCounterContext.arc(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, 3, 0, 2 * Math.PI, true); 142 sdkCounterContext.fill(); 143 sdkCounterContext.globalAlpha = 1.0; 144 sdkCounterContext.stroke(); 145 sdkCounterContext.beginPath(); 146 sdkCounterContext.moveTo(data.frame.x + 3, data.frame.y + data.frame.height - drawHeight + 4); 147 sdkCounterContext.lineWidth = 3; 148 sdkCounterContext.lineTo(data.frame.x + width, data.frame.y + data.frame.height - drawHeight + 4); 149 sdkCounterContext.stroke(); 150 } else { 151 sdkCounterContext.lineWidth = 1; 152 let drawHeight: number = Math.floor(((data.value || 0) * (data.frame.height || 0)) / maxCounter); 153 sdkCounterContext.fillRect(data.frame.x, data.frame.y + data.frame.height - drawHeight + 4, width, drawHeight); 154 } 155 } 156 sdkCounterContext.globalAlpha = 1.0; 157 sdkCounterContext.lineWidth = 1; 158 } 159 160 static setCounterFrame( 161 counterNode: any, 162 padding: number, 163 startNS: number, 164 endNS: number, 165 totalNS: number, 166 frame: any 167 ) { 168 let sdkCounterStartPointX: number, sdkCountEndPointX: number; 169 170 if ((counterNode.ts || 0) < startNS) { 171 sdkCounterStartPointX = 0; 172 } else { 173 sdkCounterStartPointX = ns2x(counterNode.ts || 0, startNS, endNS, totalNS, frame); 174 } 175 if ((counterNode.ts || 0) + (counterNode.dur || 0) > endNS) { 176 sdkCountEndPointX = frame.width; 177 } else { 178 sdkCountEndPointX = ns2x((counterNode.ts || 0) + (counterNode.dur || 0), startNS, endNS, totalNS, frame); 179 } 180 let frameWidth: number = 181 sdkCountEndPointX - sdkCounterStartPointX <= 1 ? 1 : sdkCountEndPointX - sdkCounterStartPointX; 182 if (!counterNode.frame) { 183 counterNode.frame = {}; 184 } 185 counterNode.frame.x = Math.floor(sdkCounterStartPointX); 186 counterNode.frame.y = frame.y + padding; 187 counterNode.frame.width = Math.ceil(frameWidth); 188 counterNode.frame.height = Math.floor(frame.height - padding * 2); 189 } 190} 191