fix label offset calculation when labelPosition is horizontal (#379)

* fix label offset calc when labelPosition is horizontal

* revert docs changes

Author: lironhl

src/components/graph/graph.builder.js

@@ -196,15 +196,14 @@ 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";
-
+  let offset = 0;
   if (isSizeNumericValue) {
     offset = nodeSize;
   } else if (labelPosition === "top" || labelPosition === "bottom") {
     offset = nodeSize.height;
-  } else {
-    nodeSize.width;
+  } else if (labelPosition === "right" || labelPosition === "left") {
+    offset = nodeSize.width;
   }
 
   const fontSize = node.fontSize || config.node.fontSize;

src/components/node/node.helper.js

@@ -61,7 +61,7 @@ function buildSvgSymbol(size = CONST.DEFAULT_NODE_SIZE, symbolTypeDesc = CONST.S
 
 /**
  * return dx, dy, and potentially alignmentBaseline and textAnchor props to put label in correct position relative to node
- * @param {number | undefined} dx - default computed offset of label to the right of the node
+ * @param {number | undefined} dx - default computed offset of label
  * @param {'left' | 'right' | 'top' | 'bottom' | 'center' | undefined} labelPosition - user specified position of label relative to node
  * @returns {{dx: string, dy: string} | {dx: string, dy: string, textAnchor: string, dominantBaseline: string}}
  * props to put text svg for label in correct spot. default case returns just dx and dy, without textAnchor and dominantBaseline

test/graph/graph.builder.spec.js

@@ -188,5 +188,61 @@ describe("Graph Helper", () => {
         expect(props.fontSize).toEqual(6);
       });
     });
+    describe("when node.size is numeric value", () => {
+      test("should calculate label offset correctly", () => {
+        const props = graphHelper.buildNodeProps(
+          { ...that.node, fontSize: 1, size: 100 },
+          that.config,
+          undefined,
+          undefined,
+          undefined,
+          1
+        );
+
+        expect(props.dx).toEqual(3.5);
+      });
+    });
+    describe("when node.size is object and labelPosition is top", () => {
+      test("should calculate label offset correctly", () => {
+        const props = graphHelper.buildNodeProps(
+          { ...that.node, fontSize: 1, size: { height: 100, width: 100 }, labelPosition: "top" },
+          that.config,
+          undefined,
+          undefined,
+          undefined,
+          1
+        );
+
+        expect(props.dx).toEqual(3.5);
+      });
+    });
+    describe("when node.size is object and labelPosition is right", () => {
+      test("should calculate label offset correctly", () => {
+        const props = graphHelper.buildNodeProps(
+          { ...that.node, fontSize: 1, size: { height: 100, width: 100 }, labelPosition: "right" },
+          that.config,
+          undefined,
+          undefined,
+          undefined,
+          1
+        );
+
+        expect(props.dx).toEqual(3.5);
+      });
+    });
+    describe("when node.size is object and labelPosition is center", () => {
+      test("should calculate label offset correctly", () => {
+        const props = graphHelper.buildNodeProps(
+          { ...that.node, fontSize: 1, size: { height: 100, width: 100 }, labelPosition: "center" },
+          that.config,
+          undefined,
+          undefined,
+          undefined,
+          1
+        );
+
+        expect(props.dx).toEqual(2.5);
+      });
+    });
   });
 });