From ea723e6a041311e33f2510e678b303667e25e6ea Mon Sep 17 00:00:00 2001 From: zhangzepeng Date: Tue, 11 Apr 2023 20:30:24 +0800 Subject: [PATCH] =?UTF-8?q?=E2=80=98=E5=BC=80=E5=8F=91=E8=87=AA=E7=89=B9?= =?UTF-8?q?=E6=80=A7=E4=BB=A3=E7=A0=81=E5=90=88=E5=B9=B6=E2=80=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- host/ide/src/base-ui/menu/LitMainMenu.ts | 28 ++++- host/ide/src/base-ui/menu/LitMainMenuGroup.ts | 16 ++- host/ide/src/base-ui/menu/LitMainMenuItem.ts | 9 +- host/ide/src/trace/SpApplication.ts | 114 ++++++++++++------ host/ide/src/trace/component/SpSystemTrace.ts | 93 ++++++++++++++ .../trace/component/trace/base/ColorUtils.ts | 68 ++++++++++- .../component/trace/timer-shaft/SportRuler.ts | 3 + .../database/ui-worker/ProcedureWorkerFunc.ts | 10 +- 8 files changed, 293 insertions(+), 48 deletions(-) diff --git a/host/ide/src/base-ui/menu/LitMainMenu.ts b/host/ide/src/base-ui/menu/LitMainMenu.ts index b277d2c..710c6ea 100644 --- a/host/ide/src/base-ui/menu/LitMainMenu.ts +++ b/host/ide/src/base-ui/menu/LitMainMenu.ts @@ -18,6 +18,7 @@ import './LitMainMenuItem.js'; import './LitMainMenuGroup.js'; import { LitMainMenuGroup } from './LitMainMenuGroup.js'; import { LitMainMenuItem } from './LitMainMenuItem.js'; +let backgroundColor=sessionStorage.getItem('backgroundColor'); @element('lit-main-menu') export class LitMainMenu extends BaseElement { @@ -96,7 +97,7 @@ export class LitMainMenu extends BaseElement { display: flex; flex-direction: column; width: 248px; - background-color: var(--dark-background,#FFFFFF); + background-color:${backgroundColor}; height: 100vh; } .menu-body ::-webkit-scrollbar-track @@ -112,7 +113,7 @@ export class LitMainMenu extends BaseElement { } .header{ display: grid; - background-color: var(--dark-background1,#FFFFFF); + background-color: var(--dark-background1,); border-bottom: 1px solid var(--dark-background1,#EFEFEF); color: #47A7E0; font-size: 1.4rem; @@ -129,12 +130,22 @@ export class LitMainMenu extends BaseElement { align-self: center; user-select: none; } + .bottom{ + width:100%; + display:flex; + justify-content:space-between; + } + .color{ + padding: 20px; + font-size: 0.6rem; + cursor:pointer; + } + .version{ color: #94979d; padding: 20px; font-size: 0.6rem; - width: 100%; - text-align: right; + width: 8rem; } *{ box-sizing: border-box; @@ -151,14 +162,19 @@ export class LitMainMenu extends BaseElement {
- +
-
+ +
+
+ +
+
`; } } diff --git a/host/ide/src/base-ui/menu/LitMainMenuGroup.ts b/host/ide/src/base-ui/menu/LitMainMenuGroup.ts index 9e36fd0..bf0e0c3 100644 --- a/host/ide/src/base-ui/menu/LitMainMenuGroup.ts +++ b/host/ide/src/base-ui/menu/LitMainMenuGroup.ts @@ -14,6 +14,7 @@ */ import { BaseElement, element } from '../BaseElement.js'; +let textColor=''; @element('lit-main-menu-group') export class LitMainMenuGroup extends BaseElement { @@ -62,6 +63,13 @@ export class LitMainMenuGroup extends BaseElement { } this.collapsed = !this.collapsed; }); + let backgroundColor = sessionStorage.getItem('backgroundColor'); + if(backgroundColor =='rgb(38, 47, 60)'){ + textColor = 'white'; + } else{ + textColor = 'black'; + } + } initHtml(): string { @@ -75,7 +83,7 @@ export class LitMainMenuGroup extends BaseElement { display: flex; flex-direction: column; width: 248px; - background-color: var(--dark-background,#FFFFFF); + background-color: var(--dark-background,); cursor: pointer; } :host(:not([collapsed])) ::slotted(lit-main-menu-item){ @@ -89,7 +97,7 @@ export class LitMainMenuGroup extends BaseElement { display: flex; flex-direction: column; width: 248px; - background-color: var(--dark-background,#FFFFFF); + background-color: var(--dark-background,); cursor: pointer; } :host([collapsed]):hover){ @@ -108,14 +116,14 @@ export class LitMainMenuGroup extends BaseElement { .group-name{ font-family: Helvetica; font-size: 14px; - color: var(--dark-color1,#212121); + color: ${textColor}; text-align: left; line-height: 16px; font-weight: 400; padding: 20px 24px 0px 24px; } .group-describe{ - color:#92959b; + color:${textColor}; padding: 4px 24px 20px 24px; font-size: .6rem; } diff --git a/host/ide/src/base-ui/menu/LitMainMenuItem.ts b/host/ide/src/base-ui/menu/LitMainMenuItem.ts index c7669f8..ca2f026 100644 --- a/host/ide/src/base-ui/menu/LitMainMenuItem.ts +++ b/host/ide/src/base-ui/menu/LitMainMenuItem.ts @@ -14,6 +14,7 @@ */ import { BaseElement, element } from '../BaseElement.js'; +let textColor=''; @element('lit-main-menu-item') export class LitMainMenuItem extends BaseElement { @@ -65,6 +66,12 @@ export class LitMainMenuItem extends BaseElement { this.titleEl = this.shadowRoot?.querySelector('.name'); this.iconEl = this.shadowRoot?.querySelector('.icon'); this.fileEL = this.shadowRoot?.querySelector('.file'); + let backgroundColor = sessionStorage.getItem('backgroundColor'); + if(backgroundColor == 'rgb(38, 47, 60)'){ + textColor = 'white'; + } else{ + textColor = 'black'; + } } isFile(): boolean { @@ -107,7 +114,7 @@ export class LitMainMenuItem extends BaseElement { display: flex; font-family: Helvetica; font-size: 14px; - color: var(--dark-color,rgba(0,0,0,0.6)); + color: ${textColor}; text-align: left; line-height: 20px; font-weight: 400 diff --git a/host/ide/src/trace/SpApplication.ts b/host/ide/src/trace/SpApplication.ts index 2d1367c..5f5d97e 100644 --- a/host/ide/src/trace/SpApplication.ts +++ b/host/ide/src/trace/SpApplication.ts @@ -47,6 +47,7 @@ import { TraceRow } from './component/trace/base/TraceRow.js'; import { SpSchedulingAnalysis } from './component/schedulingAnalysis/SpSchedulingAnalysis.js'; import './component/trace/base/TraceRowConfig.js'; import { TraceRowConfig } from './component/trace/base/TraceRowConfig.js'; +import { ColorUtils } from './component/trace/base/ColorUtils.js'; @element('sp-application') export class SpApplication extends BaseElement { @@ -226,6 +227,7 @@ export class SpApplication extends BaseElement { /*transition: all 0.2s;*/ box-shadow: 4px 0px 20px rgba(0,0,0,0.05); z-index: 2000; + transition-duration:2s; } .search-container{ z-index: 10; @@ -453,6 +455,57 @@ export class SpApplication extends BaseElement { this.spHelp, spRecordTemplate, ]; + let sideColor = mainMenu.shadowRoot?.querySelector( + '.color' + ) as HTMLDivElement; + //修改侧边导航栏配色 + sideColor!.onclick = (e) => { + let backgroundColor = sessionStorage.getItem('backgroundColor') + let menu: HTMLDivElement | undefined | null = + this.shadowRoot?.querySelector('#main-menu'); + let menuGroup = + mainMenu.shadowRoot?.querySelectorAll( + 'lit-main-menu-group' + ); + let menuItem = + menu!.shadowRoot?.querySelectorAll( + 'lit-main-menu-item' + ); + if (backgroundColor == 'white' || !backgroundColor) { + menu!.style.backgroundColor = '#262f3c'; + menuGroup!.forEach(item => { + let groupName = item!.shadowRoot!.querySelector('.group-name') as LitMainMenuGroup; + let groupDescribe = item!.shadowRoot!.querySelector('.group-describe') as LitMainMenuGroup; + groupName.style.color = 'white'; + groupDescribe.style.color = 'white'; + + }) + menuItem!.forEach(item => { + item.style.color = 'white'; + }) + ColorUtils.MD_PALETTE = ColorUtils.MD_PALETTE_A; + ColorUtils.FUNC_COLOR = ColorUtils.FUNC_COLOR_A; + } + else { + menu!.style.backgroundColor = 'white'; + menuGroup!.forEach(item => { + let groupName = item!.shadowRoot!.querySelector('.group-name') as LitMainMenuGroup; + let groupDescribe = item!.shadowRoot!.querySelector('.group-describe') as LitMainMenuGroup; + groupName.style.color = 'black'; + groupDescribe.style.color = '#92959b'; + + }) + menuItem!.forEach(item => { + item.style.color = 'var(--dark-color,rgba(0,0,0,0.6))'; + }) + ColorUtils.MD_PALETTE = ColorUtils.MD_PALETTE_B; + ColorUtils.FUNC_COLOR = ColorUtils.FUNC_COLOR_B; + } + + sessionStorage.setItem('backgroundColor', menu!.style.backgroundColor); + + } + window.subscribe(window.SmartEvent.UI.MenuTrace, () => showContent(spSystemTrace!) ); @@ -618,8 +671,8 @@ export class SpApplication extends BaseElement { }), }) .then((response) => response.json()) - .then((data) => {}) - .catch((error) => {}); + .then((data) => { }) + .catch((error) => { }); } function getTraceOptionMenus( @@ -723,9 +776,9 @@ export class SpApplication extends BaseElement { } info( 'setPercent ：' + - command + - 'percent :' + - SpApplication.loadingProgress + command + + 'percent :' + + SpApplication.loadingProgress ); litSearch.setPercent(command + ' ', SpApplication.loadingProgress); } @@ -748,13 +801,11 @@ export class SpApplication extends BaseElement { } else { fd.append('file', ev as any); } - let uploadPath = `https://${ - window.location.host.split(':')[0] - }:9000/upload`; + let uploadPath = `https://${window.location.host.split(':')[0] + }:9000/upload`; if (that.vs) { - uploadPath = `http://${ - window.location.host.split(':')[0] - }:${window.location.port}/upload`; + uploadPath = `http://${window.location.host.split(':')[0] + }:${window.location.port}/upload`; } info('upload trace'); let dbName = ''; @@ -784,13 +835,11 @@ export class SpApplication extends BaseElement { if (res != undefined) { dbName = res; info('get trace db'); - let loadPath = `https://${ - window.location.host.split(':')[0] - }:9000`; + let loadPath = `https://${window.location.host.split(':')[0] + }:9000`; if (that.vs) { - loadPath = `http://${ - window.location.host.split(':')[0] - }:${window.location.port}`; + loadPath = `http://${window.location.host.split(':')[0] + }:${window.location.port}`; } SpApplication.loadingProgress = 0; SpApplication.progressStep = 3; @@ -846,13 +895,11 @@ export class SpApplication extends BaseElement { reader.onloadend = function (ev) { info('read file onloadend'); litSearch.setPercent('ArrayBuffer loaded ', 2); - let wasmUrl = `https://${ - window.location.host.split(':')[0] - }:${window.location.port}/application/wasm.json`; + let wasmUrl = `https://${window.location.host.split(':')[0] + }:${window.location.port}/application/wasm.json`; if (that.vs) { - wasmUrl = `http://${ - window.location.host.split(':')[0] - }:${window.location.port}/wasm.json`; + wasmUrl = `http://${window.location.host.split(':')[0] + }:${window.location.port}/wasm.json`; } SpApplication.loadingProgress = 0; SpApplication.progressStep = 3; @@ -929,9 +976,9 @@ export class SpApplication extends BaseElement { fileName.lastIndexOf('.') == -1 ? fileName : fileName.substring( - 0, - fileName.lastIndexOf('.') - ); + 0, + fileName.lastIndexOf('.') + ); document.title = `${showFileName} (${fileSize}M)`; TraceRow.rangeSelectObject = undefined; if (that.server) { @@ -957,10 +1004,9 @@ export class SpApplication extends BaseElement { if (response.ok) { response.text().then((traceFile) => { let traceFilePath = - `http://${ - window.location.host.split( - ':' - )[0] + `http://${window.location.host.split( + ':' + )[0] }:${window.location.port}` + traceFile; fetch(traceFilePath).then((res) => { @@ -1234,10 +1280,10 @@ export class SpApplication extends BaseElement { const _urlParams = _url.match(/([?&])(.+?=[^&]+)/gim); return _urlParams ? _urlParams.reduce((a: any, b) => { - const value = b.slice(1).split('='); - a[`${value[0]}`] = decodeURIComponent(value[1]); - return a; - }, {}) + const value = b.slice(1).split('='); + a[`${value[0]}`] = decodeURIComponent(value[1]); + return a; + }, {}) : {}; } diff --git a/host/ide/src/trace/component/SpSystemTrace.ts b/host/ide/src/trace/component/SpSystemTrace.ts index ba4313c..3550430 100644 --- a/host/ide/src/trace/component/SpSystemTrace.ts +++ b/host/ide/src/trace/component/SpSystemTrace.ts @@ -80,6 +80,9 @@ function dpr() { @element('sp-system-trace') export class SpSystemTrace extends BaseElement { + static mouseCurrentPosition = 0; + static offsetMouse = 0; + static moveable = true; static scrollViewWidth = 0; static isCanvasOffScreen = true; static SPT_DATA: Array = []; @@ -2049,10 +2052,100 @@ export class SpSystemTrace extends BaseElement { document.addEventListener('keypress', this.documentOnKeyPress); document.addEventListener('keyup', this.documentOnKeyUp); document.addEventListener('contextmenu', this.onContextMenuHandler); + + /** + * 获取并保存鼠标当前的x轴坐标位置，配合ctrl+鼠标左键拖动完成泳道图的左移或右移 + */ + this.addEventListener('mousedown',(e)=>{ + if(e.ctrlKey){ + e.preventDefault(); + this.removeEventListener('mousemove',this.documentOnMouseMove); + this.removeEventListener('click', this.documentOnClick); + this.removeEventListener('mousedown',this.documentOnMouseDown); + this.removeEventListener('mouseup',this.documentOnMouseUp); + this.style.cursor = 'move'; + SpSystemTrace.moveable = true; + SpSystemTrace.mouseCurrentPosition = e.clientX; + } + },{passive:false}); + + /** + * ctrl+鼠标移动，实现泳道图左移或者右移。 + */ + this.addEventListener('mousemove',(e)=>{ + if(e.ctrlKey){ + e.preventDefault(); + SpSystemTrace.offsetMouse = e.clientX - SpSystemTrace.mouseCurrentPosition; + let eventA = new KeyboardEvent('keypress',{'key':'a','code':'65','keyCode':65}); + let eventD = new KeyboardEvent('keypress',{'key':'d','code':'68','keyCode':68}); + if(e.button == 0){ + if(SpSystemTrace.offsetMouse < 0 && SpSystemTrace.moveable){ + // 向右拖动，则泳道图右移 + this.timerShaftEL!.documentOnKeyPress(eventD); + setTimeout(()=>{ + this.timerShaftEL!.documentOnKeyUp(eventD); + },350); + } + if(SpSystemTrace.offsetMouse > 0 && SpSystemTrace.moveable){ + // 向左拖动，则泳道图左移 + this.timerShaftEL!.documentOnKeyPress(eventA); + setTimeout(()=>{ + this.timerShaftEL!.documentOnKeyUp(eventA); + },350); + } + } + SpSystemTrace.moveable = false; + } + },{passive:false}); + + this.addEventListener('mouseup',(e)=>{ + if(e.ctrlKey){ + e.preventDefault(); + SpSystemTrace.offsetMouse = 0; + SpSystemTrace.mouseCurrentPosition = 0; + SpSystemTrace.moveable = false; + this.style.cursor = 'default'; + this.addEventListener('mousemove', this.documentOnMouseMove); + this.addEventListener('click', this.documentOnClick); + this.addEventListener('mousedown', this.documentOnMouseDown); + this.addEventListener('mouseup', this.documentOnMouseUp); + } + },{passive:false}); + + /** + * 泳道图中添加ctrl+鼠标滚轮事件，对泳道图进行放大缩小。 + * 鼠标滚轮事件转化为键盘事件，keyPress和keyUp两个事件需要配合使用， + * 否则泳道图会一直放大或一直缩小。 + * setTimeout()函数中的时间参数可以控制鼠标滚轮的频率。 + */ + document.addEventListener('wheel',(e)=>{ + if(e.ctrlKey){ + if(e.deltaY > 0){ + e.preventDefault(); + e.stopPropagation(); + let eventS = new KeyboardEvent('keypress',{'key':'s','code':'83','keyCode':83}); + this.timerShaftEL!.documentOnKeyPress(eventS); + setTimeout(()=>{ + this.timerShaftEL!.documentOnKeyUp(eventS); + },200); + } + if(e.deltaY < 0){ + e.preventDefault(); + e.stopPropagation(); + let eventW = new KeyboardEvent('keypress',{'key':'w','code':'87','keyCode':87}); + this.timerShaftEL!.documentOnKeyPress(eventW); + setTimeout(()=>{ + this.timerShaftEL!.documentOnKeyUp(eventW); + },200); + } + } + },{passive:false}); + SpApplication.skinChange2 = (val: boolean) => { this.timerShaftEL?.render(); }; } + scrollToProcess( rowId: string, diff --git a/host/ide/src/trace/component/trace/base/ColorUtils.ts b/host/ide/src/trace/component/trace/base/ColorUtils.ts index 149c352..33cb925 100644 --- a/host/ide/src/trace/component/trace/base/ColorUtils.ts +++ b/host/ide/src/trace/component/trace/base/ColorUtils.ts @@ -18,7 +18,24 @@ import { CpuStruct } from '../../../database/ui-worker/ProcedureWorkerCPU.js'; export class ColorUtils { public static GREY_COLOR: string = '#f0f0f0'; - public static MD_PALETTE: Array = [ + + public static MD_PALETTE_A: Array = [ + "#40b3e7", + "#606e75", + "#8d9171", + "#8f8f8f", + "#7a9160", + "#9fafc4", + "#8a8a8b", + "#9e8e00", + "#696e35", + "#5c4d21", + "#18a8a1", + "#a16a40", + "#a94eb9", + "#886EB4", + ]; + public static MD_PALETTE_B: Array = [ '#9785D3', '#A27F7E', '#00bdd6', @@ -34,7 +51,23 @@ export class ColorUtils { '#7EC6BB', '#C6D9F2', ]; - public static FUNC_COLOR: Array = [ + public static FUNC_COLOR_A: Array = [ + "#40b3e7", + "#606e75", + "#8d9171", + "#8f8f8f", + "#7a9160", + "#9fafc4", + "#8a8a8b", + "#9e8e00", + "#696e35", + "#5c4d21", + "#18a8a1", + "#a16a40", + "#a94eb9", + "#886EB4", + ]; + public static FUNC_COLOR_B: Array = [ '#9785D3', '#A27F7E', '#00bdd6', @@ -59,6 +92,8 @@ export class ColorUtils { '#009DFA', '#E97978', ]; + public static MD_PALETTE: Array = ColorUtils.MD_PALETTE_B; + public static FUNC_COLOR: Array = ColorUtils.FUNC_COLOR_B; public static hash(str: string, max: number): number { let colorA: number = 0x811c9dc5; @@ -123,4 +158,33 @@ export class ColorUtils { } return (Math.abs(hash) + depth) % max; } + + public static funcTextColor(val :string) { + var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; + // 把颜色值变成小写 + var color = val.toLowerCase(); + var result = ''; + if (reg.test(color)) { + if (color.length === 4) { + var colorNew = "#"; + for (var i = 1; i < 4; i += 1) { + colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1)); + } + color = colorNew; + } + var colorChange = []; + for (var i = 1; i < 7; i += 2) { + colorChange.push(parseInt("0x" + color.slice(i, i + 2))); + } + var grayLevel = colorChange[0] * 0.299 + colorChange[1] * 0.587 + colorChange[2] * 0.114; + if (grayLevel >= 150) {//浅色模式 + return '#000'; + } else { + return '#fff'; + } + } else { + result = '无效'; + return result; + } + } } diff --git a/host/ide/src/trace/component/trace/timer-shaft/SportRuler.ts b/host/ide/src/trace/component/trace/timer-shaft/SportRuler.ts index 4713367..4ce80bc 100644 --- a/host/ide/src/trace/component/trace/timer-shaft/SportRuler.ts +++ b/host/ide/src/trace/component/trace/timer-shaft/SportRuler.ts @@ -414,6 +414,9 @@ export class SportRuler extends Graph { this.c.moveTo(endX, this.frame.y + 22 - 5); this.c.lineTo(endX, this.frame.y + 22 + 5); let txtWidth = this.c.measureText(txt).width; + this.c.fillStyle = '#FFF'; //为了解决文字重叠问题。在时间刻度的文字下面绘制一个小方块 + this.c.fillRect( startX + (lineWidth - txtWidth) / 2, this.frame.y + 10,txtWidth+2,10); + this.c.fillStyle = 'black'; if (lineWidth > txtWidth) { this.c.fillText( `${txt}`, diff --git a/host/ide/src/trace/database/ui-worker/ProcedureWorkerFunc.ts b/host/ide/src/trace/database/ui-worker/ProcedureWorkerFunc.ts index 8c8ec91..743b199 100644 --- a/host/ide/src/trace/database/ui-worker/ProcedureWorkerFunc.ts +++ b/host/ide/src/trace/database/ui-worker/ProcedureWorkerFunc.ts @@ -202,6 +202,14 @@ export class FuncStruct extends BaseStruct { ColorUtils.FUNC_COLOR.length ) ]; + let textColor = + ColorUtils.FUNC_COLOR[ + ColorUtils.hashFunc( + data.funName || '', + 0, + ColorUtils.FUNC_COLOR.length + ) + ]; let miniHeight = 20; if ( FuncStruct.hoverFuncStruct && @@ -216,7 +224,7 @@ export class FuncStruct extends BaseStruct { miniHeight - padding * 2 ); if (data.frame.width > 10) { - ctx.fillStyle = '#fff'; + ctx.fillStyle = ColorUtils.funcTextColor(textColor); FuncStruct.drawString( ctx, `${data.funName || ''}`, -- Gitee