Added ability to configure a node's width and height separately (#342)

* allow for nested objects of depth > 2

* added ability to configure node height and width

* updated graph config docs

* added comment about node size unit of measurement to docs

* added size type checking variable for simplification, use logWarning

Author: terahn

sandbox/utils.js

@@ -37,7 +37,7 @@ function generateFormSchema(o, rootSpreadProp, accum = {}) {
         const kk = rootSpreadProp ? `${rootSpreadProp}.${k}` : k;
 
         if (o[k] !== undefined && o[k] !== null && typeof o[k] !== "function") {
-            typeof o[k] === "object" ? generateFormSchema(o[kk], kk, accum) : (accum[kk] = formMap(kk, o[k]));
+            typeof o[k] === "object" ? generateFormSchema(o[k], kk, accum) : (accum[kk] = formMap(kk, o[k]));
         }
     }
 

src/components/graph/graph.builder.js

@@ -169,8 +169,8 @@ function buildLinkProps(link, nodes, links, config, linkCallbacks, highlightedNo
 function buildNodeProps(node, config, nodeCallbacks = {}, highlightedNode, highlightedLink, transform) {
     const highlight =
         node.highlighted ||
-        (node.id === (highlightedLink && highlightedLink.source) ||
-            node.id === (highlightedLink && highlightedLink.target));
+        node.id === (highlightedLink && highlightedLink.source) ||
+        node.id === (highlightedLink && highlightedLink.target);
     const opacity = _getNodeOpacity(node, highlightedNode, highlightedLink, config);
 
     let fill = node.color || config.node.color;
@@ -201,8 +201,20 @@ function buildNodeProps(node, config, nodeCallbacks = {}, highlightedNode, highl
 
     const t = 1 / transform;
     const nodeSize = node.size || config.node.size;
+
+    let offset;
+    const isSizeNumericValue = typeof nodeSize !== "object";
+
+    if (isSizeNumericValue) {
+        offset = nodeSize;
+    } else if (labelPosition === "top" || labelPosition === "bottom") {
+        offset = nodeSize.height;
+    } else {
+        nodeSize.width;
+    }
+
     const fontSize = highlight ? config.node.highlightFontSize : config.node.fontSize;
-    const dx = fontSize * t + nodeSize / 100 + 1.5;
+    const dx = fontSize * t + offset / 100 + 1.5;
     const svg = node.svg || config.node.svg;
     const fontColor = node.fontColor || config.node.fontColor;
 
@@ -223,7 +235,7 @@ function buildNodeProps(node, config, nodeCallbacks = {}, highlightedNode, highl
         opacity,
         overrideGlobalViewGenerator: !node.viewGenerator && node.svg,
         renderLabel: node.renderLabel || config.node.renderLabel,
-        size: nodeSize * t,
+        size: isSizeNumericValue ? nodeSize * t : { height: nodeSize.height * t, width: nodeSize.width * t },
         stroke,
         strokeWidth: strokeWidth * t,
         svg,

src/components/graph/graph.config.js

@@ -146,7 +146,17 @@
  * @param {number} [node.opacity=1] - <a id="node-opacity" href="#node-opacity">🔗</a> 🔍🔍🔍 by default all nodes will have this opacity value.
  * @param {boolean} [node.renderLabel=true] - <a id="node-render-label" href="#node-render-label">🔗</a> 🔍🔍🔍 when set to false no labels will appear along side nodes in the
  * graph.
- * @param {number} [node.size=200] - <a id="node-size" href="#node-size">🔗</a> 🔍🔍🔍 defines the size of all nodes.
+ * @param {number|Object} [node.size=200] - <a id="node-size" href="#node-size">🔗</a> 🔍🔍🔍 defines the size of all nodes. When set to a number, the node will have equal height and width.</br>
+ * This can also be an object with a height and width property <b>when using custom nodes</b>.
+ * ```javascript
+ * size: 200
+ * // or
+ * size: {
+ *    height: 200,
+ *    width: 300,
+ * }
+ * ```
+ * The actual node dimensions (in px) rendered on screen will be the size value divided by 10. For example, a node size of 200 will result in a node with a height and width of 20px.
  * @param {string} [node.strokeColor="none"] - <a id="node-stroke-color" href="#node-stroke-color">🔗</a> 🔍🔍🔍  this is the stroke color that will be applied to the node if no <b>strokeColor property</b> is found inside the node itself (yes <b>you can pass a property "strokeColor" inside the node and that stroke color will override this default one</b>).
  * @param {number} [node.strokeWidth=1.5] - <a id="node-stroke-width" href="#node-stroke-width">🔗</a> 🔍🔍🔍 the width of the all node strokes.
  * @param {string} [node.svg=""] - <a id="node-svg" href="#node-svg">🔗</a> 🔍🔍🔍 render custom svg for nodes in alternative to <b>node.symbolType</b>. This svg can

src/components/node/Node.jsx

@@ -1,6 +1,8 @@
 import React from "react";
 
 import nodeHelper from "./node.helper";
+import CONST from "./node.const";
+import { logWarning } from "../../utils";
 
 /**
  * Node component is responsible for encapsulating node render.
@@ -94,16 +96,17 @@ export default class Node extends React.Component {
             opacity: this.props.opacity,
         };
 
-        const size = this.props.size;
+        let size = this.props.size;
+        const isSizeNumericalValue = typeof size !== "object";
 
         let gtx = this.props.cx,
             gty = this.props.cy,
             label = null,
             node = null;
 
         if (this.props.svg || this.props.viewGenerator) {
-            const height = size / 10;
-            const width = size / 10;
+            const height = isSizeNumericalValue ? size / 10 : size.height / 10;
+            const width = isSizeNumericalValue ? size / 10 : size.width / 10;
             const tx = width / 2;
             const ty = height / 2;
             const transform = `translate(${tx},${ty})`;
@@ -133,6 +136,10 @@ export default class Node extends React.Component {
             gtx -= tx;
             gty -= ty;
         } else {
+            if (!isSizeNumericalValue) {
+                logWarning("node.size should be a number when not using custom nodes.");
+                size = CONST.DEFAULT_NODE_SIZE;
+            }
             nodeProps.d = nodeHelper.buildSvgSymbol(size, this.props.type);
             nodeProps.fill = this.props.fill;
             nodeProps.stroke = this.props.stroke;