+
+
+ `;
+ }
+
+ initElements(): void {
+ this.slotHtml = this.shadowRoot?.querySelector('#sl') as HTMLElement;
+ this.button = this.shadowRoot?.querySelector('#custom-button');
+ this.litIcon = this.shadowRoot?.querySelector('#button-icon') as LitButton;
+ if (this.litIcon.getAttribute('name') == '') {
+ this.litIcon!.style.display = 'none';
+ }
+ }
+
+ attributeChangedCallback(name: string, oldValue: string, value: string) {
+ switch (name) {
+ case 'text':
+ this.slotHtml!.innerText = value;
+ break;
+ case 'back':
+ this.button!.style.backgroundColor = value;
+ break;
+ case 'icon':
+ this.litIcon?.setAttribute('name', value);
+ if (value) {
+ this.litIcon!.style.display = 'block';
+ }
+ break;
+ case 'height':
+ this.button!.style.height = value;
+ break;
+ case 'color':
+ this.button!.style.color = value;
+ break;
+ case 'font_size':
+ this.button!.style.fontSize = value;
+ break;
+ case 'border':
+ this.button!.style.border = value;
+ break;
+ case 'padding':
+ this.button!.style.padding = value;
+ break;
+ case 'justify_content':
+ this.button!.style.justifyContent = value;
+ break;
+ case 'border_radius':
+ this.button!.style.borderRadius = value;
+ break;
+ case 'margin_icon':
+ this.litIcon!.style.margin = value;
+ break;
+ case 'opacity':
+ this.button!.style.opacity = value;
+ break;
+ }
+ }
+}
diff --git a/ide/src/base-ui/chart/column/LitChartColumn.ts b/ide/src/base-ui/chart/column/LitChartColumn.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9b7464b54066482035430bfda1f02f36da70200a
--- /dev/null
+++ b/ide/src/base-ui/chart/column/LitChartColumn.ts
@@ -0,0 +1,449 @@
+/*
+ * Copyright (C) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BaseElement, element } from '../../BaseElement.js';
+import { LitChartColumnConfig } from './LitChartColumnConfig.js';
+import { resizeCanvas } from '../helper.js';
+
+class Pillar {
+ obj?: any;
+ xLabel?: string;
+ yLabel?: string;
+ type?: string;
+ root?: boolean;
+ bgFrame?: {
+ x: number;
+ y: number;
+ w: number;
+ h: number;
+ };
+ frame?: {
+ x: number;
+ y: number;
+ w: number;
+ h: number;
+ };
+ height?: number;
+ process?: boolean;
+ heightStep?: number;
+ centerX?: number;
+ centerY?: number;
+ color?: string;
+ hover?: boolean;
+}
+
+interface RLine {
+ label: string;
+ y: number;
+}
+
+@element('lit-chart-column')
+export class LitChartColumn extends BaseElement {
+ private tipEL: HTMLDivElement | null | undefined;
+ canvas: HTMLCanvasElement | undefined | null;
+ ctx: CanvasRenderingContext2D | undefined | null;
+ cfg: LitChartColumnConfig | null | undefined;
+ offset?: { x: number | undefined; y: number | undefined };
+ data: Pillar[] = [];
+ rowLines: RLine[] = [];
+
+ connectedCallback() {
+ super.connectedCallback();
+ this.tipEL = this.shadowRoot!.querySelector${title}${msg}${sum}
`;
+ if (x >= this.clientWidth - this.tipEL!.clientWidth) {
+ this.showTip(x - this.tipEL!.clientWidth - 10, y - 20, this.cfg!.tip ? this.cfg!.tip(pillars) : innerHtml);
+ } else {
+ this.showTip(x + 10, y - 20, this.cfg!.tip ? this.cfg!.tip(pillars) : innerHtml);
+ }
+ }
+ } else {
+ if (pillars.length > 0) {
+ let title = ``;
+ let innerHtml = `${title}
`;
+ if (x >= this.clientWidth - this.tipEL!.clientWidth) {
+ this.showTip(x - this.tipEL!.clientWidth - 10, y - 20, this.cfg!.tip ? this.cfg!.tip(pillars) : innerHtml);
+ } else {
+ this.showTip(x + 10, y - 20, this.cfg!.tip ? this.cfg!.tip(pillars) : innerHtml);
+ }
+ }
+ }
+
+ if (this.data.filter((it) => it.process).length == 0) {
+ this.render();
+ }
+ };
+ this.render();
+ }
+
+ showHoverColumn(index: number) {
+ this.data.forEach((it) => {
+ if (it.obj.no === index) {
+ it.hover = true;
+ } else {
+ it.hover = false;
+ }
+ });
+ let pillars = this.data.filter((it) => it.hover);
+ if (this.cfg?.seriesField) {
+ if (pillars.length > 0) {
+ let hoverData = pillars[0];
+ let title = ``;
+ let msg = pillars.map((it) => ``).join('');
+ let sum = ``;
+ let innerHtml = `${title}${msg}${sum}
`;
+ this.showTip(this.clientWidth / 2, this.clientHeight / 2, this.cfg!.tip ? this.cfg!.tip(pillars) : innerHtml);
+ }
+ } else {
+ if (pillars.length > 0) {
+ let hoverData = pillars[0];
+ let title = ``;
+ let innerHtml = `${title}
`;
+ this.showTip(this.clientWidth / 2, this.clientHeight / 2, this.cfg!.tip ? this.cfg!.tip(pillars) : innerHtml);
+ }
+ }
+
+ if (this.data.filter((it) => it.process).length == 0) {
+ this.render();
+ }
+ }
+
+ initElements(): void {
+ new ResizeObserver((entries, observer) => {
+ entries.forEach((it) => {
+ resizeCanvas(this.canvas!);
+ this.measure();
+ this.render(false);
+ });
+ }).observe(this);
+ }
+
+ set config(cfg: LitChartColumnConfig | null | undefined) {
+ if (!cfg) return;
+ this.cfg = cfg;
+ this.measure();
+ this.render();
+ }
+
+ set dataSource(arr: any[]) {
+ if (this.cfg) {
+ this.cfg.data = arr;
+ this.measure();
+ this.render();
+ }
+ }
+
+ get dataSource() {
+ return this.cfg?.data || [];
+ }
+
+ measure() {
+ if (!this.cfg) return;
+ this.data = [];
+ this.rowLines = [];
+ if (!this.cfg.seriesField) {
+ let maxValue = Math.max(...this.cfg.data.map((it) => it[this.cfg!.yField]));
+ maxValue = Math.ceil(maxValue * 0.1) * 10;
+ let partWidth = (this.clientWidth - this.offset!.x!) / this.cfg.data.length;
+ let partHeight = this.clientHeight - this.offset!.y!;
+ let gap = partHeight / 5;
+ let valGap = maxValue / 5;
+ for (let i = 0; i <= 5; i++) {
+ this.rowLines.push({
+ y: gap * i,
+ label: `${maxValue - valGap * i} `,
+ });
+ }
+ this.cfg?.data
+ .sort((a, b) => b[this.cfg!.yField] - a[this.cfg!.yField])
+ .forEach((it, i, array) => {
+ this.data.push({
+ color: this.cfg!.color(it),
+ obj: it,
+ root: true,
+ xLabel: it[this.cfg!.xField],
+ yLabel: it[this.cfg!.yField],
+ bgFrame: {
+ x: this.offset!.x! + partWidth * i,
+ y: 0,
+ w: partWidth,
+ h: partHeight,
+ },
+ centerX: this.offset!.x! + partWidth * i + partWidth / 2,
+ centerY:
+ partHeight -
+ (it[this.cfg!.yField] * partHeight) / maxValue +
+ (it[this.cfg!.yField] * partHeight) / maxValue / 2,
+ frame: {
+ x: this.offset!.x! + partWidth * i + partWidth / 6,
+ y: partHeight - (it[this.cfg!.yField] * partHeight) / maxValue,
+ w: partWidth - partWidth / 3,
+ h: (it[this.cfg!.yField] * partHeight) / maxValue,
+ },
+ height: 0,
+ heightStep: Math.ceil((it[this.cfg!.yField] * partHeight) / maxValue / 60),
+ process: true,
+ });
+ });
+ } else {
+ let reduceGroup = this.cfg.data.reduce((pre, current, index, arr) => {
+ (pre[current[this.cfg!.xField]] = pre[current[this.cfg!.xField]] || []).push(current);
+ return pre;
+ }, {});
+ let sums = Reflect.ownKeys(reduceGroup).map((k) =>
+ (reduceGroup[k] as any[]).reduce((pre, current) => pre + current[this.cfg!.yField], 0)
+ );
+ let maxValue = Math.ceil(Math.max(...sums) * 0.1) * 10;
+ let partWidth = (this.clientWidth - this.offset!.x!) / Reflect.ownKeys(reduceGroup).length;
+ let partHeight = this.clientHeight - this.offset!.y!;
+ let gap = partHeight / 5;
+ let valGap = maxValue / 5;
+ for (let i = 0; i <= 5; i++) {
+ this.rowLines.push({
+ y: gap * i,
+ label: `${maxValue - valGap * i} `,
+ });
+ }
+ Reflect.ownKeys(reduceGroup)
+ .sort(
+ (b, a) =>
+ (reduceGroup[a] as any[]).reduce((pre, cur) => pre + (cur[this.cfg!.yField] as number), 0) -
+ (reduceGroup[b] as any[]).reduce((pre, cur) => pre + (cur[this.cfg!.yField] as number), 0)
+ )
+ .forEach((key, i) => {
+ let elements = reduceGroup[key];
+ let initH = 0;
+ elements.forEach((it: any, y: number) => {
+ this.data.push({
+ color: this.cfg!.color(it),
+ obj: it,
+ root: y == 0,
+ type: it[this.cfg!.seriesField],
+ xLabel: it[this.cfg!.xField],
+ yLabel: it[this.cfg!.yField],
+ bgFrame: {
+ x: this.offset!.x! + partWidth * i,
+ y: 0,
+ w: partWidth,
+ h: partHeight,
+ },
+ centerX: this.offset!.x! + partWidth * i + partWidth / 2,
+ centerY:
+ partHeight -
+ initH -
+ (it[this.cfg!.yField] * partHeight) / maxValue +
+ (it[this.cfg!.yField] * partHeight) / maxValue / 2,
+ frame: {
+ x: this.offset!.x! + partWidth * i + partWidth / 6,
+ y: partHeight - (it[this.cfg!.yField] * partHeight) / maxValue - initH,
+ w: partWidth - partWidth / 3,
+ h: (it[this.cfg!.yField] * partHeight) / maxValue,
+ },
+ height: 0,
+ heightStep: Math.ceil((it[this.cfg!.yField] * partHeight) / maxValue / 60),
+ process: true,
+ });
+ initH += (it[this.cfg!.yField] * partHeight) / maxValue;
+ });
+ });
+ }
+ }
+
+ get config(): LitChartColumnConfig | null | undefined {
+ return this.cfg;
+ }
+
+ render(ease: boolean = true) {
+ if (!this.canvas || !this.cfg) return;
+ this.ctx!.clearRect(0, 0, this.clientWidth, this.clientHeight);
+ this.drawLine(this.ctx!);
+ this.data?.forEach((it) => this.drawColumn(this.ctx!, it, ease));
+ if (ease) {
+ if (this.data.filter((it) => it.process).length > 0) {
+ requestAnimationFrame(() => this.render(ease));
+ }
+ }
+ }
+
+ drawLine(c: CanvasRenderingContext2D) {
+ c.strokeStyle = '#dfdfdf';
+ c.lineWidth = 1;
+ c.beginPath();
+ c.fillStyle = '#8c8c8c';
+ this.rowLines.forEach((it, i) => {
+ c.moveTo(this.offset!.x!, it.y);
+ c.lineTo(this.clientWidth, it.y);
+ if (i == 0) {
+ c.fillText(it.label, this.offset!.x! - c.measureText(it.label).width - 2, it.y + 11);
+ } else {
+ c.fillText(it.label, this.offset!.x! - c.measureText(it.label).width - 2, it.y + 4);
+ }
+ });
+ c.stroke();
+ c.closePath();
+ }
+
+ drawColumn(c: CanvasRenderingContext2D, it: Pillar, ease: boolean) {
+ if (it.hover) {
+ c.globalAlpha = 0.2;
+ c.fillStyle = '#999999';
+ c.fillRect(it.bgFrame!.x, it.bgFrame!.y, it.bgFrame!.w, it.bgFrame!.h);
+ c.globalAlpha = 1.0;
+ }
+ c.fillStyle = it.color || '#ff0000';
+ if (ease) {
+ if (it.height! < it.frame!.h) {
+ it.process = true;
+ c.fillRect(it.frame!.x, it.frame!.y + (it.frame!.h - it.height!), it.frame!.w, it.height!);
+ it.height! += it.heightStep!;
+ } else {
+ c.fillRect(it.frame!.x, it.frame!.y, it.frame!.w, it.frame!.h);
+ it.process = false;
+ }
+ } else {
+ c.fillRect(it.frame!.x, it.frame!.y, it.frame!.w, it.frame!.h);
+ it.process = false;
+ }
+
+ c.beginPath();
+ c.strokeStyle = '#d8d8d8';
+ c.moveTo(it.centerX!, it.frame!.y + it.frame!.h!);
+ if (it.root) {
+ c.lineTo(it.centerX!, it.frame!.y + it.frame!.h + 4);
+ }
+ let xMetrics = c.measureText(it.xLabel!);
+ let xMetricsH = xMetrics.actualBoundingBoxAscent + xMetrics.actualBoundingBoxDescent;
+ let yMetrics = c.measureText(it.yLabel!);
+ let yMetricsH = yMetrics.fontBoundingBoxAscent + yMetrics.fontBoundingBoxDescent;
+ c.fillStyle = '#8c8c8c';
+ if (it.root) {
+ c.fillText(it.xLabel!, it.centerX! - xMetrics.width / 2, it.frame!.y + it.frame!.h + 15);
+ }
+ c.fillStyle = '#fff';
+ if (this.cfg?.label) {
+ if (yMetricsH < it.frame!.h) {
+ c.fillText(
+ // @ts-ignore
+ this.cfg!.label!.content ? this.cfg!.label!.content(it.obj) : it.yLabel!,
+ it.centerX! - yMetrics.width / 2,
+ it.centerY! + (it.frame!.h - it.height!) / 2
+ );
+ }
+ }
+ c.stroke();
+ c.closePath();
+ }
+
+ beginPath(stroke: boolean, fill: boolean) {
+ return (fn: (c: CanvasRenderingContext2D) => void) => {
+ this.ctx!.beginPath();
+ fn?.(this.ctx!);
+ if (stroke) {
+ this.ctx!.stroke();
+ }
+ if (fill) {
+ this.ctx!.fill();
+ }
+ this.ctx!.closePath();
+ };
+ }
+
+ showTip(x: number, y: number, msg: string) {
+ this.tipEL!.style.display = 'flex';
+ this.tipEL!.style.top = `${y}px`;
+ this.tipEL!.style.left = `${x}px`;
+ this.tipEL!.innerHTML = msg;
+ }
+
+ hideTip() {
+ this.tipEL!.style.display = 'none';
+ }
+
+ initHtml(): string {
+ return `
+
+
+
+
+
`;
+ }
+}
+
+function contains(rect: { x: number; y: number; w: number; h: number }, x: number, y: number): boolean {
+ return rect.x <= x && x <= rect.x + rect.w && rect.y <= y && y <= rect.y + rect.h;
+}
diff --git a/ide/src/base-ui/chart/column/LitChartColumnConfig.ts b/ide/src/base-ui/chart/column/LitChartColumnConfig.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b508e8278349182ee2f1a533a1d24374657c32fd
--- /dev/null
+++ b/ide/src/base-ui/chart/column/LitChartColumnConfig.ts
@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface LitChartColumnConfig {
+ data: any[];
+ appendPadding: number;
+ xField: string;
+ yField: string;
+ seriesField: string;
+ color: (a: any) => string;
+ tip: ((a: any) => string) | undefined;
+ hoverHandler?: (no: number) => void;
+ label:
+ | {
+ offset: number;
+ content: (it: any) => string;
+ }
+ | undefined
+ | null;
+}
diff --git a/ide/src/base-ui/chart/helper.ts b/ide/src/base-ui/chart/helper.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2fd7479c266a885e6597b333629322c2d0bb7308
--- /dev/null
+++ b/ide/src/base-ui/chart/helper.ts
@@ -0,0 +1,24 @@
+/*
+ * Copyright (C) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const resizeCanvas = (c: HTMLCanvasElement) => {
+ let el: Element = (c.getRootNode({ composed: false }) as ShadowRoot).host;
+ let dpr = window.devicePixelRatio || 1;
+ c.width = Math.ceil(el.clientWidth * dpr);
+ c.height = Math.ceil(el.clientHeight * dpr);
+ c.style.width = `${el.clientWidth}px`;
+ c.style.height = `${el.clientHeight}px`;
+ c.getContext('2d', { alpha: true })?.scale(dpr, dpr);
+};
diff --git a/ide/src/base-ui/chart/pagenation/PageNation.ts b/ide/src/base-ui/chart/pagenation/PageNation.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6529ca14ed3b879fcc6dc0d38b2bffecc60b42c0
--- /dev/null
+++ b/ide/src/base-ui/chart/pagenation/PageNation.ts
@@ -0,0 +1,503 @@
+/*
+ * Copyright (C) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export class PageNation {
+ element: any;
+ pageInfo: any;
+ first: any;
+ prev: any;
+ next: any;
+ last: any;
+ inputBox: any;
+ btn: any;
+ list: any;
+ origin: HTMLElement | undefined;
+ static BtnBackColor = '#6C9BFA';
+ static BtnColor = '#fff';
+ constructor(selector: any, options = {}) {
+ selector!.innerHTML = '';
+ //最大容器
+ this.element = selector;
+ // 默认值
+ this.pageInfo = {
+ current: 1,
+ total: 100,
+ pageSize: 15,
+ };
+ //等待创建的元素
+ this.first = null;
+ this.prev = null;
+ this.next = null;
+ this.last = null;
+ // 输入框
+ this.inputBox = null;
+ // 跳转按钮
+ this.btn = null;
+ // 中间的按钮组
+ this.list = null;
+ this.setPageOptions(options);
+ this.setItemStyles();
+ this.createPageElement();
+ this.bindPageHtml();
+ this.bindPageEvent();
+ }
+
+ setPageOptions(options: any) {
+ // 当前页
+ this.pageInfo.current = options.current || 1;
+ // 一页显示多少条
+ this.pageInfo.pageSize = options.pageSize || 15;
+ if (options.totalpage) {
+ //用户传递了多少页
+ this.pageInfo.totalpage = options.totalpage;
+ } else {
+ //没有传递多少页
+ if (options.total) {
+ // 如果传递了总条数
+ this.pageInfo.totalpage = Math.ceil(options.total / this.pageInfo.pageSize);
+ } else {
+ // 如果没有传递总条数
+ this.pageInfo.totalpage = 9;
+ }
+ }
+ this.pageInfo.first = options.first || '<<';
+ this.pageInfo.change = options.change || function () {};
+ }
+
+ setElementStyles(ele: any, styles: any) {
+ for (let key in styles) {
+ ele.style[key] = styles[key];
+ }
+ }
+
+ setItemStyles() {
+ this.setElementStyles(this.element, {
+ margin: '18px auto',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ });
+ }
+
+ // 创建元素 首页 上一页 按钮组 下一页 尾页 输入框 按钮
+ createPageElement() {
+ //首页
+ this.origin = document.createElement('p');
+ this.setElementStyles(this.origin, {
+ 'border-radius': '4px',
+ padding: '5px',
+ border: '1px solid rgba(0,0,0,0.6)',
+ cursor: 'pointer',
+ margin: '0 5px',
+ });
+
+ this.first = this.origin.cloneNode(true);
+ this.first.innerText = this.pageInfo.first;
+ this.first.name = 'first';
+ this.element.appendChild(this.first);
+
+ this.prev = this.origin.cloneNode(true);
+ this.prev.innerText = '<';
+ this.prev.name = 'prev';
+ this.prev.style.padding = '5px 10px';
+ this.element.appendChild(this.prev);
+
+ // 创建ul
+ this.list = document.createElement('ul');
+ this.setElementStyles(this.list, {
+ display: 'flex',
+ padding: '0',
+ });
+ this.element.appendChild(this.list);
+ this.next = this.origin.cloneNode(true);
+ this.next.innerText = '>';
+ this.next.name = 'next';
+ this.next.style.padding = '5px 10px';
+ this.next.style.margin = '0px 5px';
+ this.element.appendChild(this.next);
+ this.last = this.origin.cloneNode(true);
+ this.last.innerText = '>>';
+ this.last.name = 'last';
+ this.last.style.padding = '5px';
+ this.last.style.margin = '0px 5px';
+ this.element.appendChild(this.last);
+ let jumpDiv = document.createElement('div');
+ jumpDiv.style.display = 'flex';
+ jumpDiv.style.border = '1px solid rgba(0,0,0,0.6)';
+ jumpDiv.style.borderRadius = '4px';
+ jumpDiv.style.width = '70px';
+ jumpDiv.style.height = '32px';
+ jumpDiv.style.marginLeft = '10px';
+
+ // 创建输入框
+ this.inputBox = document.createElement('input');
+ this.inputBox.value = this.pageInfo.current;
+ this.setElementStyles(this.inputBox, {
+ width: '35px',
+ height: '30px',
+ textAlign: 'center',
+ outline: 'none',
+ padding: '0',
+ border: '0',
+ 'border-radius': '5px',
+ });
+ jumpDiv.appendChild(this.inputBox);
+ let span = document.createElement('span');
+ span.style.width = '1px';
+ span.style.height = '24px';
+ span.style.alignSelf = 'center';
+ span.style.backgroundColor = '#999999';
+ jumpDiv.appendChild(span);
+ // 创建按钮
+ this.btn = document.createElement('button');
+ this.btn.innerText = '';
+ this.btn.name = 'goto';
+ this.setElementStyles(this.btn, {
+ height: '32px',
+ width: '30px',
+ cursor: 'pointer',
+ backgroundColor: '#FFF',
+ border: '0',
+ 'border-radius': '5px',
+ });
+ this.btn.style.background = `url('img/arrowright.png') no-repeat 98% center var(--dark-background3,#FFFFFF)`;
+ this.btn.style.backgroundPosition = 'center';
+ jumpDiv.appendChild(this.btn);
+ this.element.appendChild(jumpDiv);
+ }
+
+ // 判断首页 上一页 下一页 尾页 是否可以点击
+ bindPageHtml() {
+ const { current, totalpage } = this.pageInfo;
+ const disable = { color: '#999999', cursor: 'not-allowed' };
+ const enable = {
+ color: '#000',
+ cursor: 'pointer',
+ };
+ // 判断当前页是否是第一页 如果是第一页 那么首页和上一页就不能点击
+ if (current <= 1) {
+ this.setElementStyles(this.first, disable);
+ this.setElementStyles(this.prev, disable);
+ } else {
+ this.setElementStyles(this.first, enable);
+ this.setElementStyles(this.prev, enable);
+ }
+ // 判断当前页是否是最后一页 如果是最后一页 那么下一页和尾页就不能点击
+ if (current >= totalpage) {
+ this.setElementStyles(this.next, disable);
+ this.setElementStyles(this.last, disable);
+ } else {
+ this.setElementStyles(this.next, enable);
+ this.setElementStyles(this.last, enable);
+ }
+ this.inputBox.value = current;
+ //渲染的时候判断ul列表的显示情况
+ this.bindPageList();
+ this.pageInfo.change(this.pageInfo.current);
+ }
+
+ bindPageList() {
+ // clear ul里面的内容
+ this.list.innerHTML = '';
+ //每次加载之前先清空ul里面的内容
+ const { pageSize, current, totalpage } = this.pageInfo;
+ const origin = document.createElement('li');
+ origin.dataset.name = 'item';
+ this.setElementStyles(origin, {
+ listStyle: 'none',
+ 'border-radius': '4px',
+ border: '1px solid rgba(0,0,0,0.6)',
+ padding: '5px 10px',
+ margin: '0 5px',
+ cursor: 'pointer',
+ });
+ if (totalpage <= 9) {
+ for (let i = 0; i < totalpage; i++) {
+ const li = origin.cloneNode(true);
+ // @ts-ignore
+ li.innerText = i + 1;
+ if (i + 1 === current) {
+ this.setElementStyles(li, {
+ backgroundColor: PageNation.BtnBackColor,
+ color: PageNation.BtnColor,
+ });
+ }
+ this.list.appendChild(li);
+ }
+ return;
+ }
+ // 左边5个 中间 ... 右边2个
+ if (this.bindLeftList(current, totalpage, origin)) {
+ return;
+ }
+ // 当前页面 大于5页 小于倒数第5页
+ for (let i = 0; i < 2; i++) {
+ const li = origin.cloneNode(true);
+ // @ts-ignore
+ li.innerText = i + 1;
+ if (i + 1 === current) {
+ this.setElementStyles(li, {
+ backgroundColor: PageNation.BtnBackColor,
+ color: PageNation.BtnColor,
+ });
+ }
+ this.list.appendChild(li);
+ }
+ var span = document.createElement('span');
+ span.innerText = '...';
+ this.list.appendChild(span);
+ for (let i = current - 3; i < current + 2; i++) {
+ const li = origin.cloneNode(true);
+ // @ts-ignore
+ li.innerText = i + 1;
+ if (i + 1 === current) {
+ this.setElementStyles(li, {
+ backgroundColor: PageNation.BtnBackColor,
+ color: PageNation.BtnColor,
+ });
+ }
+ this.list.appendChild(li);
+ }
+ var span = document.createElement('span');
+ span.innerText = '...';
+ this.list.appendChild(span);
+ for (let i = totalpage - 2; i < totalpage; i++) {
+ const li = origin.cloneNode(true);
+ // @ts-ignore
+ li.innerText = i + 1;
+ if (i + 1 === current) {
+ this.setElementStyles(li, {
+ backgroundColor: PageNation.BtnBackColor,
+ color: PageNation.BtnColor,
+ });
+ }
+ this.list.appendChild(li);
+ }
+ }
+
+ bindLeftList(current: number, totalpage: number, origin: HTMLElement): boolean {
+ if (current < 5) {
+ // 左边5个 中间 ... 右边2个
+ for (let i = 0; i < 5; i++) {
+ const li = origin.cloneNode(true);
+ // @ts-ignore
+ li.innerText = i + 1;
+ if (i + 1 === current) {
+ this.setElementStyles(li, {
+ backgroundColor: PageNation.BtnBackColor,
+ color: PageNation.BtnColor,
+ });
+ }
+ this.list.appendChild(li);
+ }
+ var span = document.createElement('span');
+ span.innerText = '...';
+ this.list.appendChild(span);
+ for (let i = totalpage - 2; i < totalpage; i++) {
+ const li = origin.cloneNode(true);
+ // @ts-ignore
+ li.innerText = i + 1;
+ if (i + 1 === current) {
+ this.setElementStyles(li, {
+ backgroundColor: PageNation.BtnBackColor,
+ color: PageNation.BtnColor,
+ });
+ }
+ this.list.appendChild(li);
+ }
+ return true;
+ }
+ if (current == 5) {
+ // 左边5个 中间 ... 右边2个
+ for (let i = 0; i < 7; i++) {
+ const li = origin.cloneNode(true);
+ // @ts-ignore
+ li.innerText = i + 1;
+ if (i + 1 === current) {
+ this.setElementStyles(li, {
+ backgroundColor: PageNation.BtnBackColor,
+ color: PageNation.BtnColor,
+ });
+ }
+ this.list.appendChild(li);
+ }
+ var span = document.createElement('span');
+ span.innerText = '...';
+ this.list.appendChild(span);
+
+ for (let i = totalpage - 2; i < totalpage; i++) {
+ const li = origin.cloneNode(true);
+ // @ts-ignore
+ li.innerText = i + 1;
+ if (i + 1 === current) {
+ this.setElementStyles(li, {
+ backgroundColor: PageNation.BtnBackColor,
+ color: PageNation.BtnColor,
+ });
+ }
+ this.list.appendChild(li);
+ }
+ return true;
+ }
+ // 当前页面 大于倒数第5页
+ if (current > totalpage - 4) {
+ // 左边5个 中间 ... 右边2个
+ for (let i = 0; i < 2; i++) {
+ const li = origin.cloneNode(true);
+ // @ts-ignore
+ li.innerText = i + 1;
+ if (i + 1 === current) {
+ this.setElementStyles(li, {
+ backgroundColor: PageNation.BtnBackColor,
+ color: PageNation.BtnColor,
+ });
+ }
+ this.list.appendChild(li);
+ }
+ var span = document.createElement('span');
+ span.innerText = '...';
+ this.list.appendChild(span);
+ for (let i = totalpage - 5; i < totalpage; i++) {
+ const li = origin.cloneNode(true);
+ // @ts-ignore
+ li.innerText = i + 1;
+ if (i + 1 === current) {
+ this.setElementStyles(li, {
+ backgroundColor: PageNation.BtnBackColor,
+ color: PageNation.BtnColor,
+ });
+ }
+ this.list.appendChild(li);
+ }
+ return true;
+ }
+ if (current == totalpage - 4) {
+ // 左边5个 中间 ... 右边2个
+ for (let i = 0; i < 2; i++) {
+ const li = origin.cloneNode(true);
+ // @ts-ignore
+ li.innerText = i + 1;
+ if (i + 1 === current) {
+ this.setElementStyles(li, {
+ backgroundColor: PageNation.BtnBackColor,
+ color: PageNation.BtnColor,
+ });
+ }
+ this.list.appendChild(li);
+ }
+ var span = document.createElement('span');
+ span.innerText = '...';
+ this.list.appendChild(span);
+ for (let i = totalpage - 7; i < totalpage; i++) {
+ const li = origin.cloneNode(true);
+ // @ts-ignore
+ li.innerText = i + 1;
+ if (i + 1 === current) {
+ this.setElementStyles(li, {
+ backgroundColor: PageNation.BtnBackColor,
+ color: PageNation.BtnColor,
+ });
+ }
+ this.list.appendChild(li);
+ }
+ return true;
+ }
+ if (current == totalpage - 4) {
+ // 左边5个 中间 ... 右边2个
+ for (let i = 0; i < 2; i++) {
+ const li = origin.cloneNode(true);
+ // @ts-ignore
+ li.innerText = i + 1;
+ if (i + 1 === current) {
+ this.setElementStyles(li, {
+ backgroundColor: PageNation.BtnBackColor,
+ color: PageNation.BtnColor,
+ });
+ }
+ this.list.appendChild(li);
+ }
+ var span = document.createElement('span');
+ span.innerText = '...';
+ this.list.appendChild(span);
+ for (let i = totalpage - 7; i < totalpage; i++) {
+ const li = origin.cloneNode(true);
+ // @ts-ignore
+ li.innerText = i + 1;
+ if (i + 1 === current) {
+ this.setElementStyles(li, {
+ backgroundColor: PageNation.BtnBackColor,
+ color: PageNation.BtnColor,
+ });
+ }
+ this.list.appendChild(li);
+ }
+ return true;
+ }
+ return false;
+ }
+
+ bindPageEvent() {
+ this.element.addEventListener(
+ 'click',
+ (event: {
+ target: {
+ name: string;
+ dataset: { name: string };
+ 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();
+ }
+ if (event.target.name === 'goto') {
+ // 拿到你文本的内容
+ let page = this.inputBox.value - 0;
+ if (isNaN(page)) {
+ page = 1;
+ }
+ if (page <= 1) {
+ page = 1;
+ }
+ if (page >= this.pageInfo.totalpage) {
+ page = this.pageInfo.totalpage;
+ }
+ this.pageInfo.current = page;
+ this.bindPageHtml();
+ }
+ if (event.target.dataset.name === 'item') {
+ this.pageInfo.current = event.target.innerText - 0;
+ this.bindPageHtml();
+ }
+ }
+ );
+ }
+}
diff --git a/ide/src/base-ui/chart/pagenation/pagination-box.ts b/ide/src/base-ui/chart/pagenation/pagination-box.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bf57bd6b9e0c2bedaafebbdb2811550c193bec8a
--- /dev/null
+++ b/ide/src/base-ui/chart/pagenation/pagination-box.ts
@@ -0,0 +1,65 @@
+/*
+ * Copyright (C) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BaseElement, element } from '../../BaseElement.js';
+
+@element('pagination-box')
+export class PaginationBox extends BaseElement {
+ private page: any;
+
+ static get observedAttributes() {
+ return ['text', 'height', 'width'];
+ }
+
+ get text() {
+ return this.getAttribute('text') || '';
+ }
+
+ set text(text: string) {
+ this.setAttribute('text', text);
+ }
+
+ get height() {
+ return this.getAttribute('height') || '';
+ }
+
+ set height(height: string) {
+ this.setAttribute('height', height);
+ }
+
+ initHtml(): string {
+ return `
+
+
+ `;
+ }
+
+ initElements(): void {
+ this.page = this.shadowRoot?.querySelector('#box');
+ }
+
+ attributeChangedCallback(name: string, oldValue: string, value: string) {
+ switch (name) {
+ }
+ }
+}
diff --git a/ide/src/base-ui/chart/pie/LitChartPie.ts b/ide/src/base-ui/chart/pie/LitChartPie.ts
new file mode 100644
index 0000000000000000000000000000000000000000..360106d1a9d96c99c04f8670fc48ff7bdd155984
--- /dev/null
+++ b/ide/src/base-ui/chart/pie/LitChartPie.ts
@@ -0,0 +1,543 @@
+/*
+ * Copyright (C) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { resizeCanvas } from '../helper.js';
+import { BaseElement, element } from '../../BaseElement.js';
+import { LitChartPieConfig } from './LitChartPieConfig.js';
+import { isPointIsCircle, pieChartColors, randomRgbColor } from './LitChartPieData.js';
+import { Utils } from '../../../trace/component/trace/base/Utils.js';
+
+interface Rectangle {
+ x: number;
+ y: number;
+ w: number;
+ h: number;
+}
+
+class Sector {
+ id?: any;
+ obj?: any;
+ key: any;
+ value: any;
+ startAngle?: number;
+ endAngle?: number;
+ startDegree?: number;
+ endDegree?: number;
+ color?: string;
+ percent?: number;
+ hover?: boolean;
+ ease?: {
+ initVal?: number;
+ step?: number;
+ process?: boolean;
+ };
+}
+
+@element('lit-chart-pie')
+export class LitChartPie extends BaseElement {
+ private eleShape: Element | null | undefined;
+ private tipEL: HTMLDivElement | null | undefined;
+ private labelsEL: HTMLDivElement | null | undefined;
+ canvas: HTMLCanvasElement | undefined | null;
+ ctx: CanvasRenderingContext2D | undefined | null;
+ cfg: LitChartPieConfig | null | undefined;
+ centerX: number | null | undefined;
+ centerY: number | null | undefined;
+ data: Sector[] = [];
+ radius: number | undefined;
+ private textRects: Rectangle[] = [];
+
+ set config(cfg: LitChartPieConfig | null | undefined) {
+ if (!cfg) return;
+ this.cfg = cfg;
+ (this.shadowRoot!.querySelector('#root') as HTMLDivElement).className =
+ cfg && cfg.data.length > 0 ? 'bg_hasdata' : 'bg_nodata';
+ this.measure();
+ this.render();
+ }
+
+ set dataSource(arr: any[]) {
+ if (this.cfg) {
+ this.cfg.data = arr;
+ this.measure();
+ this.render();
+ }
+ }
+
+ showHover() {
+ let hasHover = false;
+ this.data.forEach((it) => {
+ it.hover = it.obj.isHover;
+ if (it.hover) {
+ hasHover = true;
+ }
+ this.updateHoverItemStatus(it);
+ if (it.hover) {
+ this.showTip(
+ this.centerX || 0,
+ this.centerY || 0,
+ this.cfg!.tip ? this.cfg!.tip(it) : `${it.key}: ${it.value}`
+ );
+ }
+ });
+ if (!hasHover) {
+ this.hideTip();
+ }
+ this.render();
+ }
+
+ measure() {
+ if (!this.cfg) return;
+ this.data = [];
+ this.radius = (Math.min(this.clientHeight, this.clientWidth) * 0.65) / 2 - 10;
+ let cfg = this.cfg!;
+ let startAngle = 0;
+ let startDegree = 0;
+ let full = Math.PI / 180; //每度
+ let fullDegree = 0; //每度
+ let sum = this.cfg.data.reduce((previousValue, currentValue) => currentValue[cfg.angleField] + previousValue, 0);
+ this.labelsEL!.textContent = '';
+ let labelArray: string[] = [];
+ this.cfg.data.forEach((it, index) => {
+ let item: Sector = {
+ id: `id-${Utils.uuid()}`,
+ color: this.cfg!.label.color ? this.cfg!.label.color(it) : pieChartColors[index % pieChartColors.length],
+ obj: it,
+ key: it[cfg.colorField],
+ value: it[cfg.angleField],
+ startAngle: startAngle,
+ endAngle: startAngle + full * ((it[cfg.angleField] / sum) * 360),
+ startDegree: startDegree,
+ endDegree: startDegree + fullDegree + (it[cfg.angleField] / sum) * 360,
+ ease: {
+ initVal: 0,
+ step: (startAngle + full * ((it[cfg.angleField] / sum) * 360)) / startDegree,
+ process: true,
+ },
+ };
+ this.data.push(item);
+ startAngle += full * ((it[cfg.angleField] / sum) * 360);
+ startDegree += fullDegree + (it[cfg.angleField] / sum) * 360;
+ labelArray.push(``);
+ });
+ this.labelsEL!.innerHTML = labelArray.join('');
+ }
+
+ get config(): LitChartPieConfig | null | undefined {
+ return this.cfg;
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ this.eleShape = this.shadowRoot!.querySelector
+
+
+
+
+
`;
+ }
+}
diff --git a/ide/src/base-ui/chart/pie/LitChartPieConfig.ts b/ide/src/base-ui/chart/pie/LitChartPieConfig.ts
new file mode 100644
index 0000000000000000000000000000000000000000..50846a86dc5adee92b0d2de6d6fda115476b36ed
--- /dev/null
+++ b/ide/src/base-ui/chart/pie/LitChartPieConfig.ts
@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface LitChartPieConfig {
+ appendPadding: number;
+ data: any[];
+ angleField: string;
+ colorField: string;
+ radius: number;
+ angleClick?: (it: object) => void;
+ label: {
+ type: string; // spider|inner|outer
+ offset?: string;
+ content?: (it: object) => string;
+ color?: (it: object) => string;
+ style?: {
+ fontSize: number;
+ textAlign: string;
+ };
+ };
+ hoverHandler?: (data: any) => void;
+ showChartLine?: boolean;
+ tip: ((a: any) => string) | undefined;
+ interactions: {
+ type: string; //element-active | element-selected
+ }[];
+}
diff --git a/ide/src/base-ui/chart/pie/LitChartPieData.ts b/ide/src/base-ui/chart/pie/LitChartPieData.ts
new file mode 100644
index 0000000000000000000000000000000000000000..af3a4b8e17d02ba0c290837313c05f3aca834c25
--- /dev/null
+++ b/ide/src/base-ui/chart/pie/LitChartPieData.ts
@@ -0,0 +1,50 @@
+/*
+ * Copyright (C) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export function randomRgbColor() {
+ const letters = '0123456789ABCDEF';
+ let color = '#';
+ for (let i = 0; i < 6; i++) {
+ color += letters[Math.floor(Math.random() * 16)];
+ }
+ return color;
+}
+
+export function isPointIsCircle(x1: number, y1: number, x2: number, y2: number, radius: number): boolean {
+ return Math.sqrt(Math.pow(Math.abs(x2 - x1), 2) + Math.pow(Math.abs(y2 - y1), 2)) < radius;
+}
+
+export const pieChartColors = [
+ '#5b8ff9',
+ '#5ad8a6',
+ '#5d7092',
+ '#f6bd16',
+ '#e8684a',
+ '#6DC8EC',
+ '#9270CA',
+ '#FF9D4D',
+ '#269A99',
+ '#FF99C3',
+ '#0039AC',
+ '#229D00',
+ '#AEAEAE',
+ '#FFEE00',
+ '#FF3000',
+ '#CBE1FF',
+ '#6000FF',
+ '#A24900',
+ '#70FFFE',
+ '#FF00C4',
+];
diff --git a/ide/src/base-ui/checkbox/LitCheckBox.ts b/ide/src/base-ui/checkbox/LitCheckBox.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2b51cbac91ad00af3aa42b2f85ac532b7fd0b00a
--- /dev/null
+++ b/ide/src/base-ui/checkbox/LitCheckBox.ts
@@ -0,0 +1,167 @@
+/*
+ * Copyright (C) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BaseElement, element } from '../BaseElement.js';
+
+@element('lit-check-box')
+export class LitCheckBox extends BaseElement {
+ private checkbox: HTMLInputElement | undefined;
+
+ static get observedAttributes() {
+ return ['checked', 'value'];
+ }
+
+ get indeterminate() {
+ return this.checkbox!.indeterminate;
+ }
+
+ set indeterminate(value) {
+ if (value === null || value === false) {
+ this.checkbox!.indeterminate = false;
+ } else {
+ this.checkbox!.indeterminate = true;
+ }
+ }
+
+ get checked() {
+ return this.getAttribute('checked') !== null;
+ }
+
+ set checked(value: boolean) {
+ if (value === null || !value) {
+ this.removeAttribute('checked');
+ } else {
+ this.setAttribute('checked', '');
+ }
+ }
+
+ get value() {
+ return this.getAttribute('value') || '';
+ }
+
+ set value(value: string) {
+ this.setAttribute('value', value);
+ }
+
+ initHtml(): string {
+ return `
+
+
+
+ `;
+ }
+
+ initElements(): void {
+ this.checkbox = this.shadowRoot?.getElementById('checkbox') as HTMLInputElement;
+ }
+
+ connectedCallback() {
+ this.checkbox!.addEventListener('change', (ev) => {
+ this.checked = this.checkbox!.checked;
+ this.dispatchEvent(
+ new CustomEvent('change', {
+ detail: {
+ checked: this.checked,
+ },
+ })
+ );
+ });
+ }
+
+ attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+ if (name == 'checked' && this.checkbox) {
+ this.checkbox.checked = newValue !== null;
+ }
+ if (name == 'value') {
+ let slot = this.shadowRoot?.getElementById('slot');
+ slot!.textContent = newValue;
+ }
+ }
+}
diff --git a/ide/src/base-ui/checkbox/LitCheckBoxWithText.ts b/ide/src/base-ui/checkbox/LitCheckBoxWithText.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cba91f29b9d76efee9bbc9297e0074c4e6fc2f61
--- /dev/null
+++ b/ide/src/base-ui/checkbox/LitCheckBoxWithText.ts
@@ -0,0 +1,109 @@
+/*
+ * Copyright (C) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BaseElement, element } from '../BaseElement.js';
+import { SpCheckDesBox } from '../../trace/component/setting/SpCheckDesBox.js';
+
+@element('lit-check-text')
+export class LitCheckBoxWithText extends BaseElement {
+ private _checkBox: SpCheckDesBox | undefined;
+ private _lowerLimit: HTMLInputElement | undefined;
+ private _upLimit: HTMLInputElement | undefined;
+
+ static get observedAttributes() {
+ return ['text', 'lowerLimit', 'upLimit', 'checked'];
+ }
+
+ get text(): string {
+ return this.getAttribute('text') || '';
+ }
+
+ set text(text: string) {
+ this.setAttribute('text', text);
+ }
+
+ get lowerLimit(): string {
+ return this.getAttribute('lowerLimit') || '0';
+ }
+
+ set lowerLimit(lower: string) {
+ this.setAttribute('lowerLimit', lower);
+ }
+
+ get upLimit(): string {
+ return this.getAttribute('upLimit') || '∞';
+ }
+
+ set upLimit(upLimit: string) {
+ this.setAttribute('upLimit', upLimit);
+ }
+
+ get checked() {
+ return this.getAttribute('checked') != null;
+ }
+
+ set checked(checked: boolean) {
+ if (checked) {
+ this.setAttribute('checked', '');
+ } else {
+ this.removeAttribute('checked');
+ }
+ }
+
+ initElements(): void {
+ this._checkBox = this.shadowRoot?.getElementById('checkbox') as SpCheckDesBox;
+ this._lowerLimit = this.shadowRoot?.getElementById('textLowerLimit') as HTMLInputElement;
+ this._upLimit = this.shadowRoot?.getElementById('_upLimit') as HTMLInputElement;
+ }
+
+ initHtml(): string {
+ return `
+
+
+
+ `;
+ }
+ get contentWidth() {
+ return this.getAttribute('content-width') || '400px';
+ }
+ set contentWidth(value) {
+ this.shadowRoot!.querySelector
+
+
+
+
+ 
+
+
+
+
+
+
+
`;
+ }
+}
+
+export interface MenuGroup {
+ title: string;
+ describe: string;
+ collapsed: boolean;
+ children: Array
+
+
+
+