Add documentation for link.breakPoints #378 @lironhl. Fix "functional:local: script. Add breakPoints example to small.data.js

Author: danielcaldas

package.json

@@ -15,7 +15,7 @@
     "docs:lint": "documentation lint src/**/*.js",
     "docs:watch": "documentation --config documentation.yml build src/**/*.js -f html -o gen-docs --watch",
     "docs": "npm run docs:lint && documentation --config documentation.yml build src/**/*.js -f html -o gen-docs && documentation build src/**/*.js -f md > gen-docs/DOCUMENTATION.md",
-    "functional:local": "cross-env CYPRESS_SANDBOX_URL=\"http://localhost:3002\" && cypress open",
+    "functional:local": "cross-env CYPRESS_SANDBOX_URL=\"http://localhost:3002\" cypress open",
     "functional:remote": "cross-env CYPRESS_SANDBOX_URL=\"https://danielcaldas.github.io/react-d3-graph/sandbox/index.html\" cypress open",
     "functional": "cross-env CYPRESS_SANDBOX_URL=\"http://127.0.0.1:8888\" cypress run",
     "generate:tooltips": "jsdoc -X ./src/components/graph/graph.config.js > ./tools/graph-config-jsdoc.json && cd tools && node tooltips-docs-generator.js > ../sandbox/graph-config-tooltips.js",

sandbox/data/small/small.data.js

@@ -1,39 +1,43 @@
 module.exports = {
-    links: [
-        {
-            source: 1,
-            target: 2,
-            label: "link 1 and 2",
-        },
-        {
-            source: 1,
-            target: 3,
-        },
-        {
-            source: 1,
-            target: 4,
-        },
-        {
-            source: 3,
-            target: 4,
-        },
-    ],
-    nodes: [
-        {
-            id: 1,
-            name: "Node 1",
-        },
-        {
-            id: 2,
-            name: "Node 2",
-        },
-        {
-            id: 3,
-            name: "Node 3",
-        },
-        {
-            id: 4,
-            name: "Node 4",
-        },
-    ],
+  links: [
+    {
+      source: 1,
+      target: 2,
+      label: "link 1 and 2",
+    },
+    {
+      source: 1,
+      target: 3,
+    },
+    {
+      source: 1,
+      target: 4,
+    },
+    {
+      source: 3,
+      target: 4,
+      breakPoints: [
+        { x: 100, y: 20 },
+        { x: 20, y: 100 },
+      ],
+    },
+  ],
+  nodes: [
+    {
+      id: 1,
+      name: "Node 1",
+    },
+    {
+      id: 2,
+      name: "Node 2",
+    },
+    {
+      id: 3,
+      name: "Node 3",
+    },
+    {
+      id: 4,
+      name: "Node 4",
+    },
+  ],
 };

src/components/graph/graph.config.js

@@ -180,6 +180,19 @@
  * </br>
  * @param {Object} link link object is explained in the next section. ⬇️
  * <h2 id="config-link"><a href="#config-link">#</a> Link level configurations</h2>
+ * @param {Array.<Object>} [link.breakPoints=[]] - <a id="link-breakpoints" href="#link-breakPoints">🔗</a> 🔍 an array of coordinates, each coordinate indicates a breakpoint
+ * where the link will break its natural flow and link to the next breakpoint in the list. [Here's the original feature request](https://github.com/danielcaldas/react-d3-graph/issues/373) it should give you an idea of the capabilities of this feature.
+ * **Note that** this property can only be defined a link level and **not** through the config object.
+ * ```javascript
+ * const data = {
+ *   nodes: [ ... ],
+ *   links: [
+ *     source: 'a',
+ *     target: 'b',
+ *     breakPoints: [{ x: 100, y: 20 }, { x: 20, y: 100 }]
+ *   ]
+ * };
+ * ```
  * @param {string} [link.color="#d3d3d3"] - <a id="link-color" href="#link-color">🔗</a> 🔍 the color for links
  * (from version 1.3.0 this property can be configured at link level). <b>Note:</b> there's a current limitation where arrow markers in directed graphs won't have the same color as the link. Again this issue
  * only occurs for individually colored links, if links are colored globally through `link.color`