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