@ebiz/designer-components 0.0.18-tj.1

package/src/components/charts/framework/module/line/type/Bezier.js

@@ -0,0 +1,90 @@
+/**
+ * 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 default class Bezier {
+
+  // 水平直线占横向距离的百分比
+  lineDistance = 0.15;
+
+  // 贝塞尔曲线控制点
+  bezierDistance = 0.6;
+
+  // 是否是正交线
+  isCrossLine = false;
+
+  constructor(option) {
+    this.lineDistance = option.lineOption.lineDistance || 0.15;
+    this.bezierDistance = option.lineOption.bezierDistance || 0.6;
+  }
+
+  // 计算贝塞尔曲线所有路径的4个节点
+  creatPoints(data) {
+    const { startConnector, endConnector } = data;
+    const startX = startConnector.absolute.x;
+    const startY = startConnector.absolute.y;
+    const endX = endConnector.absolute.x;
+    const endY = endConnector.absolute.y;
+    let hDis = endX - startX;
+    let vDis = endY - startY;
+    // 水平方向开始的贝塞尔线
+    let xAxisBegin = ['left', 'right'].includes(startConnector.position);
+    let lineDistance = xAxisBegin ? hDis * this.lineDistance : vDis * this.lineDistance;
+    let bezierDistance = xAxisBegin ? hDis * this.bezierDistance : vDis * this.bezierDistance;
+    // 起点和终点未在垂直或者水平线上,则需要计算贝塞尔连接点
+    if (!this.isCrossLine) {
+      // 贝塞尔曲线起始点
+      data.bezierStartPoint = {
+        x: xAxisBegin ? startX + lineDistance : startX,
+        y: xAxisBegin ? startY : startY + lineDistance,
+      }
+      // 贝塞尔曲线第一个控制点
+      data.bezierFirstControlPoint = {
+        x: xAxisBegin ? data.bezierStartPoint.x + bezierDistance : data.bezierStartPoint.x,
+        y: xAxisBegin ? data.bezierStartPoint.y : data.bezierStartPoint.y + bezierDistance,
+      };
+      // 贝塞尔曲线结束点
+      data.bezierEndPoint = {
+        x: xAxisBegin ? endX - lineDistance : endX,
+        y: xAxisBegin ? endY : endY - lineDistance,
+      };
+      // 贝塞尔曲线第二个控制点
+      data.bezierSecondControlPoint = {
+        x: xAxisBegin ? data.bezierEndPoint.x - bezierDistance : data.bezierEndPoint.x,
+        y: xAxisBegin ? data.bezierEndPoint.y : data.bezierEndPoint.y - bezierDistance,
+      };
+    }
+  }
+
+  creatPath(data) {
+    let { startConnector, endConnector } = data;
+    const startX = startConnector.absolute.x.toFixed(2);
+    const startY = startConnector.absolute.y.toFixed(2);
+    const endX = endConnector.absolute.x.toFixed(2);
+    const endY = endConnector.absolute.y.toFixed(2);
+    this.isCrossLine = startX === endX || startY === endY
+    this.creatPoints(data);
+    let { bezierStartPoint, bezierFirstControlPoint, bezierSecondControlPoint, bezierEndPoint } = data;
+    let path;
+    if (this.isCrossLine) {
+      path = `M${startX} ${startY} L${endX} ${endY}`
+    } else {
+      let a = `M${startX} ${startY}`;
+      let b = `L${bezierStartPoint.x.toFixed(2)} ${bezierStartPoint.y.toFixed(2)}`;
+      let c = `C${bezierFirstControlPoint.x.toFixed(2)} ${bezierFirstControlPoint.y.toFixed(2)} ${bezierSecondControlPoint.x.toFixed(2)} ${bezierSecondControlPoint.y.toFixed(2)} ${bezierEndPoint.x.toFixed(2)} ${bezierEndPoint.y.toFixed(2)}`;
+      let d = `L${endX} ${endY}`;
+      path = `${a} ${b} ${c} ${d}`
+    }
+    return path;
+  }
+}
+
+

package/src/components/charts/framework/module/line/type/Circle.js

@@ -0,0 +1,38 @@
+/**
+ * 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 default class Circle {
+
+  constructor() { }
+
+  creatPath(data) {
+    const { startConnector, endConnector } = data;
+    const startX = startConnector.absolute.x;
+    const startY = startConnector.absolute.y;
+    const endX = endConnector.absolute.x;
+    const endY = endConnector.absolute.y;
+    const distance = Math.hypot(endX - startX, endY - startY);
+    let m = `M${startX} ${startY}`;
+    const direction = data.lineOption.style?.direction;
+    let isClockwise = 1;
+    // direction: top线全部渲染在上半部分，bottom线渲染在下半部分，auto起点向终点顺时针画线
+    if (direction === 'top') {
+      isClockwise = startX > endX ? 0 : 1;
+    }else if (direction === 'bottom') {
+      isClockwise = startX > endX ? 1 : 0;
+    }
+    let a = `A${distance / 2} ${distance / 2} 0 0 ${isClockwise} ${endX} ${endY}`;
+    return `${m} ${a}`;
+  }
+}
+
+

package/src/components/charts/framework/module/line/type/Direct.js

@@ -0,0 +1,23 @@
+/**
+ * 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 default class Direct {
+
+  constructor() { }
+
+  creatPath(data) {
+    const { startConnector, endConnector } = data;
+    let m = `M${startConnector.absolute.x} ${startConnector.absolute.y}`;
+    let l = `L${endConnector.absolute.x} ${endConnector.absolute.y}`;
+    return `${m} ${l}`;
+  }
+}

package/src/components/charts/framework/module/line/type/Ellipse.js

@@ -0,0 +1,88 @@
+/**
+ * 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 default class Ellipse {
+
+  // 椭圆曲线控制点
+  EllipseDistance = 0.6;
+
+  constructor(option) {
+    this.EllipseDistance = option.lineOption.EllipseDistance || 0.6;
+  }
+
+  creatPath(data,option) {
+		function getCircleLineIntersection(x1, y1, x2, y2, radius) {
+			// 计算直线斜率和截距
+			let k = (y2 - y1) / (x2 - x1);
+			let b = y1 - k * x1;
+			let A = 1 + k * k;
+			let B = 2 * k * (b - y1) - 2 * x1;
+			let C = x1 * x1 + (b - y1) * (b - y1) - radius * radius;
+			let discriminant = B * B - 4 * A * C;
+			if (discriminant < 0) {
+				return null; // 没有交点或相切于一点
+			} else if (discriminant === 0) {
+				// 相切于一点的情况（理论上只有一个交点）
+				let x = (-B + Math.sqrt(discriminant)) / (2 * A);
+				let y = k * x + b;
+				return [{x: x, y: y}]; // 返回一个交点坐标数组
+			} else {
+					// 两个交点的情况
+					let sqrtTerm = Math.sqrt(discriminant);
+					let x1 = (-B + sqrtTerm) / (2 * A);
+					let y1 = k * x1 + b;
+					let x2 = (-B - sqrtTerm) / (2 * A);
+					let y2 = k * x2 + b;
+					return [{x: x1, y: y1}, {x: x2, y: y2}]; // 返回两个交点坐标数组
+			}
+		}
+    let { startConnector, endConnector } = data;
+    const x1 = startConnector.absolute.x;
+    const y1 = startConnector.absolute.y;
+    const x2 = endConnector.absolute.x;
+    const y2 = endConnector.absolute.y;
+		
+		let middleX = (x2 + x1) / 2;
+		let middleY = (y2 + y1) / 2;
+		let pointX;
+		let pointY;
+		let xDiff = x2 - x1;
+    let yDiff = y2 - y1;
+    let distance = Math.hypot(xDiff, yDiff);
+		if(option?.layout?.type == 'circle'){
+			let circleX = option?.layout?.center ? option?.layout?.center[0]: 0;
+			let circleY = option?.layout?.center ? option?.layout?.center[1]: 0;
+			let circleR = option?.layout?.radian ? option?.layout?.radian : 400; //值越大弧线越长
+			let pointArr = getCircleLineIntersection(middleX,middleY,circleX,circleY,circleR);
+			if(middleX < circleX) {
+				pointX = pointArr[0].x;
+				pointY = pointArr[0].y;
+			}
+			else {
+				pointX = pointArr[1].x;
+				pointY = pointArr[1].y;
+			}
+		}
+		else {
+    	pointX = x2 - xDiff/2,
+    	pointY = yDiff > 0 ? y2 + this.EllipseDistance*distance : y2 - this.EllipseDistance*distance
+		}
+		
+    let M = `M${x1} ${y1}`;
+    let Q = `Q${pointX} ${pointY} ${x2} ${y2}`;
+    let path = `${M} ${Q}`;
+		
+    return path;
+  }
+}
+
+

package/src/components/charts/framework/module/line/type/Round.js

@@ -0,0 +1,245 @@
+/**
+ * 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 setPoints from '../cross/pathPoints';
+
+// 圆角曲线连线
+export default class Round {
+
+  // 默认圆弧弧度为20，垂直和水平线段长度为10
+  radius = 10;
+
+  // 矩形节点延伸线默认长度
+  lineDistance = 10;
+
+  constructor(option) {
+    this.radius = option.lineOption.style.radius === undefined ? this.radius : option.lineOption.style.radius;
+    this.lineDistance = option.lineOption.style.lineDistance === undefined ? this.lineDistance : option.lineOption.style.lineDistance;
+  }
+
+  // 左上角圆角
+  setLeftTopCornerPath(position, direction) {
+    let startPoint;
+    let endPoint;
+    const x = position[0];
+    const y = position[1];
+
+    // 从左到下
+    if (direction === 'down') {
+      startPoint = {
+        x: x - this.radius,
+        y
+      };
+      endPoint = {
+        x: x - this.radius,
+        y: y + this.radius
+      }
+    } else {
+
+      // 从上到右
+      startPoint = {
+        x: x,
+        y: y - this.radius
+      };
+      endPoint = {
+        x: x + this.radius,
+        y: y - this.radius
+      }
+    }
+    return `Q${startPoint.x} ${startPoint.y} ${endPoint.x} ${endPoint.y} `;
+  }
+
+  // 右上角圆角
+  setRightTopCornerPath(position, direction) {
+    let startPoint;
+    let endPoint;
+    const x = position[0];
+    const y = position[1];
+
+    // 从右到下
+    if (direction === 'down') {
+      startPoint = {
+        x: x + this.radius,
+        y: y
+      };
+      endPoint = {
+        x: x + this.radius,
+        y: y + this.radius
+      }
+    } else {
+
+      // 从下到左
+      startPoint = {
+        x: x,
+        y: y - this.radius
+      };
+      endPoint = {
+        x: x - this.radius,
+        y: y - this.radius
+      }
+    }
+    return `Q${startPoint.x} ${startPoint.y} ${endPoint.x} ${endPoint.y} `;
+  }
+
+  // 右下角圆角
+  setRightBottomCornerPath(position, direction) {
+    let startPoint;
+    let endPoint;
+    const x = position[0];
+    const y = position[1];
+
+    // 从下到左
+    if (direction === 'down') {
+      startPoint = {
+        x: x,
+        y: y + this.radius
+      };
+      endPoint = {
+        x: x - this.radius,
+        y: y + this.radius
+      }
+    } else {
+
+      // 从右到上
+      startPoint = {
+        x: x + this.radius,
+        y: y
+      };
+      endPoint = {
+        x: x + this.radius,
+        y: y - this.radius
+      }
+    }
+    return `Q${startPoint.x} ${startPoint.y} ${endPoint.x} ${endPoint.y} `;
+  }
+
+  // 左下角圆角
+  setLeftBottomCornerPath(position, direction) {
+    let startPoint;
+    let endPoint;
+    const x = position[0];
+    const y = position[1];
+
+    // 从下到右
+    if (direction === 'down') {
+      startPoint = {
+        x: x,
+        y: y + this.radius
+      };
+      endPoint = {
+        x: x + this.radius,
+        y: y + this.radius
+      }
+    } else {
+
+      // 从左到上
+      startPoint = {
+        x: x - this.radius,
+        y: y
+      };
+      endPoint = {
+        x: x - this.radius,
+        y: y - this.radius
+      }
+    }
+    return `Q${startPoint.x} ${startPoint.y} ${endPoint.x} ${endPoint.y} `;
+  }
+
+  // 计算正交线所有路径的节点
+  creatPoints(data) {
+    const { startConnector, endConnector } = data;
+    data.nodes = setPoints({
+      startPoint: [Number(startConnector.absolute.x.toFixed(2)), Number(startConnector.absolute.y.toFixed(2))],
+      startDirection: startConnector.position || 'right',
+      startDistance: this.lineDistance,
+      endPoint: [Number(endConnector.absolute.x.toFixed(2)), Number(endConnector.absolute.y.toFixed(2))],
+      endDirection: endConnector.position || 'left',
+      endDistance: this.lineDistance
+    }, { turnRatio: 0.3, radius: this.radius })
+  }
+
+  // 根据节点，生成path
+  creatPath(data) {
+    this.creatPoints(data);
+    let startPoint;
+    let endPoint;
+    let LinePath = '';
+    data.nodes.forEach((item, index) => {
+      if (index == 0) {
+        startPoint = {
+          x: item.position[0],
+          y: item.position[1]
+        }
+      } else if (index == data.nodes.length - 1) {
+        endPoint = {
+          x: item.position[0],
+          y: item.position[1]
+        }
+      } else {
+
+        // 画直线
+        if (['top', 'right', 'bottom', 'left'].includes(item.direction)) {
+          LinePath += `L${item.position[0]} ${item.position[1]} `
+        } else {
+
+          // 画拐点，T--top,R--right,B--bottom,L--left各个方向的缩写
+          switch (item.direction) {
+
+            // 拐点从上到右，即左上角圆弧，方向向上
+            case 'TR':
+              LinePath += this.setLeftTopCornerPath(item.position, 'up')
+              break;
+
+            // 拐点从左到下，即左上角圆弧，方向向下
+            case 'LB':
+              LinePath += this.setLeftTopCornerPath(item.position, 'down')
+              break;
+
+            // 拐点从左到上，即左下角圆弧，方向向上  
+            case 'LT':
+              LinePath += this.setLeftBottomCornerPath(item.position, 'up')
+              break;
+
+            // 拐点从下到右，即左下角圆弧，方向向下   
+            case 'BR':
+              LinePath += this.setLeftBottomCornerPath(item.position, 'down')
+              break;
+
+            // 拐点从上到左，即右上角圆弧，方向向上   
+            case 'TL':
+              LinePath += this.setRightTopCornerPath(item.position, 'up')
+              break;
+
+            // 拐点从右到下，即右上角圆弧，方向向下   
+            case 'RB':
+              LinePath += this.setRightTopCornerPath(item.position, 'down')
+              break;
+
+            // 拐点从右到上，即右下角圆弧，方向向上  
+            case 'RT':
+              LinePath += this.setRightBottomCornerPath(item.position, 'up')
+              break;
+
+            // 拐点从下到左，即右下角圆弧，方向向下  
+            case 'BL':
+              LinePath += this.setRightBottomCornerPath(item.position, 'down')
+              break;
+
+            // 直线，上上、右右、下下、左左
+            default:
+              break;
+          }
+        }
+      }
+    })
+    return `M${startPoint.x} ${startPoint.y} ${LinePath}L${endPoint.x} ${endPoint.y}`
+  }
+}

package/src/components/charts/framework/module/lineLayout/CircleShape/calculate.js

@@ -0,0 +1,71 @@
+/**
+ * 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 { hashString }  from'../../../../util/math';
+
+// 计算连接点位置
+function calculate(itemData,nodeObj,centerCircle){
+    let {startConnector,endConnector} = itemData;
+    if(!nodeObj[itemData.start] || !nodeObj[itemData.end]) return;
+    let startNode = nodeObj[itemData.start];
+    let endNode = nodeObj[itemData.end];
+    // 连接点是否位于圆心
+    if(centerCircle) {
+        countPointCenter(startNode,startConnector,endNode,'start');
+        countPointCenter(startNode,endConnector,endNode,'end');
+    } else {
+        countPoint(startNode,startConnector,endNode,'start');
+        countPoint(startNode,endConnector,endNode,'end');
+    }
+    return itemData;
+}
+
+// 连接点位于圆心，计算连接点X，Y坐标
+function countPointCenter(startNode,connector,endNode,port) {
+    if(!startNode || !endNode) return;
+    const startR = startNode.width / 2; // 起始节点半径
+    const endR = endNode.width / 2; // 结束节点半径
+    if(port === 'start') {
+        // 保留一位小数
+        connector.x = startR;
+        connector.y = startR;
+        connector.id = connector.id || hashString();
+    } else {
+        connector.x = endR;
+        connector.y = endR;
+        connector.id = connector.id || hashString();
+    }
+}
+
+// 连接点位于圆弧，计算连接点X，Y坐标
+function countPoint(startNode,connector,endNode,port) {
+    if(!startNode || !endNode) return;
+    const startR = startNode.width / 2; // 起始节点半径
+    const endR = endNode.width / 2; // 结束节点半径
+    let startX = startNode.x + startR;
+    let startY = startNode.y + startR;
+    let endX = endNode.x + endR;
+    let endY = endNode.y + endR;
+    const angle = Math.atan2(endY -  startY,endX - startX);
+    if(port === 'start') {
+        // 保留一位小数
+        connector.x = startR + Math.floor(startR * Math.cos(angle) * 10) / 10 ;
+        connector.y = startR + Math.floor(startR * Math.sin(angle) * 10) / 10 ;
+        connector.id = connector.id || hashString();
+    } else {
+        connector.x = endR - Math.floor(endR * Math.cos(angle) * 10) / 10 ;
+        connector.y = endR - Math.floor(endR * Math.sin(angle) * 10) / 10 ;
+        connector.id = connector.id || hashString();
+    }
+}
+
+    
+export { calculate };

package/src/components/charts/framework/module/lineLayout/CircleShape/index.js

@@ -0,0 +1,32 @@
+/**
+ * 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 init from './init';
+import {calculate} from './calculate';
+
+class CircleShape{
+    constructor(data, option){
+        // 节点对象
+        let nodeObj = {};
+        data.nodes.forEach(item => {
+            nodeObj[item.id] = item;
+        })
+        // 初始连线数据
+        init(data, option);
+        let centerCircle = option.connector?.centerCircle || false;
+        // 开始计算位置，返回连线的数据，放到 this.lineData
+        data.edges.forEach(item => {
+            return calculate(item, nodeObj,centerCircle);
+        });     
+    }
+}
+
+export default CircleShape;

package/src/components/charts/framework/module/lineLayout/CircleShape/init.js

@@ -0,0 +1,34 @@
+/**
+ * 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.
+ *
+ */
+const START = 'start';
+const END = 'end';
+
+
+function init(data, option){
+    data.edges.forEach(edge => {
+        if(!edge.start || !edge.end) return;
+        edge.startConnector = edge.startConnector || {
+            port: START,
+            nodeId: edge.start,
+            index:1
+        };
+        edge.endConnector = edge.endConnector || {
+            port: END,
+            nodeId: edge.end,
+            index:1
+        };
+        
+    });
+
+}
+
+export default init ;