add yomguithereal's curve rendering function

tinawebJS/main.js

@@ -211,7 +211,7 @@ if(RES["OK"]) {
 
     var customSettings = Object.assign(
         {
-            drawEdges: true,   // fixme edgetype curve
+            drawEdges: true,
             drawNodes: true,
             drawLabels: true,
             // nodesPowRatio: 1,
@@ -219,6 +219,7 @@ if(RES["OK"]) {
             font: "Ubuntu Condensed",
             // labelColor: "node",
             fontStyle: "bold",
+            batchEdgesDrawing: false,
 
             autoResize: true,
             mouseEnabled: true,
@@ -239,6 +240,9 @@ if(RES["OK"]) {
       sigma.canvas.nodes.def = sigma_utils.twRender.canvas.nodes.withBorders
     }
 
+    // custom edges rendering registered under 'curve'
+    sigma.canvas.edges.curve = sigma_utils.twRender.canvas.edges.curve
+
     // custom labels rendering
     //  - based on the normal one sigma.canvas.labels.def
     //  - additionnaly supports 'forcelabel' node property

tinawebJS/sigmaUtils.js

@@ -92,7 +92,7 @@ SigmaUtils = function () {
     // cf. http://yomguithereal.github.io/articles/node-border-renderer/
 
     // same hierarchy as in sigma.canvas
-    this.twRender = {canvas: {nodes: {}, labels: {}}}
+    this.twRender = {canvas: {nodes: {}, edges: {}, labels: {}}}
 
     this.twRender.canvas.labels.def = function(node, context, settings) {
       var fontSize,
@@ -129,6 +129,46 @@ SigmaUtils = function () {
       );
     };
 
+    // source: github.com/jacomyal/sigma.js/commit/25e2153
+    // POSS: modify to incorporate mix colors
+    this.twRender.canvas.edges.curve = function(edge, source, target, context, settings) {
+      var color = edge.color,
+        prefix = settings('prefix') || '',
+        edgeColor = settings('edgeColor'),
+        defaultNodeColor = settings('defaultNodeColor'),
+        defaultEdgeColor = settings('defaultEdgeColor');
+
+      if (!color)
+        switch (edgeColor) {
+          case 'source':
+            color = source.color || defaultNodeColor;
+            break;
+          case 'target':
+            color = target.color || defaultNodeColor;
+            break;
+          default:
+            color = defaultEdgeColor;
+            break;
+        }
+
+      context.strokeStyle = color;
+      context.lineWidth = edge[prefix + 'size'] || 1;
+      context.beginPath();
+      context.moveTo(
+        source[prefix + 'x'],
+        source[prefix + 'y']
+      );
+      context.quadraticCurveTo(
+        (source[prefix + 'x'] + target[prefix + 'x']) / 2 +
+          (target[prefix + 'y'] - source[prefix + 'y']) / 4,
+        (source[prefix + 'y'] + target[prefix + 'y']) / 2 +
+          (source[prefix + 'x'] - target[prefix + 'x']) / 4,
+        target[prefix + 'x'],
+        target[prefix + 'y']
+      );
+      context.stroke();
+    };
+
     // node rendering with borders
     this.twRender.canvas.nodes.withBorders = function(node, context, settings) {
         var prefix = settings('prefix') || '';