Working Draw2D touch Bezier curve connector

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:

javascript

  1. draw2d.layout.connection.NewBezierConnectionRouter = draw2d.layout.connection.ManhattanConnectionRouter.extend({
  2.                 NAME : "draw2d.layout.connection.NewBezierConnectionRouter",
  3.                 init : function()
  4.                 {
  5.                     this.cheapRouter = null;
  6.                     this.iteration = 5;
  7.                 },
  8.                 route : function(conn)
  9.                 {
  10.  
  11.                     var start  = conn.getStartPoint();
  12.                     var fromDir = this.getStartDirection(conn);
  13.                    
  14.                     var end  = conn.getEndPoint();
  15.                     var toDir = this.getEndDirection(conn);
  16.  
  17.                     var x1 = start.x;
  18.                     var y1 = start.y;
  19.  
  20.                     var x4 = end.x;
  21.                     var y4 = end.y;
  22.                    
  23.                     var dx = Math.max(Math.abs(x1 - x4) / 2, 10);
  24.                     var dy = Math.max(Math.abs(y1 - y4) / 2, 10);
  25.                            
  26.                     var x2 = [x1,      x1 + dx, x1,      x1 - dx][fromDir].toFixed(3),
  27.                         y2 = [y1 - dy, y1,      y1 + dy, y1     ][fromDir].toFixed(3),
  28.                         x3 = [x4,      x4 + dx, x4,      x4 - dx][toDir].toFixed(3),
  29.                         y3 = [y4 - dy, y4     , y4 + dy, y4     ][toDir].toFixed(3);
  30.                
  31.                     var path = ["M", x1.toFixed(3), y1.toFixed(3), "C", x2, y2, x3, y3, x4.toFixed(3), y4.toFixed(3)].join(",");
  32.                
  33.                     conn.svgPathString = path;
  34.                 }
  35.  
  36.             });

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:

Be the first to leave a comment. Don’t be shy.

Join the Discussion

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>