@ebiz/designer-components 0.0.18-tj.1

package/src/components/charts/feature/drag/index.js

@@ -0,0 +1,353 @@
+/**
+ * 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 { pxToNumber } from '../../util/convert';
+import merge from '../../util/merge';
+
+let DOM_WIDTH = 10000;
+let DOM_HEIGHT = 10000;
+
+//设置滚轮的状态
+let enableWheel = true;
+
+// 画布拖拽管理器，具有通用性
+// 支持鼠标拖拽和鼠标滚轮缩放
+class DragManager {
+    constructor(container, option) {
+        option = merge({
+            scale: 1, // 初始缩放值
+            scaleLimit: { min: 0.5, max: 1.5 }, // 缩放范围
+            size: DOM_WIDTH, // 画布尺寸
+            isScale: true, // 允许缩放
+            scaleThrottle: false, // 缩放节流
+        }, option);
+        // 画布容器
+        this.container = container;
+        DOM_WIDTH = option.size;
+        DOM_HEIGHT = option.size;
+        this.isScale = option.isScale;
+        // 当前缩放值(初始化时，将其约束在极值范围之内)
+        this.scale = Math.min(Math.max(option.scale, option.scaleLimit.min), option.scaleLimit.max);
+        // 创建被拖拽画布
+        this.insertDragDom();
+        // 初始化画布位置到屏幕正中心
+        this.initPosition();
+        // 创建操作按钮
+        this.createTools(option);
+        this.scaleThrottle = option.scaleThrottle;
+        this.scalePauseArr = [option.scaleLimit.min, 0.7, 0.9, 1, option.scaleLimit.max]; // 缩放停顿值 三个区间，每个区间停顿两次
+        this.scaleRefreshArr = [0.75, 0.95]; // 在这两处会刷新视图。视图分为三个区间0.5-0.75 0.75-0.95 0.95-1.5
+        this.scaleLimit = {
+            min: option.scaleLimit.min,
+            max: option.scaleLimit.max
+        };
+        this.throldHold = 200;
+        this.draging = false;
+        this.dom.addEventListener('mousedown', this.bindMouseDown.bind(this));
+        this.dom.addEventListener('mousemove', this.bindMouseMove.bind(this));
+        this.dom.addEventListener('mouseup', this.bindMouseUp.bind(this));
+        this.dom.addEventListener('mousewheel', this.bindMouseWheel.bind(this));
+        this.container.addEventListener('mouseleave', this.bindMouseLeave.bind(this));
+        // 设施画布初始化缩放
+        let center = {
+            x: this.containerRect.left + this.containerRect.width / 2,
+            y: this.containerRect.top + this.containerRect.height / 2,
+        };
+        this.scaleDom(center.x, center.y, this.scale, false);
+    }
+
+    // 插入拖拽画布
+    insertDragDom() {
+        this.dom = document.createElement('div');
+        this.dom.setAttribute('class', 'drag-container');
+        this.dom.setAttribute('style', `width:${DOM_WIDTH}px;height:${DOM_HEIGHT}px`);
+        this.container.appendChild(this.dom);
+    }
+
+    // 初始化this.dom的位置为屏幕正中间
+    initPosition() {
+        this.containerRect = this.container.getBoundingClientRect();
+        this.dom.style.top = (DOM_HEIGHT - this.containerRect.height) / 2 * -1 + 'px';
+        this.dom.style.left = (DOM_WIDTH - this.containerRect.width) / 2 * -1 + 'px';
+    }
+
+    // 鼠标按下事件
+    bindMouseDown(e) {
+        this.draging = false;
+        this.startPos = {
+            domx: pxToNumber(this.dom.style.left),
+            domy: pxToNumber(this.dom.style.top),
+            mousex: e.clientX,
+            mousey: e.clientY
+        };
+    }
+
+    // 鼠标拖拽事件
+    bindMouseMove(e) {
+        if (this.startPos) {
+            this.draging = true;
+            let moveX = e.clientX - this.startPos.mousex;
+            let moveY = e.clientY - this.startPos.mousey;
+            if (moveX == 0 && moveY == 0) return;
+            this.draging = true;
+            let targetX = this.startPos.domx + moveX;
+            let targetY = this.startPos.domy + moveY;
+            let target = this.limitPosition(targetX, targetY);
+            this.dom.style.top = target.y + 'px';
+            this.dom.style.left = target.x + 'px';
+        }
+    }
+
+    // 鼠标抬起事件
+    bindMouseUp(e) {
+        if (this.draging && this.startPos) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+        this.startPos = undefined;
+    }
+
+    // 鼠标离开容器事件
+    bindMouseLeave(e) {
+        if (this.draging) {
+            let mouseupEvent = new Event('mouseup');
+            this.dom.dispatchEvent(mouseupEvent);
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    }
+
+    // 每次scale变化都暴露给雪花图去刷新视图
+    dragScaleChange(lastScale, newScale) {
+        let shouldUpdate = false;
+        // 判断前后变化是否经过了this.scaleRefreshArr,否则不暴露事件，减少性能损耗
+        this.scaleRefreshArr.forEach(item => {
+            if (item > Math.min(lastScale, newScale) && item < Math.max(lastScale, newScale)) {
+                shouldUpdate = true;
+            }
+        });
+        if (!shouldUpdate) return;
+        const event = new CustomEvent('dragScaleChange', { detail: { scaleVal: newScale } });
+        window.dispatchEvent(event);
+    }
+
+    // 鼠标滚轮放大缩小
+    bindMouseWheel(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        if (this.isScale === false) return;
+        if (this.scaleThrottle) {
+            if (enableWheel) {
+                enableWheel = false;
+                // 设置延迟，一定时间内只触发一次滚轮事件(待修复，不能写死1200)
+                setTimeout(() => {
+                    enableWheel = true;
+                }, 1200);
+                let lastScale = this.scale;
+                let scaleUnit;
+                let pauseIndex; // 当前的缩放倍数在区间中的索引
+                for (let i = this.scalePauseArr.length - 1; i >= 0; i--) {
+                    if (e.deltaY < 0) {
+                        if (this.scale < this.scalePauseArr[i]) {
+                            pauseIndex = i;
+                        } else if (this.scale === this.scalePauseArr[i]) {
+                            pauseIndex = i + 1;
+                        }
+                    } else {
+                        if (this.scale < this.scalePauseArr[i]) {
+                            pauseIndex = i;
+                        } else if (this.scale === this.scalePauseArr[i]) {
+                            pauseIndex = i - 1;
+                        }
+                    }
+                }
+                if (e.deltaY < 0) { // 放大
+                    if (this.scale == this.scaleLimit.max) return;
+                } else if (e.deltaY > 0) { // 缩小
+                    if (this.scale == this.scaleLimit.min) return;
+                }
+                scaleUnit = (this.scalePauseArr[pauseIndex] - this.scale);
+                this.scale += scaleUnit;
+                this.scale = Math.max(this.scale, this.scaleLimit.min);
+                this.scale = Math.min(this.scale, this.scaleLimit.max);
+                this.scaleDom(e.clientX, e.clientY, scaleUnit);
+                this.dragScaleChange(lastScale, this.scale);
+            }
+        } else {
+            let scaleUnit;
+            if (e.deltaY < 0) { // 放大
+                scaleUnit = 0.1;
+                if (this.scale == this.scaleLimit.max) return;
+            } else if (e.deltaY > 0) { // 缩小
+                scaleUnit = -0.1;
+                if (this.scale == this.scaleLimit.min) return;
+            }
+            this.scale += scaleUnit;
+            this.scale = Math.max(this.scale, this.scaleLimit.min);
+            this.scale = Math.min(this.scale, this.scaleLimit.max);
+            this.scaleDom(e.clientX, e.clientY, scaleUnit);
+        }
+    }
+
+    // 点击+/-进行缩放,每次变化0.1
+    bindClickScale(e) {
+        let lastScale = this.scale;
+        let scaleUnit = 0.1;
+        if (e.deltaY < 0) {
+            if (this.scale == this.scaleLimit.max) return;
+            scaleUnit = 0.1;
+        } else if (e.deltaY > 0) {
+            if (this.scale == this.scaleLimit.min) return;
+            scaleUnit = -0.1;
+        }
+        this.scale += scaleUnit;
+        this.scale = Number(this.scale.toFixed(1));
+        this.scale = Math.max(this.scale, this.scaleLimit.min);
+        this.scale = Math.min(this.scale, this.scaleLimit.max);
+        this.scaleDom(e.clientX, e.clientY, scaleUnit);
+        this.dragScaleChange(lastScale, this.scale);
+    }
+
+    // 画布移动dx、dy距离
+    moveDom(dx, dy) {
+        this.dom.style.top = pxToNumber(this.dom.style.top) + dy + 'px';
+        this.dom.style.left = pxToNumber(this.dom.style.left) + dx + 'px';
+    }
+
+    // 画布以x、y(client类型)为中心进行缩放, size是指每次更改了多少缩放值
+    scaleDom(x, y, size, needToTransition = this.scaleThrottle ? true : false) {
+        let domRect = this.dom.getBoundingClientRect();
+        // 缩放前位置
+        let mouseInDom = {
+            x: (x - domRect.left) / domRect.width * DOM_WIDTH,
+            y: (y - domRect.top) / domRect.height * DOM_HEIGHT,
+        };
+        // 缩放后位置
+        let dx = (DOM_WIDTH / 2 - mouseInDom.x) * size;
+        let dy = (DOM_HEIGHT / 2 - mouseInDom.y) * size;
+        this.dom.style['transform'] = `scale(${this.scale})`;
+        this.moveDom(dx, dy);
+        // 每次触发缩放时给个过渡，但是要按时清除。避免影响到拖拽
+        if (needToTransition) {
+            this.dom.style['transition'] = `all ${this.throldHold}ms`;
+            setTimeout(() => {
+                this.dom.style['transition'] = 'unset';
+            }, this.throldHold);
+        }
+        const dragCurrentVal = this.container.querySelector('.drag-currentVal');
+        dragCurrentVal.innerHTML = (this.scale * 100).toFixed(0) + '%';
+    }
+
+    // 移动画布，使target显示在容器正中心的位置
+    moveTargetToCenter(target, callback) {
+
+        // 原传参类型为dom节点，新增选择器传参，如id选择器和class选择器的字符串
+        if (typeof (target) === 'string') {
+            target = document.querySelector(target);
+        }
+
+        if (!target) {
+            return;
+        }
+        let targetRect = target.getBoundingClientRect();
+        let containerRect = this.container.getBoundingClientRect();
+        let dx = containerRect.left + containerRect.width / 2 - targetRect.left - targetRect.width / 2;
+        let dy = containerRect.top + containerRect.height / 2 - targetRect.top - targetRect.height / 2;
+        this.moveDom(dx, dy);
+        callback && callback();
+    }
+
+
+    // 重置画布位置为屏幕中心
+    resetPosition() {
+        this.initPosition();
+    }
+
+    // 以屏幕为中心，重置画布缩放值为1
+    resetScale() {
+        let size = 1 - this.scale;
+        this.scale = 1;
+        let center = {
+            x: this.containerRect.left + this.containerRect.width / 2,
+            y: this.containerRect.top + this.containerRect.height / 2,
+        };
+        this.scaleDom(center.x, center.y, size);
+    }
+
+    // 重置画布为初始状态
+    reset() {
+        let lastScale = this.scale;
+        this.resetPosition();
+        this.resetScale();
+        this.dragScaleChange(lastScale, this.scale);
+    }
+
+    // 修正画布位置，使画布x,y最大值不超过0，最小值不超过（容器宽度 - 画布宽度)
+    limitPosition(targetX, targetY) {
+        // 拖拽位置最大为0
+        targetX = Math.min(0, targetX);
+        targetY = Math.min(0, targetY);
+        // 拖拽位置最小为（容器宽度 - 画布宽度)
+        targetX = Math.max(targetX, (DOM_WIDTH - this.containerRect.width) * -1);
+        targetY = Math.max(targetY, (DOM_HEIGHT - this.containerRect.height) * -1);
+        return {
+            x: targetX,
+            y: targetY
+        };
+    }
+
+    // 创建操作按钮
+    createTools({ enlarge, center, shrunk }) {
+        let baseEnlarge = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIHZlcnNpb249IjEuMSI+Cjx0aXRsZT4yMDIxMDcwMl9WazVnNU5aUjQ0WllWTVZoWmdWbzVZNDRZRlpOMVpWWlVKVlJaaFVjPC90aXRsZT4KPGcgaWQ9Iumhtemdoi0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICA8ZyBpZD0i5Y2V55So5oi36K+m5oOFLeWFqOe9keaLk+aJkSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE4NzguMDAwMDAwLCAtODkwLjAwMDAwMCkiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICA8ZyBpZD0i57yW57uELTExIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxODcyLjAwMDAwMCwgODgwLjAwMDAwMCkiPgogICAgICA8ZyBpZD0iMjAyMTA3MDJfVms1ZzVOWlI0NFpZVk1WaFpnVm81WTQ0WUZaTjFaVlpVSlZSWmhVYyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNi4wMDAwMDAsIDEwLjAwMDAwMCkiPgogICAgICAgIDxyZWN0IGlkPSLnn6nlvaIiIGZpbGw9IiNEOEQ4RDgiIG9wYWNpdHk9IjAiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgLz4KICAgICAgICA8cGF0aCBkPSJNMTAuNSwzIEMxMC45MjczNjMyLDMgMTEuMjc5NTg5MywzLjMyMTcwMDE2IDExLjMyNzcyNjksMy43MzYxNDkwNiBMMTEuMzMzMzMzMywzLjgzMzMzMzMzIEwxMS4zMzMzMzMzLDkuNjY2NjY2NjcgTDE3LjE2NjY2NjcsOS42NjY2NjY2NyBDMTcuNjI2OTAzOSw5LjY2NjY2NjY3IDE4LDEwLjAzOTc2MjggMTgsMTAuNSBDMTgsMTAuOTI3MzYzMiAxNy42NzgyOTk4LDExLjI3OTU4OTMgMTcuMjYzODUwOSwxMS4zMjc3MjY5IEwxNy4xNjY2NjY3LDExLjMzMzMzMzMgTDExLjMzMzMzMzMsMTEuMzMzMzMzMyBMMTEuMzMzMzMzMywxNy4xNjY2NjY3IEMxMS4zMzMzMzMzLDE3LjYyNjkwMzkgMTAuOTYwMjM3MywxOCAxMC41LDE4IEMxMC4wNzI2MzY4LDE4IDkuNzIwNDEwNjcsMTcuNjc4Mjk5OCA5LjY3MjI3MzA4LDE3LjI2Mzg1MDkgTDkuNjY2NjY2NjcsMTcuMTY2NjY2NyBMOS42NjY2NjY2NywxMS4zMzMzMzMzIEwzLjgzMzMzMzMzLDExLjMzMzMzMzMgQzMuMzczMDk2MDQsMTEuMzMzMzMzMyAzLDEwLjk2MDIzNzMgMywxMC41IEMzLDEwLjA3MjYzNjggMy4zMjE3MDAxNiw5LjcyMDQxMDY3IDMuNzM2MTQ5MDYsOS42NzIyNzMwOCBMMy44MzMzMzMzMyw5LjY2NjY2NjY3IEw5LjY2NjY2NjY3LDkuNjY2NjY2NjcgTDkuNjY2NjY2NjcsMy44MzMzMzMzMyBDOS42NjY2NjY2NywzLjM3MzA5NjA0IDEwLjAzOTc2MjgsMyAxMC41LDMgWiIgaWQ9IuW9oueKtue7k+WQiCIgZmlsbD0iI0ZGRkZGRiIgLz4KICAgICAgPC9nPgogICAgPC9nPgogIDwvZz4KPC9nPgo8L3N2Zz4=';
+        let baseCenter = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIHZlcnNpb249IjEuMSI+CiAgICA8dGl0bGU+MjAyMzAyMDdfVnBWcFZoMVFaZzFsMEFZNDVsWk1aVjBjMU5ZYzR4VTBaTVp0NVFZdzwvdGl0bGU+CiAgICA8ZyBpZD0i6aG16Z2iLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLljZXnlKjmiLfor6bmg4Ut5YWo572R5ouT5omRIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTg3OC4wMDAwMDAsIC05MjIuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSLnvJbnu4QtMTEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4NzIuMDAwMDAwLCA4ODAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iMjAyMzAyMDdfVnBWcFZoMVFaZzFsMEFZNDVsWk1aVjBjMU5ZYzR4VTBaTVp0NVFZdyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNi4wMDAwMDAsIDQyLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSLnn6nlvaIiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIvPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yLjI5MTY2NjY3LDEzLjU0MTY2NjcgQzIuNjM2ODQ0NjMsMTMuNTQxNjY2NyAyLjkxNjY2NjY3LDEzLjgyMTQ4ODcgMi45MTY2NjY2NywxNC4xNjY2NjY3IEwyLjkxNjY2NjY3LDE1LjgzMzMzMzMgTDIuOTE2NjY2NjcsMTUuODMzMzMzMyBDMi45MTY2NjY2NywxNi40ODMwODAxIDMuNDEyNDA2NzMsMTcuMDE3MDQwNiA0LjA0NjI4MzMzLDE3LjA3NzYxMTIgTDQuMTY2NjY2NjcsMTcuMDgzMzMzMyBMNS44MzMzMzMzMywxNy4wODMzMzMzIEM2LjE3ODUxMTMsMTcuMDgzMzMzMyA2LjQ1ODMzMzMzLDE3LjM2MzE1NTMgNi40NTgzMzMzMywxNy43MDgzMzMzIEM2LjQ1ODMzMzMzLDE4LjA1MzUxMTMgNi4xNzg1MTEzLDE4LjMzMzMzMzMgNS44MzMzMzMzMywxOC4zMzMzMzMzIEw0LjE2NjY2NjY3LDE4LjMzMzMzMzMgTDQuMTY2NjY2NjcsMTguMzMzMzMzMyBDMi43ODU5NTQ3OSwxOC4zMzMzMzMzIDEuNjY2NjY2NjcsMTcuMjE0MDQ1MiAxLjY2NjY2NjY3LDE1LjgzMzMzMzMgTDEuNjY2NjY2NjcsMTQuMTY2NjY2NyBDMS42NjY2NjY2NywxMy44MjE0ODg3IDEuOTQ2NDg4NywxMy41NDE2NjY3IDIuMjkxNjY2NjcsMTMuNTQxNjY2NyBaIE0xOC4zMzMzMzMzLDE0LjE2NjY2NjcgTDE4LjMzMzMzMzMsMTUuODMzMzMzMyBMMTguMzMzMzMzMywxNS44MzMzMzMzIEMxOC4zMzMzMzMzLDE3LjIxNDA0NTIgMTcuMjE0MDQ1MiwxOC4zMzMzMzMzIDE1LjgzMzMzMzMsMTguMzMzMzMzMyBMMTQuMTY2NjY2NywxOC4zMzMzMzMzIEMxMy44MjE0ODg3LDE4LjMzMzMzMzMgMTMuNTQxNjY2NywxOC4wNTM1MTEzIDEzLjU0MTY2NjcsMTcuNzA4MzMzMyBDMTMuNTQxNjY2NywxNy4zNjMxNTUzIDEzLjgyMTQ4ODcsMTcuMDgzMzMzMyAxNC4xNjY2NjY3LDE3LjA4MzMzMzMgTDE1LjgzMzMzMzMsMTcuMDgzMzMzMyBMMTUuODMzMzMzMywxNy4wODMzMzMzIEMxNi40ODMwODAxLDE3LjA4MzMzMzMgMTcuMDE3MDQwNiwxNi41ODc1OTMzIDE3LjA3NzYxMTIsMTUuOTUzNzE2NyBMMTcuMDgzMzMzMywxNS44MzMzMzMzIEwxNy4wODMzMzMzLDE0LjE2NjY2NjcgQzE3LjA4MzMzMzMsMTMuODIxNDg4NyAxNy4zNjMxNTUzLDEzLjU0MTY2NjcgMTcuNzA4MzMzMywxMy41NDE2NjY3IEMxOC4wNTM1MTEzLDEzLjU0MTY2NjcgMTguMzMzMzMzMywxMy44MjE0ODg3IDE4LjMzMzMzMzMsMTQuMTY2NjY2NyBaIE0xOC4zMzMzMzMzLDQuMTY2NjY2NjcgTDE4LjMzMzMzMzMsNS44MzMzMzMzMyBDMTguMzMzMzMzMyw2LjE3ODUxMTMgMTguMDUzNTExMyw2LjQ1ODMzMzMzIDE3LjcwODMzMzMsNi40NTgzMzMzMyBDMTcuMzYzMTU1Myw2LjQ1ODMzMzMzIDE3LjA4MzMzMzMsNi4xNzg1MTEzIDE3LjA4MzMzMzMsNS44MzMzMzMzMyBMMTcuMDgzMzMzMyw0LjE2NjY2NjY3IEwxNy4wODMzMzMzLDQuMTY2NjY2NjcgQzE3LjA4MzMzMzMsMy41MTY5MTk5IDE2LjU4NzU5MzMsMi45ODI5NTk0MyAxNS45NTM3MTY3LDIuOTIyMzg4ODIgTDE1LjgzMzMzMzMsMi45MTY2NjY2NyBMMTQuMTY2NjY2NywyLjkxNjY2NjY3IEMxMy44MjE0ODg3LDIuOTE2NjY2NjcgMTMuNTQxNjY2NywyLjYzNjg0NDYzIDEzLjU0MTY2NjcsMi4yOTE2NjY2NyBDMTMuNTQxNjY2NywxLjk0NjQ4ODcgMTMuODIxNDg4NywxLjY2NjY2NjY3IDE0LjE2NjY2NjcsMS42NjY2NjY2NyBMMTUuODMzMzMzMywxLjY2NjY2NjY3IEwxNS44MzMzMzMzLDEuNjY2NjY2NjcgQzE3LjIxNDA0NTIsMS42NjY2NjY2NyAxOC4zMzMzMzMzLDIuNzg1OTU0NzkgMTguMzMzMzMzMyw0LjE2NjY2NjY3IFogTTYuNDU4MzMzMzMsMi4yOTE2NjY2NyBDNi40NTgzMzMzMywyLjYzNjg0NDYzIDYuMTc4NTExMywyLjkxNjY2NjY3IDUuODMzMzMzMzMsMi45MTY2NjY2NyBMNC4xNjY2NjY2NywyLjkxNjY2NjY3IEw0LjE2NjY2NjY3LDIuOTE2NjY2NjcgQzMuNTE2OTE5OSwyLjkxNjY2NjY3IDIuOTgyOTU5NDMsMy40MTI0MDY3MyAyLjkyMjM4ODgyLDQuMDQ2MjgzMzIgTDIuOTE2NjY2NjcsNC4xNjY2NjY2NyBMMi45MTY2NjY2Nyw1LjgzMjUgQzIuOTE2NjY2NjcsNi4xNzc2Nzc5NyAyLjYzNjg0NDYzLDYuNDU3NSAyLjI5MTY2NjY3LDYuNDU3NSBDMS45NDY0ODg3LDYuNDU3NSAxLjY2NjY2NjY3LDYuMTc3Njc3OTcgMS42NjY2NjY2Nyw1LjgzMjUgTDEuNjY2NjY2NjcsNC4xNjY2NjY2NyBMMS42NjY2NjY2Nyw0LjE2NjY2NjY3IEMxLjY2NjY2NjY3LDIuNzg1OTU0NzkgMi43ODU5NTQ3OSwxLjY2NjY2NjY3IDQuMTY2NjY2NjcsMS42NjY2NjY2NyBMNS44MzMzMzMzMywxLjY2NjY2NjY3IEM2LjE3ODUxMTMsMS42NjY2NjY2NyA2LjQ1ODMzMzMzLDEuOTQ2NDg4NyA2LjQ1ODMzMzMzLDIuMjkxNjY2NjcgWiIgaWQ9IuW9oueKtiIgZmlsbD0iI0ZGRkZGRiIgZmlsbC1ydWxlPSJub256ZXJvIi8+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTEzLjk1ODMzMzMsNSBMNi4wNDE2NjY2Nyw1IEM1LjQ2NjM3MDA1LDUgNSw1LjQ2NjM3MDA1IDUsNi4wNDE2NjY2NyBMNSwxMy45NTgzMzMzIEM1LDE0LjUzMzYyOTkgNS40NjYzNzAwNSwxNSA2LjA0MTY2NjY3LDE1IEwxMy45NTgzMzMzLDE1IEMxNC41MzM2Mjk5LDE1IDE1LDE0LjUzMzYyOTkgMTUsMTMuOTU4MzMzMyBMMTUsNi4wNDE2NjY2NyBDMTUsNS40NjYzNzAwNSAxNC41MzM2Mjk5LDUgMTMuOTU4MzMzMyw1IFoiIGlkPSLot6/lvoQiIGZpbGw9IiNGRkZGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=';
+        let baseShrunk = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIHZlcnNpb249IjEuMSI+CiAgICA8dGl0bGU+MjAyMTA3MDJfWThWZ1kwNDRZRTVSVUpabDVSMDQ0ODBGNXNVSTRFWXcwOVk4VmsxcDwvdGl0bGU+CiAgICA8ZyBpZD0i6aG16Z2iLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLljZXnlKjmiLfor6bmg4Ut5YWo572R5ouT5omRIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTg3OC4wMDAwMDAsIC05NTQuMDAwMDAwKSIgZmlsbC1ydWxlPSJub256ZXJvIj4KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hC0xMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTg3Mi4wMDAwMDAsIDg4MC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSIyMDIxMDcwMl9ZOFZnWTA0NFlFNVJVSlpsNVIwNDQ4MEY1c1VJNEVZdzA5WThWazFwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2LjAwMDAwMCwgNzQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgZmlsbD0iI0Q4RDhEOCIgb3BhY2l0eT0iMCIgeD0iMCIgeT0iMCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIi8+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE3LjE2NjY2NjcsOSBDMTcuNjI2OTAzOSw5IDE4LDkuNDQ3NzE1MyAxOCwxMCBDMTgsMTAuNTEyODM1OCAxNy42NzgyOTk4LDEwLjkzNTUwNzIgMTcuMjYzODUwOSwxMC45OTMyNzIzIEwxNy4xNjY2NjY3LDExIEwzLjgzMzMzMzMzLDExIEMzLjM3MzA5NjA0LDExIDMsMTAuNTUyMjg0NyAzLDEwIEMzLDkuNDg3MTY0MiAzLjMyMTcwMDE2LDkuMDY0NDkyOCAzLjczNjE0OTA2LDkuMDA2NzI3NyBMMy44MzMzMzMzMyw5IEwxNy4xNjY2NjY3LDkgWiIgaWQ9IlN0cm9rZS0xIiBmaWxsPSIjRkZGRkZGIi8+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==';
+        let stateDom = `<div class="drag-tools">
+            <div class='drag-scale'>
+              <div class="drag-tool-item drag-tool-enlarge" style='background:url(${enlarge || baseEnlarge})'></div>
+              <div class='drag-currentVal'>${(this.scale * 100).toFixed(0)}%</div>
+              <div class="drag-tool-item drag-tool-shrunk" style='background:url(${shrunk || baseShrunk})'></div>
+            </div>
+            <div class='drag-reset'>
+              <div class="drag-tool-item drag-tool-center" style='background:url(${center || baseCenter})'></div>
+            </div>
+        </div>`;
+        this.container.insertAdjacentHTML('beforeend', stateDom);
+        this.container.getElementsByClassName('drag-tool-enlarge')[0].addEventListener('click', () => {
+            this.bindClickScale({
+                deltaY: -100,
+                clientX: this.containerRect.left + this.containerRect.width / 2,
+                clientY: this.containerRect.top + this.containerRect.height / 2
+            });
+        });
+        this.container.getElementsByClassName('drag-tool-center')[0].addEventListener('click', () => {
+            this.reset();
+        });
+        this.container.getElementsByClassName('drag-tool-shrunk')[0].addEventListener('click', () => {
+            this.bindClickScale({
+                deltaY: 100,
+                clientX: this.containerRect.left + this.containerRect.width / 2,
+                clientY: this.containerRect.top + this.containerRect.height / 2
+            });
+        });
+    }
+
+    // 获取拖拽画布
+    getDragDom() {
+        return this.dom;
+    }
+
+    unInstall() {
+        this.container.innerHTML = null;
+        this.dom = null;
+    }
+}
+
+export default DragManager;

package/src/components/charts/feature/drag/index.less

@@ -0,0 +1,53 @@
+/**
+ * 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.
+ *
+ */
+.drag-container {
+  width: 10000px;
+  height: 10000px;
+  position: absolute;
+  cursor: pointer;
+}
+
+.drag-tools {
+  display: block;
+  bottom: 3rem /* 48/16 */;
+  right: 2rem;
+  position: absolute;
+  cursor: pointer;
+  color: #f5f5f5;
+  width: 2.5rem /* 40/16 */;
+  font-size: 0.75rem;
+
+  .drag-scale,
+  .drag-reset {
+    border: 1px solid rgba(238, 238, 238, 0.15);
+    background-color: rgba(25, 25, 25, 0.65);
+    padding: 0.625rem /* 10/16 */ 0.375rem /* 6/16 */;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 0.75rem;
+    border-radius: 0.25rem;
+  }
+
+  .drag-reset {
+    margin-top: 0.5rem;
+  }
+
+  .drag-tool-item {
+    width: 1.25rem /* 20/16 */;
+    height: 1.25rem /* 20/16 */;
+  }
+  .drag-currentVal {
+    margin-top: 0.75em; 
+  }
+}

package/src/components/charts/feature/equalLabel/index.js

@@ -0,0 +1,63 @@
+/**
+ * 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 { isNumber } from '../../util/type';
+
+// 累加数据的每一项
+function accumulateArray(arr) {
+    return arr.reduce((acc, current, index) => {
+        if (index === 0) {
+            acc.push(current);
+        } else {
+            acc.push(acc[index - 1] + current);
+        }
+      return acc;
+    }, []);
+}
+
+// 计算平均值
+function divideIntoIntegers(number, parts) {
+    if (parts <= 1 || number <= 0) {
+      throw new Error('Invalid input');
+    }
+    let quotient = Math.floor(number / parts);
+    let remainder = number % parts;
+    let result = [];
+    for (let i = 0; i < parts - 1; i++) {
+      result.push(quotient);
+      if (remainder > 0) {
+        result[i]++;
+        remainder--;
+      }
+    }
+    result.push(quotient);
+    return accumulateArray(result);
+}
+
+function equalLabel(iChartOption, xAxisItem, xAxisUnit) {
+    let sharing = xAxisItem.sharing;
+    if(isNumber(sharing)) {
+        let dataLength = iChartOption.data.length;
+        let sharingArr = divideIntoIntegers(dataLength -1,sharing);
+        xAxisUnit.axisLabel.interval = (index) => {
+            if(sharingArr.includes(index) || index === 0 ) {
+                return true;
+            } else {
+                return false;
+            }
+        }
+    }
+    if(sharing === 'auto') {
+        xAxisUnit.axisLabel.showMaxLabel = true;
+    }
+}
+
+export default equalLabel;

package/src/components/charts/feature/expandLegend/constants.js

@@ -0,0 +1,22 @@
+/**
+ * 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 const CSS_CLASS = {
+    CONTAINER: "hui_legend_container",
+    MUTISELECT_CONTAINER: "hui_legend_mutiselect_container",
+    LIST_CONTAINER: "hui_legend_list_container",
+    MORE: "hui_expand_legend_more",
+    SINGLESELECT_CONTAINER:"hui_legend_singleselect_container"
+};
+
+export const SVG_ICON = {
+    MORE: `<svg width="12.000000" height="12.000000" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><desc>Created with Pixso.</desc><defs/><path id="合并" d="M0 6C0 5.58 0.33 5.25 0.75 5.25C1.16 5.25 1.5 5.58 1.5 6C1.5 6.41 1.16 6.75 0.75 6.75C0.33 6.75 0 6.41 0 6ZM6 5.25C5.58 5.25 5.25 5.58 5.25 6C5.25 6.41 5.58 6.75 6 6.75C6.41 6.75 6.75 6.41 6.75 6C6.75 5.58 6.41 5.25 6 5.25ZM10.5 6C10.5 5.58 10.83 5.25 11.25 5.25C11.66 5.25 12 5.58 12 6C12 6.41 11.66 6.75 11.25 6.75C10.83 6.75 10.5 6.41 10.5 6Z" fill="#191919" fill-opacity="1.000000" fill-rule="evenodd"/></svg>`,
+};