directed graph with viewGenerator

Author: lironhl

Diff for: src/components/graph/graph.const.js

@@ -1,5 +1,11 @@
 import CONST from "../../const";
 
+export const SYMBOLS_WITH_OPTIMIZED_POSITIONING = new Set([
+  CONST.SYMBOLS.CIRCLE,
+  CONST.SYMBOLS.SQUARE,
+  CONST.SYMBOLS.RECTANGLE,
+]);
+
 export default {
   COORDS_SEPARATOR: ",",
   FORCE_X: 0.06,

Diff for: src/components/graph/graph.helper.js

@@ -26,7 +26,7 @@ import {
   forceManyBody as d3ForceManyBody,
 } from "d3-force";
 
-import CONST from "./graph.const";
+import CONST, { SYMBOLS_WITH_OPTIMIZED_POSITIONING } from "./graph.const";
 import DEFAULT_CONFIG from "./graph.config";
 import ERRORS from "../../err";
 
@@ -469,7 +469,101 @@ function normalize(vector) {
   return norm === 0 ? vector : { x: vector.x / norm, y: vector.y / norm };
 }
 
-const SYMBOLS_WITH_OPTIMIZED_POSITIONING = new Set([CONST.SYMBOLS.CIRCLE]);
+/**
+ * Calculate the length of a vector, from the center of a rectangle,
+ * to one of it's edges.
+ *
+ * @param {Object.<string, number>} RectangleCoords, The coords of the left-top vertex, and the right-bottom vertex.
+ * @param {Object.<string, number>} VectorOriginCoords The center of the rectangle coords.
+ * @param {Object.<string, number>} directionVector a 2D vector with x and y components
+ */
+function calcRectangleVectorLengthFromCoords({ x1, y1, x2, y2 }, { px, py }, directionVector) {
+  const angle = Math.atan(directionVector.y / directionVector.x);
+
+  const vx = Math.cos(angle);
+  const vy = Math.sin(angle);
+
+  if (vx === 0) {
+    return x2 - x1;
+  } else if (vy === 0) {
+    return y2 - y1;
+  }
+
+  const left_edge = (x1 - px) / vx;
+  const right_edge = (x2 - px) / vx;
+
+  const top_edge = (y1 - py) / vy;
+  const bottom_edge = (y2 - py) / vy;
+
+  return Math.min(...[left_edge, right_edge, top_edge, bottom_edge].filter(edge => edge > 0));
+}
+
+/**
+ * Calculate a the vector length from the center of a circle to it's perimeter.
+ *
+ * @param {number} nodeSize The size of the circle, when no viewGenerator is specified, else the size of an edge of the viewGenerator square.
+ * @param {boolean} isCustomNode is viewGenerator specified.
+ */
+function calcCircleVectorLength(nodeSize, isCustomNode) {
+  // because this is a circle and A = pi * r^2
+  // we multiply by 0.95, because if we don't the link is not melting properly
+  let radiusLength = Math.sqrt(nodeSize / Math.PI);
+  if (isCustomNode) {
+    radiusLength = nodeSize / 10 / 2;
+  }
+  return radiusLength * 0.95;
+}
+
+/**
+ * Calculate a the vector length from the center of a square to it's perimeter.
+ *
+ * @param {number} nodeSize The size of the square, when no viewGenerator is specified, else the size of an edge of the viewGenerator square.
+ * @param {Object.<string, number>} nodeCoords The coords of a the square node.
+ * @param {Object.<string, number>} directionVector a 2D vector with x and y components
+ * @param {boolean} isCustomNode is viewGenerator specified.
+ */
+function calcSquareVectorLength(nodeSize, { x, y }, directionVector, isCustomNode) {
+  let edgeSize = Math.sqrt(nodeSize);
+  if (isCustomNode) {
+    edgeSize = nodeSize / 10;
+  }
+
+  const leftSquareX = x - edgeSize / 2;
+  const topSquareY = y - edgeSize / 2;
+
+  return (
+    calcRectangleVectorLengthFromCoords(
+      { x1: leftSquareX, y1: topSquareY, x2: leftSquareX + edgeSize, y2: topSquareY + edgeSize },
+      { px: x, py: y },
+      directionVector
+    ) * 0.95
+  );
+}
+
+/**
+ * Calculate a the vector length from the center of a rectangle to it's perimeter.
+ *
+ * @param {number} nodeSize The size of the square, when no viewGenerator is specified, else the size of an edge of the viewGenerator square.
+ * @param {Object.<string, number>} nodeCoords The coords of a the square node.
+ * @param {Object.<string, number>} directionVector a 2D vector with x and y components
+ * @param {boolean} isCustomNode is viewGenerator specified.
+ */
+function calcRectangleVectorLength(nodeSize, { x, y }, directionVector, isCustomNode) {
+  const horizEdgeSize = nodeSize.width / 10;
+  const vertEdgeSize = nodeSize.height / 10;
+
+  const leftSquareX = x - horizEdgeSize / 2;
+  const topSquareY = y - vertEdgeSize / 2;
+
+  // The size between the square center, to the appropriate square edges
+  return (
+    calcRectangleVectorLengthFromCoords(
+      { x1: leftSquareX, y1: topSquareY, x2: leftSquareX + horizEdgeSize, y2: topSquareY + vertEdgeSize },
+      { px: x, py: y },
+      directionVector
+    ) * 0.95
+  );
+}
 
 /**
  * Computes new node coordinates to make arrowheads point at nodes.
@@ -498,10 +592,6 @@ function getNormalizedNodeCoordinates(
     return { sourceCoords, targetCoords };
   }
 
-  if (config.node?.viewGenerator || sourceNode?.viewGenerator || targetNode?.viewGenerator) {
-    return { sourceCoords, targetCoords };
-  }
-
   const sourceSymbolType = sourceNode.symbolType || config.node?.symbolType;
   const targetSymbolType = targetNode.symbolType || config.node?.symbolType;
 
@@ -517,39 +607,39 @@ function getNormalizedNodeCoordinates(
   let { x: x2, y: y2 } = targetCoords;
   const directionVector = normalize({ x: x2 - x1, y: y2 - y1 });
 
-  switch (sourceSymbolType) {
-    case CONST.SYMBOLS.CIRCLE: {
-      let sourceNodeSize = sourceNode?.size || config.node.size;
+  const isSourceCustomNode = sourceNode.viewGenerator || config.node.viewGenerator;
+  let sourceNodeSize = sourceNode?.size || config.node.size;
+  let sourceVectorLength = 1;
 
-      // because this is a circle and A = pi * r^2
-      // we multiply by 0.95, because if we don't the link is not melting properly
-      sourceNodeSize = Math.sqrt(sourceNodeSize / Math.PI) * 0.95;
-
-      // points from the sourceCoords, we move them not to begin in the circle but outside
-      x1 += sourceNodeSize * directionVector.x;
-      y1 += sourceNodeSize * directionVector.y;
-      break;
-    }
+  if (sourceSymbolType === CONST.SYMBOLS.CIRCLE) {
+    sourceVectorLength = calcCircleVectorLength(sourceNodeSize, isSourceCustomNode);
+  } else if (sourceSymbolType === CONST.SYMBOLS.SQUARE) {
+    sourceVectorLength = calcSquareVectorLength(sourceNodeSize, { x: x1, y: y1 }, directionVector, isSourceCustomNode);
+  } else if (sourceSymbolType === CONST.SYMBOLS.RECTANGLE && sourceNodeSize.width && sourceNodeSize.height) {
+    sourceVectorLength = calcRectangleVectorLength(sourceNodeSize, { x: x1, y: y1 }, directionVector);
   }
 
-  switch (targetSymbolType) {
-    case CONST.SYMBOLS.CIRCLE: {
-      // it's fine `markerWidth` or `markerHeight` we just want to fallback to a number
-      // to avoid NaN on `Math.min(undefined, undefined) > NaN
-      let strokeSize = strokeWidth * Math.min(config.link?.markerWidth || 0, config.link?.markerHeight || 0);
-      let targetNodeSize = targetNode?.size || config.node.size;
-
-      // because this is a circle and A = pi * r^2
-      // we multiply by 0.95, because if we don't the link is not melting properly
-      targetNodeSize = Math.sqrt(targetNodeSize / Math.PI) * 0.95;
-
-      // points from the targetCoords, we move the by the size of the radius of the circle + the size of the arrow
-      x2 -= (targetNodeSize + (config.directed ? strokeSize : 0)) * directionVector.x;
-      y2 -= (targetNodeSize + (config.directed ? strokeSize : 0)) * directionVector.y;
-      break;
-    }
+  x1 += sourceVectorLength * directionVector.x;
+  y1 += sourceVectorLength * directionVector.y;
+
+  // it's fine `markerWidth` or `markerHeight` we just want to fallback to a number
+  // to avoid NaN on `Math.min(undefined, undefined) > NaN
+  let strokeSize = strokeWidth * Math.min(config.link?.markerWidth || 5, config.link?.markerHeight || 5);
+  const isTargetCustomNode = targetNode.viewGenerator || config.node.viewGenerator;
+  let targetNodeSize = targetNode?.size || config.node.size;
+  let targetVectorLength = 1;
+
+  if (targetSymbolType === CONST.SYMBOLS.CIRCLE) {
+    targetVectorLength = calcCircleVectorLength(targetNodeSize, isTargetCustomNode);
+  } else if (targetSymbolType === CONST.SYMBOLS.SQUARE) {
+    targetVectorLength = calcSquareVectorLength(targetNodeSize, { x: x2, y: y2 }, directionVector, isTargetCustomNode);
+  } else if (targetSymbolType === CONST.SYMBOLS.RECTANGLE && targetNodeSize.width && targetNodeSize.height) {
+    targetVectorLength = calcRectangleVectorLength(targetNodeSize, { x: x2, y: y2 }, directionVector);
   }
 
+  x2 -= (targetVectorLength + (config.directed ? strokeSize : 0)) * directionVector.x;
+  y2 -= (targetVectorLength + (config.directed ? strokeSize : 0)) * directionVector.y;
+
   return { sourceCoords: { x: x1, y: y1 }, targetCoords: { x: x2, y: y2 } };
 }
 

Diff for: src/components/marker/marker.helper.js

@@ -11,7 +11,7 @@ import {
   MARKER_MEDIUM_OFFSET,
   MARKER_LARGE_OFFSET,
 } from "./marker.const";
-import CONST from "../graph/graph.const";
+import CONST, { SYMBOLS_WITH_OPTIMIZED_POSITIONING } from "../graph/graph.const";
 
 /**
  * This function is a key template builder to access MARKERS structure.
@@ -114,14 +114,10 @@ function getMarkerSize(config) {
   let medium = small + (MARKER_MEDIUM_OFFSET * config.maxZoom) / 3;
   let large = small + (MARKER_LARGE_OFFSET * config.maxZoom) / 3;
 
-  if (config.node && !config.node.viewGenerator) {
-    switch (config.node.symbolType) {
-      case CONST.SYMBOLS.CIRCLE:
-        small = 0;
-        medium = 0;
-        large = 0;
-        break;
-    }
+  if (config.node?.viewGenerator || SYMBOLS_WITH_OPTIMIZED_POSITIONING.includes(config.node?.symbolType)) {
+    small = 0;
+    medium = 0;
+    large = 0;
   }
 
   return { small, medium, large };

Diff for: src/const.js

@@ -12,5 +12,6 @@ export default {
     STAR: "star",
     TRIANGLE: "triangle",
     WYE: "wye",
+    RECTANGLE: "rectangle",
   },
 };