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 {Graph} from "./Graph.js"; 17import {Rect} from "./Rect.js"; 18import {TimeRange} from "./RangeRuler.js"; 19import {Flag} from "./Flag.js"; 20import {LitTabs} from "../../../../base-ui/tabs/lit-tabs.js"; 21import {TraceSheet} from "../base/TraceSheet.js"; 22 23export class SportRuler extends Graph { 24 public static rulerFlagObj: Flag | null = null; 25 public flagListIdx: number | null = null 26 public obj = [{x: 3}, {x: 2}]; 27 public flagList: Array<Flag> = []; 28 29 lineColor: string | null = null; 30 private rangeFlag = new Flag(0, 0, 0, 0, 0); 31 private ruler_w = 1022; 32 33 constructor(canvas: HTMLCanvasElement | undefined | null, c: CanvasRenderingContext2D, frame: Rect) { 34 super(canvas, c, frame) 35 } 36 37 private _range: TimeRange = {} as TimeRange; 38 39 get range(): TimeRange { 40 return this._range; 41 } 42 43 set range(value: TimeRange) { 44 this._range = value; 45 this.draw() 46 } 47 48 modifyFlagList(type: string, flag: any = {}) { 49 if (type == "amend") { 50 console.log(this.flagListIdx); 51 console.log(flag.text); 52 if (flag.text && this.flagListIdx !== null) { 53 this.flagList[this.flagListIdx].text = flag.text 54 } 55 if (flag.color && this.flagListIdx !== null) { 56 this.flagList[this.flagListIdx].color = flag.color 57 } 58 } else if (type == "remove") { 59 if (this.flagListIdx !== null) { 60 this.flagList.splice(this.flagListIdx, 1) 61 } 62 } 63 this.draw() 64 } 65 66 draw(): void { 67 this.ruler_w = this.canvas!.offsetWidth 68 this.c.clearRect(this.frame.x, this.frame.y, this.frame.width, this.frame.height) 69 this.c.beginPath(); 70 this.lineColor = window.getComputedStyle(this.canvas!, null).getPropertyValue("color"); 71 this.c.strokeStyle = this.lineColor // "#dadada" 72 this.c.lineWidth = 1; 73 this.c.moveTo(this.frame.x, this.frame.y) 74 this.c.lineTo(this.frame.x + this.frame.width, this.frame.y) 75 this.c.stroke(); 76 this.c.closePath(); 77 this.c.beginPath(); 78 this.c.lineWidth = 3; 79 this.c.strokeStyle = "#999999" 80 this.c.moveTo(this.frame.x, this.frame.y) 81 this.c.lineTo(this.frame.x, this.frame.y + this.frame.height) 82 this.c.stroke(); 83 this.c.closePath(); 84 this.c.beginPath(); 85 this.c.lineWidth = 1; 86 this.c.strokeStyle = this.lineColor; // "#999999" 87 this.c.fillStyle = '#999999' 88 this.c.font = '8px sans-serif' 89 this.range.xs?.forEach((it, i) => { 90 this.c.moveTo(it, this.frame.y) 91 this.c.lineTo(it, this.frame.y + this.frame.height) 92 this.c.fillText(`+${this.range.xsTxt[i]}`, it + 3, this.frame.y + 12) 93 }) 94 95 this.c.stroke(); 96 this.c.closePath(); 97 } 98 99 drawTheFlag(x: number, color: string = "#999999", isFill: boolean = false, text: string = "") { 100 this.c.beginPath(); 101 this.c.fillStyle = color; 102 this.c.strokeStyle = color; 103 this.c.moveTo(x, 125); 104 this.c.lineTo(x + 10, 125); 105 this.c.lineTo(x + 10, 127); 106 this.c.lineTo(x + 18, 127); 107 this.c.lineTo(x + 18, 137); 108 this.c.lineTo(x + 10, 137); 109 this.c.lineTo(x + 10, 135); 110 this.c.lineTo(x + 2, 135); 111 this.c.lineTo(x + 2, 143); 112 this.c.lineTo(x, 143); 113 this.c.closePath() 114 if (isFill) { 115 this.c.fill() 116 } 117 this.c.stroke(); 118 119 120 if (text !== "") { 121 this.c.font = "10px Microsoft YaHei" 122 const {width} = this.c.measureText(text); 123 this.c.fillStyle = 'rgba(255, 255, 255, 0.8)'; // 124 this.c.fillRect(x + 21, 132, width + 4, 12); 125 this.c.fillStyle = "black"; 126 this.c.fillText(text, x + 23, 142); 127 this.c.stroke(); 128 } 129 } 130 131 randomRgbColor() { 132 const letters = '0123456789ABCDEF'; 133 let color = '#'; 134 for (let i = 0; i < 6; i++) { 135 color += letters[Math.floor(Math.random() * 16)] 136 } 137 return color; 138 } 139 140 mouseUp(ev: MouseEvent) { 141 let search: HTMLDivElement | undefined | null = document.querySelector("sp-application")?.shadowRoot?.querySelector("div.search-container") 142 let tabs: LitTabs | undefined | null = (ev?.target as any)?.shadowRoot?.querySelector("sp-system-trace")?.shadowRoot?.querySelector("trace-sheet")?.shadowRoot?.querySelector("#tabs") 143 if (!tabs) { 144 return; 145 } 146 let onResetSelected = ev.offsetY > search!.offsetHeight && ev.offsetY < (window.innerHeight - tabs!.offsetHeight) 147 if (onResetSelected) { 148 this.flagList.find((flagObj: Flag) => { 149 if (flagObj.selected) { 150 flagObj.selected = false; 151 return true; 152 } 153 }) 154 SportRuler.rulerFlagObj = null; 155 156 let x = ev.offsetX - (this.canvas?.offsetLeft || 0) 157 let y = ev.offsetY - (this.canvas?.offsetTop || 0) 158 if (y >= 123 && y < 142) { 159 let onFlagRange = this.flagList.findIndex((flagObj: Flag, idx) => { 160 let flag_x = Math.round(this.ruler_w * (flagObj.time - this.range.startNS) / (this.range.endNS - this.range.startNS)); 161 if (x >= flag_x && x <= flag_x + 18) { 162 flagObj.selected = true; 163 return true 164 } 165 }); 166 if (onFlagRange == -1) { 167 let flagAtRulerTime = Math.round((this.range.endNS - this.range.startNS) * x / this.ruler_w) 168 if (flagAtRulerTime > 0 && (this.range.startNS + flagAtRulerTime) < this.range.endNS) { 169 } 170 } 171 } 172 if (SportRuler.rulerFlagObj == null) { 173 document.dispatchEvent(new CustomEvent('flag-draw')); 174 } 175 } 176 if (onResetSelected) { 177 this.draw() 178 } 179 } 180 181 onFlagRangeEvent(flagObj: Flag, idx: number) { 182 let traceSheet: TraceSheet | undefined | null = document.querySelector("sp-application")?.shadowRoot?.querySelector("sp-system-trace")?.shadowRoot?.querySelector("trace-sheet") 183 SportRuler.rulerFlagObj = flagObj; 184 this.flagListIdx = idx; 185 186 traceSheet?.displayFlagData(flagObj, idx) 187 document.dispatchEvent(new CustomEvent('flag-draw', {detail: {time: flagObj.time}})); 188 } 189 190 mouseMove(ev: MouseEvent) { 191 let x = ev.offsetX - (this.canvas?.offsetLeft || 0) 192 let y = ev.offsetY - (this.canvas?.offsetTop || 0) 193 if (y >= 50 && y < 200) { 194 this.draw() 195 if (y >= 123 && y < 142 && x > 0) { 196 let onFlagRange = this.flagList.findIndex((flagObj: Flag) => { 197 let flag_x = Math.round(this.ruler_w * (flagObj.time - this.range.startNS) / (this.range.endNS - this.range.startNS)); 198 return (x >= flag_x && x <= flag_x + 18) 199 }); 200 if (onFlagRange == -1) { 201 document.dispatchEvent(new CustomEvent('flag-draw', {detail: {x: x}})); 202 } else { 203 document.dispatchEvent(new CustomEvent('flag-draw', {detail: {x: null}})); 204 } 205 } else { 206 document.dispatchEvent(new CustomEvent('flag-draw', {detail: {x: null}})); 207 } 208 } 209 } 210} 211