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 { BaseElement, element } from '../../../../base-ui/BaseElement'; 17import { LitTable } from '../../../../base-ui/table/lit-table'; 18import { MarkStruct } from '../../../bean/MarkStruct'; 19import { SpSystemTrace } from '../../SpSystemTrace'; 20import { getTimeString } from '../sheet/TabPaneCurrentSelection'; 21import { Flag } from './Flag'; 22 23@element('tabpane-flag') 24export class TabPaneFlag extends BaseElement { 25 private flag: Flag | null = null; 26 private flagList: Array<Flag> = []; 27 private systemTrace: SpSystemTrace | undefined | null; 28 private tableDataSource: Array<MarkStruct | any> = []; 29 private panelTable: LitTable | undefined | null; 30 31 initElements(): void { 32 this.systemTrace = document 33 .querySelector('body > sp-application') 34 ?.shadowRoot!.querySelector<SpSystemTrace>('#sp-system-trace'); 35 this.panelTable = this.shadowRoot!.querySelector<LitTable>('.notes-editor-panel'); 36 this.panelTable!.addEventListener('row-click', (evt: any) => { 37 if (evt.detail.data.startTime === undefined) { 38 return; 39 } 40 this.flagList = this.systemTrace?.timerShaftEL!.sportRuler?.flagList || []; 41 // 点击表格某一行后，背景变色 42 // @ts-ignore 43 let data = evt.detail.data; 44 this.systemTrace!.flagList = this.flagList || []; 45 // 页面上对应的flag变为实心有旗杆 46 this.flagList.forEach((flag, index) => { 47 if (data.startTime === flag.time) { 48 flag.selected = true; 49 this.setTableSelection(index + 1); 50 } else { 51 flag.selected = false; 52 } 53 this.systemTrace?.timerShaftEL!.sportRuler!.drawTriangle(flag.time, flag.type); 54 }); 55 }); 56 // 当鼠标移出panel时重新加载备注信息 57 this.systemTrace?.shadowRoot?.querySelector('trace-sheet')?.addEventListener( 58 'mouseout', 59 (event: any) => { 60 if (this.flagList.length === 0) { 61 return; 62 } 63 let tr = this.panelTable!.shadowRoot!.querySelectorAll('.tr') as NodeListOf<HTMLDivElement>; 64 // 第一个tr是移除全部，所以跳过，从第二个tr开始，和this.slicestimeList数组的第一个对应……，所以i从1开始，在this.slicestimeList数组中取值时用i-1 65 for (let i = 1; i < tr.length; i++) { 66 tr[i].querySelector<HTMLInputElement>('#text-input')!.value = this.flagList[i - 1].text; 67 } 68 event.stopPropagation(); 69 }, 70 { capture: true } 71 ); 72 } 73 74 public setCurrentFlag(flag: Flag): void { 75 this.flagList = this.systemTrace?.timerShaftEL!.sportRuler?.flagList || []; 76 this.flag = flag; 77 // 判断当前传入的旗子是否已经存在 78 let findFlag = this.flagList.find((it) => it.time === flag.time); 79 // 如果this.flagList为空，或者没有在同一位置绘制过，就将当前的flag放进数组 80 if (!findFlag || this.flagList.length === 0) { 81 this.flagList!.push(this.flag); 82 } 83 this.setTableData(); 84 } 85 86 /** 87 * 根据this.flagList设置表格数据 88 */ 89 private setTableData(): void { 90 this.flagList = this.systemTrace?.timerShaftEL!.sportRuler?.flagList || []; 91 this.tableDataSource = []; 92 // 按照时间进行排序，保证泳道图上的旗子和表格的顺序一致 93 this.flagList.sort(function (a, b) { 94 return a.time - b.time; 95 }); 96 97 for (let flag of this.flagList) { 98 let btn = document.createElement('button'); 99 btn.className = 'remove'; 100 let color = document.createElement('input'); 101 color.type = 'color'; 102 let text = document.createElement('input'); 103 text.type = 'text'; 104 color!.value = flag.color; 105 text!.value = flag.text; 106 let flagData = new MarkStruct(btn, color, text, getTimeString(flag.time), flag.time); 107 flag.selected === true ? (flagData.isSelected = true) : (flagData.isSelected = false); 108 this.systemTrace?.timerShaftEL!.sportRuler!.drawTriangle(flag.time, flag.type); 109 this.tableDataSource.push(flagData); 110 } 111 // 表格第一行只添加一个RemoveAll按钮 112 let removeAll = document.createElement('button'); 113 removeAll.className = 'removeAll'; 114 removeAll.innerHTML = 'RemoveAll'; 115 let flagData = new MarkStruct(removeAll); 116 this.tableDataSource.unshift(flagData); 117 118 // 当前点击了哪个旗子，就将对应的表格中的那行的背景变色 119 this.tableDataSource.forEach((data, index) => { 120 if (data.time === this.flag?.time) { 121 this.setTableSelection(index); 122 } 123 }); 124 this.panelTable!.recycleDataSource = this.tableDataSource; 125 this.eventHandler(); 126 this.systemTrace!.flagList = this.flagList || []; 127 } 128 129 /** 130 * 修改旗子颜色事件和移除旗子的事件处理 131 */ 132 private eventHandler(): void { 133 let tr = this.panelTable!.shadowRoot!.querySelectorAll('.tr') as NodeListOf<HTMLDivElement>; 134 tr[0].querySelector<HTMLInputElement>('#text-input')!.disabled = true; 135 tr[0].querySelector('.removeAll')!.addEventListener('click', () => { 136 this.systemTrace!.flagList = []; 137 let flagList = [...this.flagList]; 138 for (let i = 0; i < flagList.length; i++) { 139 flagList[i].hidden = true; 140 document.dispatchEvent(new CustomEvent('flag-change', { detail: flagList[i] })); 141 } 142 this.flagList = []; 143 return; 144 }); 145 146 // 更新备注信息 147 this.panelTable!.addEventListener('click', (event: any) => { 148 if (this.flagList.length === 0) { 149 return; 150 } 151 for (let i = 1; i < tr.length; i++) { 152 let inputValue = tr[i].querySelector<HTMLInputElement>('#text-input')!.value; 153 if (this.tableDataSource[i].startTime === this.flagList[i - 1].time) { 154 this.flagList[i - 1].text = inputValue; 155 document.dispatchEvent(new CustomEvent('flag-change', { detail: this.flagList[i - 1] })); 156 // 旗子颜色改变时，重绘泳道图 157 this.systemTrace?.refreshCanvas(true); 158 } 159 } 160 event.stopPropagation(); 161 }); 162 163 // 第一个tr是移除全部，所以跳过，从第二个tr开始，和this.flagList数组的第一个对应……，所以i从1开始，在this.flagList数组中取值时用i-1 164 for (let i = 1; i < tr.length; i++) { 165 tr[i].querySelector<HTMLInputElement>('#color-input')!.value = this.flagList[i - 1].color; 166 // 点击色块修改颜色 167 tr[i].querySelector<HTMLInputElement>('#color-input')?.addEventListener('change', (event: any) => { 168 if (this.tableDataSource[i].startTime === this.flagList[i - 1].time) { 169 this.flagList[i - 1].color = event?.target.value; 170 document.dispatchEvent(new CustomEvent('flag-change', { detail: this.flagList[i - 1] })); 171 // 旗子颜色改变时，重绘泳道图 172 this.systemTrace?.refreshCanvas(true); 173 } 174 event.stopPropagation(); 175 }); 176 // 修改备注 177 tr[i].querySelector<HTMLInputElement>('#text-input')!.value = this.flagList[i - 1].text; 178 tr[i].querySelector<HTMLInputElement>('#text-input')?.addEventListener('keyup', (event: any) => { 179 if (this.tableDataSource[i].startTime === this.flagList[i - 1].time && event.keyCode === '13') { 180 this.flagList[i - 1].text = event?.target.value; 181 document.dispatchEvent(new CustomEvent('flag-change', { detail: this.flagList[i - 1] })); 182 // 旗子颜色改变时，重绘泳道图 183 this.systemTrace?.refreshCanvas(true); 184 } 185 event.stopPropagation(); 186 }); 187 188 tr[i].querySelector<HTMLInputElement>('#text-input')?.addEventListener('blur', (event: any) => { 189 (window as any).flagInputFocus = false; 190 window.publish(window.SmartEvent.UI.KeyboardEnable, { 191 enable: true, 192 }); 193 if (this.tableDataSource[i].startTime === this.flagList[i - 1].time) { 194 this.flagList[i - 1].text = event?.target.value; 195 document.dispatchEvent(new CustomEvent('flag-change', { detail: this.flagList[i - 1] })); 196 // 旗子颜色改变时，重绘泳道图 197 this.systemTrace?.refreshCanvas(true); 198 } 199 event.stopPropagation(); 200 }); 201 202 tr[i].querySelector<HTMLInputElement>('#text-input')?.addEventListener('focus', (event: any) => { 203 (window as any).flagInputFocus = true; 204 window.publish(window.SmartEvent.UI.KeyboardEnable, { 205 enable: false, 206 }); 207 let tr = this.panelTable!.shadowRoot!.querySelectorAll('.tr') as NodeListOf<HTMLDivElement>; 208 // 第一个tr是移除全部，所以跳过，从第二个tr开始，和this.flagList数组的第一个对应……，所以i从1开始，在this.flagList数组中取值时用i-1 209 for (let i = 1; i < tr.length; i++) { 210 tr[i].querySelector<HTMLInputElement>('#text-input')!.value = this.flagList[i - 1].text; 211 } 212 }); 213 // 点击remove按钮移除 214 tr[i]!.querySelector('.remove')?.addEventListener('click', (event: any) => { 215 if (this.tableDataSource[i].startTime === this.flagList[i - 1].time) { 216 this.flagList[i - 1].hidden = true; 217 this.systemTrace!.flagList = this.flagList || []; 218 document.dispatchEvent(new CustomEvent('flag-change', { detail: this.flagList[i - 1] })); 219 // 移除时更新表格内容 220 this.setTableData(); 221 } 222 event.stopPropagation(); 223 }); 224 } 225 } 226 227 /** 228 * 修改表格指定行数的背景颜色 229 * @param line 要改变的表格行数 230 */ 231 public setTableSelection(line: any): void { 232 this.tableDataSource[line].isSelected = true; 233 this.panelTable?.clearAllSelection(this.tableDataSource[line]); 234 this.panelTable?.setCurrentSelection(this.tableDataSource[line]); 235 } 236 237 initHtml(): string { 238 return ` 239 <style> 240 :host{ 241 display: flex; 242 flex-direction: column; 243 padding: 10px 10px; 244 } 245 </style> 246 <lit-table class="notes-editor-panel" style="height: auto"> 247 <lit-table-column width="20%" data-index="startTimeStr" key="startTimeStr" align="flex-start" title="TimeStamp"> 248 </lit-table-column> 249 <lit-table-column width="10%" data-index="color" key="color" align="flex-start" title="Color"> 250 <template> 251 <div style='width:50px; height: 21px; position: relative;overflow: hidden;'> 252 <input type="color" id="color-input" style=' 253 background: var(--dark-background5,#FFFFFF); 254 padding: 0px; 255 border: none; 256 width: 60px; 257 height: 31px; 258 position: absolute; 259 top: -5px; 260 left: -5px;'/> 261 </div> 262 </template> 263 </lit-table-column> 264 <lit-table-column width="40%" data-index="text" key="text" align="flex-start" title="Remarks"> 265 <template> 266 <input type="text" id="text-input" style="width: 100%; border: none" /> 267 </template> 268 </lit-table-column> 269 <lit-table-column width="10%" data-index="operate" key="operate" align="flex-start" title="Operate"> 270 <template> 271 <button class="remove" style=' 272 background: var(--dark-border1,#262f3c); 273 color: white; 274 border-radius: 10px; 275 font-size: 10px; 276 height: 21px; 277 line-height: 21px; 278 min-width: 7em; 279 border: none; 280 cursor: pointer; 281 outline: inherit; 282 '>Remove</button> 283 </template> 284 </lit-table-column> 285 </lit-table> 286 `; 287 } 288} 289