Use curvy connection lines!
authorBenjamin Smedberg <benjamin@smedbergs.us>
Mon, 14 Apr 2008 16:15:40 -0400
changeset 23 d2b736ff622ba7a4b05a5fb254a3e819ef34a53c
parent 22 eb77b9602f5f5f4281ef0673f92667790eac520c
child 24 76f6d3a9078a6aaa08d10d0fbf3fd9e0eaba9353
push id2
push userbsmedberg@mozilla.com
push dateMon, 14 Apr 2008 21:07:23 +0000
Use curvy connection lines!
www/navigate.js
--- a/www/navigate.js
+++ b/www/navigate.js
@@ -479,37 +479,28 @@ function redraw()
     }
     cx.restore();
   }
 
   function drawLine(x1, y1, x2, y2)
   {
     cx.beginPath();
     cx.moveTo(x1, y1);
-    cx.lineTo(x2, y2);
+    cx.bezierCurveTo(x1, y1 + VSPACING / 2,
+                     x2, y2 - VSPACING,
+                     x2, y2);
     cx.stroke();
 
     /* draw arrow here! */
-    cx.save();
-    let rise = y2 - y1;
-    let run = x2 - x1;
 
-    let angle = Math.atan((y2 - y1) / (x2 - x1));
-    if (run < 0)
-      angle += Math.PI;
-
-    cx.translate(x2, y2);
-    cx.rotate(angle);
     cx.beginPath();
-    cx.moveTo(-8, -4);
-    cx.lineTo(0, 0);
-    cx.lineTo(-8, 4);
+    cx.moveTo(x2 + 4, y2 - 4);
+    cx.lineTo(x2 - 4, y2 - 4);
+    cx.lineTo(x2, y2);
     cx.fill();
-
-    cx.restore();
   }
 
   function drawArrows(r)
   {
     /* draw all arrows from this rev */
     for each (let child in r.children) {
       cx.save();
       let childx, childy;