@html-graph/html-graph 8.21.0 → 8.21.1

package/dist/html-graph.js

@@ -1271,6 +1271,8 @@ const createEdgeRectangle = (source, target, padding) => {
     to: { x: to.x - x, y: to.y - y }
   };
 };
+const halfCube = 0.5 * 0.5 * 0.5;
+const halfCube3 = 3 * halfCube;
 class BezierEdgePath {
   constructor(params) {
     __publicField(this, "path");
@@ -1285,9 +1287,6 @@ class BezierEdgePath {
       hasSourceArrow,
       hasTargetArrow
     } = params;
-    const centerX = (from.x + to.x) / 2;
-    const centerY = (from.y + to.y) / 2;
-    this.midpoint = { x: centerX, y: centerY };
     const begin = createRotatedPoint(
       { x: from.x + arrowLength, y: from.y },
       fromDir,
@@ -1306,6 +1305,9 @@ class BezierEdgePath {
       x: end.x - toDir.x * curvature,
       y: end.y - toDir.y * curvature
     };
+    const centerX = halfCube * begin.x + halfCube3 * bezierBegin.x + halfCube3 * bezierEnd.x + halfCube * end.x;
+    const centerY = halfCube * begin.y + halfCube3 * bezierBegin.y + halfCube3 * bezierEnd.y + halfCube * end.y;
+    this.midpoint = { x: centerX, y: centerY };
     const curve = `M ${begin.x} ${begin.y} C ${bezierBegin.x} ${bezierBegin.y}, ${bezierEnd.x} ${bezierEnd.y}, ${end.x} ${end.y}`;
     const preLine = hasSourceArrow ? "" : `M ${from.x} ${from.y} L ${begin.x} ${begin.y} `;
     const postLine = hasTargetArrow ? "" : ` M ${end.x} ${end.y} L ${to.x} ${to.y}`;