directed graph with viewGenerator

Author: lironhl

Diff for: sandbox/data/custom-node/custom-node.config.js

@@ -2,47 +2,47 @@ import React from "react";
 import CustomNode from "./CustomNode";
 
 export default {
-    automaticRearrangeAfterDropNode: false,
-    collapsible: false,
-    height: 400,
-    highlightDegree: 1,
-    highlightOpacity: 0.2,
-    linkHighlightBehavior: true,
-    maxZoom: 8,
-    minZoom: 0.1,
-    nodeHighlightBehavior: true,
-    panAndZoom: false,
-    staticGraph: false,
-    width: 800,
-    node: {
-        color: "#d3d3d3",
-        fontColor: "black",
-        fontSize: 12,
-        fontWeight: "normal",
-        highlightColor: "red",
-        highlightFontSize: 12,
-        highlightFontWeight: "bold",
-        highlightStrokeColor: "SAME",
-        highlightStrokeWidth: 1.5,
-        labelProperty: "name",
-        mouseCursor: "pointer",
-        opacity: 1,
-        renderLabel: false,
-        size: {
-            width: 700,
-            height: 900,
-        },
-        strokeColor: "none",
-        strokeWidth: 1.5,
-        svg: "",
-        symbolType: "circle",
-        viewGenerator: node => <CustomNode person={node} />,
-    },
-    link: {
-        color: "#d3d3d3",
-        opacity: 1,
-        semanticStrokeWidth: false,
-        strokeWidth: 4,
-        highlightColor: "blue",
+  automaticRearrangeAfterDropNode: false,
+  collapsible: false,
+  height: 400,
+  highlightDegree: 1,
+  highlightOpacity: 0.2,
+  linkHighlightBehavior: true,
+  maxZoom: 8,
+  minZoom: 0.1,
+  nodeHighlightBehavior: true,
+  panAndZoom: false,
+  staticGraph: false,
+  width: 800,
+  node: {
+    color: "#d3d3d3",
+    fontColor: "black",
+    fontSize: 12,
+    fontWeight: "normal",
+    highlightColor: "red",
+    highlightFontSize: 12,
+    highlightFontWeight: "bold",
+    highlightStrokeColor: "SAME",
+    highlightStrokeWidth: 1.5,
+    labelProperty: "name",
+    mouseCursor: "pointer",
+    opacity: 1,
+    renderLabel: false,
+    size: {
+      width: 700,
+      height: 900,
     },
+    strokeColor: "none",
+    strokeWidth: 1.5,
+    svg: "",
+    symbolType: "rectangle",
+    viewGenerator: node => <CustomNode person={node} />,
+  },
+  link: {
+    color: "#d3d3d3",
+    opacity: 1,
+    semanticStrokeWidth: false,
+    strokeWidth: 4,
+    highlightColor: "blue",
+  },
 };

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

@@ -12,5 +12,6 @@ export default {
   LINK_CLASS_NAME: "link",
   NODE_CLASS_NAME: "node",
   TTL_DOUBLE_CLICK_IN_MS: 300,
+  SYMBOLS_WITH_OPTIMIZED_POSITIONING: new Set([CONST.SYMBOLS.CIRCLE, CONST.SYMBOLS.SQUARE, CONST.SYMBOLS.RECTANGLE]),
   ...CONST,
 };

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

@@ -469,11 +469,178 @@ 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.
+ * This calculation is taken from https://stackoverflow.com/a/3197924.
+ *
+ * @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 leftEdge = (x1 - px) / vx;
+  const rightEdge = (x2 - px) / vx;
+
+  const topEdge = (y1 - py) / vy;
+  const bottomEdge = (y2 - py) / vy;
+
+  return Math.min(...[leftEdge, rightEdge, topEdge, bottomEdge].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.
+ * @returns {number}
+ */
+function calcCircleVectorLength(nodeSize, isCustomNode) {
+  let radiusLength;
+  if (isCustomNode) {
+    // nodeSize equals the Diameter in the case of custome-node.
+    radiusLength = nodeSize / 10 / 2;
+  } else {
+    // 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
+    radiusLength = Math.sqrt(nodeSize / Math.PI);
+  }
+  return radiusLength;
+}
+
+/**
+ * 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.
+ * @returns {number}
+ */
+function calcSquareVectorLength(nodeSize, { x, y }, directionVector, isCustomNode) {
+  let edgeSize;
+  if (isCustomNode) {
+    // nodeSize equals the edgeSize in the case of custome-node.
+    edgeSize = nodeSize / 10;
+  } else {
+    // All the edges of a square are equal, inorder to calc it's size we multplie two edges.
+    edgeSize = Math.sqrt(nodeSize);
+  }
+
+  // The x and y coords in this library, represent the top center of the component.
+  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
+  );
+}
+
+/**
+ * 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.
+ * @returns {number}
+ */
+function calcRectangleVectorLength(nodeSize, { x, y }, directionVector) {
+  const horizEdgeSize = nodeSize.width / 10;
+  const vertEdgeSize = nodeSize.height / 10;
+
+  // The x and y coords in this library, represent the top center of the component.
+  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
+  );
+}
+
+/**
+ * Calculate a the vector length of symbol that included in symbols with optimized positioning.
+ *
+ * @param {string} symbolType the string that specifies the symbol type (should be one of {@link #node-symbol-type|node.symbolType})
+ * @param {(number | Object.<string, 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.
+ * @returns {number}
+ */
+function calcVectorLength(symbolType, nodeSize, { x, y }, directionVector, isCustomNode) {
+  switch (symbolType) {
+    case CONST.SYMBOLS.CIRCLE:
+      if (typeof nodeSize === "number") {
+        return calcCircleVectorLength(nodeSize, isCustomNode);
+      }
+      console.warn("When specifiying 'circle' as node symbol, the size of the node must be a number.");
+
+    case CONST.SYMBOLS.SQUARE:
+      if (typeof nodeSize === "number") {
+        return calcSquareVectorLength(nodeSize, { x, y }, directionVector, isCustomNode);
+      }
+      console.warn("When specifiying 'square' as node symbol, the size of the node must be a number.");
+
+    case CONST.SYMBOLS.RECTANGLE:
+      if (typeof nodeSize === "object" && nodeSize?.width && nodeSize?.height) {
+        return calcRectangleVectorLength(nodeSize, { x, y }, directionVector);
+      }
+      console.warn("When specifiying 'rectangle' as node symbol, width and height must be specified in the node size.");
+
+    default:
+      return 1;
+  }
+}
+
+/**
+ * When directed graph is specified, we add arrow head to the link.
+ * In order to add the arrow head we subtract it's size from the last point of the link.
+ *
+ * @param {number} p1 x or y, of the link starting point.
+ * @param {number} p2 x or y, of the link ending point.
+ * @param {number} pDirectionVector The link direction vector in the x or y axis.
+ * @param {number} arrowSize The size of the arrow head.
+ * @returns The amount we should add to the x or y coords, in order to free up space for the arrow head.
+ */
+function directedGraphOptimization(p1, p2, pDirectionVector, arrowSize) {
+  const pDiff = Math.abs(p2 - p1);
+  const invertedDirectionVector = pDirectionVector * -1;
+  const pVectorArrowSize = Math.abs(arrowSize * invertedDirectionVector);
+
+  let p1Opti = 0;
+  let p2Opti = 0;
+  if (pDiff > pVectorArrowSize) {
+    p2Opti = pVectorArrowSize * invertedDirectionVector;
+  } else {
+    p2Opti = (pDiff - 1) * invertedDirectionVector;
+  }
+
+  return {
+    p1: p1Opti,
+    p2: p2Opti,
+  };
+}
 
 /**
  * Computes new node coordinates to make arrowheads point at nodes.
- * Arrow configuration is only available for circles.
+ * Arrow configuration is only available for circles, squares and rectangles.
+ *
  * @param {Object} info - the couple of nodes we need to compute new coordinates
  * @param {string} info.sourceId - node source id
  * @param {string} info.targetId - node target id
@@ -498,16 +665,12 @@ 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;
 
   if (
-    !SYMBOLS_WITH_OPTIMIZED_POSITIONING.has(sourceSymbolType) &&
-    !SYMBOLS_WITH_OPTIMIZED_POSITIONING.has(targetSymbolType)
+    !CONST.SYMBOLS_WITH_OPTIMIZED_POSITIONING.has(sourceSymbolType) &&
+    !CONST.SYMBOLS_WITH_OPTIMIZED_POSITIONING.has(targetSymbolType)
   ) {
     // if symbols don't have optimized positioning implementations fallback to input coords
     return { sourceCoords, targetCoords };
@@ -517,38 +680,35 @@ 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;
+  const sourceNodeSize = sourceNode?.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
-      sourceNodeSize = Math.sqrt(sourceNodeSize / Math.PI) * 0.95;
+  const sourceVectorLength =
+    calcVectorLength(sourceSymbolType, sourceNodeSize, { x: x1, y: y1 }, directionVector, isSourceCustomNode) * 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;
-    }
-  }
+  x1 += sourceVectorLength * directionVector.x;
+  y1 += sourceVectorLength * directionVector.y;
 
-  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;
-    }
-  }
+  // it's fine `markerWidth` or `markerHeight` we just want to fallback to a number
+  // to avoid NaN on `Math.min(undefined, undefined) > NaN
+  const strokeSize = strokeWidth * Math.min(config.link?.markerWidth || 5, config.link?.markerHeight || 5);
+  const isTargetCustomNode = targetNode.viewGenerator || config.node.viewGenerator;
+  const targetNodeSize = targetNode?.size || config.node.size;
+
+  const targetVectorLength =
+    calcVectorLength(targetSymbolType, targetNodeSize, { x: x2, y: y2 }, directionVector, isTargetCustomNode) * 0.95;
+
+  const arrowSize = config.directed ? strokeSize : 0;
+  x2 -= targetVectorLength * directionVector.x;
+  y2 -= targetVectorLength * directionVector.y;
+
+  const xOptimization = directedGraphOptimization(x1, x2, directionVector.x, arrowSize);
+  x2 += xOptimization.p2;
+  x1 += xOptimization.p1;
+
+  const yOptimization = directedGraphOptimization(y1, y2, directionVector.y, arrowSize);
+  y2 += yOptimization.p2;
+  y1 += yOptimization.p1;
 
   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 GRAPH_CONST 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 (GRAPH_CONST.SYMBOLS_WITH_OPTIMIZED_POSITIONING.has(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",
   },
 };