@ebiz/designer-components 0.0.48 → 0.0.50

package/src/components/charts/framework/module/node/convertData/transform.js

@@ -1,24 +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 treeToLink from './treeToLink';
-import returnSelf from './returnSelf';
-
-function transform(data){
-    // 非树形结构模式转换
-    if(data.nodes) {
-        return returnSelf(data);
-    } else {
-        return treeToLink(data);
-    }
-}
-
-export default transform;

package/src/components/charts/framework/module/node/convertData/treeToLink.js

@@ -1,36 +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.
- *
- */
-function treeToLink(data){
-    let linkData = {
-      nodes:[],
-      edges: []
-    };
-    convertData(data,linkData);
-    return linkData
-}
-
-function convertData(data, linkData){
-    if(data.id){
-        const { children, ...obj } = data;
-        linkData.nodes.push({...obj})
-        data.children?.forEach(item => {
-            convertData(item, linkData);
-            item.id && linkData.edges.push({
-                end: item.id,
-                start: data.id,
-            })
-        });
-    }
-}
-
-// 树形结构 -> nodes, edges结构
-export default treeToLink;

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

@@ -1,187 +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 { Animation } from '../animation'
-import nodeRender from '../../../feature/nodeRender/vue-node';
-
-const NODE_WIDTH = 100;
-const NODE_HEIGHT = 50;
-export default class Node {
-    // 节点数据
-    data;
-    // 用户传入的渲染方法、框架组件、DOM元素
-    component;
-    // 节点容器
-    container;
-    // 节点外壳
-    nodeContainer;
-    // 节点最终位置
-    position;
-    // 节点实时位置，用于做动效位移使用
-    currentPosition;
-    // 框架节点组件实例
-    app;
-    // 节点是否已渲染
-    hasRender;
-
-    constructor(data, option, container) {
-        this.data = data;
-        this.currentPosition = data;
-        this.component = this.setComponent(data, option);
-        this.container = container;
-        this.setComponentSize(data, option);
-        this.setComponentPosition(data);
-        this.hasRender = false;
-    }
-
-    render() {
-        if (!this.data) return;
-        let { id } = this.data;
-        let nodeContainer = document.createElement("div");
-        nodeContainer.id = id;
-        nodeContainer.style.width = this.componentSize.width + 'px';
-        nodeContainer.style.height = this.componentSize.height + 'px';
-        nodeContainer.style.top = this.position.y + 'px';
-        nodeContainer.style.left = this.position.x + 'px';
-        nodeContainer.style.position = 'absolute';
-        nodeContainer.setAttribute('class', 'huicharts-node');
-
-
-        nodeRender.render(nodeContainer, this.component, this.data, this);
-        // TODO 此处要改，不建议存储dom
-        this.nodeContainer = nodeContainer;
-        this.setCurrentPosition({
-          left: this.position.x,
-          top: this.position.y,
-          width: this.componentSize.width,
-          height: this.componentSize.height,
-        });
-        this.bindEvents();
-        // 设置节点为已渲染
-        this.hasRender = true;
-        return nodeContainer;
-    }
-
-    // 兼容旧版本的render方法
-    setComponent(data, option) {
-        let dataComponent = data.component || data.render;
-        let optionComponent = option.component || option.render;
-        return dataComponent || optionComponent;
-    }
-
-    // 设定节点尺寸
-    setComponentSize(data, option) {
-        this.componentSize = {
-            width: data?.width || option?.node?.width || NODE_WIDTH,
-            height: data?.height || option?.node?.height || NODE_HEIGHT
-        };
-        return this.componentSize;
-    }
-
-    // 设定节点最终位置
-    setComponentPosition(data) {
-        this.position = {
-            x: data.x,
-            y: data.y
-        }
-        return this.position;
-    }
-
-    // 设定当前节点位置，实时更新，用于做动效位移使用
-    setCurrentPosition(rect) {
-        this.currentPosition.x = rect.left;
-        this.currentPosition.y = rect.top;
-        this.currentPosition.width = rect.width;
-        this.currentPosition.height = rect.height;
-    }
-
-    getCurrentPosition() {
-        return this.currentPosition;
-    }
-
-    // 设定各个框架节点实例
-    setComponentApp(app) {
-        this.app = app;
-    }
-
-    // 更新节点
-    update(data) {
-        this.app?.update(data);
-    }
-
-    // 卸载节点
-    unmount() {
-        this.app?.unmount();
-        this.container.removeChild(this.nodeContainer);
-    }
- 
-    // 节点绑定事件
-    bindEvents(){
-        for (const eventName in this.data.event) {
-            this.addEventListener(eventName, this.data.event[eventName]);
-        }
-    }
-
-    addEventListener(eventName, callback){
-        if(!this.nodeContainer) return;
-        this.nodeContainer.addEventListener(eventName,  (event) => {
-            callback(event, this.data);
-        });
-    }
-
-    removeEventListener(eventName, callback){
-        if(!this.nodeContainer) return;
-        this.nodeContainer.removeEventListener(eventName,  (event) => {
-            callback(event, this.data);
-        });
-    }
-
-    // 位置变换，数据刷新，节点刷新
-    refresh(newData) {
-        let animation = new Animation(this.nodeContainer, {
-            start: {
-                top: this.position.y,
-                left: this.position.x,
-                width: this.componentSize.width,
-                height: this.componentSize.height,
-            },
-            end: {
-                top: newData.y,
-                left: newData.x,
-                width: newData.width,
-                height: newData.height,
-            },
-            duration: 500,
-            onAfterUpdate: (params, elapsed, element) => {
-                this.setCurrentPosition(params);
-            },
-            onFinish: () => {
-                this.setComponentPosition(newData);
-                this.setComponentSize(newData, {});
-                this.setData(newData);
-                this.update(newData)
-            }
-        })
-        animation.start();
-    }
-
-    setData(data) {
-        this.data = data;
-    }
-
-    getDom(){
-        return this.nodeContainer;
-    }
-
-    getData() {
-        return this.data;
-    }
-}

package/src/components/charts/framework/module/nodeLayout/circle/excute.js

@@ -1,270 +0,0 @@
-function getDegree(n, nodeIdxMap, edges) {
-    const degrees = [];
-    for (let i = 0; i < n; i++) {
-        degrees[i] = 0;
-    }
-    edges.forEach((e) => {
-        if (e.start) {
-            degrees[nodeIdxMap[e.start]] += 1;
-        }
-        if (e.target) {
-            degrees[nodeIdxMap[e.end]] += 1;
-        }
-    });
-    return degrees;
-};
-
-function compareDegree(a, b) {
-    if (a.degree < b.degree) {
-        return -1;
-    }
-    if (a.degree > b.degree) {
-        return 1;
-    }
-    return 0;
-}
-
-function initHierarchy(nodes, edges, nodeMap, directed) {
-    nodes.forEach((_, i) => {
-        nodes[i].children = [];
-        nodes[i].parent = [];
-    });
-    if (directed) {
-        edges.forEach((e) => {
-            let startIdx = 0;
-            if (e.start) {
-                startIdx = nodeMap[e.start];
-            }
-            let endIdx = 0;
-            if (e.end) {
-                endIdx = nodeMap[e.end];
-            }
-            nodes[startIdx].children.push(nodes[endIdx].id);
-            nodes[endIdx].parent.push(nodes[startIdx].id);
-        });
-    } else {
-        edges.forEach((e) => {
-            let startIdx = 0;
-            if (e.start) {
-                startIdx = nodeMap[e.start];
-            }
-            let endIdx = 0;
-            if (e.end) {
-                endIdx = nodeMap[e.end];
-            }
-            nodes[startIdx].children.push(nodes[endIdx].id);
-            nodes[endIdx].children.push(nodes[startIdx].id);
-        });
-    }
-}
-
-function connect(a, b, edges) {
-    const m = edges.length;
-    for (let i = 0; i < m; i++) {
-        if (
-            (a.id === edges[i].start && b.id === edges[i].end) ||
-            (b.id === edges[i].start && a.id === edges[i].end)
-        ) {
-            return true;
-        }
-    }
-    return false;
-}
-
-/**
- * 根据节点的拓扑结构排序
- * @return {array} orderedNodes 排序后的结果
- */
-function topologyOrdering(directed,nodes,edges) {
-
-	const cnodes = [...nodes];
-	const orderedCNodes = [cnodes[0]];
-	const resNodes = [nodes[0]];
-	const pickFlags = [];
-	const n = nodes.length;
-	pickFlags[0] = true;
-	initHierarchy(cnodes, edges, nodeMap, directed);
-	let k = 0;
-	cnodes.forEach((cnode, i) => {
-		if (i !== 0) {
-			if (
-				(i === n - 1 ||
-					degrees[i] !== degrees[i + 1] ||
-					connect(orderedCNodes[k], cnode, edges)) &&
-				pickFlags[i] !== true
-			) {
-				orderedCNodes.push(cnode);
-				resNodes.push(nodes[nodeMap[cnode.id]]);
-				pickFlags[i] = true;
-				k++;
-			} else {
-				const children = orderedCNodes[k].children;
-				let foundChild = false;
-				for (let j = 0; j < children.length; j++) {
-					const childIdx = nodeMap[children[j]];
-					if (degrees[childIdx] === degrees[i] && pickFlags[childIdx] !== true) {
-						orderedCNodes.push(cnodes[childIdx]);
-						resNodes.push(nodes[nodeMap[cnodes[childIdx].id]]);
-						pickFlags[childIdx] = true;
-						foundChild = true;
-						break;
-					}
-				}
-				let ii = 0;
-				while (!foundChild) {
-					if (!pickFlags[ii]) {
-						orderedCNodes.push(cnodes[ii]);
-						resNodes.push(nodes[nodeMap[cnodes[ii].id]]);
-						pickFlags[ii] = true;
-						foundChild = true;
-					}
-					ii++;
-					if (ii === n) {
-						break;
-					}
-				}
-			}
-		}
-	});
-	return resNodes;
-}
-
-/**
- * 根据节点度数大小排序
- * @return {array} orderedNodes 排序后的结果
- */
-function degreeOrdering(nodes) {
-	const orderedNodes = [];
-	nodes.forEach((node, i) => {
-		node.degree = degrees[i];
-		orderedNodes.push(node);
-	});
-	orderedNodes.sort(compareDegree);
-	return orderedNodes;
-}
-
-/** 布局中心 */
-let center;
-
- /** 固定半径，若设置了 radius，则 startRadius 与 endRadius 不起效 */
- let radius
-
- /** 起始半径 */
-let startRadius;
-
- /** 终止半径 */
-let endRadius;
-
-/** 是否顺时针 */
-let clockwise;
-
- /** 起始角度 */
-let startAngle;
-
- /** 终止角度 */
-let endAngle;
-
-
-
- /** 节点在环上分成段数（几个段将均匀分布），在 endRadius - startRadius != 0 时生效 */
-let divisions;
-
-/** 节点在环上排序的依据，可选: 'topology', 'degree', 'null' */
-let ordering;
-
- /** how many 2*pi from first to last nodes */
-let angleRatio = 1;
-
-let nodeMap = {};
-
-let degrees = [];
-
-let astep;
-
-// 执行布局
-function execute(nodes,data,containerSize,options) {
-    let layout = options.layout;
-    let width = layout.width || containerSize.width;
-    let height = layout.height || containerSize.height;
-    center =  layout.center || [0,0];
-    radius =  layout.radius || null;
-    startRadius =  layout.startRadius || null;
-    endRadius =  layout.endRadius || null;
-    clockwise = layout.clockwise == undefined ? true : layout.clockwise;
-    startAngle = layout.startAngle || 0;
-    endAngle = layout.endAngle || 2 * Math.PI;
-    divisions = layout.divisions || 1;
-    ordering = layout.ordering || null;
-    const n = nodes.length;
-    const edges = data.edges;
-	if (n === 0) {
-		return;
-	}
-	if (n === 1) {
-		nodes[0].x = center[0];
-		nodes[0].y = center[1];
-		return;
-	}
-
-	const angleStep = (endAngle - startAngle) / n;
-	// layout
-
-	nodes.forEach((node, i) => {
-		nodeMap[node.id] = i;
-	});
-
-	degrees = getDegree(nodes.length, nodeMap, edges);
-
-	if (!width && typeof window !== 'undefined') {
-		width = window.innerWidth;
-	}
-	if (!height && typeof window !== 'undefined') {
-		height = window.innerHeight;
-	}
-	if (!radius && !startRadius && !endRadius) {
-		radius = height > width ? width / 2 : height / 2;
-	} else if (!startRadius && endRadius) {
-		startRadius = endRadius;
-	} else if (startRadius && !endRadius) {
-		endRadius = startRadius;
-	}
-
-	astep = angleStep * angleRatio;
-
-	let layoutNodes = [];
-	if (ordering === 'topology') {
-		// layout according to the topology
-		layoutNodes = topologyOrdering(false,nodes,edges);
-	} else if (ordering === 'topology-directed') {
-		// layout according to the topology
-		layoutNodes = topologyOrdering(true,nodes,edges);
-	} else if (ordering === 'degree') {
-		// layout according to the descent order of degrees
-		layoutNodes = degreeOrdering(nodes);
-	} else {
-		// layout according to the original order in the data.nodes
-		layoutNodes = nodes;
-	}
-
-
-	const divN = Math.ceil(n / divisions); // node number in each division
-	for (let i = 0; i < n; ++i) {
-		let r = radius;
-		if (!r && startRadius !== null && endRadius !== null) {
-			r = startRadius + (i * (endRadius - startRadius)) / (n - 1);
-		}
-		if (!r) {
-			r = 10 + (i * 100) / (n - 1);
-		}
-		let angle =
-			startAngle + (i % divN) * astep + ((2 * Math.PI) / divisions) * Math.floor(i / divN);
-		if (!clockwise) {
-			angle = endAngle - (i % divN) * astep - ((2 * Math.PI) / divisions) * Math.floor(i / divN);
-		}
-		layoutNodes[i].x = center[0] + Math.cos(angle) * r;
-		layoutNodes[i].y = center[1] + Math.sin(angle) * r;
-		layoutNodes[i].weight = degrees[i];
-	}
-}
-
-export default execute

package/src/components/charts/framework/module/nodeLayout/circle/index.js

@@ -1,24 +0,0 @@
-import execute from './excute';
-
-// 默认间距
-const DEFAULT_GAP = 30;
-
-export default class Layout {
-    // 树形结构数据
-    data;
-
-    constructor(data, containerSize, option) {
-        this.data = data;
-        // 容器大小
-        this.containerSize = containerSize;
-
-        // 计算节点位置
-        this.doLayout(this.data.nodes,this.data,option);
-    }
-
-    // 开始执行位置算法
-    doLayout(nodes, data,options) {
-        execute(nodes,data,this.containerSize,options);
-    };
-    
-}

package/src/components/charts/framework/module/nodeLayout/customize/index.js

@@ -1,16 +0,0 @@
-export default class Layout {
-    data;
-
-    constructor(data, containerSize, option) {
-        this.data = data;
-        // 容器大小
-        this.containerSize = containerSize;
-        // 计算节点位置
-        this.doLayout(this.data.nodes,option);
-    }
-
-    // 开始执行位置算法
-    doLayout(nodes,options) {
-        options.layout.algorithm && options.layout.algorithm(nodes,this.containerSize);
-    };
-}

package/src/components/charts/framework/module/nodeLayout/defaults/excute.js

@@ -1,27 +0,0 @@
-
-
-function calculateNode(data){
-	data.x = data.x ?  data.x : 0;
-	data.y = data.y ?  data.y : 0;
-	if(data.childre && data.children.length) {
-		data.children.forEach(item => {
-			calculateNode(item)
-		})
-	}
-}
-
-// 执行布局
-function execute(nodes,data,containerSize,options) {
-    // 非树形结构方式数据
-    if(nodes) {
-        nodes.forEach((node) => {
-            node.x = node.x ?  node.x : 0;
-            node.y = node.y ?  node.y : 0;
-        });
-    // 树形结构方式数据
-    } else {
-        calculateNode(data);
-    }
-  
-}
-export default execute

package/src/components/charts/framework/module/nodeLayout/defaults/index.js

@@ -1,20 +0,0 @@
-import execute from './excute';
-export default class Layout {
-    // 树形结构数据
-    data;
-
-    constructor(data, containerSize, option) {
-        this.data = data;
-        // 容器大小
-        this.containerSize = containerSize;
-
-        // 计算节点位置
-        this.doLayout(this.data.nodes,this.data,option);
-    }
-
-    // 开始执行位置算法
-    doLayout(nodes,data,options) {
-        execute(nodes,data,this.containerSize,options)
-    };
-    
-}