@ebiz/designer-components 0.0.18-tj.1

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

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

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

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

@@ -0,0 +1,270 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,27 @@
+
+
+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

@@ -0,0 +1,20 @@
+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)
+    };
+    
+}