@ebiz/designer-components 0.0.18-tj.1

package/src/components/charts/framework/module/connector/Manager.js

@@ -0,0 +1,103 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import Connector from './index';
+
+class ConnectorManager{
+	constructor(chartInstance, lineData, option){
+        // 所有数据
+        this.data = {};
+        // 所有实例
+		this.instances = {};
+        // 连接点所有数据
+        lineData.forEach(line => {
+            let {startConnector,endConnector} = line;
+            this.data[startConnector.id] = startConnector;
+            this.data[endConnector.id] = endConnector;
+        });
+        this.createInstance(option,chartInstance,this.data);
+	}
+
+    //创建连接点实例对象
+    createInstance(option, chartInstance,data) {
+        let showConnector = option?.connector?.show || false;
+        Object.keys(data).forEach(key => {
+            let item = this.data[key];
+            if(showConnector) {
+                this.instances[item.id] = new Connector(item, option, chartInstance,data);
+            }
+        })
+    }
+
+
+    // exist(connector){
+    //     return connector.index > 0;
+    // }
+
+	getData(){
+		return this.data;
+	}
+
+	getInstances(){
+		return this.instances;
+	}
+
+    reCreate(chartInstance, lineData, option) {
+        Object.keys(this.instances).forEach(key => {
+            let item = this.instances[key];           
+            item.uninstall(key);
+        })
+        //连接点所有数据
+        lineData.forEach(line => {
+            let {startConnector,endConnector} = line;
+            this.data[startConnector.id] = startConnector;
+            this.data[endConnector.id] = endConnector;
+        });
+        this.createInstance(option,chartInstance,this.data);
+    }
+
+    refresh(chartInstance, lineData, option){
+        let showConnector = option?.connector?.show || false;
+        if(showConnector) {
+            // 旧连接点数据
+            let oldData = this.data;
+            // 新连接点数据
+            let newData = [];
+            lineData.forEach(line => {
+                let {startConnector,endConnector} = line;
+                newData[startConnector.id] = startConnector;
+                newData[endConnector.id] = endConnector;
+            });
+            // 更新连接点
+            Object.keys(newData).forEach(key => {
+                // 新增的连接点处理
+                if(!oldData[key]) {
+                    this.createInstance(option,chartInstance,newData[key]);
+                }
+                // 对连接点进行更新处理
+                this.instances[key] && this.instances[key].update(key,newData[key],option);
+                
+            })
+            // 删除的连接点处理
+            Object.keys(this.data).forEach(key => {
+                if(!newData[key]) {
+                    this.instances[key] && this.instances[key].uninstall(key,this.instances);            
+                }
+            })
+        }
+    }
+
+    
+
+    
+}
+
+export default ConnectorManager;

package/src/components/charts/framework/module/connector/index.js

@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import dot from './type/dot';
+import expand from './type/expand';
+
+const DOT = 'dot';// 圆点样式
+const EXPAND= 'expand';// 展开样式
+
+const CONNECTOR = {
+    [DOT]: dot,
+    [EXPAND]: expand,
+};
+
+class Connector{
+	constructor(data, option, chartInstance){
+		// 连接点数据
+    	this.data = data;
+        // 绘画连接点
+		this.render(option, chartInstance);
+        this.chartInstance = chartInstance;
+	}
+
+    // 绘画节点
+    render(option,chartInstance) {
+        const data = this.data;
+        const nodeDom = document.getElementById(data.nodeId);
+        const render = option.connector?.render;
+        let connectorType = Object.assign({type: 'dot'},option.connector);
+        let connectorStyle = connectorType.style;
+        let connectorDom;
+        let dom = document.createElement('div');
+        dom.id = data.id;
+        dom.setAttribute('class', 'connector-con');
+        dom.setAttribute('style', `left: ${data.x}px; top: ${data.y}px;`)
+        if(render && render(data)) {
+            let parser = new DOMParser();
+            let doc = parser.parseFromString(render(data), "text/html");
+            connectorDom = doc.body.firstChild;
+        } else {
+            let connectorIns = new CONNECTOR[connectorType.type](); 
+            if(option.layout) {
+                connectorDom = connectorIns.render(data, chartInstance);
+            }
+        }
+        connectorStyle && connectorDom && Object.keys(connectorStyle).forEach(item => {
+            connectorDom.style[item] = connectorStyle[item]
+        })
+        if(connectorDom) {
+            dom.appendChild(connectorDom);
+        }
+        nodeDom && nodeDom.appendChild(dom);
+        // 绑定事件
+        this.clickEvent(dom,data,option);
+    }
+	
+    // 绑定click事件
+    clickEvent(dom,data,option) {
+        let onClick = option.connector?.onClick;
+        dom.addEventListener("click", function() {
+            onClick && onClick(data);
+        })
+    }
+
+    // 卸载节点
+    uninstall(id,instances){
+        let element = document.getElementById(id);
+        element && element.remove();
+        instances[id] && delete instances[id];
+        this.Alldata[id] && delete this.Alldata[id];
+    }
+
+    // 更新节点信息
+    update(id,data,option){
+        let dom = document.getElementById(id);
+        if(dom) {
+            dom.setAttribute('style', `left: ${data.x}px; top: ${data.y}px;`);
+            let connectorStyle = option?.connector?.style;
+            connectorStyle && Object.keys(connectorStyle).forEach(item => {
+                dom.style[item] = connectorStyle[item]
+            })
+        }
+    }
+
+    
+}
+
+
+export default Connector;
+
+  

package/src/components/charts/framework/module/connector/index.less

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+.connector-con{
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transform: translate(-50%, -50%);
+    .connector-dot {
+        width: 6px; 
+        height: 6px; 
+        position: absolute;
+        border: 1px solid #d9d9d9;
+        background: #fff;
+        border-radius: 50%
+    }
+    .connector-expand {
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background: #fff;
+        box-shadow: 1px 1px 5px rgba(0,0,0,0.25);
+        z-index: 10;
+        text-align: center;
+        line-height: 16px;
+    }
+}

package/src/components/charts/framework/module/connector/type/dot.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+// 渲染空心圆点样式
+export default class Dot {
+    constructor() {}
+
+    render() {
+        let dom = document.createElement('div');
+        dom.setAttribute('class', `connector-dot`);
+        return dom;
+    }
+}

package/src/components/charts/framework/module/connector/type/expand.js

@@ -0,0 +1,211 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import { AnimationGroup } from '../../animation/index';
+
+function getIcon(isOpen){
+    const iconKey = isOpen ? 'open' : 'close';
+    const Icon = {
+        open: 'M20,11.25 C20.4142136,11.25 20.75,11.5857864 20.75,12 C20.75,12.3796958 20.4678461,12.693491 20.1017706,12.7431534 L20,12.75 L4,12.75 C3.58578644,12.75 3.25,12.4142136 3.25,12 C3.25,11.6203042 3.53215388,11.306509 3.89822944,11.2568466 L4,11.25 L20,11.25 Z',
+        close: 'M12,3.25 C12.3796958,3.25 12.693491,3.53215388 12.7431534,3.89822944 L12.75,4 L12.75,11.25 L20,11.25 C20.4142136,11.25 20.75,11.5857864 20.75,12 C20.75,12.3796958 20.4678461,12.693491 20.1017706,12.7431534 L20,12.75 L12.75,12.75 L12.75,20 C12.75,20.4142136 12.4142136,20.75 12,20.75 C11.6203042,20.75 11.306509,20.4678461 11.2568466,20.1017706 L11.25,20 L11.25,12.75 L4,12.75 C3.58578644,12.75 3.25,12.4142136 3.25,12 C3.25,11.6203042 3.53215388,11.306509 3.89822944,11.2568466 L4,11.25 L11.25,11.25 L11.25,4 C11.25,3.58578644 11.5857864,3.25 12,3.25 Z',
+    }
+    const expandIcon = `
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 24 24" version="1.1">
+            <g stroke-width="1" fill="none" fill-rule="evenodd">
+                <g>
+                    <rect fill="#191919" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                    <path d="${Icon[iconKey]}" id="形状结合" fill="#191919"></path>
+                </g>
+            </g>
+        </svg>`;
+    return expandIcon;
+}
+
+export default class Expand {
+    // connector数据
+    data;
+    // 是否展开
+    isOpen= true;
+    // 图表实例
+    chartInstance;
+
+    constructor(data, chartInstance) {}
+
+    render(data, chartInstance) {
+        this.data = data;
+        this.chartInstance = chartInstance;
+        let canExpand = this.hasChildren(chartInstance.nodeManager.getData().edges, data.nodeId);
+        if (data.port === 'start' && canExpand) {
+            this.dom = document.createElement('div');
+            this.dom.setAttribute('class', `connector-expand`);
+            this.dom.innerHTML = getIcon(this.isOpen)
+            this.dom.addEventListener("click", ()=>{
+                this.toggleIcon();
+                this.setAnimation();
+            })
+        }
+        return this.dom;
+    }
+
+    // 切换图标
+    toggleIcon() {
+        this.isOpen = !this.isOpen;
+        this.dom.innerHTML = getIcon(this.isOpen);
+    }
+    
+    // 执行展开收起动画
+    setAnimation() {
+        let { lineManager, nodeManager } = this.chartInstance;
+        let nodesData = nodeManager.getData();
+        let edges = nodesData.edges;
+        let startNode = nodeManager.getNodeData(this.data.nodeId);
+        let animateNodes = [];
+        this.findAnimateNodes(this.data.id, edges, animateNodes);
+        const group = new AnimationGroup();
+        
+        let updateStartConnector = (animateLine,params,isOpen) => {
+            for (const lineId in edges) {
+                const line = edges[lineId];
+                if (line.start === animateLine.end) {
+                    line.startConnector.absolute.x = (!isOpen ? animateLine.startConnector.x : line.startConnector.x) + params.left;
+                    line.startConnector.absolute.y = (!isOpen ? animateLine.startConnector.y : line.startConnector.y) + params.top;
+                }
+            }
+        };
+        for (let index = 0; index < animateNodes.length; index++) {
+            const id = animateNodes[index];
+            // 需要位移的节点
+            let endNode = nodeManager.getNodeData(id);
+            let endNodeDom = nodeManager.getDom(id);
+            // 以该节点为end的连线
+            let endLine = edges.filter(obj => obj.end === id)[0];
+            let nodeStart = {
+                left: this.isOpen ? startNode.x : endNode.x,
+                top: this.isOpen ? startNode.y : endNode.y,
+                opacity: this.isOpen || endNode.fold ? 0 : 1
+            }
+            // 记录该次折叠信息
+            this.collapseRecord(startNode, endNode, this.data);
+            // 如果折叠状态不存在，初次操作时为折叠---用于后续设置 透明度 和 样式 ‘pointer-events’
+            if (endNode.fold == undefined) endNode.fold = true;
+            // actionsId 记录初次操作折叠的节点id
+            // 如果操作id与actionsId相同，且isOpen为true，则该节点已展开至记录的起始位置；删除节点状态 fold和actionsId
+            if (this.isOpen && endNode.actionsId == this.data.nodeId) {
+                delete endNode.fold;
+                delete endNode.actionsId;
+            }else if (!endNode.actionsId) {
+                endNode.actionsId = this.data.nodeId;
+            }
+            // 根据isOpen使用折叠信息记录的起始位置
+            let nodeEnd = {
+                left: this.isOpen ? endNode.actions[this.data.nodeId].start.x : endNode.actions[this.data.nodeId].end.x,
+                top: this.isOpen ? endNode.actions[this.data.nodeId].start.y : endNode.actions[this.data.nodeId].end.y,
+                opacity: this.isOpen && !endNode.actions[this.data.nodeId].fold && !endNode.fold ? 1 : 0
+            }
+            group.add(endNodeDom, {
+                start: nodeStart,
+                end: nodeEnd,
+                duration: lineManager.RE_CREATE_TIME,
+                onAfterUpdate: (params, elapsed, element)=> {
+                    let animateLine = Object.assign({},endLine)
+                    animateLine.endConnector.absolute.x = animateLine.endConnector.x + params.left;
+                    animateLine.endConnector.absolute.y = animateLine.endConnector.y + params.top;
+                    updateStartConnector(animateLine, params, this.isOpen);
+                    lineManager.update(animateLine);
+                },
+                onFinish: () => {
+                    endNode.x = nodeEnd.left;
+                    endNode.y = nodeEnd.top;
+                    !this.isOpen && lineManager.hide(endLine);
+                    if (endNodeDom) endNodeDom.style['pointer-events'] = this.isOpen ? 'auto' : 'none';
+                    if (this.isOpen && !endNode.actions[this.data.nodeId]?.fold && endNode.fold && endNodeDom) endNodeDom.style['pointer-events'] = 'none';
+                    //折叠完成，删除该次折叠信息
+                    if (this.isOpen) delete endNode.actions[this.data.nodeId];
+                }
+            });
+        }
+        group.start();
+    }
+
+    // 查找所有需要展开收起的节点的id集合
+    findAnimateNodes(id, edges, animateNodes, endId) {
+        edges.forEach(item => {
+            let splitID = item.id.split("-to-");
+            if (item.start == endId || splitID[0] == id) {
+                animateNodes.push(item.end);
+                this.findAnimateNodes(splitID[1], edges, animateNodes, item.end);
+            }
+        });
+    }
+
+    //递归查找子节点
+    childId(id, edgeData, childIdArr){
+        edgeData.forEach(item => {
+            if(item.start == id) {
+                childIdArr.push(item.end);
+                this.childId(item.end, edgeData, childIdArr);
+            }
+        })
+    }
+
+    // 查询节点是否存在子节点
+    hasChildren(edgeData, id) {
+        let childIdArr = [];
+        // 获取所有节点id下面的子节点,放到childIdArr
+        this.childId(id, edgeData, childIdArr);
+        // 去除相同的节点
+        childIdArr =  [...new Set(childIdArr)];
+        if(childIdArr.length > 0) {
+            let singleNum = 0;// 只有一个父节点的数量
+            childIdArr.forEach(child => {
+                let num = 0;
+                for (let k = 0; k < edgeData.length; k++) {
+                    if(edgeData[k].end === child) {
+                        num++;
+                    }
+                    // 子节点的父节点数量大于1，则终止循环
+                    if(num > 1){
+                        break
+                    }
+                    if(k == edgeData.length - 1) {
+                        singleNum++
+                    }
+                }
+            })
+            // 如果所有的子节点的父节点都是唯一的
+            if(singleNum == childIdArr.length) {
+                return true;
+            } else {
+                return false;
+            }
+        }
+    }
+    
+    // 记录折叠信息，折叠操作的id，起始坐标, 节点对于该操作记录的折叠状态
+    collapseRecord(startNode, endNode, data) {
+        if (!endNode.actions) endNode.actions = {};
+        if (!endNode.actions[data.nodeId]) {
+            endNode.actions[data.nodeId] = {
+                fold: true,
+                start: {
+                    x: endNode.x,
+                    y: endNode.y
+                },
+                end: {
+                    x: startNode.x,
+                    y: startNode.y
+                }
+            }
+        } else {
+            endNode.actions[data.nodeId].fold = false;
+        }
+    }
+}

package/src/components/charts/framework/module/contextmenu/index.js

@@ -0,0 +1,149 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+const TRIGGER_CLASSNAMES = ['huicharts-node', 'huicharts-line-wrap', 'huicharts-legend-itemContainer', 'huicharts-container'];
+const IGNORE_CONTAINER_CLASS =  'huicharts-legend-container';
+
+export default class Contextmenu {
+    constructor(context, menuOption) {
+        this.showMenu = false;
+        this.context = context;
+        this.menuOption = menuOption;  // 配置对象
+        this.handleShow = this.updateMenu.bind(this);
+        this.handleClose = this.closeContextmenu.bind(this);
+        this.bindEvent();
+    }
+
+    bindEvent () {
+        this.context.root.addEventListener('contextmenu', this.handleShow)
+    }
+
+    uninstall() {
+        this.showMenu = false;
+        this.context.root.removeEventListener('click', this.handleClose)
+        document.removeEventListener('click', this.handleClose)
+        this.context.root.removeEventListener('contextmenu', this.handleShow)
+    }
+
+    updateMenu (event) {
+        event.preventDefault();
+        // 判断触发器的class集合
+        const clsNames = new Set(TRIGGER_CLASSNAMES);
+        const { menuOption } = this;
+        const targetEl = event.target;
+        let currentEl = event.target;
+        let targetCls = '';
+        while (currentEl) {
+            const currClsNames = currentEl.getAttribute("class")?.split(' ') || [];
+            targetCls = currClsNames.filter(name => clsNames.has(name))[0];
+            if (targetCls || currentEl === document.body) {
+                break;
+            } 
+            if (currClsNames.some(name => name === IGNORE_CONTAINER_CLASS)) {
+                this.closeContextmenu(event);
+                return false; // 右键在图例的空白区域
+            }
+            currentEl = currentEl.parentNode;
+        }
+        let menu = undefined;
+        let targetId = undefined;
+        if (targetCls === 'huicharts-node') {
+            menu = menuOption.node;
+            targetId = currentEl.getAttribute('id');
+        } else if (targetCls === 'huicharts-line-wrap') {
+            menu = menuOption.line;
+            targetId = currentEl.children[0]?.getAttribute('id');
+        } else if (targetCls === 'huicharts-legend-itemContainer') {
+            menu = menuOption.legend;
+            targetId = currentEl.getAttribute('id');
+        } else if (targetCls === 'huicharts-container') {
+            menu = menuOption.canvas;
+            targetId = 'huicharts-container';
+        }
+
+        if (menu) {
+            this.closeContextmenu(event)
+            this.context.root.addEventListener('click', this.handleClose)
+            document.addEventListener('click', this.handleClose)
+            this.createMenuElement(event, menu, targetId);
+            this.showMenu = true;
+        }
+    }
+
+    // 创建menu元素
+    createMenuElement (event, menuObj, targetId) {
+        const ulElement = document.createElement("ul");
+        ulElement.classList.add("huicharts-contextmenu");
+        if (Array.isArray(menuObj.data)) {
+            for (let item of menuObj.data) {
+                const liElement = document.createElement("li");
+                if (menuObj.itemRender) {
+                    const renderElement = menuObj.itemRender(item, targetId);
+                    if (renderElement instanceof Node) {
+                        liElement.appendChild(renderElement);
+                    } else {
+                        liElement.innerHTML = renderElement;
+                    }
+                } else {
+                    if (item.icon) {
+                        liElement.innerHTML = `<img class="menu-icon" src="${item.icon}" alt="" />`;
+                    }
+                    liElement.innerHTML += `<span class="menu-text">${item.label}</span> `;
+                }
+                liElement.classList.add("huicharts-contextmenu-item");
+                liElement.onclick = (event) => {
+                    event.stopPropagation()
+                    menuObj.onclick?.(item, targetId, event)
+                    this.closeContextmenu(event)
+                };
+                ulElement.appendChild(liElement);
+            }
+        }
+
+        this.context.root.appendChild(ulElement);
+        this.adjustMenuPosition(event, ulElement);
+    }
+
+    // 调整menu展示的位置
+    adjustMenuPosition (event, menuContainerEl) {
+        const { root } = this.context;   //  图表根容器
+        const { width: rootWidth, height: rootHeight, left: rootLeft, top: rootTop } = root.getBoundingClientRect();
+        const { offsetWidth: menuWidth, offsetHeight: menuHeight } = menuContainerEl;
+        const [offsetX = 4, offsetY = 4] = this.menuOption.offset || [4, 4]; // 菜单容器偏移量
+        let left = event.clientX - rootLeft + offsetX;
+        let top = event.clientY - rootTop + offsetY;
+        if (left + menuWidth > rootWidth) { // 右侧超出，向左移位
+            left = rootWidth - menuWidth - offsetX;
+        }
+        if (top + menuHeight > rootHeight) { // 底部超出，向上移位
+            top = rootHeight - menuHeight - offsetY;
+        }
+        menuContainerEl.setAttribute('style', `position: absolute; top:  ${top}px; left:  ${left}px;`);
+    }
+
+    closeContextmenu (event) {
+        if (!this.showMenu) {
+            return
+        }
+        event?.stopPropagation();
+        this.showMenu = false;
+        const contextmenu = this.context.root.querySelectorAll('.huicharts-contextmenu');
+        contextmenu.forEach((el) => {
+            el.parentNode.removeChild(el);
+        });
+        this.context.root.removeEventListener('click', this.handleClose);
+        document.removeEventListener('click', this.handleClose);
+    }
+}
+
+
+
+

package/src/components/charts/framework/module/contextmenu/index.less

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+.huicharts-contextmenu {
+  position: absolute;
+  z-index: 10000;
+  padding: 8px 10px;
+  border-radius: 4px;
+  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.18);
+  background: #fff;
+
+  .huicharts-contextmenu-item {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      padding: 4px 6px;
+      margin: 2px 0;
+      font-size: 12px;
+
+      .menu-icon {
+          width: 20px;
+          height: 20px;
+          margin-right: 6px;
+      }
+
+      &:hover {
+          background-color: #d9d9d9;
+          border-radius: 2px;
+          cursor: default;
+      }
+  }
+}