### A Guide to Diagram – Part 6 – Advanced Links

#### By Duncan Mills on Jul 07, 2014

- Label rotation
- Curved links

## Label Rotation

**setLabelRotationAngle()**(note that a node has these same APIs as well) . This API takes a rotation angle in radians. The rotation itself will take place around the point defined by another API:

**setLabelRotationPoint()**. This takes an x,y coordinate in the form of a DvtDiagramPoint object and defines the rotation point in the context of the label boundaries, so 0,0 for example is the top left corner of the label. Therefore you use setLabelPosition() API to define the gross position of the label on the diagram and then the other 2 APIs to control the angle and point of rotation.

linkLabelXPos = turn3.x - (link.getLabelBounds().h + 5); linkLabelYPos = linkStartPos.y + ((linkEndPos.y - linkStartPos.y) / 2) + (link.getLabelBounds().w / 2); // rotate to 270 degrees link.setLabelRotationAngle(270 * (Math.PI / 180)); ... link.setLabelPosition(new DvtDiagramPoint(linkLabelXPos, linkLabelYPos));

## Curved and Complex Links

link.setPoints(["M",10,144,"C",-97,247,-97,-107,10,-4]);

Prefix | Arguments | Purpose |
---|---|---|

M | A single pair of coordinates. e.g ["M",0,0] |
Defines the start point of a complex curve, in this case at position x=0,y=0 |

L | A single pair of coordinates. e.g [M,0,0,"L",10,20] |
Draws a straight line from the current location (x=0, y=0) to the supplied coordinates, in this case x=10,y=20 |

Q | Takes one pair of coordinates for a control point, one pair of coordinates as an end point. e.g [M,0,0,"Q",40,40,10,20] |
Draws a quadratic Bezier curve from the current location (x=0, y=0) to the second pair coordinates, in this case x=10,y=20, using the control point x=40,y=40 to shape the curve |

C | Takes two pairs of coordinates for control points, one pair of coordinates as an end point. e.g [M,0,0,"C",75,80,125,20,150,50] |
Draws a cubic Bezier curve from the current location (x=0, y=0) to the third pair coordinates, in this case x=150,y=50, using two control points x=72,y=80 & x=125,y=20 to shape the curve |

*Note that the SVG arc element (A) is not currently supported.*

In this case the link path is made up of a mix of 8 elements defining various line segments and cubic Bezier curves, so although it looks complicated it's still composed of only the elements described above. Logically, the array reads like this:

["M", x, y, // Start point "L", x, y, // Straight line down for a bit "C", c1x, c1y, c2x, c2y, x, y, // Curve out towards Gamma "L", x, y, // Straight line horizontally towards the midpoint "C" , c1x, c1y, c2x, c2y, x, y, //The "hop" "L", x, y, // Straight line horizontally away from the midpoint "C" , c1x, c1y, c2x, c2y, x, y, //return curve "L", x, y] // Straight line to the arrow endpoint

## A Final Note about Calculated Positions

You will note from the example above that some of the numbers are negative, and indeed, if you have been following through with the example, and debugging to examine the actual values, you'll have noticed that many of the positions end up with negative values. Don't worry about this! Everything, as they say, is relative, and the diagram layout will resolve itself correctly. You can imagine that after you have positioned everything relative to an arbitary 0,0 origin, the diagram layout will re-base itself anyway and handle that.