@ebiz/designer-components 0.0.18-tj.1

package/src/components/charts/framework/charts/MindmapChart/index.less

@@ -0,0 +1,85 @@
+/**
+ * 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-legend-container {
+    position: absolute;
+    z-index: 9999;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+    align-content: flex-start;
+    box-sizing: border-box;
+
+    .huicharts-legend-itemContainer {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex: none;
+        box-sizing: border-box;
+        cursor: pointer;
+    }
+
+    .huicharts-legend-itemContainer.inactive{
+        .huicharts-legend-markerContainer,.huicharts-legend-labelContainer {
+            color: var(--huicharts-legend-inactiveColor) !important 
+        }
+    }
+
+    .huicharts-legend-markerContainer {
+        box-sizing: border-box;
+        flex: none;
+    }
+
+    .huicharts-legend-labelContainer {
+        box-sizing: border-box;
+        flex: none;
+    }
+
+    .huicharts-legend-symbol {
+        width: 100%;
+        height: 100%;
+        display: block;
+    }
+
+
+    .demo-legend-container {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 16px;
+    }
+
+    .demo-legend-icon {
+        width: 24px;
+        height: 20px;
+        background-color: #f0f0f0;
+        border: 1px solid #ccc;
+        border-radius: 2px;
+        box-sizing: border-box;
+    }
+
+    .demo-legend-state {
+        width: 24px;
+        height: 8px;
+        border-radius: 2px 2px 0 0;
+        margin: -1px -1px 0 -1px;
+        box-sizing: border-box;
+    }
+
+    .demo-legend-label {
+        color: #191919;
+        font-size: .875rem;
+    }
+}

package/src/components/charts/framework/core/Base.js

@@ -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.
+ *
+ */
+// base lifecycle
+export default class Base {
+    // chart render container
+    dom;
+    // chart render option
+    option;
+
+    constructor() {
+        // You must override the 'init' method， this method's target is to set chart container.  
+        if (this.init === undefined) {
+            throw new Error('This chart has not override "init" callback!');
+        }
+        // You must override the 'setOption' method， this method's target is to set chart option.  
+        if (this.setOption === undefined) {
+            throw new Error('This chart has not override "setOption" callback!');
+        }
+        // You must override the 'render' method， this method's target is to render chart dom.  
+        if (this.render === undefined) {
+            throw new Error('This chart has not override "render" callback!');
+        }
+        // You must override the 'onRenderReady' method， this method's run after the render callback.  
+        if (this.onRendered === undefined) {
+            throw new Error('This chart has not override "onRendered" callback!');
+        }
+        // You must override the 'refresh' method， this method's target is to refresh the chart dom .
+        if (this.refresh === undefined) {
+            throw new Error('This chart has not override "refresh" callback!');
+        }
+        // You must override the 'refreshData' method， this method's target is to refresh the chart dom with new data.
+        if (this.refreshData === undefined) {
+            throw new Error('This chart has not override "refreshData" callback!');
+        }
+        // You must override the 'resize' method， this method's target is to adaptive chart container width.
+        if (this.resize === undefined) {
+            throw new Error('This chart has not override "resize" callback!');
+        }
+        // You must override the 'uninstall' method， this method's target is to empty the chart container, and uninstall all listening events.
+        if (this.uninstall === undefined) {
+            throw new Error('This chart has not override "uninstall" callback!');
+        }
+    }
+}

package/src/components/charts/framework/core/Relation.js

@@ -0,0 +1,78 @@
+/**
+ * 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 Base from './Base';
+import CanvasManager from '../module/canvas';
+import LegendManger from '../module/legend';
+import Contextmenu from '../module/contextmenu';
+
+// 对外暴露的关系型图表基础组件
+export default class Relation extends Base {
+    constructor() {
+        super();
+        // 图表容器
+        this.dom = undefined;
+        // 图表配置
+        this.option = {};
+        // 画布模块
+        this.canvas = {};
+        // 图例模块
+        this.legendManger = null
+    }
+
+    setOption(option) {
+        this.option = option;
+        if (this.dom === undefined) {
+            console.error('This chart has not set container dom!');
+            return;
+        }
+        // 将画布作为图表容器
+        this.canvas = new CanvasManager(this.dom, this.option.canvas);
+        let containers = this.canvas.containers;
+        // 用户提供的容器
+        this.dom = this.canvas.getCanvasDom();
+        // 图表根容器 .huicharts-container
+        this.root = containers.root;
+        // 图表画布容器 .huicharts-canvas-container
+        this.container = containers.container;
+        // 图表连线容器 .huicharts-lines-container
+        this.svgContainer = containers.lineContainer;
+        // 图表节点容器  .huicharts-nodes-container
+        this.htmlContainer = containers.nodeContainer;
+        // 图表节点容器  .huicharts-animation-container
+        this.animationContainer = containers.animationContainer;
+        // 图表二次连线容器 .huicharts-second-lines-container
+        this.secondSvgContainer = containers.secondlineContainer;
+        this.secondlineGContainer = containers.secondlineGContainer;
+        // lineGContainer
+        if(option?.legend && !(option?.legend?.show === false) ){
+            this.legendManger = new LegendManger(option.legend, this.root);
+        }
+        // 右键菜单
+        if (option?.menu) {
+            this.setContextMenu(option.menu);
+        }
+    }
+
+    uninstall() {
+        this.contextmenuManger?.uninstall()
+    }
+
+    render() {
+        this.legendManger?.render()
+    }
+
+    setCanvas(canvasOpt) { }
+
+    setContextMenu(contextMenuOpt) {
+        this.contextmenuManger = new Contextmenu(this, contextMenuOpt);
+    }
+}

package/src/components/charts/framework/module/animation/Animate.js

@@ -0,0 +1,434 @@
+/**
+ * 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 Easing from "./Easing";
+import Interpolation from "./Interpolation";
+import Sequence from '../../../util/Sequence';
+export default class Animate {
+    element; //节点
+    isPaused = false; //是否已暂停          
+    rawData = {}; //初始数据
+    startValues = {}; //起始值
+    endValues = {}; //结束值
+    startValuesBackup = {}; //起始值的备份
+    duration; //执行时间
+    isDynamic = false; //是否动态修改
+    repeat = 0; //重复次数
+    repeatBackup = 0; //重复次数备份
+    yoyo = false; //开始值和结束值之间来回跳动 ，需repeat一起使用才有效。
+    isPlaying = false; //是否在进行中
+    reversed = false; //设置了反转
+    delayTime = 0; //延迟时长
+    startTime = 0; //开始时间 
+    repeatDelayTime = 0; //执行时长 + 延时时长
+    easingFunction = Easing.Linear.In; //缓动效果
+    interpolationFunction = Interpolation.Linear; //数组的情况下的缓动函数
+    chainedTweens = []; //链式动画合集：可设置一个动画执行结束后，继续执行另一个动画
+    onStartCallback; //开始回调
+    onFinishCallback; //完成回调
+    onStartCallbackFired = false; //开始回调是否触发
+    onEveryStartCallback; //每次开始回调
+    onEveryStartCallbackFired = false; //每次开始回调是否触发
+    onStopCallback; //结束回调 调用stop时
+    onRepeatCallback; //重复时回调
+    isChainStopped = false; //链式调用是否停止
+    goToEnd = false; //结束状态
+    onUpdateCallback = null; //更新时回调
+    onAfterUpdateCallback = null; //更新后
+    id = Sequence.nextId() //id
+
+    /**
+     * 初始化参数
+     * @param options  配置项
+     */
+    constructor(options, element) {
+        this.element = element;
+        this.rawData = JSON.parse(JSON.stringify(options.start));
+        this.startValues = JSON.parse(JSON.stringify(options.start));
+        this.endValues = options.end;
+        this.delayTime = options.delay || this.delayTime;
+        this.repeatDelayTime = options.repeatDelayTime || this.repeatDelayTime;
+        this.duration = options.duration < 0 ? 0 : options.duration
+        this.repeat = options.repeat || 0;
+        this.repeatBackup = options.repeat || 0;
+        this.easingFunction = options.easing || this.easingFunction;
+        this.onUpdateCallback = options.onUpdate || this.onUpdateCallback;
+        this.onAfterUpdateCallback = options.onAfterUpdate || this.onAfterUpdateCallback;
+        this.onRepeatCallback = options.onRepeat || this.onRepeatCallback;
+        this.onStartCallback = options.onStart || this.onStartCallback;
+        this.onStopCallback = options.onStop || this.onStopCallback;
+        this.onFinishCallback = options.onFinish || this.onFinishCallback;
+        this.isDynamic = options.dynamic
+        this.yoyo = options.yoyo;
+    }
+
+    /**
+     * 开始执行
+     * @param time  时间
+     */
+    start(time) {
+        if (time === void 0) {
+            time = performance.now();
+        }
+        if (this.isPlaying) {
+            return this
+        }
+        this.isPlaying = true;
+        // 暂停状态false
+        this.isPaused = false;
+        // startCallback未触发
+        this.onStartCallbackFired = false;
+        this.onEveryStartCallbackFired = false;
+        // 链式调用未停止
+        this.isChainStopped = false;
+        //重置repeat，可能在循环中被修改
+        this.repeat = this.repeatBackup;
+        //是否被反转 一般用于在设置了this.yoyo的情况
+        if (this.reversed) {
+            // 设置了反转 方向从后向前翻转。
+            this.reversed = false
+            for (const property in this.startValuesBackup) {
+                // 交换end和startRepeat的值。
+                this.swapEndStartRepeatValues(property)
+                this.startValues[property] = this.startValuesBackup[property]
+            }
+        }
+
+        this.startTime = time;
+        this.startTime += this.delayTime;
+
+        //  动态的修改终点的位置 如果未启用dynamic，则克隆结束值，而不是使用传入的结束值。
+        if (!this.isDynamic) {
+            const tmp = {}
+            for (const prop in this.endValues) tmp[prop] = this.endValues[prop]
+            this.endValues = tmp
+        }
+        // 设置属性: 初始值，起始值，结束值，
+        this.setupProperties(
+            this.rawData, //初始值
+            this.startValues, //起始值
+            this.endValues, // 结束值
+            this.startValuesBackup, //起始值的拷贝，用来实现this.repeat和this.yoyo
+        )
+
+    }
+
+    getId() {
+        return this.id
+    }
+
+    /**
+     * 设置属性: 初始值，起始值，结束值，
+     * @param this.rawData  初始值
+     * @param this.startValues, 起始值
+     * @param this.endValues  起始值
+     * @param this.startValuesBackup  起始值的拷贝，用来实现this.repeat和this.yoyo
+     * 
+     */
+    setupProperties(rawData, startValues, endValues, startValuesBackup) {
+        // 循环结束值的属性，例如起始值{x: 1, y: 1}, 结束值{y: 50}
+        for (const property in endValues) {
+            const startValue = rawData[property]
+            const startValueIsArray = Array.isArray(startValue)
+            const propType = startValueIsArray ? 'array' : typeof startValue
+            let isInterpolationList = !startValueIsArray && Array.isArray(endValues[property]) // 判断是否为数组
+
+            // 如果end的属性在start中不存在，则跳出
+            if (propType === 'undefined' || propType === 'function') {
+                continue
+            }
+
+            // 数组的处理
+            if (isInterpolationList) {
+                const endValue = endValues[property]
+
+                if (endValue.length === 0) {
+                    continue
+                }
+
+                const temp = [startValue]
+                for (let i = 0, l = end.length; i < l; i += 1) {
+                    // 处理相对值 某些加值 或者减值的情况 例如{top: '+20', left : '-20'}
+                    const value = this.handleRelativeValue(startValue, end[i])
+                    if (isNaN(value)) {
+                        isInterpolationList = false
+                        break
+                    }
+                    temp.push(value)
+                }
+
+                if (isInterpolationList) {
+                    endValues[property] = temp
+                }
+            }
+            // 属性为对象时候的处理 例如styles {x: 700, y: 200, styles: {opacity: 0}}
+            // 深层对象，递归
+            if ((propType === 'object' || startValueIsArray) && startValue && !isInterpolationList) {
+                startValues[property] = startValueIsArray ? [] : {}
+                // const nestedObject = startValue;
+
+                for (const prop in startValue) {
+                    startValues[property][prop] = startValue[prop]
+                }
+
+                startValuesBackup[property] = startValueIsArray ? [] : {}
+
+                let endValue = endValues[property]
+
+                // 动态的修改终点的位置 如果未启用dynamic，则克隆结束值，而不是使用传入的结束值。
+                if (!this.isDynamic) {
+                    const tmp = {}
+                    for (const prop in endValue) tmp[prop] = endValue[prop]
+                    this.endValues[property] = endValue = tmp
+                }
+                //递归
+                this.setupProperties(
+                    startValue,
+                    startValues[property],
+                    endValue,
+                    startValuesBackup[property],
+                )
+            } else {
+                // 简单数值，直接赋值
+                if (typeof startValues[property] === 'undefined') {
+                    startValues[property] = startValue
+                }
+
+                if (!startValueIsArray) {
+                    // 确保为数字
+                    startValues[property] *= 1.0
+                }
+                // 初始化初始值拷贝(用于repeat和yoyo 的时候 )
+                if (isInterpolationList) {
+                    startValuesBackup[property] = endValues[property].slice().reverse()
+                } else {
+                    startValuesBackup[property] = startValues[property] || 0
+                }
+            }
+        }
+    }
+    /**
+     * @returns true 还在动画， 否则false.
+     *
+     * @param autoStart - true 会调用start(),
+     */
+    update(time, autoStart) {
+        // 已暂停
+        if (this.isPaused) return true
+
+        let property;
+        // 未到达终点 并且 未在运行
+        if (!this.goToEnd && !this.isPlaying) {
+            // 如果自动开始，则开始
+            if (autoStart) this.start(time, true)
+            else return false
+        }
+        // 标记未结束
+        this.goToEnd = false;
+
+        // time 小于 开始时间，返回true
+        if (time < this.startTime) {
+            return true
+        }
+        // 开始事件 未触发，则触发。
+        if (this.onStartCallbackFired === false) {
+            if (this.onStartCallback) {
+                this.onStartCallback(this.rawData)
+            }
+
+            this.onStartCallbackFired = true
+        }
+        // 开始时的回调函数  未触发，则触发。
+        if (this.onEveryStartCallbackFired === false) {
+            if (this.onEveryStartCallback) {
+                this.onEveryStartCallback(this.rawData)
+            }
+
+            this.onEveryStartCallbackFired = true
+        }
+
+        const elapsedTime = time - this.startTime //已用时间 当前时间减去开始时间
+        const durationAndDelay = this.duration + (this.repeatDelayTime || this.delayTime) //设置的执行时长 + 延时时长（重复执行延时 || 默认延时）
+        const totalTime = this.duration + this.repeat * durationAndDelay //总时长： 设置的执行时长 + 重复次数 * （动画时长+延时时长）
+
+        let elapsed = this.calculateElapsedPortion(totalTime, elapsedTime, durationAndDelay); // 当前循环的进度
+        let value = this.easingFunction(elapsed); // 调用缓动函数 根据进度计算出相对应百分比
+        this.updateProperties(this.rawData, this.startValues, this.endValues, value); // 根据计算出来的value，将属性转换成对应值
+        if (this.onUpdateCallback) {
+            this.onUpdateCallback(this.rawData, elapsed, this.element);
+        }
+        if (this.onAfterUpdateCallback) {
+            this.onAfterUpdateCallback(this.rawData, elapsed, this.element);
+        }
+        // 设定执行时间为0  ||  已用时间 大于 设定时间
+        if (this.duration === 0 || elapsedTime >= this.duration) {
+            // 重复次数大于1，减少次数
+            if (this.repeat > 0) {
+                // 计算执行几次了 (已用时间-设定时间)/动画时长 +1
+                let completeCount = Math.min(Math.trunc((elapsedTime - this.duration) / durationAndDelay) + 1, this.repeat);
+                if (isFinite(this.repeat)) {
+                    this.repeat -= completeCount;
+                }
+                // 重新设置开始值，重新开始
+                // startValuesBackup备份的起始值
+                for (property in this.startValuesBackup) {
+                    if (!this.yoyo && typeof this.endValues[property] === 'string') {
+                        this.startValuesBackup[property] = this.startValuesBackup[property] + parseFloat(this.endValues[property])
+                    }
+                    if (this.yoyo) {
+                        // 交换end和startRepeat的值。
+                        this.swapEndStartRepeatValues(property)
+                    }
+                    // repeat，将备份startRepeat赋值回start
+                    this.startValues[property] = this.startValuesBackup[property]
+                }
+                // yoyo，反转
+                if (this.yoyo) {
+                    this.reversed = !this.reversed
+                }
+                // 开始时间 durationAndDelay * 执行几次
+                this.startTime += durationAndDelay * completeCount
+                // 触发onRepeat事件
+                if (this.onRepeatCallback) {
+                    this.onRepeatCallback(object)
+                }
+                this.onEveryStartCallbackFired = false
+                return true
+            } else {
+                this.isPlaying = false;
+                this.goToEnd = true;
+                this.onFinishCallback && this.onFinishCallback();
+                return false;
+            }
+        }
+        return true;
+    };
+
+    /**
+     * 计算出elapsedTime（已用时间）在当前循环的进度 0~1之间
+     * @param totalTime - 总时长
+     */
+    calculateElapsedPortion(totalTime, elapsedTime, durationAndDelay) {
+        if (this.duration === 0) return 1 //设置的执行时间为0，就返回1， 立即执行到指定位置
+        if (elapsedTime > totalTime) { //已用时间大于总时长，超出了设定范围，就返回1， 立即执行到指定位置
+            return 1
+        }
+
+        const timesRepeated = Math.trunc(elapsedTime / durationAndDelay) //执行了几次
+        const timeIntoCurrentRepeat = elapsedTime - timesRepeated * durationAndDelay //当前在循环中的位置
+        const portion = Math.min(timeIntoCurrentRepeat / this.duration, 1) //得出百分比 包含delay，最大为1
+        if (portion === 0 && elapsedTime === this.duration) { // 如果已用时间等于设置时间。则返回1
+            return 1
+        }
+        return portion
+    }
+
+    /**
+     * 根据计算出来的value，将属性转换成对应值 
+     * @param rawObject - 初始化值 rawData
+     * @param this.startValues - 起始值
+     * @param this.endValues - 结束值
+     * @param value - 当前进度百分比
+     */
+    updateProperties(rawObject, startValues, endValues, value) {
+        for (let key in endValues) {
+            // 不更新 源对象中不存在的属性
+            if (startValues[key] === undefined) {
+                continue;
+            }
+            let start = startValues[key] || 0;
+            let end = endValues[key];
+            let startIsArray = Array.isArray(rawObject[key]);
+            let endIsArray = Array.isArray(end);
+            let isInterpolationList = !startIsArray && endIsArray;
+            if (isInterpolationList) {
+                //处理end为数组的情况下的缓动函数
+                rawObject[key] = this.interpolationFunction(end, value);
+            } else if (typeof end === 'object' && end) {
+                //对象则递归处理
+                this.updateProperties(rawObject[key], start, end, value);
+            } else {
+                // 处理某些加值 或者减值的情况 例如{top: '+20', left : '-20'}
+                end = this.handleRelativeValue(start, end);
+                if (typeof end === 'number') {
+                    rawObject[key] = start + ((end - start) * value);
+                }
+            }
+        }
+    };
+
+    /**
+     * 处理某些加值 或者减值的情况 例如{top: '+20', left : '-20'}
+     * @param start - 起始值
+     * @param end - 结束值
+     * 
+     * @returns 计算后数据
+     */
+    handleRelativeValue(start, end) {
+        if (typeof end !== 'string') {
+            return end;
+        }
+        if (end.charAt(0) === '+' || end.charAt(0) === '-') {
+            return start + parseFloat(end);
+        }
+        return parseFloat(end);
+    };
+
+    /**
+     * 交换end和startRepeat的值。 一般用于在设置了this.yoyo的情况
+     */
+    swapEndStartRepeatValues(property) {
+        const tmp = this.startValuesBackup[property]
+        const endValue = this.endValues[property]
+
+        if (typeof endValue === 'string') {
+            this.startValuesBackup[property] = this.startValuesBackup[property] + parseFloat(endValue)
+        } else {
+            this.startValuesBackup[property] = this.endValues[property]
+        }
+
+        this.endValues[property] = tmp
+    }
+
+    /**
+     * 结束所有链式动画
+     */
+    stopChainedTweens() {
+        for (let i = 0, len = this.chainedTweens.length; i < len; i++) {
+            this.chainedTweens[i].stop()
+        }
+        return this
+    }
+    /**
+     * 结束
+     */
+    stop() {
+        if (!this.isChainStopped) {
+            this.isChainStopped = true
+            this.stopChainedTweens()
+        }
+
+        if (!this.isPlaying) {
+            return this
+        }
+
+        this.isPlaying = false
+
+        this.isPaused = false
+
+        if (this.onStopCallback) {
+            this.onStopCallback(this._object)
+        }
+
+        return this
+    }
+
+}