@html-graph/html-graph 8.19.0 → 8.20.0

package/dist/html-graph.umd.cjs

@@ -1810,58 +1810,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.midpoint = absPoints[3];
     }
   }
-  class DirectEdgePath {
-    constructor(params) {
-      __publicField(this, "path");
-      __publicField(this, "midpoint");
-      __publicField(this, "diagonalDistance");
-      const {
-        from,
-        to,
-        sourceOffset,
-        targetOffset,
-        hasSourceArrow,
-        hasTargetArrow,
-        arrowLength
-      } = params;
-      this.midpoint = { x: (from.x + to.x) / 2, y: (from.y + to.y) / 2 };
-      const width = to.x - from.x;
-      const height = to.y - from.y;
-      this.diagonalDistance = Math.sqrt(width * width + height * height);
-      if (this.diagonalDistance === 0) {
-        this.path = "";
-        return;
-      }
-      const dir = { x: width, y: height };
-      const source = this.createDirectLinePoint({
-        offset: sourceOffset,
-        hasArrow: hasSourceArrow,
-        flip: 1,
-        shift: from,
-        arrowLength,
-        dir
-      });
-      const target = this.createDirectLinePoint({
-        offset: targetOffset,
-        hasArrow: hasTargetArrow,
-        flip: -1,
-        shift: to,
-        arrowLength,
-        dir
-      });
-      this.path = `M ${source.x} ${source.y} L ${target.x} ${target.y}`;
-    }
-    createDirectLinePoint(params) {
-      const arrowOffset = params.hasArrow ? params.arrowLength : 0;
-      const totalOffset = params.offset + arrowOffset;
-      const targetRatio = params.flip * totalOffset / this.diagonalDistance;
-      const { dir, shift } = params;
-      return {
-        x: dir.x * targetRatio + shift.x,
-        y: dir.y * targetRatio + shift.y
-      };
-    }
-  }
   const calculateDotourY = (from, to, detourDistance) => {
     const max = Math.max(from.y, to.y);
     const min = Math.min(from.y, to.y);
@@ -2009,7 +1957,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     smallCycleRadius: 15,
     curvature: 90,
     interactiveWidth: 10,
-    preOffset: 0
+    portOffset: 0
   });
   const createDirectionVector = (dir) => {
     return { x: Math.cos(dir), y: Math.sin(dir) };
@@ -2550,6 +2498,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       });
     }
   }
+  const resolvePortOffsetFn = (offset) => {
+    if (typeof offset === "number") {
+      return () => offset;
+    }
+    return offset;
+  };
+  const defaultPortOffset = edgeConstants.portOffset;
   class DirectEdgeShape {
     constructor(params) {
       __publicField(this, "svg");
@@ -2563,8 +2518,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       __publicField(this, "color");
       __publicField(this, "width");
       __publicField(this, "arrowLength");
-      __publicField(this, "sourceOffset");
-      __publicField(this, "targetOffset");
+      __publicField(this, "sourceOffsetFn");
+      __publicField(this, "targetOffsetFn");
       __publicField(this, "onAfterRender");
       __publicField(this, "afterRenderEmitter");
       __publicField(this, "arrowRenderer");
@@ -2573,8 +2528,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.width = (params == null ? void 0 : params.width) ?? edgeConstants.width;
       this.arrowLength = (params == null ? void 0 : params.arrowLength) ?? edgeConstants.arrowLength;
       this.arrowRenderer = resolveArrowRenderer((params == null ? void 0 : params.arrowRenderer) ?? {});
-      this.sourceOffset = (params == null ? void 0 : params.sourceOffset) ?? edgeConstants.preOffset;
-      this.targetOffset = (params == null ? void 0 : params.targetOffset) ?? edgeConstants.preOffset;
+      this.sourceOffsetFn = resolvePortOffsetFn(
+        (params == null ? void 0 : params.sourceOffset) ?? defaultPortOffset
+      );
+      this.targetOffsetFn = resolvePortOffsetFn(
+        (params == null ? void 0 : params.targetOffset) ?? defaultPortOffset
+      );
       this.svg = createEdgeSvg(this.color);
       this.svg.appendChild(this.group);
       this.line = createEdgePath(this.width);
@@ -2595,68 +2554,118 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         svgPadding
       );
       setSvgRectangle(this.svg, { x, y, width, height });
-      const edgePath = new DirectEdgePath({
-        from,
-        to,
-        sourceOffset: this.sourceOffset,
-        targetOffset: this.targetOffset,
-        hasSourceArrow: this.sourceArrow !== null,
-        hasTargetArrow: this.targetArrow !== null,
-        arrowLength: this.arrowLength
-      });
-      this.line.setAttribute("d", edgePath.path);
-      let sourceArrowPath = null;
-      let targetArrowPath = null;
-      const diagonal = edgePath.diagonalDistance;
+      const dirX = to.x - from.x;
+      const dirY = to.y - from.y;
+      const diagonal = Math.sqrt(dirX * dirX + dirY * dirY);
       if (diagonal === 0) {
-        if (this.sourceArrow !== null) {
-          sourceArrowPath = "";
-          this.sourceArrow.setAttribute("d", sourceArrowPath);
+        this.renderEmpty(from);
+        return;
+      }
+      const direction = { x: dirX / diagonal, y: dirY / diagonal };
+      const sourceOffset = this.sourceOffsetFn({
+        direction: { x: direction.x, y: direction.y },
+        radius: {
+          horizontal: params.from.width / 2,
+          vertical: params.from.height / 2
         }
-        if (this.targetArrow !== null) {
-          targetArrowPath = "";
-          this.targetArrow.setAttribute("d", targetArrowPath);
+      });
+      const targetOffset = this.targetOffsetFn({
+        direction: { x: -direction.x, y: -direction.y },
+        radius: {
+          horizontal: params.to.width / 2,
+          vertical: params.to.height / 2
         }
-      } else {
-        const direction = {
-          x: (to.x - from.x) / diagonal,
-          y: (to.y - from.y) / diagonal
+      });
+      const source = {
+        x: from.x + sourceOffset * direction.x,
+        y: from.y + sourceOffset * direction.y
+      };
+      const target = {
+        x: to.x - targetOffset * direction.x,
+        y: to.y - targetOffset * direction.y
+      };
+      const diagonalSource = this.sourceArrow !== null ? this.arrowLength : 0;
+      const sourceLine = {
+        x: source.x + diagonalSource * direction.x,
+        y: source.y + diagonalSource * direction.y
+      };
+      const diagonalTarget = this.targetArrow !== null ? this.arrowLength : 0;
+      const targetLine = {
+        x: target.x - diagonalTarget * direction.x,
+        y: target.y - diagonalTarget * direction.y
+      };
+      const midpoint = {
+        x: (source.x + target.x) / 2,
+        y: (source.y + target.y) / 2
+      };
+      const path = `M ${sourceLine.x} ${sourceLine.y} L ${targetLine.x} ${targetLine.y}`;
+      this.line.setAttribute("d", path);
+      let sourceArrowPath = null;
+      let targetArrowPath = null;
+      if (this.sourceArrow) {
+        const sourceOffsetPoint = {
+          x: direction.x * sourceOffset + from.x,
+          y: direction.y * sourceOffset + from.y
         };
-        if (this.sourceArrow) {
-          const sourceOffset = {
-            x: direction.x * this.sourceOffset,
-            y: direction.y * this.sourceOffset
-          };
-          sourceArrowPath = this.arrowRenderer({
-            direction,
-            shift: sourceOffset,
-            arrowLength: this.arrowLength
-          });
-          this.sourceArrow.setAttribute("d", sourceArrowPath);
-        }
-        if (this.targetArrow) {
-          const targetOffset = {
-            x: direction.x * this.targetOffset,
-            y: direction.y * this.targetOffset
-          };
-          targetArrowPath = this.arrowRenderer({
-            direction: { x: -direction.x, y: -direction.y },
-            shift: {
-              x: to.x - targetOffset.x,
-              y: to.y - targetOffset.y
-            },
-            arrowLength: this.arrowLength
-          });
-          this.targetArrow.setAttribute("d", targetArrowPath);
-        }
+        sourceArrowPath = this.arrowRenderer({
+          direction,
+          shift: sourceOffsetPoint,
+          arrowLength: this.arrowLength
+        });
+        this.sourceArrow.setAttribute("d", sourceArrowPath);
+      }
+      if (this.targetArrow) {
+        const targetOffsetPoint = {
+          x: direction.x * targetOffset,
+          y: direction.y * targetOffset
+        };
+        targetArrowPath = this.arrowRenderer({
+          direction: { x: -direction.x, y: -direction.y },
+          shift: {
+            x: to.x - targetOffsetPoint.x,
+            y: to.y - targetOffsetPoint.y
+          },
+          arrowLength: this.arrowLength
+        });
+        this.targetArrow.setAttribute("d", targetArrowPath);
       }
       this.afterRenderEmitter.emit({
-        edgePath,
+        edgePath: { path, midpoint },
+        sourceArrowPath,
+        targetArrowPath
+      });
+    }
+    renderEmpty(midpoint) {
+      const emptyPath = "";
+      let sourceArrowPath = null;
+      let targetArrowPath = null;
+      this.line.setAttribute("d", emptyPath);
+      if (this.sourceArrow !== null) {
+        sourceArrowPath = "";
+        this.sourceArrow.setAttribute("d", sourceArrowPath);
+      }
+      if (this.targetArrow !== null) {
+        targetArrowPath = "";
+        this.targetArrow.setAttribute("d", targetArrowPath);
+      }
+      this.afterRenderEmitter.emit({
+        edgePath: { path: emptyPath, midpoint },
         sourceArrowPath,
         targetArrowPath
       });
     }
   }
+  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";
@@ -7113,5 +7122,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   exports2.MidpointEdgeShape = MidpointEdgeShape;
   exports2.StraightEdgeShape = StraightEdgeShape;
   exports2.VerticalEdgeShape = VerticalEdgeShape;
+  exports2.boxPortOffsetFn = boxPortOffsetFn;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });

package/package.json

@@ -2,7 +2,7 @@
   "name": "@html-graph/html-graph",
   "author": "Dmitry Marov <d.marov94@gmail.com>",
   "private": false,
-  "version": "8.19.0",
+  "version": "8.20.0",
   "type": "module",
   "main": "dist/html-graph.js",
   "types": "dist/html-graph.d.ts",