From 4e689db5226938c8624aca7bc35d7e6bb54aa5f9 Mon Sep 17 00:00:00 2001 From: hanlibin Date: Tue, 21 Nov 2023 10:38:23 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E6=90=9C=E7=B4=A2=E5=A2=9E=E5=BC=BA-?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=9B=9E=E8=BD=A6=E9=94=AE=E6=8C=81=E7=BB=AD?= =?UTF-8?q?=E6=90=9C=E7=B4=A2=E8=83=BD=E5=8A=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: hanlibin --- ide/src/trace/component/SpSystemTrace.ts | 90 ++++++++++++------- .../trace/component/trace/search/Search.ts | 55 +++++++++--- 2 files changed, 102 insertions(+), 43 deletions(-) diff --git a/ide/src/trace/component/SpSystemTrace.ts b/ide/src/trace/component/SpSystemTrace.ts index 84c496ad..bbd6c5f2 100644 --- a/ide/src/trace/component/SpSystemTrace.ts +++ b/ide/src/trace/component/SpSystemTrace.ts @@ -113,23 +113,8 @@ 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; endTime: number | undefined; @@ -150,6 +135,7 @@ 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; @@ -1978,7 +1964,14 @@ export class SpSystemTrace extends BaseElement { ['d', false], ['f', false], ]); - documentOnKeyPress = (ev: KeyboardEvent) => { + + 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(); TraceRow.isUserInteraction = true; @@ -2145,6 +2138,29 @@ export class SpSystemTrace extends BaseElement { }, 100); }; + // 一直按着回车键的时候执行搜索功能 + private continueSearch = (ev: KeyboardEvent)=>{ + console.log('key=' + ev.key + " , code="+ ev.code + ', keyCode=' + ev.keyCode); + + 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(ev.key.toLocaleLowerCase() === '?'){ document.querySelector('body > sp-application')!.shadowRoot!.querySelector('#sp-keyboard')!.style.visibility = 'visible'; @@ -2176,21 +2192,29 @@ export class SpSystemTrace extends BaseElement { this.observerScrollHeightEnable = false; this.keyboardEnable && this.timerShaftEL!.documentOnKeyUp(ev); if (ev.code == 'Enter') { - if (ev.shiftKey) { - this.dispatchEvent( - new CustomEvent('previous-data', { - detail: {}, - composed: false, - }) - ); - } else { - this.dispatchEvent( - new CustomEvent('next-data', { - detail: {}, - composed: false, - }) - ); - } + if(this.times.size > 0){ + for(let timerId of this.times){ + clearTimeout(timerId); + } + this.times.clear(); + } + document.removeEventListener('keydown', this.documentOnKeyDown); + if (ev.shiftKey) { + this.dispatchEvent( + new CustomEvent('previous-data', { + detail: {}, + composed: false, + }) + ); + } else { + this.dispatchEvent( + new CustomEvent('next-data', { + detail: {}, + composed: false, + }) + ); + } + document.addEventListener('keydown', this.documentOnKeyDown); } if (ev.ctrlKey) { @@ -3737,6 +3761,7 @@ 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); @@ -3919,6 +3944,7 @@ export class SpSystemTrace extends BaseElement { 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)); diff --git a/ide/src/trace/component/trace/search/Search.ts b/ide/src/trace/component/trace/search/Search.ts index e8ec4332..ebb33420 100644 --- a/ide/src/trace/component/trace/search/Search.ts +++ b/ide/src/trace/component/trace/search/Search.ts @@ -15,6 +15,7 @@ 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'; @@ -35,6 +36,7 @@ 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; @@ -191,9 +193,9 @@ export class LitSearch extends BaseElement { }, 200); } - private searchKeyupListener(e: KeyboardEvent) { - if (e.code === 'Enter') { - this.updateSearchList(this.search!.value); + private searchKeyupListener(e: KeyboardEvent) { + if( e.key === 'Enter' ){ + this.updateSearchList(this.search!.value); if (e.shiftKey) { this.dispatchEvent( new CustomEvent('previous-data', { @@ -220,6 +222,19 @@ 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); + } + this.systemTrace.times.clear(); + } + } + } + + initElements(): void { this.search = this.shadowRoot!.querySelector('input'); this.totalEL = this.shadowRoot!.querySelector('#total'); @@ -229,7 +244,19 @@ 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(); }); @@ -240,11 +267,8 @@ export class LitSearch extends BaseElement { this.index = -1; this._retarge_index!.value = ''; }); - this.search!.addEventListener('keyup', (e: KeyboardEvent) => { - this._retarge_index!.value = "" - this.index = -1; - this.searchKeyupListener(e); - }); + this.search!.addEventListener('keyup', searchKeyup ); + this.shadowRoot?.querySelector('#arrow-left')?.addEventListener('click', (e) => { this.dispatchEvent( new CustomEvent('previous-data', { @@ -266,7 +290,12 @@ export class LitSearch extends BaseElement { // 添加翻页监听事件 this.shadowRoot?.querySelector("input[name='retarge_index']")?.addEventListener('keyup', (e: any) => { - if (e.keyCode == 13) { + + if (e.key === 'Enter') { + this.clearTimes(); + document.removeEventListener('keyup', this.systemTrace!.documentOnKeyUp); + document.removeEventListener('keydown', this.systemTrace!.documentOnKeyDown); + this.search!.removeEventListener('keyup', searchKeyup); this.retarget_index = Number(this._retarge_index!.value); if (this.retarget_index <= this._list.length && this.retarget_index != 0) { this.dispatchEvent( @@ -288,8 +317,12 @@ export class LitSearch extends BaseElement { this._retarge_index!.value = ''; }, 2000); } - } - e.stopPropagation(); + this._retarge_index?.blur(); + document.addEventListener('keyup', this.systemTrace!.documentOnKeyUp); + document.addEventListener('keydown', this.systemTrace!.documentOnKeyDown ); + this.search!.addEventListener('keyup', searchKeyup); + } + e.stopPropagation(); }); } -- Gitee From 34c9d39b3ed24b1e37081fbb9462ea8efbe2b8e0 Mon Sep 17 00:00:00 2001 From: hanlibin Date: Tue, 21 Nov 2023 10:57:45 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E6=90=9C=E7=B4=A2=E5=A2=9E=E5=BC=BA-?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=9B=9E=E8=BD=A6=E9=94=AE=E6=8C=81=E7=BB=AD?= =?UTF-8?q?=E6=90=9C=E7=B4=A2=E8=83=BD=E5=8A=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: hanlibin --- ide/src/trace/component/SpSystemTrace.ts | 37 ++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/ide/src/trace/component/SpSystemTrace.ts b/ide/src/trace/component/SpSystemTrace.ts index bbd6c5f2..b6a2f4e2 100644 --- a/ide/src/trace/component/SpSystemTrace.ts +++ b/ide/src/trace/component/SpSystemTrace.ts @@ -204,6 +204,43 @@ 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; -- Gitee From b70aaaedb4a4048551fd0ffad1604ac0c7b42a7c Mon Sep 17 00:00:00 2001 From: hanlibin Date: Tue, 21 Nov 2023 11:31:46 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E6=90=9C=E7=B4=A2=E5=A2=9E=E5=BC=BA-?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=9B=9E=E8=BD=A6=E9=94=AE=E6=8C=81=E7=BB=AD?= =?UTF-8?q?=E6=90=9C=E7=B4=A2=E8=83=BD=E5=8A=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: hanlibin --- ide/src/trace/component/SpSystemTrace.ts | 51 +++++++++---------- .../trace/component/trace/search/Search.ts | 9 ++-- 2 files changed, 30 insertions(+), 30 deletions(-) diff --git a/ide/src/trace/component/SpSystemTrace.ts b/ide/src/trace/component/SpSystemTrace.ts index b6a2f4e2..956d81aa 100644 --- a/ide/src/trace/component/SpSystemTrace.ts +++ b/ide/src/trace/component/SpSystemTrace.ts @@ -2177,8 +2177,6 @@ export class SpSystemTrace extends BaseElement { // 一直按着回车键的时候执行搜索功能 private continueSearch = (ev: KeyboardEvent)=>{ - console.log('key=' + ev.key + " , code="+ ev.code + ', keyCode=' + ev.keyCode); - if (ev.key === 'Enter') { if (ev.shiftKey) { this.dispatchEvent( @@ -2199,6 +2197,12 @@ export class SpSystemTrace extends BaseElement { } documentOnKeyUp = (ev: KeyboardEvent) => { + if(this.times.size > 0){ + for(let timerId of this.times){ + clearTimeout(timerId); + } + } + if(ev.key.toLocaleLowerCase() === '?'){ document.querySelector('body > sp-application')!.shadowRoot!.querySelector('#sp-keyboard')!.style.visibility = 'visible'; } @@ -2228,30 +2232,24 @@ export class SpSystemTrace extends BaseElement { TraceRow.isUserInteraction = false; this.observerScrollHeightEnable = false; this.keyboardEnable && this.timerShaftEL!.documentOnKeyUp(ev); - if (ev.code == 'Enter') { - if(this.times.size > 0){ - for(let timerId of this.times){ - clearTimeout(timerId); - } - this.times.clear(); - } - document.removeEventListener('keydown', this.documentOnKeyDown); - if (ev.shiftKey) { - this.dispatchEvent( - new CustomEvent('previous-data', { - detail: {}, - composed: false, - }) - ); - } else { - this.dispatchEvent( - new CustomEvent('next-data', { - detail: {}, - composed: false, - }) - ); - } - document.addEventListener('keydown', this.documentOnKeyDown); + if (ev.code == 'Enter') { + document.removeEventListener('keydown', this.documentOnKeyDown); + if (ev.shiftKey) { + this.dispatchEvent( + new CustomEvent('previous-data', { + detail: {}, + composed: false, + }) + ); + } else { + this.dispatchEvent( + new CustomEvent('next-data', { + detail: {}, + composed: false, + }) + ); + } + document.addEventListener('keydown', this.documentOnKeyDown); } if (ev.ctrlKey) { @@ -4507,6 +4505,7 @@ export class SpSystemTrace extends BaseElement { InitAnalysis.getInstance().isInitAnalysis = true; procedurePool.submitWithName('logic0', 'clear', {}, undefined, (res: any) => {}); procedurePool.submitWithName('logic1', 'clear', {}, undefined, (res: any) => {}); + this.times.clear(); } init = async (param: { buf?: ArrayBuffer; url?: string }, wasmConfigUri: string, progress: Function) => { diff --git a/ide/src/trace/component/trace/search/Search.ts b/ide/src/trace/component/trace/search/Search.ts index ebb33420..ed87a02d 100644 --- a/ide/src/trace/component/trace/search/Search.ts +++ b/ide/src/trace/component/trace/search/Search.ts @@ -228,8 +228,7 @@ export class LitSearch extends BaseElement { if(this.systemTrace.times.size > 0){ for(let timerId of this.systemTrace.times){ clearTimeout(timerId); - } - this.systemTrace.times.clear(); + } } } } @@ -295,6 +294,7 @@ export class LitSearch extends BaseElement { 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); this.retarget_index = Number(this._retarge_index!.value); if (this.retarget_index <= this._list.length && this.retarget_index != 0) { @@ -317,10 +317,11 @@ export class LitSearch extends BaseElement { this._retarge_index!.value = ''; }, 2000); } - this._retarge_index?.blur(); + this._retarge_index?.blur(); + this.search!.addEventListener('keyup', searchKeyup); document.addEventListener('keyup', this.systemTrace!.documentOnKeyUp); document.addEventListener('keydown', this.systemTrace!.documentOnKeyDown ); - this.search!.addEventListener('keyup', searchKeyup); + document.addEventListener('keypress', this.systemTrace!.documentOnKeyPress); } e.stopPropagation(); }); -- Gitee