@ebiz/designer-components 0.0.47 → 0.0.49

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

@@ -1,434 +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 initDom from './initDom';
-import Tool from './tool';
-import merge from '../../../util/merge';
-import { Animation } from '../animation/index';
-import { pxToNumber } from '../../../util/convert';
-class CanvasManager {
-    constructor(dom, option) {
-        this.defaultOption = {
-            scale: 1,
-            scaleUnit: 0.1,
-            scaleAllow: true,
-            scaleThrottle: 200,
-            scaleLimit: {
-                min: 0.5,
-                max: 1.5
-            },
-        };
-        option = merge(this.defaultOption, option);
-        this.option = option;
-        // 画布容器
-        this.dom = dom;
-        // 是否允许缩放
-        this.scaleAllow = option.scaleAllow;
-        // 当前缩放值(初始化时，将其约束在极值范围之内)
-        this.scale = Math.min(Math.max(option.scale, option.scaleLimit.min), option.scaleLimit.max);
-        this.lastScale = this.scale;
-        // 上一次操作的位置
-        this.nodeOffset = {
-            x: 0,
-            y: 0
-        };
-        this.translateX = 0;
-        this.translateY = 0;
-        // 缩放节流时间
-        this.scaleThrottle = option.scaleThrottle;
-        // 实际动效时长
-        this.transitionDuration = Math.max(this.scaleThrottle - 50, 0);
-        // 创建各层容器
-        this.insertDragDom();
-        // 外容器相关参数
-        this.containerRect = this.dom.getBoundingClientRect();
-        //节点容器相关参数
-        this.nodeRect = this.nodeContainer.getBoundingClientRect();
-        // 缩放单位
-        this.scaleUnit = option.scaleUnit;
-        // 缩放上下限
-        this.scaleLimit = {
-            min: option.scaleLimit.min,
-            max: option.scaleLimit.max
-        };
-        this.draging = false;
-        if (option.show) {
-            // 创建操作按钮
-            let self = this;
-            this.tool = new Tool()
-            this.tool.createTools(option, this.root, this);
-            this.container.addEventListener('mousedown', this.bindMouseDown.bind(this));
-            this.container.addEventListener('mousemove', this.bindMouseMove.bind(this));
-            this.container.addEventListener('mouseup', this.bindMouseUp.bind(this));
-            // 在允许使用滚轮的时候 绑定事件wheel
-            if (self.scaleAllow) {
-                window.addEventListener('wheel', function (event) {
-                    // 判断事件发生的位置是否在this.container内
-                    if (self.container.contains(event.target)) {
-                        event.preventDefault();
-                        self.bindMouseWheel(event)
-                    }
-                }.bind(this.container), { passive: false });
-            } 
-            this.dom.addEventListener('mouseleave', this.bindMouseLeave.bind(this));
-        }
-        // 初始化设置画布位置到屏幕正中心
-        this.initPosition();
-    }
-
-    // 插入拖拽画布
-    insertDragDom() {
-        let containers = initDom(this.dom, this.option);
-        this.containers = containers;
-        this.root = containers.root;
-        this.container = containers.container;
-        this.bgCanvas = containers.bgCanvas;
-        this.lineContainer = containers.lineContainer;
-        this.nodeContainer = containers.nodeContainer;
-        this.lineGContainer = containers.lineGContainer;
-        this.secondlineGContainer = containers.secondlineGContainer;
-        this.animationContainer = containers.animationContainer;
-    }
-
-    // 设置this.dom的位置为屏幕正中间
-    initPosition() {
-        // 重置node container中心位置
-        this.nodeOrigin = {
-            x: this.containerRect.width / 2,
-            y: this.containerRect.height / 2
-        }
-        // 设施画布初始化缩放
-        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, true);
-    }
-
-    // 鼠标按下事件
-    bindMouseDown(e) {
-        this.draging = false;
-        this.startPos = {
-            domx: pxToNumber(this.nodeContainer.style.left),
-            domy: pxToNumber(this.nodeContainer.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;
-            this.nodeOffset = {
-                x: this.startPos.domx + moveX,
-                y: this.startPos.domy + moveY
-            }
-            this.nodeContainer.style.top = this.nodeOffset.y + 'px';
-            this.nodeContainer.style.left = this.nodeOffset.x + 'px';
-            this.animationContainer.style.top = this.nodeOffset.y + 'px';
-            this.animationContainer.style.left = this.nodeOffset.x + 'px';
-            // 计算lineG的偏移值
-            this.lineGOffset = this.computeLineGOffset();
-            this.lineGContainer.style.transform = `matrix(${this.scale},0,0,${this.scale},${this.lineGOffset.x},${this.lineGOffset.y})`;
-            this.secondlineGContainer.style.transform = `matrix(${this.scale},0,0,${this.scale},${this.lineGOffset.x},${this.lineGOffset.y})`;
-            this.bgCanvas?.draw({
-                scale: this.scale,
-                offset: this.nodeOffset
-            })
-            this.onMove({
-                type: 'move', 
-                offset: {
-                    x: e.movementX,
-                    y: e.movementY
-                },
-                scale: this.scale,
-                lastScale: this.lastScale,
-                center: this.nodeOrigin
-            });
-            this.setNodeContainerCenter();
-        }
-    }
-
-    // 鼠标抬起事件
-    bindMouseUp(e) {
-        if (this.draging && this.startPos) {
-            e.stopPropagation();
-            e.preventDefault();
-        }
-        this.startPos = undefined;
-        this.setNodeContainerCenter();
-    }
-
-    // 鼠标离开容器事件
-    bindMouseLeave(e) {
-        if (this.draging) {
-            let mouseupEvent = new Event('mouseup');
-            this.container.dispatchEvent(mouseupEvent);
-            e.stopPropagation();
-            e.preventDefault();
-        }
-        this.setNodeContainerCenter();
-    }
-
-    // 鼠标滚轮放大缩小
-    bindMouseWheel(e, isTool) {
-        if (this.scaleAllow || isTool) {
-            e.stopPropagation?.();
-            e.preventDefault?.();
-            // 鼠标滚轮操作时，节流处理
-            if (!isTool) {
-                this.scaleAllow = false;
-                // 滚动节流
-                setTimeout(() => {
-                    this.scaleAllow = true;
-                }, this.scaleThrottle);
-            }
-            this.lastScale = this.scale;
-            let scaleUnit = this.scaleUnit;
-            if (e.deltaY < 0) { // 放大
-                if (this.scale == this.scaleLimit.max) return;
-                scaleUnit = this.scaleUnit * 1;
-            } else if (e.deltaY > 0) { // 缩小
-                if (this.scale == this.scaleLimit.min) return;
-                scaleUnit = this.scaleUnit * -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.onScale({
-                lastScale: this.lastScale,
-                currentScale: this.scale
-            });
-        }
-    }
-
-    // 点击+/-进行缩放,每次变化 
-    bindClickScale(e) {
-        this.bindMouseWheel(e, true);
-    }
-
-    // 画布缩放回调
-    onScale() { }
-
-    // 画布移动回调
-    onMove() { }
-
-    // 画布移动到this.nodeOffset位置
-    moveDom(mouseInNode) {
-        setTimeout(() => {
-            this.nodeRect = this.nodeContainer.getBoundingClientRect();
-            // node节点实际位置圆心
-            this.setNodeContainerCenter();
-        }, this.transitionDuration);
-
-        // 操作按钮区更新文本显示
-        this.tool?.updateVal(this.scale);
-
-        // 底图跟随位移
-        let self = this;
-        let animation = new Animation(this.bgCanvas, {
-            start: {
-                scale: self.lastScale,
-                nodeOffset: self.lastNodeOffset,
-                lineGOffset: self.lastLineGOffset
-            },
-            end: {
-                scale: self.scale,
-                nodeOffset: self.nodeOffset,
-                lineGOffset: self.lineGOffset
-            },
-            duration: self.transitionDuration,
-            onUpdate: function (params, elapsed, element) {
-                self.bgCanvas?.draw({
-                    scale: params.scale,
-                    offset: params.nodeOffset
-                })
-                // 位移 svg node
-                self.nodeContainer.style['transform'] = `scale(${params.scale})`;
-                self.nodeContainer.style.left = `${params.nodeOffset.x}px `;
-                self.nodeContainer.style.top = `${params.nodeOffset.y}px `;
-                self.animationContainer.style['transform'] = `scale(${params.scale})`;
-                self.animationContainer.style.left = `${params.nodeOffset.x}px `;
-                self.animationContainer.style.top = `${params.nodeOffset.y}px `;
-                self.lineGContainer.style.transform = `matrix(${params.scale},0,0,${params.scale},${params.lineGOffset.x},${params.lineGOffset.y})`;
-                self.secondlineGContainer.style.transform = `matrix(${params.scale},0,0,${params.scale},${params.lineGOffset.x},${params.lineGOffset.y})`;
-                
-            }
-        })
-        animation.start();
-        this.onMove({
-            type: 'scale',
-            offset: mouseInNode,
-            scale: this.scale,
-            lastScale: this.lastScale,
-            center: this.nodeOrigin
-        });
-    }
-
-    // 画布以x、y(client类型)为中心进行缩放, size是指每次更改了多少缩放值, resetPosition是指重置为初始化位置
-    scaleDom(x, y, size, resetPosition) {
-        // 鼠标相对与画布的位置
-        let mouseInCanvas = {
-            x: this.compute('-', x, this.containerRect.left).result,
-            y: this.compute('-', y, this.containerRect.top).result
-        }
-        // 偏移量 鼠标位置（缩放点）与圆心的横向纵向距离 * 缩放量
-        let mouseInNode = {
-            x: -(this.compute('-', mouseInCanvas.x, this.nodeOrigin.x).result / this.lastScale * size),
-            y: -(this.compute('-', mouseInCanvas.y, this.nodeOrigin.y).result / this.lastScale * size),
-        };
-        // 记录上一次的位置，用于canvas动画
-        this.lastLineGOffset = this.lineGOffset || { x: 0, y: 0 };
-        this.lastNodeOffset = this.nodeOffset;
-        this.nodeOffset = {
-            x: this.compute('+', this.nodeOffset.x, mouseInNode.x).result,
-            y: this.compute('+', this.nodeOffset.y, mouseInNode.y).result
-        }
-        // 重置为初始化位置时，重置node偏移位置
-        if (resetPosition) {
-            this.nodeOffset = {
-                x: 0,
-                y: 0
-            }
-        }
-        // 计算lineG的偏移值  也就是容器层的实际left top
-        this.lineGOffset = this.computeLineGOffset();
-        this.moveDom(mouseInNode);
-    }
-
-    //精度计算 type为计算方法 使用方法 compute('+', 4, 2, 4).next('-', 1, 2).result;
-    compute(type, ...args) {
-        let self = this;
-        // 计算放大倍数
-        const getPower = (numbers) => {
-            const lens = numbers.map(num => num.toString().split(".")[1]?.length || 0);
-            // 获取最大长度
-            const len = Math.max(...lens);
-            // 计算返回放大倍数
-            return Math.pow(10, len)
-        }
-        // 获取放大倍数
-        const power = getPower(args);
-        // 获取放大后的值
-        const newNumbers = args.map(num => Math.round(num * power));
-        // 计算结果
-        let result = 0;
-        switch (type) {
-            case "+":
-                result = newNumbers.reduce((preNumber, nextNumber) => preNumber + nextNumber);
-                break;
-            case "-":
-                result = newNumbers.reduce((preNumber, nextNumber) => preNumber - nextNumber);
-                break;
-            case "*":
-                result = newNumbers.reduce((preNumber, nextNumber) => preNumber * nextNumber);
-                break;
-            case "/":
-                result = newNumbers.reduce((preNumber, nextNumber) => preNumber / nextNumber);
-                break;
-            default:
-                break;
-        }
-        return {
-            result: result / power,
-            next(nextType, ...nextArgs) {
-                return self.compute(nextType, result / power, ...nextArgs);
-            }
-        }
-    }
-
-    // 移动画布，使target显示在容器正中心的位置
-    moveTargetToCenter(target, callback) {
-        // 原传参类型为dom节点，新增选择器传参，如id选择器和class选择器的字符串
-        if (typeof (target) === 'string') {
-            target = document.querySelector(target);
-        }
-        if (!target) {
-            return;
-        }
-        let targetRect = target.getBoundingClientRect();
-        this.nodeOffset = {
-            x: this.compute('+', this.nodeOffset.x, this.containerRect.left, this.containerRect.width / 2).next('-', targetRect.left, targetRect.width / 2).result,
-            y: this.compute('+', this.nodeOffset.y, this.containerRect.top, this.containerRect.height / 2).next('-', targetRect.top, targetRect.height / 2).result
-        }
-        // 计算lineG的偏移值
-        this.lineGOffset = this.computeLineGOffset();
-        this.moveDom();
-        callback && callback();
-    }
-
-    // 计算lineG的偏移值 通过原始宽度计算出左侧缩放量 + 需设置的nodeOffset 计算得出lineG的偏移值
-    computeLineGOffset() {
-        let lineGOffset = {
-            x: this.compute('+', this.nodeOffset.x, this.containerRect.width * ((1 - this.scale) / 2)).result,
-            y: this.compute('+', this.nodeOffset.y, this.containerRect.height * ((1 - this.scale) / 2)).result
-        }
-        return lineGOffset
-    }
-
-    // 设置NodeContainer 圆心
-    setNodeContainerCenter() {
-        this.nodeRect = this.nodeContainer.getBoundingClientRect();
-        this.nodeOrigin = {
-            x: this.nodeRect.width / 2 + (this.nodeRect.left - this.containerRect.left),
-            y: this.nodeRect.height / 2 + (this.nodeRect.top - this.containerRect.top)
-        }
-    }
-
-    // 重置画布位置为屏幕中心
-    resetPosition() {
-        this.initPosition();
-    }
-
-    // 重置画布缩放值为1
-    resetScale() {
-        this.scale = 1;
-    }
-
-    // 设置Grid
-    setGrid(option) {
-        this.bgCanvas.setGrid(option, this.scale, this.nodeOffset);
-    }
-
-    // 重置画布为初始状态
-    reset() {
-        this.lastScale = this.scale;
-        this.resetScale();
-        this.initPosition();
-        this.onScale({
-            lastScale: this.lastScale,
-            currentScale: this.scale
-        })
-    }
-
-    // 获取画布DOM
-    getCanvasDom() {
-        return this.container;
-    }
-
-    // 卸载画布
-    unInstall() {
-        this.dom.innerHTML = null;
-        this.container = null;
-    }
-
-    // 后续要添加刷新画布.刷新网格配置的接口
-    // refresh .....
-}
-
-export default CanvasManager;

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

@@ -1,102 +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.
- *
- */
-.huicharts-container {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-.huicharts-canvas-container {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  cursor: pointer;
-}
-
-.huicharts-canvas-bg{
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  top: 0;
-  left: 0;
-}
-
-.huicharts-lines-container,.huicharts-second-lines-container{
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  z-index: 2;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-}
-.huicharts-second-lines-container{
-  z-index: 4;
-}
-
-.huicharts-animation-container{
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  z-index: 2;
-  pointer-events: none;
-}
-
-.huicharts-nodes-container{
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 3;
-  .huicharts-node{
-    pointer-events: auto;
-  }
-}
-
-.huicharts-canvas-tools {
-  display: block;
-  bottom: 3rem /* 48/16 */;
-  right: 2rem;
-  position: absolute;
-  cursor: pointer;
-  color: #f5f5f5;
-  width: 2.5rem /* 40/16 */;
-  font-size: 0.75rem;
-  z-index: 3;
-  .huicharts-canvas-scale,
-  .huicharts-canvas-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;
-  }
-
-  .huicharts-canvas-reset {
-    margin-top: 0.5rem;
-  }
-
-  .huicharts-canvas-tool-item {
-    width: 1.25rem /* 20/16 */;
-    height: 1.25rem /* 20/16 */;
-    background-position: center center;
-  }
-
-  .huicharts-canvas-currentVal {
-    margin-top: 0.75em; 
-  }
-}

package/src/components/charts/framework/module/canvas/initDom.js

@@ -1,66 +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 Grid from './grid';
-
-const svgContainer =
-    `<svg class="huicharts-lines-container" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
-        <defs></defs><g class="huicharts-lines-g"></g>
-     </svg>`;
-const svgSecondContainer =
-    `<svg class="huicharts-second-lines-container" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
-        <defs></defs><g class="huicharts-second-lines-g"></g>
-    </svg>`;
- 
-function initDom(dom, option) {
-    // 画布最外层根容器
-    let root = document.createElement('div');
-    root.setAttribute('class', 'huicharts-container');
-    dom?.appendChild(root);
-    // 画布最外层容器
-    let container = document.createElement('div');
-    container.setAttribute('class', 'huicharts-canvas-container');
-    root.appendChild(container);
-    // 画布背景网格
-    let bgCanvas;
-    if (option?.show && option?.grid?.show) {
-        bgCanvas = new Grid(container, option?.grid);
-    }
-    // 连线svg容器
-    container.insertAdjacentHTML('beforeend', svgContainer);
-    let lineContainer = dom.getElementsByClassName("huicharts-lines-container")[0];
-    let lineGContainer = lineContainer.getElementsByClassName('huicharts-lines-g')[0];
-    // 节点容器
-    let nodeContainer = document.createElement('div');
-    nodeContainer.setAttribute('class', 'huicharts-nodes-container');
-    container.appendChild(nodeContainer);
-    // 二次连线svg容器
-    container.insertAdjacentHTML('beforeend', svgSecondContainer);
-    let secondlineContainer = dom.getElementsByClassName("huicharts-second-lines-container ")[0];
-    let secondlineGContainer = secondlineContainer.getElementsByClassName('huicharts-second-lines-g')[0];
-    // 动效节点容器
-    let animationContainer = document.createElement('div');
-    animationContainer.setAttribute('class', 'huicharts-animation-container');
-    container.appendChild(animationContainer);
-    return {
-        root,
-        bgCanvas,
-        container,
-        lineContainer,
-        nodeContainer,
-        lineGContainer,
-        animationContainer,
-        secondlineContainer,
-        secondlineGContainer
-    }
-}
-
-export default initDom;

package/src/components/charts/framework/module/canvas/tool.js

@@ -1,62 +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.
- *
- */
-class Tool {
-
-    constructor(container, option) {}
-
-    // 创建操作按钮
-    createTools({
-        enlarge,
-        center,
-        shrunk,
-        scale
-    }, dom, self) {
-        this.dom = dom;
-        let containerRect = dom.getBoundingClientRect();
-        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="huicharts-canvas-tools">
-      <div class='huicharts-canvas-scale'>
-        <div class="huicharts-canvas-tool-item huicharts-canvas-tool-enlarge" style='background-image:url(${enlarge || baseEnlarge})'></div>
-        <div class='huicharts-canvas-currentVal'>${(scale * 100).toFixed(0)}%</div>
-        <div class="huicharts-canvas-tool-item huicharts-canvas-tool-shrunk" style='background-image:url(${shrunk || baseShrunk})'></div>
-      </div>
-      <div class='huicharts-canvas-reset'>
-        <div class="huicharts-canvas-tool-item huicharts-canvas-tool-center" style='background-image:url(${center || baseCenter})'></div>
-      </div>
-  </div>`;
-        dom.insertAdjacentHTML('beforeend', stateDom);
-        dom.getElementsByClassName('huicharts-canvas-tool-enlarge')[0].addEventListener('click', (e) => {
-            self.bindClickScale({
-                deltaY: -100,
-                clientX: containerRect.left + containerRect.width / 2,
-                clientY: containerRect.top + containerRect.height / 2
-            });
-        });
-        dom.getElementsByClassName('huicharts-canvas-tool-center')[0].addEventListener('click', (e) => {
-            self.reset();
-        });
-        dom.getElementsByClassName('huicharts-canvas-tool-shrunk')[0].addEventListener('click', (e) => {
-            self.bindClickScale({
-                deltaY: 100,
-                clientX: containerRect.left + containerRect.width / 2,
-                clientY: containerRect.top + containerRect.height / 2
-            });
-        });
-    }
-    updateVal(value) {
-        const dragCurrentVal = this.dom.querySelector('.huicharts-canvas-currentVal');
-        if (dragCurrentVal) dragCurrentVal.innerHTML = (value * 100).toFixed(0) + '%';
-    }
-}
-export default Tool;