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 SdkSliceRender extends Render { 29 render(req: RequestMessage, list: Array<any>, filter: Array<any>) { 30 if (req.lazyRefresh) { 31 this.sdkSlice(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, req.useCache || !req.range.refresh); 32 } else { 33 if (!req.useCache) { 34 this.sdkSlice(list, filter, req.startNS, req.endNS, req.totalNS, req.frame, false); 35 } 36 } 37 if (req.canvas) { 38 req.context.clearRect(0, 0, req.canvas.width, req.canvas.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 SdkSliceStruct.maxSdkSlice = req.params.maxSdkSlice; 45 SdkSliceStruct.maxSdkSliceName = req.params.maxSdkSliceName; 46 drawLines(req.context, req.xs, req.frame.height, req.lineColor) 47 SdkSliceStruct.hoverSdkSliceStruct = 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 SdkSliceStruct.hoverSdkSliceStruct = re; 52 break; 53 } 54 } 55 } 56 SdkSliceStruct.selectSdkSliceStruct = req.params.selectSdkSliceStruct; 57 for (let re of filter) { 58 SdkSliceStruct.draw(req.context, re) 59 } 60 drawSelection(req.context, req.params); 61 req.context.closePath(); 62 req.context.globalAlpha = 0.8 63 req.context.fillStyle = "#f0f0f0" 64 req.context.globalAlpha = 1 65 req.context.fillStyle = "#333" 66 req.context.textBaseline = "middle" 67 drawWakeUp(req.context, req.wakeupBean, req.startNS, req.endNS, req.totalNS, req.frame); 68 drawFlagLine(req.context, req.flagMoveInfo, req.flagSelectedInfo, req.startNS, req.endNS, req.totalNS, req.frame, req.slicesTime); 69 } 70 // @ts-ignore 71 self.postMessage({ 72 id: req.id, 73 type: req.type, 74 results: req.canvas ? undefined : filter, 75 hover: SdkSliceStruct.hoverSdkSliceStruct 76 }); 77 } 78 79 sdkSlice(list: Array<any>, res: Array<any>, startNS: number, endNS: number, totalNS: number, frame: any, use: boolean) { 80 if (use && res.length > 0) { 81 for (let index = 0; index < res.length; index++) { 82 let item = res[index]; 83 if ((item.end_ts || 0) > (startNS || 0) && (item.start_ts || 0) < (endNS || 0)) { 84 SdkSliceStruct.setSdkSliceFrame(res[index], 5, startNS || 0, endNS || 0, totalNS || 0, frame) 85 } else { 86 res[index].frame = null; 87 } 88 } 89 return; 90 } 91 res.length = 0; 92 if (list) { 93 for (let index = 0; index < list.length; index++) { 94 let item = list[index]; 95 if ((item.end_ts || 0) > (startNS || 0) && (item.start_ts || 0) < (endNS || 0)) { 96 SdkSliceStruct.setSdkSliceFrame(list[index], 5, startNS || 0, endNS || 0, totalNS || 0, frame) 97 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))) { 98 99 } else { 100 res.push(item) 101 } 102 } 103 } 104 } 105 } 106} 107 108export class SdkSliceStruct extends BaseStruct { 109 static maxSdkSlice: number = 0 110 static maxSdkSliceName: string = "" 111 static hoverSdkSliceStruct: SdkSliceStruct | undefined; 112 static selectSdkSliceStruct: SdkSliceStruct | undefined; 113 114 start_ts: number | undefined 115 end_ts: number | undefined 116 117 value: number | undefined 118 slice_message: string | undefined 119 120 static draw(ctx: CanvasRenderingContext2D, data: SdkSliceStruct) { 121 if (data.frame) { 122 let width = data.frame.width || 0; 123 let index = 4; 124 ctx.fillStyle = "#6DC0DC" 125 ctx.strokeStyle = "#6DC0DC" 126 if (data.start_ts === SdkSliceStruct.hoverSdkSliceStruct?.start_ts) { 127 ctx.lineWidth = 1; 128 ctx.fillRect(data.frame.x, data.frame.y + 4, width, data.frame.height) 129 ctx.beginPath() 130 ctx.arc(data.frame.x, data.frame.y + 4, 3, 0, 2 * Math.PI, true) 131 ctx.fill() 132 ctx.globalAlpha = 1.0; 133 ctx.stroke(); 134 ctx.beginPath() 135 ctx.moveTo(data.frame.x + 3, data.frame.y + 4); 136 ctx.lineWidth = 3; 137 ctx.lineTo(data.frame.x + width, data.frame.y + 4) 138 ctx.stroke(); 139 } else { 140 ctx.lineWidth = 1; 141 ctx.fillRect(data.frame.x, data.frame.y + 4, width, data.frame.height) 142 } 143 } 144 } 145 146 static setSdkSliceFrame(node: any, padding: number, startNS: number, endNS: number, totalNS: number, frame: any) { 147 let startPointX: number, endPointX: number 148 149 if ((node.start_ts || 0) < startNS) { 150 startPointX = 0 151 } else { 152 startPointX = ns2x((node.start_ts || 0), startNS, endNS, totalNS, frame); 153 } 154 if ((node.end_ts || 0) > endNS) { 155 endPointX = frame.width; 156 } else { 157 endPointX = ns2x((node.end_ts || 0), startNS, endNS, totalNS, frame); 158 } 159 let frameWidth: number = endPointX - startPointX <= 1 ? 1 : endPointX - startPointX; 160 if (!node.frame) { 161 node.frame = {}; 162 } 163 node.frame.x = Math.floor(startPointX); 164 node.frame.y = frame.y + padding; 165 node.frame.width = Math.ceil(frameWidth); 166 node.frame.height = Math.floor(frame.height - padding * 2); 167 } 168 169} 170