Adding margins to the connector

One of the tasks from this week’s review meeting was to improve the interface of the connector from a simple line to a line with margins in order to make it more visible even with harsh angles.

Basically, I had to convert this,

to this.

Earlier, the connector was simply an svg line where I update the x1, y1, x2 and y2 properties directly using d3.selector.attr. In the new requirement, an svg polyline was the solution where the points had to be updated instead of the previous x and y coordinates.

A polyline with 3 segments needs 4 pairs of coordinates. I already had 2 from the line and a simple calculation was used to derive the remaining 2 pairs of coordinates.

My approach was to use svg line during anchor-drag and replace the line with polyline during anchor-drop.

With this approach, the next problem was updating the connector positions during container drag. In order to solve it, I introduced position values(x1, x2, y1, y2) to the "Connector" model and a method "setPoints" which will set the "points" of the polyline using the values and the above calculation.

And the problem was solved by replacing the previous method that updated the line's x2, y2 attributes, by the new setPoints method.