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 { FrameSpacingStruct } from '../../../../database/ui-worker/ProcedureWorkerFrameSpacing'; 18import { type SelectionParam } from '../../../../bean/BoxSelection'; 19import { type LitTable } from '../../../../../base-ui/table/lit-table'; 20import { resizeObserver } from '../SheetUtils'; 21import { Utils } from '../../base/Utils'; 22 23@element('tabpane-frames-spacing') 24export class TabFrameSpacing extends BaseElement { 25 private range: HTMLLabelElement | null | undefined; 26 private framesTbl: LitTable | null | undefined; 27 private framesSource: Array<FrameSpacingTableStruct> = []; 28 29 set data(frameSpacingParam: SelectionParam) { 30 let secondToMillisecond: number = 1000_000.0; 31 let fixedNumber: number = 5; 32 this.range!.textContent = `Selected range: ${parseFloat( 33 ((frameSpacingParam.rightNs - frameSpacingParam.leftNs) / secondToMillisecond).toFixed(fixedNumber) 34 )} ms`; 35 let tableList: FrameSpacingTableStruct[] = []; 36 for (let index = 0; index < frameSpacingParam.frameSpacing.length; index++) { 37 this.constructTable(frameSpacingParam.frameSpacing[index], tableList); 38 } 39 this.framesSource = tableList; 40 this.framesTbl!.recycleDataSource = tableList; 41 } 42 43 connectedCallback(): void { 44 super.connectedCallback(); 45 resizeObserver(this.parentElement!, this.framesTbl!); 46 } 47 48 setFrameSpacingData(data: FrameSpacingStruct): void { 49 let tableList: FrameSpacingTableStruct[] = []; 50 this.range!.textContent = ''; 51 this.constructTable(data, tableList); 52 this.framesSource = tableList; 53 this.framesTbl!.recycleDataSource = tableList; 54 } 55 56 private constructTable(structValue: FrameSpacingStruct, tableList: FrameSpacingTableStruct[]): void { 57 // @ts-ignore 58 let startNS = window.recordStartNS; 59 tableList.push(this.getSplitSpacingData(structValue, startNS, 'W')); 60 tableList.push(this.getSplitSpacingData(structValue, startNS, 'H')); 61 tableList.push(this.getSplitSpacingData(structValue, startNS, 'X')); 62 tableList.push(this.getSplitSpacingData(structValue, startNS, 'Y')); 63 } 64 65 getSplitSpacingData(structValue: FrameSpacingStruct, startNS: number, propertyStr: string): FrameSpacingTableStruct { 66 let frameSpacing: FrameSpacingTableStruct = new FrameSpacingTableStruct(); 67 let secondToNanosecond: number = 1000_000_000; 68 frameSpacing.index = structValue.id; 69 frameSpacing.timestamp = Utils.getTimeString(Number(structValue.currentTs)); 70 frameSpacing.property = propertyStr; 71 switch (propertyStr) { 72 case 'W': 73 frameSpacing.value2 = structValue.currentFrameWidth; 74 frameSpacing.value1 = structValue.preFrameWidth; 75 frameSpacing.screen = structValue.physicalWidth; 76 break; 77 case 'H': 78 frameSpacing.value2 = structValue.currentFrameHeight; 79 frameSpacing.value1 = structValue.preFrameHeight; 80 frameSpacing.screen = structValue.physicalHeight; 81 break; 82 case 'X': 83 frameSpacing.value2 = structValue.x; 84 frameSpacing.value1 = structValue.preX; 85 frameSpacing.screen = 0; 86 break; 87 case 'Y': 88 frameSpacing.value2 = structValue.y; 89 frameSpacing.value1 = structValue.preY; 90 frameSpacing.screen = 0; 91 break; 92 } 93 frameSpacing.currentTs = ((structValue.currentTs + startNS) / secondToNanosecond).toString(); 94 frameSpacing.preTs = (((structValue.preTs || 0) + startNS) / secondToNanosecond).toString(); 95 if (structValue.preTs === 0) { 96 frameSpacing.preTs = '-'; 97 } 98 frameSpacing.frameSpacingResult = structValue.frameSpacingResult; 99 return frameSpacing; 100 } 101 102 initElements(): void { 103 this.framesTbl = this.shadowRoot?.querySelector<LitTable>('#tb-frame-spacing'); 104 this.range = this.shadowRoot?.querySelector('#frames-spacing-time-range'); 105 this.framesTbl!.addEventListener('column-click', (evt) => { 106 // @ts-ignore 107 this.sortByColumn(evt.detail); 108 }); 109 } 110 111 sortByColumn(framesDetail: { sort: number; key: string }): void { 112 let compare = function (property: string, sort: number, type: string) { 113 return function ( 114 frameSpacingLeftData: FrameSpacingTableStruct, 115 frameSpacingRightData: FrameSpacingTableStruct 116 ): number { 117 let firstSortNumber: number = -1; 118 let SecondSortNumber: number = 1; 119 let thirdSortNumber: number = 2; 120 // @ts-ignore 121 let rightSpacingData = frameSpacingRightData[property]; 122 // @ts-ignore 123 let leftSpacingData = frameSpacingLeftData[property]; 124 if (type === 'number') { 125 return sort === thirdSortNumber 126 ? parseFloat(rightSpacingData) - parseFloat(leftSpacingData) 127 : parseFloat(leftSpacingData) - parseFloat(rightSpacingData); 128 } else { 129 if (rightSpacingData > leftSpacingData) { 130 return sort === thirdSortNumber ? SecondSortNumber : firstSortNumber; 131 } else { 132 if (rightSpacingData === leftSpacingData) { 133 return 0; 134 } else { 135 return sort === thirdSortNumber ? firstSortNumber : SecondSortNumber; 136 } 137 } 138 } 139 }; 140 }; 141 if (framesDetail.key === 'property') { 142 this.framesSource.sort(compare(framesDetail.key, framesDetail.sort, 'string')); 143 } else { 144 this.framesSource.sort(compare(framesDetail.key, framesDetail.sort, 'number')); 145 } 146 this.framesTbl!.recycleDataSource = this.framesSource; 147 } 148 149 initHtml(): string { 150 return ` 151 <style> 152 :host{ 153 display: flex; 154 flex-direction: column; 155 padding: 10px 10px 0 10px; 156 height: calc(100% - 10px - 31px); 157 } 158 .frames-label{ 159 height: 20px; 160 text-align: end; 161 width: 100%; 162 font-size: 10pt; 163 margin-bottom: 5px; 164 } 165 </style> 166 <label id="frames-spacing-time-range" class="frames-label">Selected range:0.0 ms</label> 167 <lit-table id="tb-frame-spacing" style="height: auto"> 168 <lit-table-column title="Timestamp" width="1fr" data-index="timestamp" key="timestamp" 169 align="flex-start" order> 170 </lit-table-column> 171 <lit-table-column title="Index" width="1fr" data-index="index" key="index" align="flex-start" order> 172 </lit-table-column> 173 <lit-table-column title="property" width="1fr" data-index="property" key="property" 174 align="flex-start" order> 175 </lit-table-column> 176 <lit-table-column title="Value2" width="1fr" data-index="value2" key="value2" align="flex-start" order> 177 </lit-table-column> 178 <lit-table-column title="Value1" width="1fr" data-index="value1" key="value1" align="flex-start" order> 179 </lit-table-column> 180 <lit-table-column title="Screen" width="1fr" data-index="screen" key="screen" align="flex-start" order> 181 </lit-table-column> 182 <lit-table-column title="T2(s)" width="1fr" data-index="currentTs" key="currentTs" align="flex-start" order> 183 </lit-table-column> 184 <lit-table-column title="T1(s)" width="1fr" data-index="preTs" key="preTs" align="flex-start" order> 185 </lit-table-column> 186 <lit-table-column title="result" width="1fr" data-index="frameSpacingResult" 187 key="frameSpacingResult" align="flex-start" order> 188 </lit-table-column> 189 </lit-table> 190 `; 191 } 192} 193 194export class FrameSpacingTableStruct { 195 index: number | undefined; 196 timestamp: string | undefined; 197 property: string | undefined; 198 value2: number | undefined; 199 value1: number | undefined; 200 screen: number | undefined; 201 currentTs: string | undefined; 202 preTs: string | undefined; 203 frameSpacingResult: number | undefined; 204} 205