
I wanted a working Bezier curve connection for the nice Draw2d touch package; the one included doesn’t actually work, so I created this one:
- draw2d.layout.connection.NewBezierConnectionRouter = draw2d.layout.connection.ManhattanConnectionRouter.extend({
- NAME : "draw2d.layout.connection.NewBezierConnectionRouter",
- init : function()
- {
- this.cheapRouter = null;
- this.iteration = 5;
- },
- route : function(conn)
- {
- var start = conn.getStartPoint();
- var fromDir = this.getStartDirection(conn);
- var end = conn.getEndPoint();
- var toDir = this.getEndDirection(conn);
- var x1 = start.x;
- var y1 = start.y;
- var x4 = end.x;
- var y4 = end.y;
- var dx = Math.max(Math.abs(x1 - x4) / 2, 10);
- var dy = Math.max(Math.abs(y1 - y4) / 2, 10);
- var x2 = [x1, x1 + dx, x1, x1 - dx][fromDir].toFixed(3),
- y2 = [y1 - dy, y1, y1 + dy, y1 ][fromDir].toFixed(3),
- x3 = [x4, x4 + dx, x4, x4 - dx][toDir].toFixed(3),
- y3 = [y4 - dy, y4 , y4 + dy, y4 ][toDir].toFixed(3);
- var path = ["M", x1.toFixed(3), y1.toFixed(3), "C", x2, y2, x3, y3, x4.toFixed(3), y4.toFixed(3)].join(",");
- conn.svgPathString = path;
- }
- });
Note that I didn’t figure out yet how to add the contact points for the hit tests; the ones I add always seem to be off, so I have to read up on how to properly do that. Resulting in, for all ports: