@html-graph/html-graph 8.19.1 → 8.21.0

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

@@ -152,6 +152,8 @@ declare type BezierEdgeShapeConfig = {
     readonly type?: "bezier" | undefined;
 } & BezierEdgeParams;
 
+export declare const boxPortOffsetFn: PortOffsetFn;
+
 export declare class Canvas {
     readonly graph: Graph;
     readonly viewport: Viewport;
@@ -346,8 +348,8 @@ export declare interface DirectEdgeParams {
     readonly arrowRenderer?: ArrowRendererConfig | undefined;
     readonly hasSourceArrow?: boolean | undefined;
     readonly hasTargetArrow?: boolean | undefined;
-    readonly sourceOffset?: number | undefined;
-    readonly targetOffset?: number | undefined;
+    readonly sourceOffset?: PortOffset | undefined;
+    readonly targetOffset?: PortOffset | undefined;
 }
 
 export declare class DirectEdgeShape implements StructuredEdgeShape {
@@ -359,13 +361,14 @@ export declare class DirectEdgeShape implements StructuredEdgeShape {
     private readonly color;
     private readonly width;
     private readonly arrowLength;
-    private readonly sourceOffset;
-    private readonly targetOffset;
+    private readonly sourceOffsetFn;
+    private readonly targetOffsetFn;
     readonly onAfterRender: EventHandler<StructuredEdgeRenderModel>;
     private readonly afterRenderEmitter;
     private readonly arrowRenderer;
     constructor(params?: DirectEdgeParams);
     render(params: EdgeRenderParams): void;
+    private renderEmpty;
 }
 
 declare type DirectEdgeShapeConfig = {
@@ -851,10 +854,24 @@ export declare interface Point {
 
 export declare type PortElement = HTMLElement | SVGElement;
 
+export declare type PortOffset = number | PortOffsetFn | "box";
+
+export declare type PortOffsetFn = (params: PortOffsetFnParams) => number;
+
+export declare interface PortOffsetFnParams {
+    readonly direction: Point;
+    readonly radius: Radii;
+}
+
 declare type Priority = ConstantPriority | IncrementalPriority | CustomPriority;
 
 export declare type PriorityFn = () => number;
 
+export declare interface Radii {
+    readonly horizontal: number;
+    readonly vertical: number;
+}
+
 export declare interface ScaleLimitPreprocessorParams {
     readonly minContentScale: number | null;
     readonly maxContentScale: number | null;
@@ -1191,10 +1208,7 @@ export declare interface ViewportTransformConfig {
 }
 
 export declare interface VirtualScrollConfig {
-    readonly nodeContainingRadius: {
-        readonly vertical: number;
-        readonly horizontal: number;
-    };
+    readonly nodeContainingRadius: Radii;
     readonly events?: {
         readonly onBeforeNodeAttached?: (nodeId: Identifier) => void;
         readonly onAfterNodeDetached?: (nodeId: Identifier) => void;

package/dist/html-graph.js

@@ -1806,58 +1806,6 @@ class CycleCircleEdgePath {
     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);
@@ -2005,7 +1953,7 @@ const edgeConstants = Object.freeze({
   smallCycleRadius: 15,
   curvature: 90,
   interactiveWidth: 10,
-  preOffset: 0
+  portOffset: 0
 });
 const createDirectionVector = (dir) => {
   return { x: Math.cos(dir), y: Math.sin(dir) };
@@ -2546,6 +2494,27 @@ 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;
 class DirectEdgeShape {
   constructor(params) {
     __publicField(this, "svg");
@@ -2559,8 +2528,8 @@ class DirectEdgeShape {
     __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");
@@ -2569,8 +2538,12 @@ class DirectEdgeShape {
     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);
@@ -2591,63 +2564,102 @@ class DirectEdgeShape {
       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 + from.x,
-          y: direction.y * this.sourceOffset + from.y
-        };
-        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
     });
@@ -7109,5 +7121,6 @@ export {
   InteractiveEdgeShape,
   MidpointEdgeShape,
   StraightEdgeShape,
-  VerticalEdgeShape
+  VerticalEdgeShape,
+  boxPortOffsetFn
 };