feat(edges): optionally don't render self reference edge behind the n…

…ode (#368)

docs-kr/network/edges.html

@@ -206,7 +206,8 @@ <h3>옵션</h3>
     selfReferenceSize:20,
     selfReference:{
         size: 20,
-        angle: Math.PI / 4
+        angle: Math.PI / 4,
+        renderBehindTheNode: true
     },
     shadow:{
       enabled: false,
@@ -911,6 +912,13 @@ <h3>옵션</h3>
             <td>TODO
             </td>
         </tr>
+        <tr parent="selfReference" class="hidden">
+            <td class="indent">selfReference.renderBehindTheNode</td>
+            <td>Boolean</td>
+            <td><code>true</code></td>
+            <td>TODO
+            </td>
+        </tr>
         <tr class='toggle collapsible' onclick="toggleTable('optionTable','shadow', this);">
             <td><span parent="shadow" class="right-caret"></span> shadow</td>
             <td>Object or Boolean</td>

docs/network/edges.html

@@ -206,7 +206,8 @@ <h3>Options</h3>
     selfReferenceSize: 20,
     selfReference:{
         size: 20,
-        angle: Math.PI / 4
+        angle: Math.PI / 4,
+        renderBehindTheNode: true
     },
     shadow:{
       enabled: false,
@@ -925,6 +926,13 @@ <h3>Options</h3>
                 be top-right (π / 4) corner.
             </td>
         </tr>
+        <tr parent="selfReference" class="hidden">
+            <td class="indent">selfReference.renderBehindTheNode</td>
+            <td>Boolean</td>
+            <td><code>true</code></td>
+            <td> This is a flag that indicates whether self reference circle should be drawn as a full circle or rather should not overlap with parent node.
+            </td>parentOptions.selfReference 
+        </tr>
         <tr class='toggle collapsible' onclick="toggleTable('optionTable','shadow', this);">
             <td><span parent="shadow" class="right-caret"></span> shadow</td>
             <td>Object or Boolean</td>

examples/network/edgeStyles/selfReference.html

@@ -22,28 +22,73 @@
     <script type="text/javascript">
 
         // create an array with nodes
+
         var nodes = new vis.DataSet([
             {
                 id: 1,
                 label:
-                    "I'm an alligator,\nI'm a mama-papa coming for you.\nI'm the space invader,\nI'll be a rock 'n' rollin' bitch for you",
-                x:0,
-                y:0
+                    [
+                        "I'm an alligator,",
+                        "I'm a mama-papa coming for you.",
+                        "I'm the space invader,",
+                        "I'll be a rock 'n' rollin' bitch for you."
+                    ].join("\n"),
+                x: 0,
+                y: 0,
+                color: {
+                    background: "transparent"
+                }
             },
             {
                 id: 2,
                 label:
-                    "Test shape",
+                    [
+                        "An edge connected to the same node on both end renders a circle.",
+                        "Both from and to arrows point to the same node.",
+                        "The radius of the edge can be adjusted using selfReference.size.",
+                        "The edge can be positioned using selfReference.angle.",
+                        "The part of the edge behind the node can be hidden using selfReference.renderBehindTheNode."].join("\n"),
                 widthConstraint: { minimum: 100 }, heightConstraint: { minimum: 100 },
-                x:200,
-                y:200
-            }
+                x: 200,
+                y: 200,
+                color: {
+                    background: "transparent"
+                }
+            },
+            {
+                id: 3,
+                label:
+                    ["Self reference edge is in the bottom left corner",
+                        "with parts rendered behind node"].join("\n"),
+                widthConstraint: { minimum: 100 }, heightConstraint: { minimum: 100 },
+                x: 400,
+                y: 400,
+                color: {
+                    background: "transparent"
+                },
+                shape: "box"
+            },
         ]);
 
         // create an array with edges
         var edges = new vis.DataSet([
             { from: 1, to: 1, label: "Moonage Daydream" },
-            { from: 2, to: 2, label: "Testing", arrows: 'to, middle, from', selfReference: { size: 40, angle: Math.PI / 6 } }
+            {
+                from: 2, to: 2, label: "Testing", arrows: 'to, middle, from',
+                selfReference: {
+                    size: 40,
+                    angle: Math.PI / 6,
+                    renderBehindTheNode: false
+                }
+            },
+            {
+                from: 3, to: 3, label: "Testing", arrows: 'to, middle, from',
+                selfReference: {
+                    size: 40,
+                    angle: Math.PI * 7 / 6,
+                    renderBehindTheNode: true
+                }
+            }
         ]);
 
         // create a network
@@ -52,7 +97,9 @@
             nodes: nodes,
             edges: edges
         };
-        var options = {};
+        var options = {
+
+        };
         var network = new vis.Network(container, data, options);
 
         (async () => {
@@ -68,7 +115,8 @@
                         arrows: { to: true, from: true, middle: true },
                         selfReference: {
                             size: 20,
-                            angle: angle / 10
+                            angle: angle / 10,
+                            renderBehindTheNode: false
                         }
                     }
                 });

lib/network/modules/EdgesHandler.js

@@ -97,6 +97,7 @@ class EdgesHandler {
       selfReference: { 
         size: 20,
         angle: Math.PI / 4,
+        renderBehindTheNode: true
       },
       shadow:{
         enabled: false,

lib/network/modules/components/Edge.js

@@ -253,10 +253,7 @@ class Edge {
 
     if(newOptions.hasOwnProperty("selfReferenceSize")){
       console.log('The selfReferenceSize property has been deprecated. Please use selfReference property instead. The selfReference can be set like thise selfReference:{size:30, angle:Math.PI / 4}');
-      parentOptions.selfReference = {
-          size: newOptions.selfReferenceSize,
-          angle: parentOptions.selfReference.angle
-      }
+      parentOptions.selfReference.size = newOptions.selfReferenceSize
     }
 
   }

lib/network/modules/components/edges/util/edge-base.ts

@@ -527,9 +527,37 @@ export abstract class EdgeBase<Via = undefined> implements EdgeType {
     // draw shadow if enabled
     this.enableShadow(ctx, values);
 
+    //full circle
+    let angleFrom = 0;
+    let angleTo = Math.PI * 2;
+
+    if (!this.options.selfReference.renderBehindTheNode) {
+      //render only parts which are not overlaping with parent node
+      //need to find x,y of from point and x,y to point
+      //calculating radiangs
+      const low = this.options.selfReference.angle - 2 * Math.PI;
+      const high = this.options.selfReference.angle;
+      const pointTFrom = this._findBorderPositionCircle(this.from, ctx, {
+        x,
+        y,
+        low,
+        high,
+        direction: -1
+      });
+      const pointTTo = this._findBorderPositionCircle(this.from, ctx, {
+        x,
+        y,
+        low,
+        high,
+        direction: 1
+      });
+      angleFrom = Math.atan2(pointTFrom.y - y, pointTFrom.x - x);
+      angleTo = Math.atan2(pointTTo.y - y, pointTTo.x - x);
+    }
+
     // draw a circle
     ctx.beginPath();
-    ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
+    ctx.arc(x, y, radius, angleFrom, angleTo, false);
     ctx.stroke();
 
     // disable shadows for other elements.

lib/network/options.js

@@ -159,6 +159,7 @@ let allOptions = {
     selfReference: { 
       size: { number },
       angle: { number },
+      renderBehindTheNode: { boolean: bool },
       __type__: { object }
     },
     shadow: {
@@ -611,6 +612,7 @@ let configureOptions = {
     selfReference: { 
       size: [20, 0, 200, 1],
       angle: [Math.PI / 2, -6 * Math.PI, 6 * Math.PI, Math.PI / 8],
+      renderBehindTheNode: true,
     },
     shadow: {
       enabled: false,

test/edges/bezier-edge-dynamic.test.ts

@@ -242,6 +242,7 @@ describe('BezierEdgeDynamic', function(): void {
           selfReference: {
             size: 2,
             angle: Math.PI / 2,
+            renderBehindTheNode: true,
           },
         },
         body,

test/edges/cubic-bezier-edge.test.ts

@@ -149,6 +149,7 @@ describe('CubicBezierEdge', function(): void {
           selfReference: {
             size: 42,
             angle: Math.PI / 2,
+            renderBehindTheNode: true,
           },
         },
         body as any,
@@ -541,6 +542,7 @@ describe('CubicBezierEdge', function(): void {
             selfReference: {
               size: 42,
               angle: Math.PI / 2,
+              renderBehindTheNode: true,
             },
           },
           body,
@@ -750,6 +752,7 @@ describe('CubicBezierEdge', function(): void {
               selfReference: {
                 size: 13,
                 angle: Math.PI / 2,
+                renderBehindTheNode: true,
               },
             },
             body,

types/network/Network.d.ts

@@ -971,6 +971,7 @@ export interface EdgeOptions {
   selfReference?: {
     size?: number,
     angle?: number,
+    renderBehindTheNode?: boolean
   };
 
   shadow?: boolean | OptionsShadow;