From 5e275e3994c4e0f69ca73d462fd3991ad3c0a2fb Mon Sep 17 00:00:00 2001 From: liufei Date: Thu, 2 Nov 2023 15:00:36 +0800 Subject: [PATCH] help document three-level catalog; flag,shift+m reset color Signed-off-by: liufei --- ide/src/base-ui/menu/LitMainMenu.ts | 111 ++- ide/src/base-ui/menu/LitMainMenuGroup.ts | 25 +- ide/src/trace/SpApplication.ts | 7 + ide/src/trace/component/SpHelp.ts | 737 ++++++++++-------- ide/src/trace/component/SpRecordTrace.ts | 2 +- ide/src/trace/component/SpSystemTrace.ts | 1 + .../component/trace/TimerShaftElement.ts | 19 +- .../component/trace/timer-shaft/SportRuler.ts | 4 +- .../ui-worker/ProcedureWorkerCommon.ts | 62 +- .../ui-worker/ProcedureWorkerHiPerfCPU.ts | 5 - 10 files changed, 561 insertions(+), 412 deletions(-) diff --git a/ide/src/base-ui/menu/LitMainMenu.ts b/ide/src/base-ui/menu/LitMainMenu.ts index 19d7aa5e..de1dac4f 100644 --- a/ide/src/base-ui/menu/LitMainMenu.ts +++ b/ide/src/base-ui/menu/LitMainMenu.ts @@ -54,37 +54,87 @@ export class LitMainMenu extends BaseElement { let groupDescribe = group!.shadowRoot!.querySelector('.group-describe') as LitMainMenuGroup; menuBody?.appendChild(group); it.children?.forEach((item: any) => { - let th = new LitMainMenuItem(); - th.setAttribute('icon', item.icon || ''); - th.setAttribute('title', item.title || ''); - if (this.getAttribute('main_menu') === '1' && window.localStorage.getItem('Theme') === 'dark') { - groupName.style.color = 'white'; - groupDescribe.style.color = 'white'; - th!.style.color = 'white'; - } else { - groupName.style.color = 'black'; - groupDescribe.style.color = 'black'; - th!.style.color = 'black'; - } - if (item.fileChoose) { - th.setAttribute('file', ''); - th.addEventListener('file-change', (e) => { - if (item.fileHandler && !th.disabled) { - item.fileHandler(e); + if (item.children && item.children.length > 0) { + let secondGroup = new LitMainMenuGroup(); + secondGroup.setAttribute('title', item.title || ''); + secondGroup.setAttribute('describe', item.describe || ''); + if (item.second) { + secondGroup.setAttribute('second', ''); + } else { + secondGroup.removeAttribute('second') + } + if (item.collapsed) { + secondGroup.setAttribute('collapsed', '') + } else { + secondGroup.removeAttribute('collapsed') + } + group?.appendChild(secondGroup) + item.children?.forEach((v: any) => { + let th = new LitMainMenuItem(); + th.setAttribute('icon', v.icon || ''); + th.setAttribute('title', v.title || '');if (this.getAttribute('main_menu') === '1' && window.localStorage.getItem('Theme') === 'dark') { + groupName.style.color = 'white'; + groupDescribe.style.color = 'white'; + th!.style.color = 'white'; + } else { + groupName.style.color = 'black'; + groupDescribe.style.color = 'black'; + th!.style.color = 'black'; } - }); - } else { - th.removeAttribute('file'); - th.addEventListener('click', (e) => { - if (item.clickHandler && !th.disabled) { - item.clickHandler(item); + if (v.fileChoose) { + th.setAttribute('file', ''); + th.addEventListener('file-change', (e) => { + if (v.fileHandler && !th.disabled) { + v.fileHandler(e); + } + }); + } else { + th.removeAttribute('file'); + th.addEventListener('click', (e) => { + if (v.clickHandler && !th.disabled) { + v.clickHandler(v); + } + }); } - }); - } - if (item.disabled != undefined) { - th.disabled = item.disabled; + if (v.disabled != undefined) { + th.disabled = v.disabled; + } + secondGroup.appendChild(th) + }) + } else { + let th = new LitMainMenuItem(); + th.setAttribute('icon', item.icon || ''); + th.setAttribute('title', item.title || ''); + if (this.getAttribute('main_menu') === '1' && window.localStorage.getItem('Theme') === 'dark') { + groupName.style.color = 'white'; + groupDescribe.style.color = 'white'; + th!.style.color = 'white'; + } else { + groupName.style.color = 'black'; + groupDescribe.style.color = 'black'; + th!.style.color = 'black'; + } + if (item.fileChoose) { + th.setAttribute('file', ''); + th.addEventListener('file-change', (e) => { + if (item.fileHandler && !th.disabled) { + item.fileHandler(e); + } + }); + } else { + th.removeAttribute('file'); + th.addEventListener('click', (e) => { + if (item.clickHandler && !th.disabled) { + item.clickHandler(item); + } + }); + } + if (item.disabled != undefined) { + th.disabled = item.disabled; + } + group?.appendChild(th); } - group?.appendChild(th); + }); }); } @@ -94,7 +144,7 @@ export class LitMainMenu extends BaseElement { st?.addEventListener('slotchange', (e) => { this.slotElements = st?.assignedElements(); this.slotElements?.forEach((it) => { - it.querySelectorAll('lit-main-menu-item').forEach((cell) => {}); + it.querySelectorAll('lit-main-menu-item').forEach((cell) => { }); }); }); let versionDiv: HTMLElement | null | undefined = this.shadowRoot?.querySelector('.version'); @@ -192,8 +242,9 @@ export class LitMainMenu extends BaseElement { export interface MenuGroup { title: string; describe: string; + second: boolean; collapsed: boolean; - children: Array; + children: any; } export interface MenuItem { diff --git a/ide/src/base-ui/menu/LitMainMenuGroup.ts b/ide/src/base-ui/menu/LitMainMenuGroup.ts index 884fad54..e7491ab1 100644 --- a/ide/src/base-ui/menu/LitMainMenuGroup.ts +++ b/ide/src/base-ui/menu/LitMainMenuGroup.ts @@ -23,7 +23,7 @@ export class LitMainMenuGroup extends BaseElement { private group: HTMLElement | null | undefined; static get observedAttributes() { - return ['title', 'describe', 'collapsed', 'nocollapse', 'radius']; + return ['title', 'describe', 'collapsed', 'nocollapse', 'radius','second']; } get collapsed(): boolean { @@ -38,6 +38,18 @@ export class LitMainMenuGroup extends BaseElement { } } + get second(){ + return this.hasAttribute('second'); + } + + set second(value:boolean){ + if (value) { + this.setAttribute('second', ''); + } else { + this.removeAttribute('second'); + } + } + get nocollapsed() { return this.hasAttribute('nocollapsed'); } @@ -80,9 +92,15 @@ export class LitMainMenuGroup extends BaseElement { user-select: none; transition: background-color .3s; } - :host(:not([collapsed])) ::slotted(lit-main-menu-item){ + :host(:not([collapsed])),:host(:not([second])) ::slotted(lit-main-menu-item){ display: flex; } + host(:not([collapsed])) :host([second]) ::slotted(lit-main-menu-group){ + display:flex; + } + :host([second]) .group-name{ + padding-left:40px; + } :host(:not([collapsed])) .group-describe{ height: 0; visibility: hidden; @@ -107,6 +125,9 @@ export class LitMainMenuGroup extends BaseElement { :host([collapsed]) ::slotted(lit-main-menu-item){ display: none; } + :host([collapsed]) ::slotted(lit-main-menu-group){ + display:none; + } .group-name{ font-size: 14px; font-family: Helvetica; diff --git a/ide/src/trace/SpApplication.ts b/ide/src/trace/SpApplication.ts index 6fb8caf9..ab16d02d 100644 --- a/ide/src/trace/SpApplication.ts +++ b/ide/src/trace/SpApplication.ts @@ -1061,6 +1061,7 @@ export class SpApplication extends BaseElement { mainMenu.menus!.splice(1, mainMenu.menus!.length > 2 ? 1 : 0, { collapsed: false, title: 'Current Trace', + second:false, describe: 'Actions on the current trace', children: getTraceOptionMenus(showFileName, fileSize, fileName, true, dbName), }); @@ -1404,6 +1405,7 @@ export class SpApplication extends BaseElement { mainMenu.menus!.splice(2, 1, { collapsed: false, title: 'Convert trace', + second:false, describe: 'Convert to other formats', children: pushConvertTrace(fileName), }); @@ -1412,6 +1414,7 @@ export class SpApplication extends BaseElement { mainMenu.menus!.splice(index, 1, { collapsed: false, title: 'Support', + second:false, describe: 'Support', children: [ { @@ -1446,6 +1449,7 @@ export class SpApplication extends BaseElement { mainMenu.menus!.splice(1, mainMenu.menus!.length > 2 ? 1 : 0, { collapsed: false, title: 'Current Trace', + second:false, describe: 'Actions on the current trace', children: getTraceOptionMenus(showFileName, fileSize, fileName, false), }); @@ -1740,6 +1744,7 @@ export class SpApplication extends BaseElement { mainMenu.menus!.splice(1, mainMenu.menus!.length > 2 ? 1 : 0, { collapsed: false, title: 'Current Trace', + second:false, describe: 'Actions on the current trace', children: getTraceOptionMenus(showFileName, fileSize, fileName, false), }); @@ -1765,6 +1770,7 @@ export class SpApplication extends BaseElement { { collapsed: false, title: 'Navigation', + second:false, describe: 'Open or record a new trace', children: [ { @@ -1823,6 +1829,7 @@ export class SpApplication extends BaseElement { { collapsed: false, title: 'Support', + second:false, describe: 'Support', children: [ { diff --git a/ide/src/trace/component/SpHelp.ts b/ide/src/trace/component/SpHelp.ts index 2db6c0f3..970cf1a5 100644 --- a/ide/src/trace/component/SpHelp.ts +++ b/ide/src/trace/component/SpHelp.ts @@ -54,351 +54,415 @@ export class SpHelp extends BaseElement { { collapsed: false, title: 'QuickStart', + second: false, describe: '', children: [ { - title: '设备端抓取trace说明', - icon: '', - clickHandler: function (item: MenuItem) { - SpStatisticsHttpUtil.addOrdinaryVisitAction({ - event: 'record', - action: 'help_doc', - }); - that.appContent!.innerHTML = - ' { - men.children.forEach((child) => { + men.children.forEach((child:any) => { // @ts-ignore child.disabled = disable; }); diff --git a/ide/src/trace/component/SpSystemTrace.ts b/ide/src/trace/component/SpSystemTrace.ts index c50f0c6f..ba08375b 100644 --- a/ide/src/trace/component/SpSystemTrace.ts +++ b/ide/src/trace/component/SpSystemTrace.ts @@ -2925,6 +2925,7 @@ export class SpSystemTrace extends BaseElement { snapshotClickHandler ); } else if (clickRowType === TraceRow.ROW_TYPE_JS_CPU_PROFILER && JsCpuProfilerStruct.hoverJsCpuProfilerStruct) { + console.log('点了吗'); JsCpuProfilerStruct.selectJsCpuProfilerStruct = JsCpuProfilerStruct.hoverJsCpuProfilerStruct; let selectStruct = JsCpuProfilerStruct.selectJsCpuProfilerStruct; let dataArr: Array = []; diff --git a/ide/src/trace/component/trace/TimerShaftElement.ts b/ide/src/trace/component/trace/TimerShaftElement.ts index cc618b7c..80c8c13c 100644 --- a/ide/src/trace/component/trace/TimerShaftElement.ts +++ b/ide/src/trace/component/trace/TimerShaftElement.ts @@ -27,12 +27,21 @@ import { type SpSystemTrace, CurrentSlicesTime } from '../SpSystemTrace.js'; import './timer-shaft/CollapseButton.js'; //随机生成十六位进制颜色 export function randomRgbColor() { - const letters = '0123456789ABCDEF'; - let color = '#'; - for (let index = 0; index < 6; index++) { - color += letters[Math.floor(Math.random() * 16)]; + let r = Math.floor(Math.random() * 255); + let g = Math.floor(Math.random() * 255); + let b = Math.floor(Math.random() * 255); + if (r * 0.299 + g * 0.587 + b * 0.114 < 192) { + let r16 = r.toString(16).length === 1 + && r.toString(16) <= 'f' ? 0 + r.toString(16) : r.toString(16); + let g16 = g.toString(16).length === 1 + && g.toString(16) <= 'f' ? 0 + g.toString(16) : g.toString(16); + let b16 = b.toString(16).length === 1 + && b.toString(16) <= 'f' ? 0 + b.toString(16) : b.toString(16); + let color = '#' + r16 + g16 + b16; + return color; + } else { + randomRgbColor() } - return color; } export function ns2s(ns: number): string { diff --git a/ide/src/trace/component/trace/timer-shaft/SportRuler.ts b/ide/src/trace/component/trace/timer-shaft/SportRuler.ts index ea1c9e33..6ff2a4ba 100644 --- a/ide/src/trace/component/trace/timer-shaft/SportRuler.ts +++ b/ide/src/trace/component/trace/timer-shaft/SportRuler.ts @@ -203,7 +203,7 @@ export class SportRuler extends Graph { this.drawFlag(flagObj.x, flagObj.color, flagObj.selected, flagObj.text, flagObj.type); } }); - !this.hoverFlag.hidden && this.drawFlag(this.hoverFlag.x, this.hoverFlag.color, true, this.hoverFlag.text); + // !this.hoverFlag.hidden && this.drawFlag(this.hoverFlag.x, this.hoverFlag.color, true, this.hoverFlag.text); //If region selection is enabled, the serial number draws a line on the axis to show the length of the box selection if (this.isRangeSelect) { let range = TraceRow.rangeSelectObject; @@ -443,7 +443,7 @@ export class SportRuler extends Graph { (this.rulerW * (startTime - this.range.startNS)) / (this.range.endNS - this.range.startNS) ); let endX = Math.round((this.rulerW * (endTime - this.range.startNS)) / (this.range.endNS - this.range.startNS)); - let color = randomRgbColor(); + let color = randomRgbColor() || '#ff0000'; this.slicesTime.color = color; newSlicestime = new SlicesTime( this.slicesTime.startTime || 0, diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerCommon.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerCommon.ts index a10edceb..ecf87206 100644 --- a/ide/src/trace/database/ui-worker/ProcedureWorkerCommon.ts +++ b/ide/src/trace/database/ui-worker/ProcedureWorkerCommon.ts @@ -655,37 +655,37 @@ export function drawLogsLineSegment( timerShaftEl: TimerShaftElement ): void { timerShaftEl.sportRuler?.draw(); - if (systemLogFlag) { - if (ctx) { - ctx.beginPath(); - ctx.lineWidth = 2; - ctx.strokeStyle = systemLogFlag?.color || '#dadada'; - ctx.moveTo(Math.floor(systemLogFlag.x), 0); - ctx.lineTo(Math.floor(systemLogFlag.x), frame.height || 0); - ctx.stroke(); - ctx.closePath(); - } - if (timerShaftEl.ctx) { - let timeText = `| ${ns2Timestamp(systemLogFlag.time)}`; - let textPointX = systemLogFlag.x; - let textMetrics = timerShaftEl.ctx.measureText(timeText); - if (timerShaftEl.ctx.canvas.width - systemLogFlag.x <= textMetrics.width) { - textPointX = systemLogFlag.x - textMetrics.width; - timeText = `${ns2Timestamp(systemLogFlag.time)} |`; - } - let locationY = 120; - timerShaftEl.ctx.beginPath(); - timerShaftEl.ctx.lineWidth = 0; - timerShaftEl.ctx.fillStyle = '#FFFFFF'; - let textHeight = textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent; - timerShaftEl.ctx.fillRect(textPointX, locationY - textHeight, textMetrics.width, textHeight); - timerShaftEl.ctx.lineWidth = 2; - timerShaftEl.ctx.fillStyle = systemLogFlag?.color || '#dadada'; - timerShaftEl.ctx.fillText(timeText, textPointX, locationY); - timerShaftEl.ctx.stroke(); - timerShaftEl.ctx.closePath(); - } - } + // if (systemLogFlag) { + // if (ctx) { + // ctx.beginPath(); + // ctx.lineWidth = 2; + // ctx.strokeStyle = systemLogFlag?.color || '#dadada'; + // ctx.moveTo(Math.floor(systemLogFlag.x), 0); + // ctx.lineTo(Math.floor(systemLogFlag.x), frame.height || 0); + // ctx.stroke(); + // ctx.closePath(); + // } + // if (timerShaftEl.ctx) { + // let timeText = `| ${ns2Timestamp(systemLogFlag.time)}`; + // let textPointX = systemLogFlag.x; + // let textMetrics = timerShaftEl.ctx.measureText(timeText); + // if (timerShaftEl.ctx.canvas.width - systemLogFlag.x <= textMetrics.width) { + // textPointX = systemLogFlag.x - textMetrics.width; + // timeText = `${ns2Timestamp(systemLogFlag.time)} |`; + // } + // let locationY = 120; + // timerShaftEl.ctx.beginPath(); + // timerShaftEl.ctx.lineWidth = 0; + // timerShaftEl.ctx.fillStyle = '#FFFFFF'; + // let textHeight = textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent; + // timerShaftEl.ctx.fillRect(textPointX, locationY - textHeight, textMetrics.width, textHeight); + // timerShaftEl.ctx.lineWidth = 2; + // timerShaftEl.ctx.fillStyle = systemLogFlag?.color || '#dadada'; + // timerShaftEl.ctx.fillText(timeText, textPointX, locationY); + // timerShaftEl.ctx.stroke(); + // timerShaftEl.ctx.closePath(); + // } + // } } export function drawSelection(ctx: any, params: any) { diff --git a/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfCPU.ts b/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfCPU.ts index e535924f..d38de318 100644 --- a/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfCPU.ts +++ b/ide/src/trace/database/ui-worker/ProcedureWorkerHiPerfCPU.ts @@ -15,11 +15,6 @@ import { ColorUtils } from '../../component/trace/base/ColorUtils.js'; import { - BaseStruct, - drawFlagLine, - drawLines, - drawLoading, - drawSelection, HiPerfStruct, hiPerf, PerfRender, -- Gitee