diff --git a/ide/src/base-ui/icon.svg b/ide/src/base-ui/icon.svg index 569a0aeafeb34f7460557ee82b9155f0122bc1a2..ff9b5bff07cac9fac9a4c5a6785e99a98a2f3159 100644 --- a/ide/src/base-ui/icon.svg +++ b/ide/src/base-ui/icon.svg @@ -324,4 +324,20 @@ + + + + + + + + + + + + + + + + diff --git a/ide/src/base-ui/table/lit-table.ts b/ide/src/base-ui/table/lit-table.ts index 56c646712fa49c66d13bfe258d6eb54aa3290e16..1ec70adeb42b236a51412ba619bf66f3c00f1f0d 100644 --- a/ide/src/base-ui/table/lit-table.ts +++ b/ide/src/base-ui/table/lit-table.ts @@ -89,12 +89,13 @@ export class LitTable extends HTMLElement { } .td{ box-sizing: border-box; - padding: 4.5px; + padding: 3px; display: flex; justify-content: flex-start; align-items: center; width: 100%; height: auto; + line-height: 21px; cursor: pointer; } .td label{ @@ -187,7 +188,13 @@ export class LitTable extends HTMLElement { display: grid; background-color: var(--dark-background,#FFFFFF); } - + :host([data-query-scene]) .th { + background-color: #F6F6F6; + color: #7E7E7E; + } + :host([data-query-scene]) .tr { + background-color: #F6F6F6; + } .tree-icon{ font-size: 1.2rem; width: 20px; @@ -286,6 +293,7 @@ export class LitTable extends HTMLElement { 'grid-line', 'defaultOrderColumn', 'hideDownload', + 'noRecycle', 'loading', 'expand', ]; @@ -337,15 +345,26 @@ export class LitTable extends HTMLElement { } set dataSource(value) { - // this.ds = value; - // this.isRecycleList = false; - // if (this.hasAttribute('tree')) { - // this.renderTreeTable(); - // } else { - // this.renderTable(); - // } - this.columnResizeEnable = false; - this.recycleDataSource = value; + if (this.hasAttribute('noRecycle')) { + this.ds = value; + this.isRecycleList = false; + this.renderTable(); + } else { + this.columnResizeEnable = false; + this.recycleDataSource = value; + } + } + + set noRecycle(value) { + if (value) { + this.setAttribute('noRecycle', ''); + } else { + this.removeAttribute('noRecycle'); + } + } + + get noRecycle() { + return this.hasAttribute('noRecycle'); } get recycleDataSource() { @@ -353,26 +372,28 @@ export class LitTable extends HTMLElement { } set recycleDataSource(value) { - this.isScrollXOutSide = this.tableElement!.scrollWidth > this.tableElement!.clientWidth; - this.isRecycleList = true; - this.ds = value; - if (this.rememberScrollTop) { - this.currentScrollTop = this.tableElement!.scrollTop; - this.tableElement!.scrollTop = 0; - this.tableElement!.scrollLeft = 0; - } else { - this.tableElement!.scrollTop = 0; - this.tableElement!.scrollLeft = 0; - } - if (this.hasAttribute('tree')) { - this.value = value; - if (this.shadowRoot?.querySelector('.expand')) { - this.shadowRoot!.querySelector('.expand')!.querySelector('.top')!.name = 'up'; - this.shadowRoot!.querySelector('.expand')!.querySelector('.bottom')!.name = 'down'; + if (this.tableElement) { + this.isScrollXOutSide = this.tableElement!.scrollWidth > this.tableElement!.clientWidth; + this.isRecycleList = true; + this.ds = value; + if (this.rememberScrollTop) { + this.currentScrollTop = this.tableElement!.scrollTop; + this.tableElement!.scrollTop = 0; + this.tableElement!.scrollLeft = 0; + } else { + this.tableElement!.scrollTop = 0; + this.tableElement!.scrollLeft = 0; + } + if (this.hasAttribute('tree')) { + this.value = value; + if (this.shadowRoot?.querySelector('.expand')) { + this.shadowRoot!.querySelector('.expand')!.querySelector('.top')!.name = 'up'; + this.shadowRoot!.querySelector('.expand')!.querySelector('.bottom')!.name = 'down'; + } + this.recycleDs = this.meauseTreeRowElement(value, RedrawTreeForm.Retract); + } else { + this.recycleDs = this.meauseAllRowHeight(value); } - this.recycleDs = this.meauseTreeRowElement(value, RedrawTreeForm.Retract); - } else { - this.recycleDs = this.meauseAllRowHeight(value); } } @@ -783,20 +804,21 @@ export class LitTable extends HTMLElement { private beforeResizeWidth1: number = 0; private beforeResizeWidth2: number = 0; - resizeEventHandler(header: HTMLDivElement, element: HTMLDivElement, index: number){ + resizeEventHandler(header: HTMLDivElement, element: HTMLDivElement, index: number) { header.addEventListener('mousemove', (event) => { if (!this.columnResizeEnable) return; if (this.isResize) { let width = event.clientX - this.resizeDownX; header.style.cursor = 'col-resize'; - let preWidth = this.beforeResizeWidth1, nowWidth = this.beforeResizeWidth2; + let preWidth = this.beforeResizeWidth1, + nowWidth = this.beforeResizeWidth2; if (width < 0) { preWidth = Math.max(this.beforeResizeWidth1 + width, this.columnMinWidth); - nowWidth = (this.beforeResizeWidth1 - preWidth) + this.beforeResizeWidth2; + nowWidth = this.beforeResizeWidth1 - preWidth + this.beforeResizeWidth2; } if (width > 0) { nowWidth = Math.max(this.beforeResizeWidth2 - width, this.columnMinWidth); - preWidth = (this.beforeResizeWidth2 - nowWidth) + this.beforeResizeWidth1; + preWidth = this.beforeResizeWidth2 - nowWidth + this.beforeResizeWidth1; } this.gridTemplateColumns[this.resizeColumnIndex - 1] = `${preWidth}px`; this.gridTemplateColumns[this.resizeColumnIndex] = `${nowWidth}px`; @@ -834,18 +856,18 @@ export class LitTable extends HTMLElement { this.resizeColumnIndex = -1; header.style.cursor = 'pointer'; }); - element.addEventListener('mousedown', (event)=> { + element.addEventListener('mousedown', (event) => { if (!this.columnResizeEnable) return; this.isResize = true; this.resizeColumnIndex = index; this.resizeDownX = event.clientX; - let pre = (header.childNodes.item(this.resizeColumnIndex - 1) as HTMLDivElement); - let now = (header.childNodes.item(this.resizeColumnIndex) as HTMLDivElement); + let pre = header.childNodes.item(this.resizeColumnIndex - 1) as HTMLDivElement; + let now = header.childNodes.item(this.resizeColumnIndex) as HTMLDivElement; this.beforeResizeWidth1 = pre.clientWidth; this.beforeResizeWidth2 = now.clientWidth; event.stopPropagation(); }); - element.addEventListener('click',(event) => { + element.addEventListener('click', (event) => { event.stopPropagation(); }); } @@ -1130,7 +1152,9 @@ export class LitTable extends HTMLElement { td = document.createElement('div'); td.innerHTML = text; td.dataIndex = dataIndex; - td.title = text; + if (text.indexOf('<') === -1) { + td.title = text; + } } if (rowData.data.children && rowData.data.children.length > 0 && !rowData.data.hasNext) { let btn = this.createExpandBtn(rowData); @@ -1222,7 +1246,9 @@ export class LitTable extends HTMLElement { td.style.textOverflow = 'ellipsis'; td.style.whiteSpace = 'nowrap'; let text = this.formatName(dataIndex, rowData.data[dataIndex]); - td.title = text; + if (text.indexOf('<') === -1) { + td.title = text; + } td.dataIndex = dataIndex; td.style.justifyContent = column.getAttribute('align') || 'flex-start'; if (column.template) { @@ -1403,7 +1429,7 @@ export class LitTable extends HTMLElement { if (reduce == 0) { return; } - while (reduce <= this.tableElement!.clientHeight) { + while (reduce <= this.tableElement!.clientHeight + 1) { let newTableElement; if (this.hasAttribute('tree')) { newTableElement = this.createNewTreeTableElement(visibleObjects[skip]); @@ -1451,10 +1477,35 @@ export class LitTable extends HTMLElement { td.dataIndex = dataIndex; td.style.justifyContent = column.getAttribute('align') || 'flex-start'; let text = this.formatName(dataIndex, rowData.data[dataIndex]); - td.title = text; + if (text.indexOf('<') === -1) { + td.title = text; + } + // 如果表格中有模板的情况,将模板中的数据放进td中,没有模板,直接将文本放进td + // 但是对于Current Selection tab页来说,表格前两列是时间,第三列是input标签,第四列是button标签 + // 而第一行的数据只有第四列一个button,和模板中的数据并不一样,所以要特别处理一下 if (column.template) { - td.appendChild(column.template.render(rowData.data).content.cloneNode(true)); - td.template = column.template; + if (dataIndex === 'color' && rowData.data.colorEl === undefined) { + td.innerHTML = ''; + td.template = ''; + } else if (dataIndex === 'operate' && rowData.data.operate && rowData.data.operate.innerHTML === 'RemoveAll') { + let removeAll = document.createElement('button'); + removeAll.className = 'removeAll'; + removeAll.innerHTML = 'RemoveAll'; + removeAll.style.background = 'var(--dark-border1,#262f3c)'; + removeAll.style.color = 'white'; + removeAll.style.borderRadius = '10px'; + removeAll.style.fontSize = '10px'; + removeAll.style.height = '18px'; + removeAll.style.lineHeight = '18px'; + removeAll.style.minWidth = '7em'; + removeAll.style.border = 'none'; + removeAll.style.cursor = 'pointer'; + removeAll.style.outline = 'inherit'; + td.appendChild(removeAll); + } else { + td.appendChild(column.template.render(rowData.data).content.cloneNode(true)); + td.template = column.template; + } } else { td.innerHTML = text; } @@ -1481,6 +1532,109 @@ export class LitTable extends HTMLElement { return newTableElement; } + getWheelStatus(element: any) { + element.addEventListener('wheel', (event: WheelEvent) => { + if (element.scrollWidth !== element.offsetWidth) { + event.preventDefault(); + } + element.scrollLeft += event.deltaY; + }); + } + + renderTable() { + if (!this.columns) return; + if (!this.ds) return; // If no data source is set, it is returned directly + this.normalDs = []; + this.tbodyElement!.innerHTML = ''; // Clear the table contents + this.ds.forEach((rowData: any) => { + let tblRowElement = document.createElement('div'); + tblRowElement.classList.add('tr'); + // @ts-ignore + tblRowElement.data = rowData; + let gridTemplateColumns: Array = []; + // If the table is configured with selectable (select row mode) add a checkbox at the head of the line alone + if (this.selectable) { + let tblBox = document.createElement('div'); + tblBox.style.display = 'flex'; + tblBox.style.justifyContent = 'center'; + tblBox.style.alignItems = 'center'; + tblBox.classList.add('td'); + let checkbox = document.createElement('lit-checkbox'); + checkbox.classList.add('row-checkbox'); + checkbox.onchange = (e: any) => { + // Checkbox checking affects whether the div corresponding to the row has a checked attribute for marking + if (e.detail.checked) { + tblRowElement.setAttribute('checked', ''); + } else { + tblRowElement.removeAttribute('checked'); + } + }; + this.getWheelStatus(tblBox); + tblBox.appendChild(checkbox); + tblRowElement.appendChild(tblBox); + } + this.tableColumns!.forEach((tblColumn) => { + let dataIndex = tblColumn.getAttribute('data-index') || '1'; + gridTemplateColumns.push(tblColumn.getAttribute('width') || '1fr'); + if (tblColumn.template) { + // If you customize the rendering, you get the nodes from the template + // @ts-ignore + let cloneNode = tblColumn.template.render(rowData).content.cloneNode(true); + let tblCustomDiv = document.createElement('div'); + tblCustomDiv.classList.add('td'); + tblCustomDiv.style.wordBreak = 'break-all'; + tblCustomDiv.style.whiteSpace = 'pre-wrap'; + tblCustomDiv.style.justifyContent = tblColumn.getAttribute('align') || ''; + if (tblColumn.hasAttribute('fixed')) { + this.fixed(tblCustomDiv, tblColumn.getAttribute('fixed') || '', '#ffffff'); + } + this.getWheelStatus(tblCustomDiv); + tblCustomDiv.append(cloneNode); + tblRowElement.append(tblCustomDiv); + } else { + let tblDiv = document.createElement('div'); + tblDiv.classList.add('td'); + tblDiv.style.wordBreak = 'break-all'; + tblDiv.style.whiteSpace = 'pre-wrap'; + tblDiv.title = rowData[dataIndex]; + tblDiv.style.justifyContent = tblColumn.getAttribute('align') || ''; + if (tblColumn.hasAttribute('fixed')) { + this.fixed(tblDiv, tblColumn.getAttribute('fixed') || '', '#ffffff'); + } + this.getWheelStatus(tblDiv); + tblDiv.innerHTML = this.formatName(dataIndex, rowData[dataIndex]); + tblRowElement.append(tblDiv); + } + }); + if (this.selectable) { + // If the table with selection is preceded by a 60px column + tblRowElement.style.gridTemplateColumns = '60px ' + gridTemplateColumns.join(' '); + } else { + tblRowElement.style.gridTemplateColumns = gridTemplateColumns.join(' '); + } + tblRowElement.onclick = (e) => { + this.dispatchEvent( + new CustomEvent('row-click', { + detail: { + rowData, + data: rowData, + callBack: (isSelected: boolean) => { + //是否爲单选 + if (isSelected) { + this.clearAllSelection(rowData); + } + this.setSelectedRow(rowData.isSelected, [tblRowElement]); + }, + }, + composed: true, + }) + ); + }; + this.normalDs.push(tblRowElement); + this.tbodyElement!.append(tblRowElement); + }); + } + freshCurrentLine(element: HTMLElement, rowObject: TableRowObject, firstElement?: HTMLElement) { if (!rowObject) { if (firstElement) { @@ -1574,17 +1728,19 @@ export class LitTable extends HTMLElement { this.setSelectedRow(false, [firstElement]); } } - let dataIndex = this.columns![idx].getAttribute('data-index') || '1'; - let text = this.formatName(dataIndex, rowObject.data[dataIndex]); - if ((this.columns![idx] as any).template) { - (child as HTMLElement).innerHTML = ''; - (child as HTMLElement).appendChild( - (this.columns![idx] as any).template.render(rowObject.data).content.cloneNode(true) - ); - (child as HTMLElement).title = text; - } else { - (child as HTMLElement).innerHTML = text; - (child as HTMLElement).title = text; + if (idx < this.columns!.length) { + let dataIndex = this.columns![idx].getAttribute('data-index') || '1'; + let text = this.formatName(dataIndex, rowObject.data[dataIndex]); + if ((this.columns![idx] as any).template) { + (child as HTMLElement).innerHTML = ''; + (child as HTMLElement).appendChild( + (this.columns![idx] as any).template.render(rowObject.data).content.cloneNode(true) + ); + (child as HTMLElement).title = text; + } else { + (child as HTMLElement).innerHTML = text; + (child as HTMLElement).title = text; + } } }); if (element.style.display == 'none') { diff --git a/ide/src/doc/md/quickstart_ability_monitor.md b/ide/src/doc/md/quickstart_ability_monitor.md index 083c87af83e4a3ada6ea1c95576f9e2055b99511..d43839353e5a2a77b0a3c59d39709e9875aabd57 100644 --- a/ide/src/doc/md/quickstart_ability_monitor.md +++ b/ide/src/doc/md/quickstart_ability_monitor.md @@ -93,7 +93,7 @@ Processes History的Tab页如图: + Duration:前一次采集到本次采集的时间差。 + Data Read:从磁盘读取到内存的总字节数。 + Data Read/sec:每秒从磁盘读取到内存的字节数。 -+ Data Write:从磁盘写入磁盘的总字节数。 ++ Data Write:从内存写入磁盘的总字节数。 + Data Write/sec:每秒从内存写入磁盘的字节数。 + Reads In:读入的字节数。 + Reads In/sec:每秒读入的字节数。 diff --git a/ide/src/doc/md/quickstart_hiperf.md b/ide/src/doc/md/quickstart_hiperf.md index 3c04e187cf51f3f0767b7800697ce39090871c1c..2f3c80bfc25ec28a17e81f5a275a9b49365317fd 100644 --- a/ide/src/doc/md/quickstart_hiperf.md +++ b/ide/src/doc/md/quickstart_hiperf.md @@ -27,7 +27,7 @@ HiPerf工具是对系统性能数据进行采样记录,并将采样数据保 + 黄色区域:辅助信息(Callstack)。 ### HiPerf泳道图展示 -Perf泳道图展示按照CPU使用量和线程和进程展示,鼠标移动都泳道图上,悬浮框会显示CPU的使用量。 +Perf泳道图展示按照CPU使用量和线程和进程展示,鼠标移动到泳道图上,悬浮框会显示CPU的使用量。 ![GitHub Logo](../../figures/perf/chart.jpg) 按住w键放大界面,泳道图会出现P的标志,鼠标移动到P图标上,悬浮框会显示每个callstack和调用的深度如下图。 ![GitHub Logo](../../figures/perf/callstack.jpg) diff --git a/ide/src/doc/quickstart_ability_monitor.html b/ide/src/doc/quickstart_ability_monitor.html index 2dd87205e40ebae600b16860f6125a727598ca03..b74904ec30e10ca70bcef95eb65ff5c079478bd3 100644 --- a/ide/src/doc/quickstart_ability_monitor.html +++ b/ide/src/doc/quickstart_ability_monitor.html @@ -1238,7 +1238,7 @@ Data Read/sec:每秒从磁盘读取到内存的字节数。
  • -Data Write:从磁盘写入磁盘的总字节数。
    +Data Write:从内存写入磁盘的总字节数。
     
  • diff --git a/ide/src/doc/quickstart_hiperf.html b/ide/src/doc/quickstart_hiperf.html index 2fb413788c4c284d88f7f4c05ce687a9b1048ff1..e3aa18119c10a2bec2b13257042c09eba5f8b1da 100644 --- a/ide/src/doc/quickstart_hiperf.html +++ b/ide/src/doc/quickstart_hiperf.html @@ -875,7 +875,7 @@ Advance Options:更多的抓取配置项。

    HiPerf泳道图展示

    - Perf泳道图展示按照CPU使用量和线程和进程展示,鼠标移动都泳道图上,悬浮框会显示CPU的使用量。
    + Perf泳道图展示按照CPU使用量和线程和进程展示,鼠标移动到泳道图上,悬浮框会显示CPU的使用量。
    GitHub Logo
    按住w键放大界面,泳道图会出现P的标志,鼠标移动到P图标上,悬浮框会显示每个callstack和调用的深度如下图。
    GitHub Logo diff --git a/ide/src/img/menu-cut.svg b/ide/src/img/menu-cut.svg new file mode 100644 index 0000000000000000000000000000000000000000..5614cb1143cd836b4fc0bb4a267eb28f7510944d --- /dev/null +++ b/ide/src/img/menu-cut.svg @@ -0,0 +1,10 @@ + + + scissors + + + + + + + \ No newline at end of file diff --git a/ide/src/index.html b/ide/src/index.html index e73acb40dd8f0ce287e22da7b50926b3b66457ec..3bc659d8e87669891432dc03fd8ae4ef9d526b11 100644 --- a/ide/src/index.html +++ b/ide/src/index.html @@ -12,6 +12,7 @@ height: 100%; margin: 0; padding: 0; + overflow: hidden; }