From e47d1a525d54dd8927d71c5be1f59ca4f5409a82 Mon Sep 17 00:00:00 2001 From: zhangzepeng Date: Mon, 27 Nov 2023 14:38:06 +0800 Subject: [PATCH 1/5] =?UTF-8?q?1.memoryability=E6=96=B0=E5=A2=9EPMEM=5FACT?= =?UTF-8?q?IVE=5FPURG=E3=80=81PMEM=5FINACTIVE=5FPURG=E3=80=81PMEM=5FPINED?= =?UTF-8?q?=5FPURG=E6=9E=9A=E4=B8=BE=E9=85=8D=E7=BD=AE2.=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E6=94=B6=E8=97=8F=E6=B3=B3=E9=81=93=E6=BB=9A=E5=8A=A8=E8=BF=9E?= =?UTF-8?q?=E7=BA=BF=E9=94=99=E4=BD=8D3.HiSysEvent=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=E5=85=A8=E9=80=89domain=E6=97=B6eventName=E4=B8=8B=E6=8B=89?= =?UTF-8?q?=E6=98=BE=E7=A4=BA=E6=89=80=E6=9C=89=E7=9A=84event=E4=BA=8B?= =?UTF-8?q?=E4=BB=B6=E5=90=8D=E7=A7=B0,=E9=BB=98=E8=AE=A4=E5=85=A8?= =?UTF-8?q?=E9=80=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: zhangzepeng --- ide/src/base-ui/slider/LitSlider.ts | 2 +- ide/src/base-ui/table/LitPageTable.ts | 2 +- ide/src/base-ui/table/lit-table.ts | 2 +- ide/src/base-ui/tabs/lit-tabs.ts | 16 +- ide/src/trace/SpApplication.ts | 8 +- ide/src/trace/bean/BoxSelection.ts | 9 - ide/src/trace/bean/MarkStruct.ts | 3 - ide/src/trace/component/SpFlags.ts | 4 +- ide/src/trace/component/SpHelp.ts | 725 ++++++++---------- ide/src/trace/component/SpKeyboard.ts | 4 +- ide/src/trace/component/SpRecordTrace.ts | 6 +- ide/src/trace/component/SpSystemTrace.ts | 261 +------ ide/src/trace/component/StackBar.ts | 14 +- .../Top20FrequencyThread.ts | 4 +- .../trace/component/setting/SpHisysEvent.ts | 20 +- .../component/trace/base/CustomThemeColor.ts | 2 +- .../trace/component/trace/base/RangeSelect.ts | 15 - .../trace/component/trace/base/TraceRow.ts | 36 +- .../trace/base/TraceRowRecyclerView.ts | 16 +- .../trace/component/trace/base/TraceSheet.ts | 10 +- .../trace/component/trace/search/Search.ts | 66 +- .../component/trace/sheet/TabPaneCurrent.ts | 162 +--- .../trace/sheet/ark-ts/TabPaneSummary.ts | 6 +- .../sheet/frequsage/TabPaneFreqDataCut.ts | 224 +++--- .../trace/sheet/frequsage/TabPaneFreqUsage.ts | 12 +- .../trace/sheet/hilog/TabPaneHiLogs.ts | 2 +- .../sheet/hisysevent/TabPaneHisysEvents.ts | 6 +- .../trace/sheet/irq/TabPaneIrqCounter.ts | 14 +- .../sheet/process/TabPaneThreadStates.ts | 145 +--- .../trace/sheet/process/TabPaneThreadUsage.ts | 89 +-- .../trace/component/trace/timer-shaft/Flag.ts | 2 - .../component/trace/timer-shaft/SportRuler.ts | 50 +- .../trace/timer-shaft/TabPaneFlag.ts | 81 +- ide/src/trace/database/SqlLite.ts | 159 +--- .../ui-worker/ProcedureWorkerCommon.ts | 139 +--- ide/src/trace/grpc/ProfilerController.ts | 2 +- .../trace/base/TraceRowRecyclerView.test.ts | 2 +- .../trace/sheet/hilog/TabPaneHilogs.test.ts | 6 +- .../trace/grpc/ProfilerController.test.ts | 4 +- trace_streamer/.clang-format | 2 +- .../parser/ebpf_parser/ebpf_data_reader.cpp | 4 +- .../test/unittest/animation_filter_test.cpp | 1 + 42 files changed, 693 insertions(+), 1644 deletions(-) diff --git a/ide/src/base-ui/slider/LitSlider.ts b/ide/src/base-ui/slider/LitSlider.ts index c608bec99..eeb8b4287 100644 --- a/ide/src/base-ui/slider/LitSlider.ts +++ b/ide/src/base-ui/slider/LitSlider.ts @@ -178,7 +178,7 @@ export class LitSlider extends BaseElement { pointer-events:none; } /* - * Currently the entire sliding vessel is controlled + * Currently the entire sliding container is controlled */ #slider-con{ cursor:pointer; diff --git a/ide/src/base-ui/table/LitPageTable.ts b/ide/src/base-ui/table/LitPageTable.ts index 0e78442e8..5bf5f914b 100644 --- a/ide/src/base-ui/table/LitPageTable.ts +++ b/ide/src/base-ui/table/LitPageTable.ts @@ -385,7 +385,7 @@ export class LitPageTable extends BaseElement { height: 15px; } .mouse-select{ - background-color: var(--dark-background6,#a2c4ed); + background-color: var(--dark-background6,#DEEDFF); } .mouse-in{ background-color: var(--dark-background6,#DEEDFF); diff --git a/ide/src/base-ui/table/lit-table.ts b/ide/src/base-ui/table/lit-table.ts index c239c771a..a85f196ed 100644 --- a/ide/src/base-ui/table/lit-table.ts +++ b/ide/src/base-ui/table/lit-table.ts @@ -255,7 +255,7 @@ export class LitTable extends HTMLElement { background: var(--dark-background1,#f5f5f5) } .mouse-select{ - background-color: var(--dark-background6,#a2c4ed); + background-color: var(--dark-background6,#DEEDFF); } .mouse-in{ background-color: var(--dark-background6,#DEEDFF); diff --git a/ide/src/base-ui/tabs/lit-tabs.ts b/ide/src/base-ui/tabs/lit-tabs.ts index 34ba64b3c..e4ff18d94 100644 --- a/ide/src/base-ui/tabs/lit-tabs.ts +++ b/ide/src/base-ui/tabs/lit-tabs.ts @@ -95,8 +95,8 @@ export class LitTabs extends HTMLElement { position:absolute; } - :host(:not([position])) .tab-nav-vessel, - :host([position^='top']) .tab-nav-vessel{ + :host(:not([position])) .tab-nav-container, + :host([position^='top']) .tab-nav-container{ display: flex; /*position: relative;*/ /*flex-direction: column;*/ @@ -185,7 +185,7 @@ export class LitTabs extends HTMLElement { transform: translateY(-100%); transition: all 0.3s; } - :host([position^='bottom']) .tab-nav-vessel{ + :host([position^='bottom']) .tab-nav-container{ display: flex; position: relative; flex-direction: column; @@ -252,7 +252,7 @@ export class LitTabs extends HTMLElement { transform: translateX(100%); transition: all 0.3s; } - :host([position^='left']) .tab-nav-vessel{ + :host([position^='left']) .tab-nav-container{ display: flex; position: relative; flex-direction: row; @@ -325,7 +325,7 @@ export class LitTabs extends HTMLElement { transform: translateX(-100%); transition: all 0.3s; } - :host([position^='right']) .tab-nav-vessel{ + :host([position^='right']) .tab-nav-container{ display: flex; position: relative; flex-direction: row-reverse; @@ -384,7 +384,7 @@ export class LitTabs extends HTMLElement { } - .tab-nav-vessel::-webkit-scrollbar { + .tab-nav-container::-webkit-scrollbar { display: none; } @@ -411,7 +411,7 @@ export class LitTabs extends HTMLElement {
-
+
@@ -649,7 +649,7 @@ export class LitTabs extends HTMLElement { new ResizeObserver((entries) => { let filling = this.shadowRoot!.querySelector('#tab-filling'); - this.shadowRoot!.querySelector('.tab-nav-vessel')!.style.height = filling!.offsetWidth + 'px'; + this.shadowRoot!.querySelector('.tab-nav-container')!.style.height = filling!.offsetWidth + 'px'; }).observe(this.shadowRoot!.querySelector('#tab-filling')!); } diff --git a/ide/src/trace/SpApplication.ts b/ide/src/trace/SpApplication.ts index 3c4e3cae5..8ad2fe852 100644 --- a/ide/src/trace/SpApplication.ts +++ b/ide/src/trace/SpApplication.ts @@ -260,7 +260,7 @@ export class SpApplication extends BaseElement { box-shadow: 4px 0px 20px rgba(0,0,0,0.05); z-index: 2000; } - .search-vessel{ + .search-container{ z-index: 10; position: relative; cursor: default; @@ -272,10 +272,10 @@ export class SpApplication extends BaseElement { left: 0; right: 0; } - :host(:not([search])) .search-vessel { + :host(:not([search])) .search-container { display: none; } - :host(:not([search])) .search-vessel .search { + :host(:not([search])) .search-container .search { background-color: var(--dark-background5,#F6F6F6); } .search{ @@ -507,7 +507,7 @@ export class SpApplication extends BaseElement { -
+
+

Feature flags

@@ -40,7 +40,7 @@ export class SpFlags extends BaseElement { private initHtmlStyle(): string { return ` -
+
diff --git a/ide/src/trace/component/SpKeyboard.ts b/ide/src/trace/component/SpKeyboard.ts index 45a30f51a..40c05d1c1 100644 --- a/ide/src/trace/component/SpKeyboard.ts +++ b/ide/src/trace/component/SpKeyboard.ts @@ -39,7 +39,7 @@ export class SpKeyboard extends BaseElement { initHtml(): string { return ` ${this.initHtmlStyle()} -
+
@@ -156,7 +156,7 @@ export class SpKeyboard extends BaseElement { height : 100%; background-color: rgba(0, 0, 0, 0.8); } - .sp-keyboard-vessel { + .sp-keyboard-container { width: 100%; height: 100%; display: flex; diff --git a/ide/src/trace/component/SpRecordTrace.ts b/ide/src/trace/component/SpRecordTrace.ts index 929141208..12503ac17 100644 --- a/ide/src/trace/component/SpRecordTrace.ts +++ b/ide/src/trace/component/SpRecordTrace.ts @@ -1835,7 +1835,7 @@ export class SpRecordTrace extends BaseElement { width: 100%; background-color: var(--dark-background5,#F6F6F6); } - .vessel { + .container { background-color: var(--dark-background5,#F6F6F6); height:100%; } @@ -1975,7 +1975,7 @@ export class SpRecordTrace extends BaseElement { opacity: 0.6; } -
+
Target Platform: @@ -2220,7 +2220,7 @@ export class SpRecordTrace extends BaseElement { nativeConfig.sampleInterval = this.spAllocations!.sample_interval; } } - if (this.spAllocations!.expandPids.length > 0) { + if (this.spAllocations!.expandPids.length > 1) { nativeConfig.expandPids = this.spAllocations!.expandPids.splice(0, maxProcessSize); } let nativePluginConfig: ProfilerPluginConfig = { diff --git a/ide/src/trace/component/SpSystemTrace.ts b/ide/src/trace/component/SpSystemTrace.ts index b7cd2be0d..fd87c6d75 100644 --- a/ide/src/trace/component/SpSystemTrace.ts +++ b/ide/src/trace/component/SpSystemTrace.ts @@ -23,8 +23,6 @@ import { querySceneSearchFunc, querySearchFunc, threadPool, - querySfVSyncData, - querySingleVSyncData } from '../database/SqlLite.js'; import { RangeSelectStruct, TraceRow } from './trace/base/TraceRow.js'; import { TimerShaftElement } from './trace/TimerShaftElement.js'; @@ -51,7 +49,6 @@ import { ns2xByTimeShaft, PairPoint, Rect, - drawVsync } from '../database/ui-worker/ProcedureWorkerCommon.js'; import { SpChartManager } from './chart/SpChartManager.js'; import { CpuStruct, WakeupBean } from '../database/ui-worker/ProcedureWorkerCPU.js'; @@ -113,7 +110,22 @@ import { type SpKeyboard } from '../component/SpKeyboard.js'; function dpr() { return window.devicePixelRatio || 1; } - +//节流处理 +function throttle(fn: any, t: number, ev: any): any { + let timer: any = null; + return function () { + if (!timer) { + timer = setTimeout(function () { + if (ev) { + fn(ev); + } else { + fn(); + } + timer = null; + }, t); + } + }; +} export class CurrentSlicesTime { startTime: number | undefined; @@ -135,7 +147,6 @@ export class SpSystemTrace extends BaseElement { static SDK_CONFIG_MAP: any; static sliceRangeMark: any; static wakeupList: Array = []; - times: Set = new Set(); currentSlicesTime: CurrentSlicesTime = new CurrentSlicesTime(); intersectionObserver: IntersectionObserver | undefined; tipEL: HTMLDivElement | undefined | null; @@ -187,11 +198,6 @@ export class SpSystemTrace extends BaseElement { private expandRowList: Array> = []; private _slicesList: Array = []; private _flagList: Array = []; - private _frameList: Array = []; - private _isVsync: boolean = false; - private queryFunData: Array = []; - private querydbData: Array = []; - private singleVSyncData: Array = []; set snapshotFile(data: FileInfo) { this.snapshotFiles = data; @@ -204,88 +210,6 @@ export class SpSystemTrace extends BaseElement { set flagList(list: Array) { this._flagList = list; } - //节流处理 - throttle(fn: Function, t: number, ev?: any): Function { - let timerId: any = null; - return () => { - if (!timerId) { - timerId = setTimeout(function () { - if (ev) { - fn(ev); - } else { - fn(); - } - timerId = null; - }, t); - this.times.add(timerId); - } - }; - } - // 防抖处理 - debounce(fn: Function, ms: number, ev?: any): Function { - let timerId: undefined | number; - return () => { - if (timerId) { - window.clearTimeout(timerId); - } else { - timerId = window.setTimeout(() => { - if (ev) { - fn(ev); - } else { - fn(); - } - timerId = undefined; - }, ms); - this.times.add(timerId); - } - } - } - - async makeVsyncLine() { - if (this._isVsync) { - const range = this.timerShaftEL?.rangeRuler?.range; - const totalTime = range!.endNS - range!.startNS; - const totalHeight = this.canvasPanel!.clientHeight; - const drawData = []; - if (this.singleVSyncData.length === 0) { - if (this.querydbData.length === 0) { - this.querydbData = await querySfVSyncData(); - } - } else { - if (this.queryFunData.length === 0) { - this.queryFunData = await querySingleVSyncData(); - } - for (let i = 0; i < this.queryFunData.length; i++) { - this.queryFunData[i].color = '#808080'; - } - } - let allShowData = this.querydbData.length > 0 ? this.querydbData.filter((data: any) => data.startTime > range!.startNS && data.startTime < range!.endNS) : this.queryFunData.filter((data: any) => data.startTime > range!.startNS && data.startTime < range!.endNS); - for (let i = 0; i < allShowData.length; i++) { - let data = allShowData[i]; - const x1 = ns2x(data.startTime, range!.startNS, range!.endNS, totalTime, this.timerShaftEL!.sportRuler!.frame); - let x0 = 0; - if (i === allShowData.length - 1) { - x0 = ns2x(range!.endNS, range!.startNS, range!.endNS, totalTime, this.timerShaftEL!.sportRuler!.frame); - } else { - x0 = ns2x(allShowData[i + 1].startTime, range!.startNS, range!.endNS, totalTime, this.timerShaftEL!.sportRuler!.frame); - } - if ((data.value && data.value === 1) || data.color) { - const x = x1; - const y = 0; - const width = x0 - x1; - const height = totalHeight; - data.frame = new Rect(x, y, width, height); - } - if (data.color && i % 2) { - data.color = '#ffffff' - } - drawData.push(data); - } - this.refreshCanvas(true, '', drawData); - } else { - this.refreshCanvas(true, '', []) - } - } addPointPair(startPoint: PairPoint, endPoint: PairPoint) { if (startPoint.rowEL.collect) { @@ -818,8 +742,8 @@ export class SpSystemTrace extends BaseElement { let isIntersect = (filterFunc: FuncStruct, rangeData: RangeSelectStruct) => Math.max(filterFunc.startTs! + filterFunc.dur!, rangeData!.endNS || 0) - - Math.min(filterFunc.startTs!, rangeData!.startNS || 0) < - filterFunc.dur! + (rangeData!.endNS || 0) - (rangeData!.startNS || 0) && + Math.min(filterFunc.startTs!, rangeData!.startNS || 0) < + filterFunc.dur! + (rangeData!.endNS || 0) - (rangeData!.startNS || 0) && filterFunc.funName!.indexOf('H:Task ') >= 0; let taskData = it.dataList.filter((taskData: FuncStruct) => { taskData!.tid = parseInt(it.rowId!); @@ -1204,7 +1128,7 @@ export class SpSystemTrace extends BaseElement { } else if (it.rowType == TraceRow.ROW_TYPE_JANK) { let isIntersect = (filterJank: JanksStruct, rangeData: RangeSelectStruct) => Math.max(filterJank.ts! + filterJank.dur!, rangeData!.endNS || 0) - - Math.min(filterJank.ts!, rangeData!.startNS || 0) < + Math.min(filterJank.ts!, rangeData!.startNS || 0) < filterJank.dur! + (rangeData!.endNS || 0) - (rangeData!.startNS || 0); if (it.name == 'Actual Timeline') { selection.jankFramesData = []; @@ -1287,7 +1211,7 @@ export class SpSystemTrace extends BaseElement { } else if (it.rowType == TraceRow.ROW_TYPE_FRAME_ANIMATION) { let isIntersect = (animationStruct: FrameAnimationStruct, selectStruct: RangeSelectStruct) => Math.max(animationStruct.startTs! + animationStruct.dur!, selectStruct!.endNS || 0) - - Math.min(animationStruct.startTs!, selectStruct!.startNS || 0) < + Math.min(animationStruct.startTs!, selectStruct!.startNS || 0) < animationStruct.dur! + (selectStruct!.endNS || 0) - (selectStruct!.startNS || 0); let frameAnimationList = it.dataList.filter((frameAnimationBean: FrameAnimationStruct) => { return isIntersect(frameAnimationBean, TraceRow.rangeSelectObject!); @@ -1384,15 +1308,6 @@ export class SpSystemTrace extends BaseElement { } this.timerShaftEL!.selectionList.push(selection); // 保持选中对象，为后面的再次选中该框选区域做准备。 this.selectionParam = selection; - - let currentRangeTid: Array = this.selectionParam.funTids - // 如果只框选了一个方法行 - if (currentRangeTid.length === 1) { - TraceRow.currentRowId = currentRangeTid[0] - setTimeout(() => { - this.refreshCanvas(true) - }, 50); - } }; // @ts-ignore new ResizeObserver((entries) => { @@ -1476,7 +1391,7 @@ export class SpSystemTrace extends BaseElement { window.subscribe(window.SmartEvent.UI.SliceMark, (data) => { this.sliceMarkEventHandler(data); }); - window.subscribe(window.SmartEvent.UI.TraceRowComplete, (tr) => { }); + window.subscribe(window.SmartEvent.UI.TraceRowComplete, (tr) => {}); window.subscribe(window.SmartEvent.UI.RefreshCanvas, () => { this.refreshCanvas(false); }); @@ -1735,14 +1650,10 @@ export class SpSystemTrace extends BaseElement { } // refresh main canvas and favorite canvas - refreshCanvas(cache: boolean, from?: string, frameList?: any[] | undefined) { + refreshCanvas(cache: boolean, from?: string) { if (this.visibleRows.length == 0) { return; } - if (frameList) { - this._frameList = []; - this._frameList.push(...frameList); - } //clear main canvas this.canvasPanelCtx?.clearRect(0, 0, this.canvasPanel!.offsetWidth, this.canvasPanel!.offsetHeight); this.favoriteChartListEL?.clearRect(); @@ -1827,29 +1738,7 @@ export class SpSystemTrace extends BaseElement { this.timerShaftEL! ); this.favoriteChartListEL?.drawLogsLineSegment(this.traceSheetEL!.systemLogFlag, this.timerShaftEL!); - //---------------------------新增代码开始-------------------------- - if (this._frameList.length > 0) { - for (let i = 0; i < this._frameList.length; i++) { - if (this._frameList[i].frame) { - drawVsync( - this.canvasPanelCtx, - TraceRow.range!.startNS, - TraceRow.range!.endNS, - TraceRow.range!.totalNS, - { - x: this._frameList[i].frame!.x!, - y: this._frameList[i].frame!.y!, - width: this._frameList[i].frame!.width!, - height: this.canvasPanel!.clientHeight! - } as Rect, - this._frameList[i]!.color! - ); - } - } - } - - //---------------------------新增代码结束-------------------------- // Draw the connection curve if (this.linkNodes) { drawLinkLines( @@ -1937,11 +1826,6 @@ export class SpSystemTrace extends BaseElement { this.offsetMouse = 0; this.mouseCurrentPosition = 0; this.style.cursor = 'default'; - requestAnimationFrame(() => { - setTimeout(() => { - this.makeVsyncLine(); - }, 100) - }) return; } TraceRow.isUserInteraction = false; @@ -1961,7 +1845,7 @@ export class SpSystemTrace extends BaseElement { // 如果没有找到帽子，则绘制一个旗子 let time = Math.round( (x * (TraceRow.range?.endNS! - TraceRow.range?.startNS!)) / this.timerShaftEL!.canvas!.offsetWidth + - TraceRow.range?.startNS! + TraceRow.range?.startNS! ); this.timerShaftEL!.sportRuler!.drawTriangle(time, 'squre'); } @@ -2001,13 +1885,6 @@ export class SpSystemTrace extends BaseElement { ['d', false], ['f', false], ]); - - documentOnKeyDown = (ev: KeyboardEvent) => { - document.removeEventListener('keyup', this.documentOnKeyUp); - this.debounce(this.continueSearch, 250, ev)(); - document.addEventListener('keyup', this.documentOnKeyUp); - }; - documentOnKeyPress = (ev: KeyboardEvent) => { if (!this.loadTraceCompleted) return; let keyPress = ev.key.toLocaleLowerCase(); @@ -2038,11 +1915,6 @@ export class SpSystemTrace extends BaseElement { if (keyPressWASD) { this.keyPressMap.set(keyPress, true); this.hoverFlag = null; - requestAnimationFrame(() => { - setTimeout(() => { - this.makeVsyncLine(); - }, 100) - }) } this.timerShaftEL!.documentOnKeyPress(ev, this.currentSlicesTime); if (keyPress === 'f') { @@ -2150,13 +2022,13 @@ export class SpSystemTrace extends BaseElement { this.timerShaftEL?.setSlicesMark( FrameAnimationStruct.selectFrameAnimationStruct.startTs || 0, (FrameAnimationStruct.selectFrameAnimationStruct.startTs || 0) + - (FrameAnimationStruct.selectFrameAnimationStruct.dur || 0) + (FrameAnimationStruct.selectFrameAnimationStruct.dur || 0) ); } else if (JsCpuProfilerStruct.selectJsCpuProfilerStruct) { this.timerShaftEL?.setSlicesMark( JsCpuProfilerStruct.selectJsCpuProfilerStruct.startTime || 0, (JsCpuProfilerStruct.selectJsCpuProfilerStruct.startTime || 0) + - (JsCpuProfilerStruct.selectJsCpuProfilerStruct.totalTime || 0) + (JsCpuProfilerStruct.selectJsCpuProfilerStruct.totalTime || 0) ); } else { this.slicestime = this.timerShaftEL?.setSlicesMark(); @@ -2175,61 +2047,23 @@ export class SpSystemTrace extends BaseElement { }, 100); }; - // 一直按着回车键的时候执行搜索功能 - private continueSearch = (ev: KeyboardEvent) => { - if (ev.key === 'Enter') { - if (ev.shiftKey) { - this.dispatchEvent( - new CustomEvent('previous-data', { - detail: {}, - composed: false, - }) - ); - } else { - this.dispatchEvent( - new CustomEvent('next-data', { - detail: {}, - composed: false, - }) - ); - } - } - } - documentOnKeyUp = (ev: KeyboardEvent) => { - if (this.times.size > 0) { - for (let timerId of this.times) { - clearTimeout(timerId); - } - } - - if (ev.key.toLocaleLowerCase() === '?') { + if(ev.key.toLocaleLowerCase() === '?'){ document.querySelector('body > sp-application')!.shadowRoot!.querySelector('#sp-keyboard')!.style.visibility = 'visible'; } + if(ev.key.toLocaleLowerCase() === 'escape'){ + document.querySelector('body > sp-application')!.shadowRoot!.querySelector('#sp-keyboard')!.style.visibility = 'hidden'; + document.querySelector('body > sp-application')!.shadowRoot!.querySelector('#sp-welcome')!.style.visibility = 'visible'; + } if (!this.loadTraceCompleted) return; let keyPress = ev.key.toLocaleLowerCase(); - if (keyPress === 'v') { - this._isVsync = !this._isVsync; - if (this._isVsync) { - this.makeVsyncLine(); - } else { - this.refreshCanvas(true, '', []) - } - - } if (keyPress === 'w' || keyPress === 'a' || keyPress === 's' || keyPress === 'd') { this.keyPressMap.set(keyPress, false); - requestAnimationFrame(() => { - setTimeout(() => { - this.makeVsyncLine(); - }, 100) - }) } TraceRow.isUserInteraction = false; this.observerScrollHeightEnable = false; this.keyboardEnable && this.timerShaftEL!.documentOnKeyUp(ev); if (ev.code == 'Enter') { - document.removeEventListener('keydown', this.documentOnKeyDown); if (ev.shiftKey) { this.dispatchEvent( new CustomEvent('previous-data', { @@ -2245,7 +2079,6 @@ export class SpSystemTrace extends BaseElement { }) ); } - document.addEventListener('keydown', this.documentOnKeyDown); } if (ev.ctrlKey) { @@ -3783,6 +3616,9 @@ export class SpSystemTrace extends BaseElement { this.rowsPaneEL?.addEventListener('scroll', this.rowsElOnScroll, { passive: true, }); + this.favoriteChartListEL?.addEventListener('scroll', this.favoriteRowsElOnScroll, { + passive: true, + }); /** * 监听document的mousemove事件 坐标通过换算后找到当前鼠标所在的trace-row组件，将坐标传入 */ @@ -3792,7 +3628,6 @@ export class SpSystemTrace extends BaseElement { this.addEventListener('mouseup', this.documentOnMouseUp); this.addEventListener('mouseout', this.documentOnMouseOut); - document.addEventListener('keydown', this.documentOnKeyDown); document.addEventListener('keypress', this.documentOnKeyPress); document.addEventListener('keyup', this.documentOnKeyUp); document.addEventListener('contextmenu', this.onContextMenuHandler); @@ -3808,11 +3643,6 @@ export class SpSystemTrace extends BaseElement { (e) => { if (e.ctrlKey) { if (e.deltaY > 0) { - requestAnimationFrame(() => { - setTimeout(() => { - this.makeVsyncLine(); - }, 100) - }) e.preventDefault(); e.stopPropagation(); let eventS = new KeyboardEvent('keypress', { @@ -3826,11 +3656,6 @@ export class SpSystemTrace extends BaseElement { }, 200); } if (e.deltaY < 0) { - requestAnimationFrame(() => { - setTimeout(() => { - this.makeVsyncLine(); - }, 100) - }) e.preventDefault(); e.stopPropagation(); let eventW = new KeyboardEvent('keypress', { @@ -3969,13 +3794,13 @@ export class SpSystemTrace extends BaseElement { disconnectedCallback() { this.timerShaftEL?.removeEventListener('range-change', this.timerShaftELRangeChange); this.rowsPaneEL?.removeEventListener('scroll', this.rowsElOnScroll); + this.favoriteChartListEL?.removeEventListener('scroll', this.favoriteRowsElOnScroll); this.removeEventListener('mousemove', this.documentOnMouseMove); this.removeEventListener('click', this.documentOnClick); this.removeEventListener('mousedown', this.documentOnMouseDown); this.removeEventListener('mouseup', this.documentOnMouseUp); this.removeEventListener('mouseout', this.documentOnMouseOut); document.removeEventListener('keypress', this.documentOnKeyPress); - document.removeEventListener('keydown', this.documentOnKeyDown); document.removeEventListener('keyup', this.documentOnKeyUp); document.removeEventListener('contextmenu', this.onContextMenuHandler); window.unsubscribe(window.SmartEvent.UI.SliceMark, this.sliceMarkEventHandler.bind(this)); @@ -4458,10 +4283,6 @@ export class SpSystemTrace extends BaseElement { } reset(progress: Function | undefined | null) { - this._frameList = []; - this.queryFunData = []; - this.querydbData = []; - this._isVsync = false; this.visibleRows.length = 0; this.tipEL!.style.display = 'none'; this.canvasPanelCtx?.clearRect(0, 0, this.canvasPanel!.clientWidth, this.canvasPanel!.offsetHeight); @@ -4499,15 +4320,11 @@ export class SpSystemTrace extends BaseElement { procedurePool.clearCache(); Utils.clearData(); InitAnalysis.getInstance().isInitAnalysis = true; - procedurePool.submitWithName('logic0', 'clear', {}, undefined, (res: any) => { }); - procedurePool.submitWithName('logic1', 'clear', {}, undefined, (res: any) => { }); - this.times.clear(); + procedurePool.submitWithName('logic0', 'clear', {}, undefined, (res: any) => {}); + procedurePool.submitWithName('logic1', 'clear', {}, undefined, (res: any) => {}); } init = async (param: { buf?: ArrayBuffer; url?: string }, wasmConfigUri: string, progress: Function) => { - setTimeout(async () => { - this.singleVSyncData = await querySingleVSyncData(); - }, 500) progress('Load database', 6); this.rowsPaneEL!.scroll({ top: 0, @@ -4763,10 +4580,10 @@ export class SpSystemTrace extends BaseElement { background: var(--dark-background4,#ffffff); /*scroll-behavior: smooth;*/ } - :host([disable]) .vessel{ + :host([disable]) .container{ pointer-events: none; } - .vessel{ + .container{ width: 100%; box-sizing: border-box; height: 100%; @@ -4824,7 +4641,7 @@ export class SpSystemTrace extends BaseElement { } -
+
diff --git a/ide/src/trace/component/StackBar.ts b/ide/src/trace/component/StackBar.ts index ed7f1c974..1972638e1 100644 --- a/ide/src/trace/component/StackBar.ts +++ b/ide/src/trace/component/StackBar.ts @@ -19,7 +19,7 @@ import { Utils } from './trace/base/Utils.js'; @element('stack-bar') export class StackBar extends BaseElement { - private vessel: HTMLDivElement | undefined | null; + private container: HTMLDivElement | undefined | null; static get observedAttributes() { return ['mode']; // max min hidden show 三种状态 @@ -31,11 +31,11 @@ export class StackBar extends BaseElement { if (map.has(v.state)) { let sv = map.get(v.state); sv!.value = sv!.value + v.wallDuration; - sv!.state = v.state + ' : ' + sv!.value.toFixed(5) + 'ms'; + sv!.state = v.state + ' : ' + sv!.value.toFixed(7) + 'ms'; } else { let sv = new StackValue(); sv.value = v.wallDuration; - sv.state = v.state + ' : ' + sv.value.toFixed(5) + 'ms'; + sv.state = v.state + ' : ' + sv.value.toFixed(7) + 'ms'; sv.color = Utils.getStateColor(v.stateJX); map.set(v.state, sv); } @@ -50,14 +50,14 @@ export class StackBar extends BaseElement { } } arr.sort((a, b) => a.value - b.value); - this.vessel!.innerHTML = ''; + this.container!.innerHTML = ''; for (let stackValue of arr) { - this.vessel!.appendChild(this.createBarElement(stackValue, totalDuration)); + this.container!.appendChild(this.createBarElement(stackValue, totalDuration)); } } initElements(): void { - this.vessel = this.shadowRoot?.querySelector('#vessel'); + this.container = this.shadowRoot?.querySelector('#container'); } initHtml(): string { @@ -74,7 +74,7 @@ export class StackBar extends BaseElement { width: 10%;display: inline-block;overflow: hidden;white-space: nowrap;padding: 5px; margin-right: 2px;font-size: 9pt; } -
+
`; } diff --git a/ide/src/trace/component/schedulingAnalysis/Top20FrequencyThread.ts b/ide/src/trace/component/schedulingAnalysis/Top20FrequencyThread.ts index a04d17627..355a2ac66 100644 --- a/ide/src/trace/component/schedulingAnalysis/Top20FrequencyThread.ts +++ b/ide/src/trace/component/schedulingAnalysis/Top20FrequencyThread.ts @@ -196,7 +196,7 @@ export class Top20FrequencyThread extends BaseElement { ], }; this.frequencyThreadProgress!.loading = false; - this.shadowRoot!.querySelector('#tb_vessel')!.scrollTop = 0; + this.shadowRoot!.querySelector('#tb_container')!.scrollTop = 0; }); } @@ -284,7 +284,7 @@ export class Top20FrequencyThread extends BaseElement {
-
+
diff --git a/ide/src/trace/component/setting/SpHisysEvent.ts b/ide/src/trace/component/setting/SpHisysEvent.ts index ec1a397ae..154c68483 100644 --- a/ide/src/trace/component/setting/SpHisysEvent.ts +++ b/ide/src/trace/component/setting/SpHisysEvent.ts @@ -53,7 +53,7 @@ export class SpHisysEvent extends BaseElement { } get eventName(): string { - if (this.eventNameInputEL!.value.length > 0) { + if (this.eventNameInputEL!.value.length > 0 && this.eventNameInputEL!.value !== 'ALL-Event') { return this.eventNameInputEL!.value; } return ''; @@ -133,12 +133,22 @@ export class SpHisysEvent extends BaseElement { let eventNameList = Object.keys(eventConfigElement); if (eventNameList?.length > 0 && this.startSamp) { this.nameInputEl!.setAttribute('readonly', 'readonly'); + eventNameList.unshift('ALL-Event'); this.eventNameInputEL!.processData = eventNameList; this.eventNameInputEL!.initData(); } } else { - this.eventNameInputEL!.value = ''; - this.eventNameInputEL!.processData = []; + let currentData: string[] = []; + if (domain === '' || domain === 'ALL-Domain') { + let domainKey = Object.keys(this.eventConfig); + domainKey.forEach(item => { + let currentEvent = this.eventConfig[item]; + let eventList = Object.keys(currentEvent); + currentData.push(...eventList); + }); + currentData.unshift('ALL-Event'); + } + this.eventNameInputEL!.processData = currentData; this.eventNameInputEL!.initData(); } } @@ -237,7 +247,7 @@ export class SpHisysEvent extends BaseElement { Record Domain Name
+ mode="multiple" canInsert="" title="Select Proces" placement="bottom" placeholder="ALL-Domain" readonly="readonly">
@@ -246,7 +256,7 @@ export class SpHisysEvent extends BaseElement { Record Event Name
+ mode="multiple" canInsert="" title="Select Proces" placement="bottom" placeholder="ALL-Event" readonly="readonly">
diff --git a/ide/src/trace/component/trace/base/CustomThemeColor.ts b/ide/src/trace/component/trace/base/CustomThemeColor.ts index f743e9573..ffad6070e 100644 --- a/ide/src/trace/component/trace/base/CustomThemeColor.ts +++ b/ide/src/trace/component/trace/base/CustomThemeColor.ts @@ -335,7 +335,7 @@ export class CustomThemeColor extends BaseElement { color: white; } -
+
Color Setting diff --git a/ide/src/trace/component/trace/base/RangeSelect.ts b/ide/src/trace/component/trace/base/RangeSelect.ts index 06220d927..38521f860 100644 --- a/ide/src/trace/component/trace/base/RangeSelect.ts +++ b/ide/src/trace/component/trace/base/RangeSelect.ts @@ -19,7 +19,6 @@ import { ns2x, TimerShaftElement } from '../TimerShaftElement.js'; import { info } from '../../../../log/Log.js'; import './Extension.js'; import { SpSystemTrace } from '../../SpSystemTrace.js'; -import { querySearchRowFuncData } from '../../../database/SqlLite.js'; export class RangeSelect { private rowsEL: HTMLDivElement | undefined | null; @@ -80,20 +79,6 @@ export class RangeSelect { if (this.selectHandler) { this.selectHandler(this.rangeTraceRow || [], !this.isHover); } - //如果只框选了一条泳道，查询H:RSMainThread::DoComposition数据 - if (this.rangeTraceRow?.length === 1) { - querySearchRowFuncData('H:RSMainThread::DoComposition', TraceRow.currentRowId!).then((res) => { - if (res.length) { - res.forEach((item) => { - TraceRow.docompositionData.push(item.startTime!); - }); - } - }) - } else { - if (TraceRow.docompositionData.length) { - TraceRow.docompositionData = [] - } - } } this.isMouseDown = false; } diff --git a/ide/src/trace/component/trace/base/TraceRow.ts b/ide/src/trace/component/trace/base/TraceRow.ts index 41cf9d28a..17e220666 100644 --- a/ide/src/trace/component/trace/base/TraceRow.ts +++ b/ide/src/trace/component/trace/base/TraceRow.ts @@ -121,8 +121,6 @@ export class TraceRow extends HTMLElement { static range: TimeRange | undefined | null; static rangeSelectObject: RangeSelectStruct | undefined; static ROW_TYPE_HI_SYSEVENT = 'hi-sysevent'; - static docompositionData: Array = []; // 存储查询到的docomposition数据 - static currentRowId: number | undefined; // 存储当前行id public obj: TraceRowObject | undefined | null; isHover: boolean = false; hoverX: number = 0; @@ -138,7 +136,7 @@ export class TraceRow extends HTMLElement { public sliceCache: number[] = [-1, -1]; public describeEl: HTMLElement | null | undefined; public canvas: Array = []; - public canvasVessel: HTMLDivElement | null | undefined; + public canvasContainer: HTMLDivElement | null | undefined; public tipEL: HTMLDivElement | null | undefined; public checkBoxEL: LitCheckBox | null | undefined; public collectEL: LitIcon | null | undefined; @@ -188,12 +186,12 @@ export class TraceRow extends HTMLElement { isOffScreen: boolean; skeleton?: boolean; } = { - canvasNumber: 1, - alpha: false, - contextId: '2d', - isOffScreen: true, - skeleton: false, - } + canvasNumber: 1, + alpha: false, + contextId: '2d', + isOffScreen: true, + skeleton: false, + } ) { super(); this.args = args; @@ -643,7 +641,7 @@ export class TraceRow extends HTMLElement { this.describeEl = this.shadowRoot?.querySelector('.describe'); this.folderIconEL = this.shadowRoot?.querySelector('.icon'); this.nameEL = this.shadowRoot?.querySelector('.name'); - this.canvasVessel = this.shadowRoot?.querySelector('.panel-vessel'); + this.canvasContainer = this.shadowRoot?.querySelector('.panel-container'); this.rowSettingTree = this.shadowRoot?.querySelector('#rowSettingTree'); this.rowSettingPop = this.shadowRoot?.querySelector('#rowSetting'); this.tipEL = this.shadowRoot?.querySelector('.tip'); @@ -653,8 +651,8 @@ export class TraceRow extends HTMLElement { let canvas = document.createElement('canvas'); canvas.className = 'panel'; this.canvas.push(canvas); - if (this.canvasVessel) { - this.canvasVessel.appendChild(canvas); + if (this.canvasContainer) { + this.canvasContainer.appendChild(canvas); } } } @@ -699,7 +697,7 @@ export class TraceRow extends HTMLElement { }); } - getRowSettingKeys(): Array { + getRowSettingKeys() : Array { if (this.rowSetting === 'enable') { return this.rowSettingTree!.getCheckdKeys(); } @@ -718,7 +716,7 @@ export class TraceRow extends HTMLElement { } } - enableCollapseChart(): void { + enableCollapseChart() : void { this._enableCollapseChart = true; this.nameEL!.onclick = () => { if (this.funcExpand) { @@ -932,7 +930,7 @@ export class TraceRow extends HTMLElement { } if (this.tipEL) { this.tipEL.style.display = 'flex'; - if (x + this.tipEL.clientWidth > (this.canvasVessel!.clientWidth || 0)) { + if (x + this.tipEL.clientWidth > (this.canvasContainer!.clientWidth || 0)) { this.tipEL.style.transform = `translateX(${x - this.tipEL.clientWidth - 1}px)`; } else { this.tipEL.style.transform = `translateX(${x}px)`; @@ -1208,7 +1206,7 @@ export class TraceRow extends HTMLElement { background-color: transparent; display: block; } - .panel-vessel{ + .panel-container{ width: 100%; position: relative; pointer-events: none; @@ -1271,7 +1269,7 @@ export class TraceRow extends HTMLElement { border-right: 0px; background-color: var(--bark-expansion,#0C65D1); } - :host([expansion]:not(sleeping)) .panel-vessel{ + :host([expansion]:not(sleeping)) .panel-container{ display: none; } :host([expansion]) .children{ @@ -1292,7 +1290,7 @@ export class TraceRow extends HTMLElement { :host([sleeping]) .describe{ display: none; } - :host([sleeping]) .panel-vessel{ + :host([sleeping]) .panel-container{ display: none; } :host([sleeping]) .children{ @@ -1301,7 +1299,7 @@ export class TraceRow extends HTMLElement { :host(:not([sleeping])) .describe{ display: flex;; } - :host(:not([sleeping])) .panel-vessel{ + :host(:not([sleeping])) .panel-container{ display: block; } :host(:not([sleeping])) .children{ diff --git a/ide/src/trace/component/trace/base/TraceRowRecyclerView.ts b/ide/src/trace/component/trace/base/TraceRowRecyclerView.ts index 6b2427486..d5817dfa0 100644 --- a/ide/src/trace/component/trace/base/TraceRowRecyclerView.ts +++ b/ide/src/trace/component/trace/base/TraceRowRecyclerView.ts @@ -21,7 +21,7 @@ import { log } from '../../../../log/Log.js'; export class TraceRowRecyclerView extends BaseElement { private recycler: boolean = true; private gasketEL: HTMLDivElement | null | undefined; - private vessel: HTMLDivElement | null | undefined; + private container: HTMLDivElement | null | undefined; private visibleRowsCount: number = 0; private visibleObjects: TraceRowObject[] = []; private totalHeight: number = 0; @@ -76,11 +76,11 @@ export class TraceRowRecyclerView extends BaseElement { } initElements(): void { - this.vessel = this.shadowRoot?.querySelector('.vessel'); + this.container = this.shadowRoot?.querySelector('.container'); this.gasketEL = this.shadowRoot?.querySelector('.gasket'); let els: Array> | undefined | null; - this.vessel!.onscroll = (ev) => { - let top = this.vessel!.scrollTop; + this.container!.onscroll = (ev) => { + let top = this.container!.scrollTop; let skip = 0; for (let index = 0; index < this.visibleObjects.length; index++) { if (this.visibleObjects[index].top >= top) { @@ -125,7 +125,7 @@ export class TraceRowRecyclerView extends BaseElement { isOffScreen: true, }); el.className = 'recycler-cell'; - this.vessel?.appendChild(el); + this.container?.appendChild(el); el.addEventListener('expansion-change', (ev: any) => { el.obj!.expansion = ev.detail.expansion; for (let j = 0; j < this.dataSource.length; j++) { @@ -135,7 +135,7 @@ export class TraceRowRecyclerView extends BaseElement { } this.measureHeight(); let els = [...this.shadowRoot!.querySelectorAll>('.recycler-cell')]; - let top = this.vessel!.scrollTop; + let top = this.container!.scrollTop; let skip = 0; for (let i = 0; i < this.visibleObjects.length; i++) { if (this.visibleObjects[i].top >= top) { @@ -161,7 +161,7 @@ export class TraceRowRecyclerView extends BaseElement { display: block; position:relative; } - .vessel{ + .container{ width:100%; height:100%; overflow: auto; @@ -185,7 +185,7 @@ export class TraceRowRecyclerView extends BaseElement { left: 0; } -
+
diff --git a/ide/src/trace/component/trace/base/TraceSheet.ts b/ide/src/trace/component/trace/base/TraceSheet.ts index d1ff74b53..8a65fec43 100644 --- a/ide/src/trace/component/trace/base/TraceSheet.ts +++ b/ide/src/trace/component/trace/base/TraceSheet.ts @@ -154,15 +154,11 @@ export class TraceSheet extends BaseElement { this.processTree!.onChange = (e: any): void => { const select = this.processTree!.getCheckdKeys(); const selectIPid = Number(select[0]); - if (selectIPid === this.lastSelectIPid) { - return; - } this.switchDiv!.visible = 'false'; this.updateRangeSelect(selectIPid) this.lastSelectIPid = selectIPid; }; - // }; this.buildTabs(this.litTabs); this.litTabs!.onTabClick = (e: any): void => this.loadTabPaneData(e.detail.key); this.litTabs!.addEventListener('close-handler', () => { @@ -256,14 +252,14 @@ export class TraceSheet extends BaseElement { } connectedCallback(): void { - this.nav = this.shadowRoot?.querySelector('#tabs')?.shadowRoot?.querySelector('.tab-nav-vessel'); + this.nav = this.shadowRoot?.querySelector('#tabs')?.shadowRoot?.querySelector('.tab-nav-container'); let tabs: HTMLDivElement | undefined | null = this.shadowRoot?.querySelector('#tabs'); let navRoot: HTMLDivElement | null | undefined = this.shadowRoot ?.querySelector('#tabs') ?.shadowRoot?.querySelector('.nav-root'); let search: HTMLDivElement | undefined | null = document .querySelector('body > sp-application') - ?.shadowRoot?.querySelector('div > div.search-vessel'); + ?.shadowRoot?.querySelector('div > div.search-container'); let timerShaft: HTMLDivElement | undefined | null = this.parentElement?.querySelector('.timer-shaft'); let spacer: HTMLDivElement | undefined | null = this.parentElement?.querySelector('.spacer'); let rowsPaneEL: HTMLDivElement | undefined | null = this.parentElement?.querySelector('.rows-pane'); @@ -452,7 +448,7 @@ export class TraceSheet extends BaseElement { z-index: 2; } -
+
diff --git a/ide/src/trace/component/trace/search/Search.ts b/ide/src/trace/component/trace/search/Search.ts index ed87a02d7..ca4a45176 100644 --- a/ide/src/trace/component/trace/search/Search.ts +++ b/ide/src/trace/component/trace/search/Search.ts @@ -15,7 +15,6 @@ import { BaseElement, element } from '../../../../base-ui/BaseElement.js'; import { LitIcon } from '../../../../base-ui/icon/LitIcon.js'; -import { SpSystemTrace } from '../../../component/SpSystemTrace.js'; const LOCAL_STORAGE_SEARCH_KEY = 'search_key'; @@ -36,7 +35,6 @@ export class LitSearch extends BaseElement { //定义翻页index private retarget_index: number = 0; private _retarge_index: HTMLInputElement | null | undefined; - private systemTrace: SpSystemTrace | null | undefined; get list(): Array { return this._list; @@ -193,9 +191,9 @@ export class LitSearch extends BaseElement { }, 200); } - private searchKeyupListener(e: KeyboardEvent) { - if( e.key === 'Enter' ){ - this.updateSearchList(this.search!.value); + private searchKeyupListener(e: KeyboardEvent) { + if (e.code === 'Enter') { + this.updateSearchList(this.search!.value); if (e.shiftKey) { this.dispatchEvent( new CustomEvent('previous-data', { @@ -222,18 +220,6 @@ export class LitSearch extends BaseElement { e.stopPropagation(); } - clearTimes(){ - if(this.systemTrace) - { - if(this.systemTrace.times.size > 0){ - for(let timerId of this.systemTrace.times){ - clearTimeout(timerId); - } - } - } - } - - initElements(): void { this.search = this.shadowRoot!.querySelector('input'); this.totalEL = this.shadowRoot!.querySelector('#total'); @@ -243,19 +229,7 @@ export class LitSearch extends BaseElement { this._retarge_index = this.shadowRoot!.querySelector("input[name='retarge_index']"); let _root = this.shadowRoot!.querySelector('.root'); let _prompt = this.shadowRoot!.querySelector('#prompt'); - this.systemTrace = document.querySelector('body > sp-application')?. - shadowRoot?.querySelector('#sp-system-trace'); - let searchKeyup = (e: KeyboardEvent)=> { - this.clearTimes(); - this._retarge_index!.value = "" - this.index = -1; - document.removeEventListener('keyup', this.systemTrace!.documentOnKeyUp); - document.removeEventListener('keydown', this.systemTrace!.documentOnKeyDown); - this.searchKeyupListener(e); - document.addEventListener('keydown', this.systemTrace!.documentOnKeyDown); - document.addEventListener('keyup', this.systemTrace!.documentOnKeyUp); - } this.search!.addEventListener('focus', () => { this.searchFocusListener(); }); @@ -266,8 +240,11 @@ export class LitSearch extends BaseElement { this.index = -1; this._retarge_index!.value = ''; }); - this.search!.addEventListener('keyup', searchKeyup ); - + this.search!.addEventListener('keyup', (e: KeyboardEvent) => { + this._retarge_index!.value = "" + this.index = -1; + this.searchKeyupListener(e); + }); this.shadowRoot?.querySelector('#arrow-left')?.addEventListener('click', (e) => { this.dispatchEvent( new CustomEvent('previous-data', { @@ -289,13 +266,7 @@ export class LitSearch extends BaseElement { // 添加翻页监听事件 this.shadowRoot?.querySelector("input[name='retarge_index']")?.addEventListener('keyup', (e: any) => { - - if (e.key === 'Enter') { - this.clearTimes(); - document.removeEventListener('keyup', this.systemTrace!.documentOnKeyUp); - document.removeEventListener('keydown', this.systemTrace!.documentOnKeyDown); - document.removeEventListener('keypress', this.systemTrace!.documentOnKeyPress); - this.search!.removeEventListener('keyup', searchKeyup); + if (e.keyCode == 13) { this.retarget_index = Number(this._retarge_index!.value); if (this.retarget_index <= this._list.length && this.retarget_index != 0) { this.dispatchEvent( @@ -317,13 +288,8 @@ export class LitSearch extends BaseElement { this._retarge_index!.value = ''; }, 2000); } - this._retarge_index?.blur(); - this.search!.addEventListener('keyup', searchKeyup); - document.addEventListener('keyup', this.systemTrace!.documentOnKeyUp); - document.addEventListener('keydown', this.systemTrace!.documentOnKeyDown ); - document.addEventListener('keypress', this.systemTrace!.documentOnKeyPress); - } - e.stopPropagation(); + } + e.stopPropagation(); }); } @@ -472,8 +438,8 @@ export class LitSearch extends BaseElement { let historyInfos = this.getSearchHistory(); let fragment = document.createElement('div'); historyInfos.forEach((historyInfo) => { - let searchVessel = document.createElement('div'); - searchVessel.className = 'search-list'; + let searchContainer = document.createElement('div'); + searchContainer.className = 'search-list'; let searchInfoOption = document.createElement('li'); let closeOption = document.createElement('lit-icon'); closeOption.setAttribute('name', 'close'); @@ -492,11 +458,11 @@ export class LitSearch extends BaseElement { } } }); - searchVessel.append(searchInfoOption); - searchVessel.append(closeOption); + searchContainer.append(searchInfoOption); + searchContainer.append(closeOption); this.searchELList.push(searchInfoOption); this.searchELList.push(closeOption); - fragment.append(searchVessel); + fragment.append(searchContainer); }); this.searchHistoryListEL?.append(fragment); if (this.searchList.length > 0) { diff --git a/ide/src/trace/component/trace/sheet/TabPaneCurrent.ts b/ide/src/trace/component/trace/sheet/TabPaneCurrent.ts index 09cbe2bca..24037dfcf 100644 --- a/ide/src/trace/component/trace/sheet/TabPaneCurrent.ts +++ b/ide/src/trace/component/trace/sheet/TabPaneCurrent.ts @@ -32,39 +32,8 @@ export class TabPaneCurrent extends BaseElement { this.systemTrace = document .querySelector('body > sp-application') ?.shadowRoot!.querySelector('#sp-system-trace'); - this.shadowRoot?.querySelector('#text')?.addEventListener('keyup', (event: any) => { - event.stopPropagation(); - if (event.keyCode == '13') { - if (this.slicesTime) { - window.publish(window.SmartEvent.UI.KeyboardEnable, { - enable: true, - }); - this.slicesTime.text = event?.target.value; - document.dispatchEvent( - new CustomEvent('slices-change', { - detail: this.slicesTime, - }) - ); - } - } - }); - this.shadowRoot?.querySelector('#text')?.addEventListener('blur', (event: any) => { - (window as any).flagInputFocus = false; - window.publish(window.SmartEvent.UI.KeyboardEnable, { - enable: true, - }); - }); - this.shadowRoot?.querySelector('#text')?.addEventListener('focus', (event: any) => { - (window as any).flagInputFocus = true; - window.publish(window.SmartEvent.UI.KeyboardEnable, { - enable: false, - }); - }); this.panelTable = this.shadowRoot!.querySelector('.notes-editor-panel'); this.panelTable!.addEventListener('row-click', (evt: any) => { - if (evt.detail.data.startTime === undefined) { - return; - } // 点击表格某一行后，背景变色 // @ts-ignore let data = evt.detail.data; @@ -79,23 +48,17 @@ export class TabPaneCurrent extends BaseElement { } this.systemTrace?.timerShaftEL!.sportRuler!.draw(); }); - }); - // 当鼠标移出panel时重新加载备注信息 - this.systemTrace?.shadowRoot?.querySelector('trace-sheet')?.addEventListener( - 'mouseout', - (event: any) => { - if (this.slicesTimeList.length === 0) { - return; + // 如果点击RemoveAll，隐藏所有卡尺，清空数组，隐藏tab页 + if (data.operate.innerHTML === 'RemoveAll') { + this.systemTrace!.slicesList = []; + let slicesTimeList = [...this.slicesTimeList]; + for (let i = 0; i < slicesTimeList.length; i++) { + slicesTimeList[i].hidden = true; + document.dispatchEvent(new CustomEvent('slices-change', { detail: slicesTimeList[i] })); } - let tr = this.panelTable!.shadowRoot!.querySelectorAll('.tr') as NodeListOf; - // 第一个tr是移除全部，所以跳过，从第二个tr开始，和this.slicesTimeList数组的第一个对应……，所以i从1开始，在this.slicesTimeList数组中取值时用i-1 - for (let i = 1; i < tr.length; i++) { - tr[i].querySelector('#text-input')!.value = this.slicesTimeList[i - 1].text; - } - event.stopPropagation(); - }, - { capture: true } - ); + this.slicesTimeList = []; + } + }); } public setCurrentSlicesTime(slicesTime: SlicesTime): void { @@ -136,19 +99,15 @@ export class TabPaneCurrent extends BaseElement { btn.className = 'remove'; let color = document.createElement('input'); color.type = 'color'; - let text = document.createElement('input'); - text.type = 'text'; let sliceData = new MarkStruct( btn, color, - text, ns2s(slice.startTime), slice.startTime, ns2s(slice.endTime), slice.endTime ); color!.value = slice.color; - text.value = slice.text; slice.selected === true ? (sliceData.isSelected = true) : (sliceData.isSelected = false); this.tableDataSource.push(sliceData); } @@ -175,42 +134,11 @@ export class TabPaneCurrent extends BaseElement { */ private eventHandler(): void { let tr = this.panelTable!.shadowRoot!.querySelectorAll('.tr') as NodeListOf; - tr[0].querySelector('.removeAll')!.addEventListener('click', (evt: any) => { - this.systemTrace!.slicesList = []; - let slicesTimeList = [...this.slicesTimeList]; - for (let i = 0; i < slicesTimeList.length; i++) { - slicesTimeList[i].hidden = true; - document.dispatchEvent(new CustomEvent('slices-change', { detail: slicesTimeList[i] })); - } - this.slicesTimeList = []; - return; - }); - - // 更新备注信息 - this.panelTable!.addEventListener('click', (event: any) => { - if (this.slicesTimeList.length === 0) { - return; - } - for (let i = 1; i < tr.length; i++) { - let inputValue = tr[i].querySelector('#text-input')!.value; - if ( - this.tableDataSource[i].startTime === this.slicesTimeList[i - 1].startTime && - this.tableDataSource[i].endTime === this.slicesTimeList[i - 1].endTime - ) { - this.slicesTimeList[i - 1].text = inputValue; - document.dispatchEvent(new CustomEvent('slices-change', { detail: this.slicesTimeList[i - 1] })); - // 旗子颜色改变时，重绘泳道图 - this.systemTrace?.refreshCanvas(true); - } - } - }); - // 第一个tr是移除全部，所以跳过，从第二个tr开始，和this.slicesTimeList数组的第一个对应……，所以i从1开始，在this.slicesTimeList数组中取值时用i-1 for (let i = 1; i < tr.length; i++) { - // 修改颜色 - tr[i].querySelector('#color-input')!.value = this.slicesTimeList[i - 1].color; + tr[i].querySelector('input')!.value = this.slicesTimeList[i - 1].color; // 点击色块修改颜色 - tr[i].querySelector('#color-input')?.addEventListener('change', (event: any) => { + tr[i].querySelector('input')?.addEventListener('change', (event: any) => { if ( this.tableDataSource[i].startTime === this.slicesTimeList[i - 1].startTime && this.tableDataSource[i].endTime === this.slicesTimeList[i - 1].endTime @@ -223,57 +151,6 @@ export class TabPaneCurrent extends BaseElement { } event.stopPropagation(); }); - - // 修改备注 - tr[i].querySelector('#text-input')!.value = this.slicesTimeList[i - 1].text; - // // 点击色块修改颜色 - tr[i].querySelector('#text-input')?.addEventListener('keyup', (event: any) => { - if ( - this.tableDataSource[i].startTime === this.slicesTimeList[i - 1].startTime && - this.tableDataSource[i].endTime === this.slicesTimeList[i - 1].endTime && - event.keyCode == '13' - ) { - this.systemTrace!.slicesList = this.slicesTimeList || []; - this.slicesTimeList[i - 1].text = event?.target.value; - window.publish(window.SmartEvent.UI.KeyboardEnable, { - enable: true, - }); - document.dispatchEvent(new CustomEvent('slices-change', { detail: this.slicesTimeList[i - 1] })); - - this.systemTrace?.refreshCanvas(true); - } - event.stopPropagation(); - }); - - tr[i].querySelector('#text-input')?.addEventListener('blur', (event: any) => { - (window as any).flagInputFocus = false; - window.publish(window.SmartEvent.UI.KeyboardEnable, { - enable: true, - }); - if ( - this.tableDataSource[i].startTime === this.slicesTimeList[i - 1].startTime && - this.tableDataSource[i].endTime === this.slicesTimeList[i - 1].endTime - ) { - this.slicesTimeList[i - 1].text = event?.target.value; - document.dispatchEvent(new CustomEvent('slices-change', { detail: this.slicesTimeList[i - 1] })); - - this.systemTrace?.refreshCanvas(true); - } - event.stopPropagation(); - }); - - tr[i].querySelector('#text-input')?.addEventListener('focus', (event: any) => { - (window as any).flagInputFocus = true; - window.publish(window.SmartEvent.UI.KeyboardEnable, { - enable: false, - }); - let tr = this.panelTable!.shadowRoot!.querySelectorAll('.tr') as NodeListOf; - // 第一个tr是移除全部，所以跳过，从第二个tr开始，和this.flagList数组的第一个对应……，所以i从1开始，在this.flagList数组中取值时用i-1 - for (let i = 1; i < tr.length; i++) { - tr[i].querySelector('#text-input')!.value = this.slicesTimeList[i - 1].text; - } - }); - // 点击remove按钮移除 tr[i]!.querySelector('.remove')?.addEventListener('click', (event: any) => { if ( @@ -283,7 +160,7 @@ export class TabPaneCurrent extends BaseElement { this.slicesTimeList[i - 1].hidden = true; this.systemTrace!.slicesList = this.slicesTimeList || []; document.dispatchEvent(new CustomEvent('slices-change', { detail: this.slicesTimeList[i - 1] })); - // 移除时更新表格内容 + // 移除时更新表格内容 this.setTableData(); } event.stopPropagation(); @@ -311,11 +188,11 @@ export class TabPaneCurrent extends BaseElement { } - + - + - +