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}