diff --git a/ide/src/trace/component/SpSystemTrace.ts b/ide/src/trace/component/SpSystemTrace.ts index 84c496ad410dce3796a8f734fc30dda3f36c44a3..956d81aaa72260038393ba92d4371267aade6c7a 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; @@ -218,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; @@ -1978,7 +2001,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,7 +2175,34 @@ 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() === '?'){ document.querySelector('body > sp-application')!.shadowRoot!.querySelector('#sp-keyboard')!.style.visibility = 'visible'; } @@ -2175,22 +2232,24 @@ export class SpSystemTrace extends BaseElement { TraceRow.isUserInteraction = false; this.observerScrollHeightEnable = false; this.keyboardEnable && this.timerShaftEL!.documentOnKeyUp(ev); - if (ev.code == 'Enter') { + if (ev.code == 'Enter') { + document.removeEventListener('keydown', this.documentOnKeyDown); if (ev.shiftKey) { this.dispatchEvent( new CustomEvent('previous-data', { - detail: {}, - composed: false, + detail: {}, + composed: false, }) ); } else { this.dispatchEvent( new CustomEvent('next-data', { - detail: {}, - composed: false, + detail: {}, + composed: false, }) ); } + document.addEventListener('keydown', this.documentOnKeyDown); } if (ev.ctrlKey) { @@ -3737,6 +3796,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 +3979,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)); @@ -4444,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 e8ec433221ba079d90bf988490b650a10683e427..ed87a02d795f48c7773b5be12acf09fe4b382960 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,18 @@ 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'); @@ -229,7 +243,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 +266,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 +289,13 @@ 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); + 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) { this.dispatchEvent( @@ -288,8 +317,13 @@ export class LitSearch extends BaseElement { this._retarge_index!.value = ''; }, 2000); } - } - e.stopPropagation(); + 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(); }); }