diff --git a/ide/src/trace/bean/BoxSelection.ts b/ide/src/trace/bean/BoxSelection.ts index 3f32e165c538f08f7241da4ec1277fb720811d10..791527d5a6f2e724762a1ab30f1e93ef19fc65e3 100644 --- a/ide/src/trace/bean/BoxSelection.ts +++ b/ide/src/trace/bean/BoxSelection.ts @@ -42,6 +42,7 @@ export class SelectionParam { startup: boolean = false; staticInit: boolean = false; isRowClick: boolean = false; + eventTypeId: string = ''; cpus: Array = []; cpuStateRowsId: Array = []; @@ -146,6 +147,13 @@ export class SelectionData { max: string = ''; stateJX: string = ''; cpu: number = 0; + + recordStartNs: number = 0; + leftNs: number = 0; + rightNs: number = 0; + threadIds: Array = []; + ts: number = 0; + dur: number = 0; } export class Counter { diff --git a/ide/src/trace/bean/MarkStruct.ts b/ide/src/trace/bean/MarkStruct.ts index f07e3e17ce0ab03d96b567185db393a37a24166b..08e089ca9a8b156d6ad784d7bd2648b149d4edc6 100644 --- a/ide/src/trace/bean/MarkStruct.ts +++ b/ide/src/trace/bean/MarkStruct.ts @@ -18,11 +18,13 @@ export class MarkStruct { startTime: number | undefined; endTime: number | undefined; colorEl: HTMLInputElement | undefined; + text: HTMLInputElement | undefined; operate: HTMLButtonElement | undefined; isSelected: boolean = false; constructor( operate: HTMLButtonElement, colorEl?: HTMLInputElement | undefined, + text?: HTMLInputElement | undefined, startTimeStr?: string, startTime?: number, endTimeStr?: string, @@ -30,6 +32,7 @@ export class MarkStruct { ) { this.operate = operate; this.colorEl = colorEl; + this.text = text; this.startTimeStr = startTimeStr; this.startTime = startTime; this.endTimeStr = endTimeStr; diff --git a/ide/src/trace/component/StackBar.ts b/ide/src/trace/component/StackBar.ts index 1972638e1287db0f6dc908dc9aec70e4f5d65332..02a74e56476e79143f6c5774b462978e1211978d 100644 --- a/ide/src/trace/component/StackBar.ts +++ b/ide/src/trace/component/StackBar.ts @@ -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(7) + 'ms'; + sv!.state = v.state + ' : ' + sv!.value.toFixed(5) + 'ms'; } else { let sv = new StackValue(); sv.value = v.wallDuration; - sv.state = v.state + ' : ' + sv.value.toFixed(7) + 'ms'; + sv.state = v.state + ' : ' + sv.value.toFixed(5) + 'ms'; sv.color = Utils.getStateColor(v.stateJX); map.set(v.state, sv); } diff --git a/ide/src/trace/component/trace/sheet/TabPaneCurrent.ts b/ide/src/trace/component/trace/sheet/TabPaneCurrent.ts index 24037dfcf1f847bb0a80a38903535022edf4cf34..d42578d4e3f498f11c6b7be4f249d48ab0841fe4 100644 --- a/ide/src/trace/component/trace/sheet/TabPaneCurrent.ts +++ b/ide/src/trace/component/trace/sheet/TabPaneCurrent.ts @@ -30,8 +30,42 @@ export class TabPaneCurrent extends BaseElement { initElements(): void { this.systemTrace = document - .querySelector('body > sp-application') - ?.shadowRoot!.querySelector('#sp-system-trace'); + .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) => { // 点击表格某一行后，背景变色 @@ -59,6 +93,17 @@ export class TabPaneCurrent extends BaseElement { this.slicesTimeList = []; } }); + + + // 当鼠标移出panel时重新加载备注信息 + this.systemTrace?.shadowRoot?.querySelector('trace-sheet')?.addEventListener('mouseout', (event: any) => { + 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 }); } public setCurrentSlicesTime(slicesTime: SlicesTime): void { @@ -99,15 +144,19 @@ 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); } @@ -132,13 +181,30 @@ export class TabPaneCurrent extends BaseElement { /** * 修改卡尺颜色事件和移除卡尺的事件处理 */ - private eventHandler(): void { + private eventHandler(): void { + // 更新备注信息 + this.panelTable!.addEventListener('click', (event: any) => { + let tr = this.panelTable!.shadowRoot!.querySelectorAll('.tr') as NodeListOf; + 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); + } + } + // event.stopPropagation(); + }); + 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('input')!.value = this.slicesTimeList[i - 1].color; + // 修改颜色 + tr[i].querySelector('#color-input')!.value = this.slicesTimeList[i - 1].color; // 点击色块修改颜色 - tr[i].querySelector('input')?.addEventListener('change', (event: any) => { + tr[i].querySelector('#color-input')?.addEventListener('change', (event: any) => { if ( this.tableDataSource[i].startTime === this.slicesTimeList[i - 1].startTime && this.tableDataSource[i].endTime === this.slicesTimeList[i - 1].endTime @@ -151,6 +217,55 @@ 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 ( @@ -160,6 +275,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.slicesTimeList.splice(this.slicesTimeList.indexOf(this.slicesTimeList[i - 1]), 1); // 移除时更新表格内容 this.setTableData(); } @@ -188,11 +304,11 @@ export class TabPaneCurrent extends BaseElement { } - + - + - +