@ebiz/designer-components 0.0.47 → 0.0.49

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

@@ -1,353 +0,0 @@
-/**
- * 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

@@ -1,53 +0,0 @@
-/**
- * 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

@@ -1,63 +0,0 @@
-/**
- * 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

@@ -1,22 +0,0 @@
-/**
- * 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>`,
-};