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 { ColorUtils } from '../../component/trace/base/ColorUtils'; 17import { 18 dataFilterHandler, 19 isFrameContainPoint, 20 Render, 21 RequestMessage, 22 BaseStruct, 23 drawLoadingFrame, 24} from './ProcedureWorkerCommon'; 25import { TraceRow } from '../../component/trace/base/TraceRow'; 26export class NetworkAbilityRender extends Render { 27 renderMainThread( 28 req: { 29 context: CanvasRenderingContext2D; 30 useCache: boolean; 31 type: string; 32 maxNetworkRate: number; 33 maxNetworkRateName: string; 34 }, 35 networkAbilityRow: TraceRow<NetworkAbilityMonitorStruct> 36 ): void { 37 let networkAbilityList = networkAbilityRow.dataList; 38 let networkAbilityFilter = networkAbilityRow.dataListCache; 39 dataFilterHandler(networkAbilityList, networkAbilityFilter, { 40 startKey: 'startNS', 41 durKey: 'dur', 42 startNS: TraceRow.range?.startNS ?? 0, 43 endNS: TraceRow.range?.endNS ?? 0, 44 totalNS: TraceRow.range?.totalNS ?? 0, 45 frame: networkAbilityRow.frame, 46 paddingTop: 5, 47 useCache: req.useCache || !(TraceRow.range?.refresh ?? false), 48 }); 49 drawLoadingFrame(req.context, networkAbilityRow.dataListCache, networkAbilityRow); 50 req.context.beginPath(); 51 let find = false; 52 for (let re of networkAbilityFilter) { 53 NetworkAbilityMonitorStruct.draw(req.context, re, req.maxNetworkRate, networkAbilityRow.isHover); 54 if ( 55 networkAbilityRow.isHover && 56 re.frame && 57 isFrameContainPoint(re.frame, networkAbilityRow.hoverX, networkAbilityRow.hoverY) 58 ) { 59 NetworkAbilityMonitorStruct.hoverNetworkAbilityStruct = re; 60 find = true; 61 } 62 } 63 if (!find && networkAbilityRow.isHover) { 64 NetworkAbilityMonitorStruct.hoverNetworkAbilityStruct = undefined; 65 } 66 req.context.closePath(); 67 let textMetrics = req.context.measureText(req.maxNetworkRateName); 68 req.context.globalAlpha = 0.8; 69 req.context.fillStyle = '#f0f0f0'; 70 req.context.fillRect(0, 5, textMetrics.width + 8, 18); 71 req.context.globalAlpha = 1; 72 req.context.fillStyle = '#333'; 73 req.context.textBaseline = 'middle'; 74 req.context.fillText(req.maxNetworkRateName, 4, 5 + 9); 75 } 76 77 render(req: RequestMessage, list: Array<any>, filter: Array<any>): void {} 78} 79 80export class NetworkAbilityMonitorStruct extends BaseStruct { 81 static maxNetworkRate: number = 0; 82 static maxNetworkRateName: string = '0 KB/S'; 83 static hoverNetworkAbilityStruct: NetworkAbilityMonitorStruct | undefined; 84 static selectNetworkAbilityStruct: NetworkAbilityMonitorStruct | undefined; 85 value: number | undefined; 86 startNS: number | undefined; 87 dur: number | undefined; 88 89 static draw( 90 networkAbilityContext2D: CanvasRenderingContext2D, 91 networkAbilityData: NetworkAbilityMonitorStruct, 92 maxNetworkRate: number, 93 isHover: boolean 94 ): void { 95 if (networkAbilityData.frame) { 96 let width = networkAbilityData.frame.width || 0; 97 let index = 2; 98 networkAbilityContext2D.fillStyle = ColorUtils.colorForTid(index); 99 networkAbilityContext2D.strokeStyle = ColorUtils.colorForTid(index); 100 let drawHeight: number = Math.floor( 101 ((networkAbilityData.value || 0) * (networkAbilityData.frame.height || 0) * 1.0) / maxNetworkRate 102 ); 103 let y = networkAbilityData.frame.y + networkAbilityData.frame.height - drawHeight + 4; 104 if (networkAbilityData.startNS === NetworkAbilityMonitorStruct.hoverNetworkAbilityStruct?.startNS && isHover) { 105 networkAbilityContext2D.lineWidth = 1; 106 networkAbilityContext2D.globalAlpha = 0.6; 107 networkAbilityContext2D.fillRect(networkAbilityData.frame.x, y, width, drawHeight); 108 networkAbilityContext2D.beginPath(); 109 networkAbilityContext2D.arc(networkAbilityData.frame.x, y, 3, 0, 2 * Math.PI, true); 110 networkAbilityContext2D.fill(); 111 networkAbilityContext2D.globalAlpha = 1.0; 112 networkAbilityContext2D.stroke(); 113 networkAbilityContext2D.beginPath(); 114 networkAbilityContext2D.moveTo(networkAbilityData.frame.x + 3, y); 115 networkAbilityContext2D.lineWidth = 3; 116 networkAbilityContext2D.lineTo(networkAbilityData.frame.x + width, y); 117 networkAbilityContext2D.stroke(); 118 } else { 119 networkAbilityContext2D.globalAlpha = 0.6; 120 networkAbilityContext2D.lineWidth = 1; 121 let drawHeight: number = Math.floor( 122 ((networkAbilityData.value || 0) * (networkAbilityData.frame.height || 0)) / maxNetworkRate 123 ); 124 networkAbilityContext2D.fillRect(networkAbilityData.frame.x, y, width, drawHeight); 125 } 126 } 127 networkAbilityContext2D.globalAlpha = 1.0; 128 networkAbilityContext2D.lineWidth = 1; 129 } 130} 131