GraphViewer: Labels are now splitted accordingly into two lines

html/admin/js/graphViewer/graph/nodeShaper.js

@@ -67,6 +67,24 @@ function NodeShaper(parent, flags, idfunc) {
     communityRegEx = /^\*community/,
     nodes = [],
     visibleLabels = true,
+    
+    splitLabel = function(label) {
+      if (label === undefined) {
+        return [""];
+      }
+      if (typeof label !== "string") {
+        
+        label = String(label);
+      }
+      var chunks = label.match(/[\w\W]{1,10}(\s|$)|\S+?(\s|$)/g);
+      chunks[0] = $.trim(chunks[0]);
+      chunks[1] = $.trim(chunks[1]);
+      if (chunks.length > 2) {
+        chunks.length = 2;
+        chunks[1] += "...";
+      }
+      return chunks;
+    },
     noop = function (node) {
     
     },
@@ -243,21 +261,43 @@ function NodeShaper(parent, flags, idfunc) {
     parseLabelFlag = function (label) {
       if (_.isFunction(label)) {
         addLabel = function (node) {
-          node.append("text") // Append a label for the node
+          var textN = node.append("text") // Append a label for the node
             .attr("text-anchor", "middle") // Define text-anchor
             .attr("fill", "black") // Force a black color
-            .attr("stroke", "none") // Make it readable
+            .attr("stroke", "none"); // Make it readable
-            .text(label);
+            textN.each(function(d) {
+              var chunks = splitLabel(label(d));
+              d3.select(this).append("tspan")
+                .attr("x", "0")
+                .attr("dy", "0")
+                .text(chunks[0]);
+              if (chunks.length === 2) {
+                d3.select(this).append("tspan")
+                  .attr("x", "0")
+                  .attr("dy", "20")
+                  .text(chunks[1]);
+              }
+            });
         };
       } else {
         addLabel = function (node) {
-          node.append("text") // Append a label for the node
+          var textN = node.append("text") // Append a label for the node
             .attr("text-anchor", "middle") // Define text-anchor
             .attr("fill", "black") // Force a black color
-            .attr("stroke", "none") // Make it readable
+            .attr("stroke", "none"); // Make it readable
-            .text(function(d) { 
+          textN.each(function(d) {
-              return d._data[label] !== undefined ? d._data[label] : "";
+            var chunks = splitLabel(d._data[label]);
-            });
+            d3.select(this).append("tspan")
+              .attr("x", "0")
+              .attr("dy", "0")
+              .text(chunks[0]);
+            if (chunks.length === 2) {
+              d3.select(this).append("tspan")
+                .attr("x", "0")
+                .attr("dy", "20")
+                .text(chunks[1]);
+            }
+          });
         };
       }
     },

html/admin/js/graphViewer/jasmine_test/specNodeShaper/nodeShaperSpec.js

@@ -691,9 +691,6 @@
         textEl = $("svg .node text");
         expect(textEl.attr("fill")).toEqual("black");
         expect(textEl.attr("stroke")).toEqual("none");
-        
-        
-        
       });
 
       it('should ignore other attributes', function () {
@@ -786,6 +783,45 @@
         
       });
 
+      it('should automatically line-break long multi-word labels', function() {
+        var node = [{
+          _id: 1,
+          _data: {
+            label: "Label with many words"
+          }
+        }],
+        textEl,
+        spans;
+        shaper.drawNodes(node);
+        textEl = $("svg .node text");
+        spans = $("tspan", textEl);
+        
+        expect($(spans.get(0)).text()).toEqual("Label with");
+        expect($(spans.get(0)).attr("x")).toEqual("0");
+        expect($(spans.get(0)).attr("dy")).toEqual("0");
+        
+        expect($(spans.get(1)).text()).toEqual("many words");
+        expect($(spans.get(1)).attr("x")).toEqual("0");
+        expect($(spans.get(1)).attr("dy")).toEqual("20");
+      });
+      
+      it('should automatically cut labels with more then 20 characters', function() {
+        var node = [{
+          _id: 1,
+          _data: {
+            label: "The quick brown foxx is jumping lazy over the fence"
+          }
+        }],
+        textEl,
+        spans;
+        shaper.drawNodes(node);
+        textEl = $("svg .node text");
+        spans = $("tspan", textEl);
+        
+        expect($(spans.get(0)).text()).toEqual("The quick");
+        expect($(spans.get(1)).text()).toEqual("brown foxx...");
+      });
+
     });
 
     describe('using a function for labels', function () {