diff --git a/html/admin/js/graphViewer/graph/edgeShaper.js b/html/admin/js/graphViewer/graph/edgeShaper.js index c451f5c0f3..9e53709f4e 100644 --- a/html/admin/js/graphViewer/graph/edgeShaper.js +++ b/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 () { diff --git a/html/admin/js/graphViewer/jasmine_test/specEdgeShaper/edgeShaperSpec.js b/html/admin/js/graphViewer/jasmine_test/specEdgeShaper/edgeShaperSpec.js index cc7deb6237..1fcf59ac14 100644 --- a/html/admin/js/graphViewer/jasmine_test/specEdgeShaper/edgeShaperSpec.js +++ b/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 = [