@html-graph/html-graph 8.20.0 → 8.21.1

package/README.md

@@ -36,4 +36,8 @@ const canvas = new CanvasBuilder(element)
   .build();
 ```
 
-Visit the <a target="_blank" href="https://html-graph.github.io">DOCUMENTATION</a> for examples and API reference.
+## Links
+
+- <a target="_blank" href="https://html-graph.github.io">Documentation</a>
+- <a target="_blank" href="https://github.com/html-graph/html-graph/blob/master/CONTRIBUTING.md">Contributing</a>
+- <a target="_blank" href="https://github.com/html-graph/html-graph/blob/master/DEVELOPMENT.md">Development</a>

package/dist/html-graph.d.ts

@@ -854,7 +854,7 @@ export declare interface Point {
 
 export declare type PortElement = HTMLElement | SVGElement;
 
-export declare type PortOffset = number | PortOffsetFn;
+export declare type PortOffset = number | PortOffsetFn | "box";
 
 export declare type PortOffsetFn = (params: PortOffsetFnParams) => number;
 

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}`;
@@ -2494,10 +2496,24 @@ class VerticalEdgeShape {
     });
   }
 }
+const boxPortOffsetFn = (params) => {
+  const { direction, radius } = params;
+  const { x, y } = direction;
+  const { horizontal, vertical } = radius;
+  const tg = y / x;
+  const horX = Math.abs(vertical / tg);
+  const vertY = Math.abs(horizontal * tg);
+  const minX = Math.min(horizontal, horX);
+  const minY = Math.min(vertical, vertY);
+  return Math.sqrt(minX * minX + minY * minY);
+};
 const resolvePortOffsetFn = (offset) => {
   if (typeof offset === "number") {
     return () => offset;
   }
+  if (offset === "box") {
+    return boxPortOffsetFn;
+  }
   return offset;
 };
 const defaultPortOffset = edgeConstants.portOffset;
@@ -2651,17 +2667,6 @@ class DirectEdgeShape {
     });
   }
 }
-const boxPortOffsetFn = (params) => {
-  const { direction, radius } = params;
-  const { x, y } = direction;
-  const { horizontal, vertical } = radius;
-  const tg = y / x;
-  const horX = Math.abs(vertical / tg);
-  const vertY = Math.abs(horizontal * tg);
-  const minX = Math.min(horizontal, horX);
-  const minY = Math.min(vertical, vertY);
-  return Math.sqrt(minX * minX + minY * minY);
-};
 const createEdgeGroup = () => {
   const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
   group.style.pointerEvents = "auto";