@ebiz/designer-components 0.0.47 → 0.0.49

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

@@ -1,90 +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.
- *
- */
-// 贝塞尔曲线连线
-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

@@ -1,38 +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.
- *
- */
-// 半圆连线
-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

@@ -1,23 +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.
- *
- */
-// 直连线
-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

@@ -1,88 +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.
- *
- */
-// 椭圆连线
-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

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

@@ -1,71 +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 { 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

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

@@ -1,34 +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.
- *
- */
-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 ;