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,
+  directed: true,
+  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: "",
+    viewGenerator: node => <CustomNode person={node} />,
+  },
+  link: {
+    color: "#d3d3d3",
+    opacity: 1,
+    semanticStrokeWidth: false,
+    strokeWidth: 4,
+    highlightColor: "blue",
+  },
 };

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

@@ -7,7 +7,7 @@ import CONST from "./graph.const";
 
 import { buildLinkPathDefinition } from "../link/link.helper";
 import { getMarkerId } from "../marker/marker.helper";
-import { getNormalizedNodeCoordinates } from "./graph.helper";
+import { getNormalizedNodeCoordinates } from "./graph.coords";
 
 /**
  * Get the correct node opacity in order to properly make decisions based on context such as currently highlighted node.
@@ -129,7 +129,8 @@ function buildLinkProps(link, nodes, links, config, linkCallbacks, highlightedNo
     { sourceId: source, targetId: target, sourceCoords: { x: x1, y: y1 }, targetCoords: { x: x2, y: y2 } },
     nodes,
     config,
-    strokeWidth
+    strokeWidth,
+    link.breakPoints
   );
 
   const d = buildLinkPathDefinition(sourceCoords, targetCoords, type, link.breakPoints);

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,
 };