feat(extension): add test for curved-edge

Author: wumail

packages/extension/src/materials/curved-edge/__test__/curved-edge.test.ts

@@ -0,0 +1,43 @@
+import { getCurvedEdgePath } from '../index';
+
+describe('test curved edge ', () => {
+  test('path calculation', () => {
+    const radius = 5;
+
+    const points1 = '460,150 670,150';
+    const path1 = 'M460 150 L 670 150';
+    expect(
+      getCurvedEdgePath(
+        points1.split(' ').map((p) => p.split(',').map((a) => +a)),
+        radius,
+      ),
+    ).toBe(path1);
+
+    const points2 = '510,250 540,250 540,175 490,175 490,100 520,100';
+    const path2 = 'M510 250L 510 250L 535 250 Q 540 250 540 245L 540 245L 540 180 Q 540 175 535 175L 535 175L 495 175 Q 490 175 490 170L 490 170L 490 105 Q 490 100 495 100L 520 100';
+    expect(
+      getCurvedEdgePath(
+        points2.split(' ').map((p) => p.split(',').map((a) => +a)),
+        radius,
+      ),
+    ).toBe(path2);
+
+    const points3 = '690,120 720,120 720,50 560,50 560,260 690,260';
+    const path3 = 'M690 120L 690 120L 715 120 Q 720 120 720 115L 720 115L 720 55 Q 720 50 715 50L 715 50L 565 50 Q 560 50 560 55L 560 55L 560 255 Q 560 260 565 260L 690 260';
+    expect(
+      getCurvedEdgePath(
+        points3.split(' ').map((p) => p.split(',').map((a) => +a)),
+        radius,
+      ),
+    ).toBe(path3);
+
+    const point4 = '690,180 690,210 660,210 660,190 630,190 630,220';
+    const path4 = 'M690 180L 690 180L 690 205 Q 690 210 685 210L 685 210L 665 210 Q 660 210 660 205L 660 205L 660 195 Q 660 190 655 190L 655 190L 635 190 Q 630 190 630 195L 630 220';
+    expect(
+      getCurvedEdgePath(
+        point4.split(' ').map((p) => p.split(',').map((a) => +a)),
+        radius,
+      ),
+    ).toBe(path4);
+  });
+});

packages/extension/src/materials/curved-edge/index.ts

@@ -89,7 +89,7 @@ function getMidPoints(
   }
 }
 
-function getPath(
+function getPartialPath(
   prev: PointTuple,
   cur: PointTuple,
   next: PointTuple,
@@ -120,7 +120,7 @@ function getPath(
   if (orientation === '-') {
     path += `L ${cur[0]} ${cur[1]} L ${next[0]} ${next[1]}`;
   } else {
-    const [mid1, mid2] = getMidPoints(cur, key, orientation, (realRadius)) || [];
+    const [mid1, mid2] = getMidPoints(cur, key, orientation, realRadius) || [];
     if (mid1 && mid2) {
       path += `L ${mid1[0]} ${mid1[1]} Q ${cur[0]} ${cur[1]} ${mid2[0]} ${mid2[1]}`;
       [cur[0], cur[1]] = mid2;
@@ -129,6 +129,24 @@ function getPath(
   return path;
 }
 
+function getCurvedEdgePath(points: number[][], radius: number): string {
+  let i = 0;
+  let d = '';
+  if (points.length === 2) {
+    d += `M${points[i][0]} ${points[i++][1]} L ${points[i][0]} ${points[i][1]}`;
+  } else {
+    d += `M${points[i][0]} ${points[i++][1]}`;
+    for (; i + 1 < points.length;) {
+      const prev = points[i - 1] as PointTuple;
+      const cur = points[i] as PointTuple;
+      const next = points[i++ + 1] as PointTuple;
+      d += getPartialPath(prev, cur, next, radius as number);
+    }
+    d += `L ${points[i][0]} ${points[i][1]}`;
+  }
+  return d;
+}
+
 class CurvedEdge extends PolylineEdge {
   getEdge() {
     const { model } = this.props;
@@ -138,30 +156,18 @@ class CurvedEdge extends PolylineEdge {
     const points = pointFilter(
       pointsStr.split(' ').map((p) => p.split(',').map((a) => +a)),
     );
-    let i = 0;
-    let d = '';
-    if (points.length === 2) {
-      d += `M${points[i][0]} ${points[i++][1]} L ${points[i][0]} ${
-        points[i][1]
-      }`;
-    } else {
-      d += `M${points[i][0]} ${points[i++][1]}`;
-      for (; i + 1 < points.length;) {
-        const prev = points[i - 1] as PointTuple;
-        const cur = points[i] as PointTuple;
-        const next = points[i++ + 1] as PointTuple;
-        d += getPath(prev, cur, next, radius as number);
-      }
-      d += `L ${points[i][0]} ${points[i][1]}`;
-    }
-
+    const d = getCurvedEdgePath(points, radius as number);
     const attrs = {
       style: isAnimation ? animationStyle : {},
       ...style,
       ...arrowConfig,
       fill: 'none',
     };
-    console.log(d);
+    console.log(
+      pointsStr,
+      pointsStr.split(' ').map((p) => p.split(',').map((a) => +a)),
+      d,
+    );
     return h('path', {
       d,
       ...attrs,
@@ -179,7 +185,4 @@ const defaultCurvedEdge = {
 
 export default defaultCurvedEdge;
 
-export {
-  CurvedEdge,
-  CurvedEdgeModel,
-};
+export { CurvedEdge, CurvedEdgeModel, getCurvedEdgePath };