diff --git a/ide/src/base-ui/menu/LitMainMenu.ts b/ide/src/base-ui/menu/LitMainMenu.ts index 19d7aa5e12ac2191ab53b8503d67675b4827d969..de1dac4fcc7a2aa781e960a0b521827ae924c60b 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 884fad542a26d94288d19262a1f0dee302e8c7e0..e7491ab109097ceb9359b6741c7fa014a6251b6c 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 e268dadef7aa1da48b2db8613f598fe26a9541f6..862742f60e65c10f21a88c88253ee088f7e60fe9 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), }); @@ -1407,6 +1408,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), }); @@ -1415,6 +1417,7 @@ export class SpApplication extends BaseElement { mainMenu.menus!.splice(index, 1, { collapsed: false, title: 'Support', + second:false, describe: 'Support', children: [ { @@ -1449,6 +1452,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), }); @@ -1743,6 +1747,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), }); @@ -1768,6 +1773,7 @@ export class SpApplication extends BaseElement { { collapsed: false, title: 'Navigation', + second:false, describe: 'Open or record a new trace', children: [ { @@ -1826,6 +1832,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 c87c806a568ec748a92cae53df3f8bad5b2b7ad4..6dbfb20550d3b0a77a01faacc1e9177f2bdbdd9c 100644 --- a/ide/src/trace/component/SpHelp.ts +++ b/ide/src/trace/component/SpHelp.ts @@ -54,6 +54,7 @@ export class SpHelp extends BaseElement { { collapsed: false, title: 'QuickStart', + second: false, describe: '', children: [ { @@ -386,6 +387,7 @@ export class SpHelp extends BaseElement { { collapsed: false, title: 'TraceStreamer', + second: false, describe: '', children: [ { @@ -460,6 +462,7 @@ export class SpHelp extends BaseElement { { collapsed: false, title: 'SmartPerf', + second: false, describe: '', children: [ { diff --git a/ide/src/trace/component/SpRecordTrace.ts b/ide/src/trace/component/SpRecordTrace.ts index f8794aa04bd1cf07473e37be7a39f77121675b2a..039518716fb0cd9a5bb9aa569dfb4e2866ecbdab 100644 --- a/ide/src/trace/component/SpRecordTrace.ts +++ b/ide/src/trace/component/SpRecordTrace.ts @@ -528,7 +528,7 @@ export class SpRecordTrace extends BaseElement { freshMenuDisable(disable: boolean): void { let mainMenu = this.sp!.shadowRoot?.querySelector('#main-menu') as LitMainMenu; mainMenu.menus?.forEach((men) => { - 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 2d26d5cbdbec745bc401991dc8343876e2fbcae0..369c251e92bd6a9fa6ffb5698ee9fd52f98e0d40 100644 --- a/ide/src/trace/component/SpSystemTrace.ts +++ b/ide/src/trace/component/SpSystemTrace.ts @@ -2927,6 +2927,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 cc618b7c1b3ca019a74266d0eab1de82579755a9..80c8c13c6ec6c9596f405457327c0aa927abf896 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 ea1c9e339fe27dbde16881d70343bc40fd6726a5..6ff2a4bab286800ccd13d9e370c31832a91a89eb 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 a10edceb7cab1a1c3ab883e48290646dc9cb3dc5..ecf8720605f8f4db597e1cab413537e8bc72453c 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 e535924fff3367531f758801f04b5928bd7def32..d38de318c166aa1f439dd3baf9bc686cfa04dabb 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,