@ebiz/designer-components 0.0.18-beta.2 → 0.0.18-beta.4

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

@@ -1,90 +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;
-  }
-}
-
-
+/**
+ * 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 +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}`;
-  }
-}
-
-
+/**
+ * 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 +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}`;
-  }
-}
+/**
+ * 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 +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;
-  }
-}
-
-
+/**
+ * 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;
+  }
+}
+
+