WIP port: custom node rendering lives in sigmaUtils

settings_explorerjs.js

@@ -113,6 +113,12 @@ var sigmaJsDrawingProperties = {
     borderSize: 2.5,//Something other than 0 (works only for hovered nodes)
     defaultNodeBorderColor: "black",
     nodeBorderColor: "default",  // vs. node
+
+    // for custom TW node renderer with borders
+    // (if twNodeRendBorder, triggers overriding sigma.canvas.nodes.def)
+    twNodeRendBorder: true,
+    twNodeRendBorderSize: 1,
+    twNodeRendBorderColor: "#222"
 };
 var sigmaJsGraphProperties = {
     minEdgeSize: 2,

tinawebJS/main.js

@@ -151,10 +151,6 @@ if(RES["OK"]) {
         console.log(getUrlParam.file)
         console.log("\n============================\n")
 
-
-
-
-
     }
 
     if (file=="api.json") {
@@ -230,6 +226,14 @@ if(RES["OK"]) {
 
     console.log("customSettings", customSettings)
 
+
+    // custom rendering
+    if (customSettings['twNodeRendBorder']) {
+      // overriding the def is simplest
+      // (could also do it by type)
+      sigma.canvas.nodes.def = sigma_utils.twRender.canvas.nodes.withBorders
+    }
+
     // ==================================================================
     // sigma js library invocation (https://github.com/jacomyal/sigma.js)
     // ==================================================================

tinawebJS/sigmaUtils.js

@@ -83,6 +83,54 @@ SigmaUtils = function () {
         return graph;
     }// output = sigma graph
 
+
+
+
+    // ================= alternative rendering =====================
+    // alternative subrenderers for canvas rendering of sigma instances
+
+    // cf. http://yomguithereal.github.io/articles/node-border-renderer/
+
+    // same hierarchy as in sigma.canvas
+    this.twRender = {canvas: {nodes: {}}}
+
+    // node rendering with borders
+    this.twRender.canvas.nodes.withBorders = function(node, context, settings) {
+        var prefix = settings('prefix') || '';
+
+        if (settings('twNodeRendBorderSize') > 0) {
+          context.beginPath();
+          context.fillStyle = settings('twNodeRendBorderColor') || "#000"
+          context.arc(
+            node[prefix + 'x'],
+            node[prefix + 'y'],
+            node[prefix + 'size'] + settings('twNodeRendBorderSize'),
+            0,
+            Math.PI * 2,
+            true
+          );
+          context.closePath();
+          context.fill();
+        }
+
+        context.fillStyle = node.color || settings('defaultNodeColor');
+        context.beginPath();
+        context.arc(
+          node[prefix + 'x'],
+          node[prefix + 'y'],
+          node[prefix + 'size'],
+          0,
+          Math.PI * 2,
+          true
+        );
+        context.closePath();
+        context.fill();
+      };
+
+
+
+    // ================ /alternative rendering =====================
+
 }