GraphViewer: The node shaper is now able to append images as nodes. But still need a proper href

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

@@ -59,6 +59,22 @@
 *   },
 *   update: function(node)
 * }
+*
+* <image x="0" y="0" height="1140" width="1040" xlink:href="like_a_sir_original.svg"/>
+*
+* {
+*   shape: {
+*     type: NodeShaper.shapes.IMAGE,
+*     width: value || function(node),
+*     height: value || function(node),
+*   },
+*   actions: {
+*     "click": function(node),
+*     "drag": function(node)
+*   },
+*   update: function(node)
+* }
+*
 */
 function NodeShaper(parent, flags, idfunc) {
   "use strict";
@@ -254,6 +270,32 @@ function NodeShaper(parent, flags, idfunc) {
               .attr("ry", "8");
           };
           break;
+        case NodeShaper.shapes.IMAGE:
+          width = shape.width || 32;
+          height = shape.height || 32;
+          if (_.isFunction(width)) {
+            translateX = function(d) {
+              return -(width(d) / 2);
+            };
+          } else {
+            translateX = -(width / 2);
+          }
+          if (_.isFunction(height)) {
+            translateY = function(d) {
+              return -(height(d) / 2);
+            };
+          } else {
+            translateY = -(height / 2);
+          }
+          addShape = function(node) {
+            node.append("image") // Display nodes as rectangles
+              .attr("width", width) // Set width
+              .attr("height", height) // Set height
+              .attr("x", translateX)
+              .attr("y", translateY)
+              .attr("xlink:href", "8");
+          };
+          break;
         case undefined:
           break;
         default:
@@ -485,5 +527,6 @@ function NodeShaper(parent, flags, idfunc) {
 NodeShaper.shapes = Object.freeze({
   "NONE": 0,
   "CIRCLE": 1,
-  "RECT": 2
+  "RECT": 2,
+  "IMAGE": 3
 });

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

@@ -616,6 +616,120 @@
     
     });
     
+    describe('configured for image', function() {
+      var shaper;
+      
+      beforeEach(function () {
+        var config = {
+          shape: {
+            type: NodeShaper.shapes.IMAGE
+          }
+        };
+        shaper = new NodeShaper(d3.select("svg"), config);
+      });
+
+      it('should draw image elements', function () {
+        var node = [{_id: 1}];
+        shaper.drawNodes(node);
+        expect($("svg .node").length).toEqual(1);
+        expect($("svg image").length).toEqual(1);
+        expect($("svg .node image").length).toEqual(1);
+      });
+      
+      it('should be able to use a fixed size', function() {
+        shaper = new NodeShaper(d3.select("svg"),
+        {
+          shape: {
+            type: NodeShaper.shapes.IMAGE,
+            width: 15,
+            height: 10
+          }
+        });
+        var nodes = [
+          {_id: 1},
+          {_id: 2},
+          {_id: 3},
+          {_id: 4},
+          {_id: 5}
+        ];
+        shaper.drawNodes(nodes);
+        expect($("svg #1 image").attr("width")).toEqual("15");
+        expect($("svg #2 image").attr("width")).toEqual("15");
+        expect($("svg #3 image").attr("width")).toEqual("15");
+        expect($("svg #4 image").attr("width")).toEqual("15");
+        expect($("svg #5 image").attr("width")).toEqual("15");
+        
+        expect($("svg #1 image").attr("height")).toEqual("10");
+        expect($("svg #2 image").attr("height")).toEqual("10");
+        expect($("svg #3 image").attr("height")).toEqual("10");
+        expect($("svg #4 image").attr("height")).toEqual("10");
+        expect($("svg #5 image").attr("height")).toEqual("10");
+        
+      });
+      
+      it('should be able to use a function to determine the size', function() {
+        var widthFunction = function (node) {
+            return 10 + node._id;
+          },
+          heightFunction = function (node) {
+            return 10 - node._id;
+          },
+          nodes = [
+            {_id: 1},
+            {_id: 2},
+            {_id: 3},
+            {_id: 4},
+            {_id: 5}
+          ];
+          shaper = new NodeShaper(d3.select("svg"),
+          {
+            shape: {
+              type: NodeShaper.shapes.IMAGE,
+              width: widthFunction,
+              height: heightFunction
+            } 
+          });
+        shaper.drawNodes(nodes);
+        expect($("svg #1 image").attr("width")).toEqual("11");
+        expect($("svg #2 image").attr("width")).toEqual("12");
+        expect($("svg #3 image").attr("width")).toEqual("13");
+        expect($("svg #4 image").attr("width")).toEqual("14");
+        expect($("svg #5 image").attr("width")).toEqual("15");
+        
+        expect($("svg #1 image").attr("height")).toEqual("9");
+        expect($("svg #2 image").attr("height")).toEqual("8");
+        expect($("svg #3 image").attr("height")).toEqual("7");
+        expect($("svg #4 image").attr("height")).toEqual("6");
+        expect($("svg #5 image").attr("height")).toEqual("5");
+        
+      });
+    
+      it('should display each node exactly once if an event is added', function() {
+        var nodes = [
+          {_id: 1},
+          {_id: 2},
+          {_id: 3},
+          {_id: 4},
+          {_id: 5}
+        ];
+        shaper.drawNodes(nodes);
+        
+        expect($("svg image").length).toEqual(5);
+        shaper.changeTo({actions: {
+          click: function() {return 0;}
+        }});
+        expect($("svg image").length).toEqual(5);
+        shaper.changeTo({actions: {
+          click: function() {return 1;}
+        }});
+        expect($("svg image").length).toEqual(5);
+        shaper.changeTo({actions: {
+          click: function() {return 2;}
+        }});
+        expect($("svg image").length).toEqual(5);
+      });
+    });
+    
     describe('configured for rectangle', function () {
       var shaper;