GraphViewer: Changed rendering of edges, they are now translated and rotated instead of giving x1/y1 and x2/y2. This works much better for labels

html/admin/js/graphViewer/graph/edgeShaper.js

@@ -130,29 +130,34 @@ function EdgeShaper(parent, flags, idfunc) {
       addEvents(line, handle);
     },
     
+    getCorner = function(s, t) {
+      return Math.atan2(t.y - s.y, t.x - s.x) * 180 / Math.PI;
+    },
+    
+    getDistance = function(s, t) {
+      return Math.sqrt(
+        (t.y - s.y)
+        * (t.y - s.y)
+        + (t.x - s.x)
+        * (t.x - s.x)
+      );
+    },
+    
     updateEdges = function () {
-      var edges = self.parent.selectAll(".link line")
+      var edges = self.parent.selectAll(".link")
         // Set source x coordinate for edge.
-        .attr("x1", function(d) {
-            return d.source.x; 
-        })
-        // Set source y coordinate for edge.
-        .attr("y1", function(d) {
-            return d.source.y; 
-        })
-        // Set target x coordinate for edge.
-        .attr("x2", function(d) {
-            return d.target.x; 
-        })
-        // Set target y coordinate for edge.
-        .attr("y2", function(d) {
-            return d.target.y;
+        .attr("transform", function(d) {
+          return "translate("
+            + d.source.x + ", "
+            + d.source.y + ")"
+            + "rotate("
+            + getCorner(d.source, d.target)
+            + ")";
         });
-        /*
-        edges.attr("transform", function(d) {
-          return "translate(" + d.x + "," + d.y + ")"; 
-        });
-        */
+      edges.select("line")
+          .attr("x2", function(d) {
+            return getDistance(d.source, d.target);
+          });
       addUpdate(edges);
     },
     
@@ -203,6 +208,14 @@ function EdgeShaper(parent, flags, idfunc) {
             });
         };
       }
+      addUpdate = function (edges) {
+        edges.select("text")
+          .attr("transform", function(d) {
+            return "translate("
+              + getDistance(d.source, d.target) / 2
+              + ", -3)";
+          });
+      };
     },
     
     parseActionFlag = function (actions) {
@@ -247,10 +260,13 @@ function EdgeShaper(parent, flags, idfunc) {
   self.changeTo = function(config) {
     parseConfig(config);
     reshapeEdges();
+    updateEdges();
   };
   
   self.drawEdges = function (edges) {
-    return shapeEdges(edges);
+    var res = shapeEdges(edges);
+    updateEdges();
+    return res;
   };
   
   self.updateEdges = function () {

html/admin/js/graphViewer/jasmine_test/specEdgeShaper/edgeShaperSpec.js

@@ -185,6 +185,72 @@
       expect($("svg defs #arrow").attr("orient")).toEqual("auto");
     });
     
+    it('should position the edges correctly', function() {
+      var center = {
+        _id: 1,
+        x: 20,
+        y: 20
+      },
+      NE = {
+        _id: 2,
+        x: 30,
+        y: 10
+      },
+      SE = {
+        _id: 3,
+        x: 40,
+        y: 30
+      },
+      SW = {
+        _id: 4,
+        x: 10,
+        y: 40
+      },
+      NW = {
+        _id: 5,
+        x: 0,
+        y: 0
+      },
+      edges = [
+        {
+          source: center,
+          target: NE
+        },
+        {
+          source: center,
+          target: SE
+        },
+        {
+          source: center,
+          target: SW
+        },
+        {
+          source: center,
+          target: NW
+        }
+      ],
+      shaper = new EdgeShaper(d3.select("svg"), {
+        shape: {
+          type: EdgeShaper.shapes.ARROW
+        }
+      });
+      shaper.drawEdges(edges);
+      
+      //Check Position and rotation
+      expect($("#1-2").attr("transform")).toEqual("translate(20, 20)rotate(-45)");
+      expect($("#1-3").attr("transform")).toEqual("translate(20, 20)rotate(26.56505117707799)");
+      expect($("#1-4").attr("transform")).toEqual("translate(20, 20)rotate(116.56505117707799)");
+      expect($("#1-5").attr("transform")).toEqual("translate(20, 20)rotate(-135)");
+      
+      //Check length of line
+      expect($("#1-2 line").attr("x2")).toEqual("14.142135623730951");
+      expect($("#1-3 line").attr("x2")).toEqual("22.360679774997898");
+      expect($("#1-4 line").attr("x2")).toEqual("22.360679774997898");
+      expect($("#1-5 line").attr("x2")).toEqual("28.284271247461902");
+    });
+    
+    
+    
     describe('configured for arrow shape', function() {
       var shaper;
       
@@ -356,6 +422,31 @@
         expect($("#4-1 text")[0].textContent).toEqual("fourth");
       });
       
+      it('should display the label at the correct position', function() {
+        var nodes = [
+          {
+            _id: 1,
+            x: 20,
+            y: 20
+          },
+          {
+            _id: 2,
+            x: 100,
+            y: 20
+          }
+        ],
+        edges = [
+          {
+            "source": nodes[0],
+            "target": nodes[1],
+            "label": "first"
+          }
+        ];
+        shaper.drawEdges(edges);
+        
+        expect($("#1-2 text").attr("transform")).toEqual("translate(40, -3)");
+      });
+      
       it('should ignore other attributes', function() {
         var nodes = [{"_id": 1}, {"_id": 2}, {"_id": 3}, {"_id": 4}],
         edges = [