diff --git a/ide/src/base-ui/chart/column/LitChartColumn.ts b/ide/src/base-ui/chart/column/LitChartColumn.ts index a8071a473ab36b517123ec08265993152158bc50..7aff26a18a59da7fa8e8804b24f27deb168144d3 100644 --- a/ide/src/base-ui/chart/column/LitChartColumn.ts +++ b/ide/src/base-ui/chart/column/LitChartColumn.ts @@ -193,6 +193,14 @@ export class LitChartColumn extends BaseElement { return this.litChartColumnCfg?.data || []; } + dataSort():void{ + if (!this.litChartColumnCfg!.notSort) { + this.litChartColumnCfg?.data.sort( + (a, b) => b[this.litChartColumnCfg!.yField] - a[this.litChartColumnCfg!.yField] + ); + } + } + haveSeriesField():void{ let maxValue = Math.max(...this.litChartColumnCfg!.data.map((it) => it[this.litChartColumnCfg!.yField])); maxValue = Math.ceil(maxValue * 0.1) * 10; @@ -209,11 +217,7 @@ export class LitChartColumn extends BaseElement { : `${getProbablyTime(maxValue - valGap * i)}`, }); } - if (!this.litChartColumnCfg!.notSort) { - this.litChartColumnCfg?.data.sort( - (a, b) => b[this.litChartColumnCfg!.yField] - a[this.litChartColumnCfg!.yField] - ); - } + this.dataSort(); this.litChartColumnCfg?.data.forEach((litChartColumnItem, litChartColumnIndex, array) => { this.data.push({ color: this.litChartColumnCfg!.color(litChartColumnItem), diff --git a/ide/src/base-ui/chart/pagenation/PageNation.ts b/ide/src/base-ui/chart/pagenation/PageNation.ts index f78ef5db9a3274b81be7d0e347faf00c154ce72f..5c6da0e9b8fa2c8340f924ace127f137cacea61c 100644 --- a/ide/src/base-ui/chart/pagenation/PageNation.ts +++ b/ide/src/base-ui/chart/pagenation/PageNation.ts @@ -336,26 +336,7 @@ export class PageNation { innerText: number; }; }) => { - if (event.target.name === 'first') { - if (this.pageInfo.current === 1) return; - this.pageInfo.current = 1; - this.bindPageHtml(); - } - if (event.target.name === 'prev') { - if (this.pageInfo.current === 1) return; - this.pageInfo.current--; - this.bindPageHtml(); - } - if (event.target.name === 'next') { - if (this.pageInfo.current === this.pageInfo.totalpage) return; - this.pageInfo.current++; - this.bindPageHtml(); - } - if (event.target.name === 'last') { - if (this.pageInfo.current === this.pageInfo.totalpage) return; - this.pageInfo.current = this.pageInfo.totalpage; - this.bindPageHtml(); - } + this.targetName(event); if (event.target.name === 'goto') { // 拿到你文本的内容 let page = this.inputBox.value - 0; @@ -378,4 +359,33 @@ export class PageNation { } ); } + + targetName(event:{ + target: { + name: string; + dataset: { name: string }; + innerText: number; + }; + }):void{ + if (event.target.name === 'first') { + if (this.pageInfo.current === 1) return; + this.pageInfo.current = 1; + this.bindPageHtml(); + } + if (event.target.name === 'prev') { + if (this.pageInfo.current === 1) return; + this.pageInfo.current--; + this.bindPageHtml(); + } + if (event.target.name === 'next') { + if (this.pageInfo.current === this.pageInfo.totalpage) return; + this.pageInfo.current++; + this.bindPageHtml(); + } + if (event.target.name === 'last') { + if (this.pageInfo.current === this.pageInfo.totalpage) return; + this.pageInfo.current = this.pageInfo.totalpage; + this.bindPageHtml(); + } + } } diff --git a/ide/src/base-ui/chart/pie/LitChartPie.ts b/ide/src/base-ui/chart/pie/LitChartPie.ts index 5910d731476f10cd315ad208a733d0c48d7935ab..ffa1e6c9ca78e511e2831bea45b7519904653d80 100644 --- a/ide/src/base-ui/chart/pie/LitChartPie.ts +++ b/ide/src/base-ui/chart/pie/LitChartPie.ts @@ -45,6 +45,97 @@ class Sector { }; } +const initHtmlStyle = ` + + ` + @element('lit-chart-pie') export class LitChartPie extends BaseElement { private eleShape: Element | null | undefined; @@ -98,10 +189,15 @@ export class LitChartPie extends BaseElement { this.render(); } - measure() { - if (!this.litChartPieConfig) return; + measureInitialize():void{ this.data = []; this.radius = (Math.min(this.clientHeight, this.clientWidth) * 0.65) / 2 - 10; + this.labelsEL!.textContent = ''; + } + + measure() { + if (!this.litChartPieConfig) return; + this.measureInitialize(); let pieCfg = this.litChartPieConfig!; let startAngle = 0; let startDegree = 0; @@ -111,7 +207,6 @@ export class LitChartPie extends BaseElement { (previousValue, currentValue) => currentValue[pieCfg.angleField] + previousValue, 0 ); - this.labelsEL!.textContent = ''; let labelArray: string[] = []; this.litChartPieConfig.data.forEach((pieItem, index) => { let item: Sector = { @@ -392,7 +487,7 @@ export class LitChartPie extends BaseElement { crossH: number; } { let cross: boolean; - let direction: string; + let direction: string = ''; let crossW: number; let crossH: number; let maxX = r1.x + r1.w > rect.x + rect.w ? r1.x + r1.w : rect.x + rect.w; @@ -419,13 +514,7 @@ export class LitChartPie extends BaseElement { direction = 'Left-Top'; } } else { - if (rect.y > r1.y) { - direction = 'Bottom'; - } else if (rect.y == r1.y) { - direction = 'Right'; //superposition default right - } else { - direction = 'Top'; - } + direction = this.rectSuperposition(rect,r1); } return { cross, @@ -435,6 +524,16 @@ export class LitChartPie extends BaseElement { }; } + rectSuperposition(rect: Rectangle,r1: Rectangle):string{ + if (rect.y > r1.y) { + return 'Bottom'; + } else if (rect.y == r1.y) { + return 'Right'; //superposition default right + } else { + return 'Top'; + } + } + showTip(x: number, y: number, msg: string) { this.pieTipEL!.style.display = 'flex'; this.pieTipEL!.style.top = `${y}px`; @@ -448,7 +547,7 @@ export class LitChartPie extends BaseElement { initHtml(): string { return ` - ${this.initHtmlStyle()} + ${initHtmlStyle}
@@ -456,97 +555,4 @@ export class LitChartPie extends BaseElement {
`; } - - private initHtmlStyle(): string { - return ` - - ` - } } diff --git a/ide/src/base-ui/checkbox/LitCheckBox.ts b/ide/src/base-ui/checkbox/LitCheckBox.ts index e3ca0ff51866975303381445b9431174306842dd..9a52bf4638513254ea7948a6ab0c30104b1e00c8 100644 --- a/ide/src/base-ui/checkbox/LitCheckBox.ts +++ b/ide/src/base-ui/checkbox/LitCheckBox.ts @@ -15,76 +15,9 @@ import { BaseElement, element } from '../BaseElement'; -@element('lit-check-box') -export class LitCheckBox extends BaseElement { - private checkbox: HTMLInputElement | undefined; - - static get observedAttributes() { - return ['checked', 'value', 'disabled']; - } - - set disabled(value) { - if (value === null || value === false) { - this.removeAttribute('disabled'); - } else { - this.setAttribute('disabled', ''); - } - } - - get indeterminate() { - return this.checkbox!.indeterminate; - } - - set indeterminate(value) { - if (value === null || value === false) { - this.checkbox!.indeterminate = false; - } else { - this.checkbox!.indeterminate = true; - } - } - - get disabled() { - return this.getAttribute('disabled') !== null; - } - - get checked() { - return this.getAttribute('checked') !== null; - } - - set checked(boxCheck: boolean) { - if (boxCheck === null || !boxCheck) { - this.removeAttribute('checked'); - } else { - this.setAttribute('checked', ''); - } - } - - get value() { - return this.getAttribute('value') || ''; - } - - set value(value: string) { - this.setAttribute('value', value); - } - - initHtml(): string { - return ` - ${this.initHtmlStyle()} - - - `; - } - - private initHtmlStyle(): string { - return ` +const initHtmlStyle = ` - ` + `; + +@element('lit-check-box') +export class LitCheckBox extends BaseElement { + private checkbox: HTMLInputElement | undefined; + + static get observedAttributes() { + return ['checked', 'value', 'disabled']; + } + + set disabled(value) { + if (value === null || value === false) { + this.removeAttribute('disabled'); + } else { + this.setAttribute('disabled', ''); + } + } + + get indeterminate() { + return this.checkbox!.indeterminate; + } + + set indeterminate(value) { + if (value === null || value === false) { + this.checkbox!.indeterminate = false; + } else { + this.checkbox!.indeterminate = true; + } + } + + get disabled() { + return this.getAttribute('disabled') !== null; + } + + get checked() { + return this.getAttribute('checked') !== null; + } + + set checked(boxCheck: boolean) { + if (boxCheck === null || !boxCheck) { + this.removeAttribute('checked'); + } else { + this.setAttribute('checked', ''); + } + } + + get value() { + return this.getAttribute('value') || ''; + } + + set value(value: string) { + this.setAttribute('value', value); + } + + initHtml(): string { + return ` + ${initHtmlStyle} + + + `; } initElements(): void { diff --git a/ide/src/base-ui/drawer/LitDrawer.ts b/ide/src/base-ui/drawer/LitDrawer.ts index eefa2c307504def18faa1e2933deb8a70c1c714e..fa9626d5e77420a8722d26bd01e37eadf35f9895 100644 --- a/ide/src/base-ui/drawer/LitDrawer.ts +++ b/ide/src/base-ui/drawer/LitDrawer.ts @@ -15,15 +15,9 @@ import { BaseElement, element } from '../BaseElement'; -@element('lit-drawer') -export class LitDrawer extends BaseElement { - static get observedAttributes() { - return ['title', 'visible', 'placement', 'mask', 'mask-closable', 'closeable', 'content-padding', 'content-width']; - } - - initHtml(): string { - return ` - + `; +} + +@element('lit-drawer') +export class LitDrawer extends BaseElement { + static get observedAttributes() { + return ['title', 'visible', 'placement', 'mask', 'mask-closable', 'closeable', 'content-padding', 'content-width']; + } + + initHtml(): string { + return ` + ${initHtmlStyle(this.contentPadding,this.contentWidth)}
diff --git a/ide/src/base-ui/menu/LitMainMenu.ts b/ide/src/base-ui/menu/LitMainMenu.ts index 6f6002cc2f3505e4e509fff7bbdbb9d132c76c60..c9f7b4f96862fe06bbe3e028888e2be234ec5864 100644 --- a/ide/src/base-ui/menu/LitMainMenu.ts +++ b/ide/src/base-ui/menu/LitMainMenu.ts @@ -19,151 +19,8 @@ import './LitMainMenuGroup'; import { LitMainMenuGroup } from './LitMainMenuGroup'; import { LitMainMenuItem } from './LitMainMenuItem'; -@element('lit-main-menu') -export class LitMainMenu extends BaseElement { - private slotElements: Element[] | undefined; - private _menus: Array | undefined; - - static get observedAttributes() { - return []; - } - - get menus(): Array | undefined { - return this._menus; - } - - set menus(value: Array | undefined) { - this._menus = value; - this.shadowRoot?.querySelectorAll('lit-main-menu-group').forEach((a) => a.remove()); - let menuBody = this.shadowRoot?.querySelector('.menu-body'); - if (this.getAttribute('main_menu') === '1' && window.localStorage.getItem('Theme') == 'dark') { - this.style.backgroundColor = '#262f3c'; - } else { - this.style.backgroundColor = '#fff'; - } - value?.forEach((it) => { - let group = new LitMainMenuGroup(); - group.setAttribute('title', it.title || ''); - if (it.describe !== '') { - group.setAttribute('describe', it.describe || ''); - } else { - group.removeAttribute('describe'); - } - group.setAttribute('icon', it.icon || ''); - if (it.collapsed) { - group.setAttribute('collapsed', ''); - } else { - group.removeAttribute('collapsed'); - } - let groupName = group!.shadowRoot!.querySelector('.group-name') as LitMainMenuGroup; - let groupDescribe = group!.shadowRoot!.querySelector('.group-describe') as LitMainMenuGroup; - menuBody?.appendChild(group); - it.children?.forEach((item: any) => { - if (item.children && item.children.length > 0) { - let secondGroup = new LitMainMenuGroup(); - secondGroup.setAttribute('title', item.title || ''); - if (item.describe !== '') { - secondGroup.setAttribute('describe', item.describe || ''); - } else { - secondGroup.removeAttribute('describe'); - } - secondGroup.setAttribute('icon', item.icon || ''); - 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'; - } - 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 (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); - } - }); - }); - } - - initElements(): void { - let st: HTMLSlotElement | null | undefined = this.shadowRoot?.querySelector('#st'); - st?.addEventListener('slotchange', (e) => { - this.slotElements = st?.assignedElements(); - this.slotElements?.forEach((it) => { - it.querySelectorAll('lit-main-menu-item').forEach((cell) => {}); - }); - }); - let versionDiv: HTMLElement | null | undefined = this.shadowRoot?.querySelector('.version'); - versionDiv!.innerText = (window as any).version || ''; - } - - initHtml(): string { - return ` - + `; + +@element('lit-main-menu') +export class LitMainMenu extends BaseElement { + private slotElements: Element[] | undefined; + private _menus: Array | undefined; + + static get observedAttributes() { + return []; + } + + get menus(): Array | undefined { + return this._menus; + } + + set menus(value: Array | undefined) { + this._menus = value; + this.shadowRoot?.querySelectorAll('lit-main-menu-group').forEach((a) => a.remove()); + let menuBody = this.shadowRoot?.querySelector('.menu-body'); + if (this.getAttribute('main_menu') === '1' && window.localStorage.getItem('Theme') == 'dark') { + this.style.backgroundColor = '#262f3c'; + } else { + this.style.backgroundColor = '#fff'; + } + value?.forEach((it) => { + let group: LitMainMenuGroup = new LitMainMenuGroup(); + group.setAttribute('title', it.title || ''); + if (it.describe !== '') { + group.setAttribute('describe', it.describe || ''); + } else { + group.removeAttribute('describe'); + } + group.setAttribute('icon', it.icon || ''); + if (it.collapsed) { + group.setAttribute('collapsed', ''); + } else { + group.removeAttribute('collapsed'); + } + let groupName: LitMainMenuGroup = group!.shadowRoot!.querySelector('.group-name') as LitMainMenuGroup; + let groupDescribe: LitMainMenuGroup = group!.shadowRoot!.querySelector('.group-describe') as LitMainMenuGroup; + menuBody?.appendChild(group); + it.children?.forEach((item: any) => { + if (item.children && item.children.length > 0) { + let secondGroup: LitMainMenuGroup = new LitMainMenuGroup(); + secondGroup.setAttribute('title', item.title || ''); + if (item.describe !== '') { + secondGroup.setAttribute('describe', item.describe || ''); + } else { + secondGroup.removeAttribute('describe'); + } + this.setChildren(item,group,groupName,groupDescribe,secondGroup); + } else { + this.notChildren(item,group,groupName,groupDescribe); + } + }); + }); + } + + setChildren(item:any,group: LitMainMenuGroup,groupName: LitMainMenuGroup,groupDescribe: LitMainMenuGroup,secondGroup: LitMainMenuGroup):void{ + secondGroup.setAttribute('icon', item.icon || ''); + 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'; + } + 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 (v.disabled != undefined) { + th.disabled = v.disabled; + } + secondGroup.appendChild(th); + }); + } + + notChildren(item:any,group: LitMainMenuGroup,groupName: LitMainMenuGroup,groupDescribe: LitMainMenuGroup):void{ + 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); + } + + initElements(): void { + let st: HTMLSlotElement | null | undefined = this.shadowRoot?.querySelector('#st'); + st?.addEventListener('slotchange', (e) => { + this.slotElements = st?.assignedElements(); + this.slotElements?.forEach((it) => { + it.querySelectorAll('lit-main-menu-item').forEach((cell) => {}); + }); + }); + let versionDiv: HTMLElement | null | undefined = this.shadowRoot?.querySelector('.version'); + versionDiv!.innerText = (window as any).version || ''; + } + + initHtml(): string { + return ` + ${initHtmlStyle}