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 = [