z index reflow better

src/tree.js

@@ -95,8 +95,8 @@ var VisBranch = Backbone.Model.extend({
     // head side point
     var next2 = offset2d(next, 0, -this.get('arrowEdgeHeight'));
     // head point
-    var next3 = offset2d(this.getTextPosition(),
-      -this.get('arrowLength') * this.get('arrowRatio'), 0);
+    var next3 = offset2d(this.getCommitPosition(),
+      3, 0);
 
     // get the next three points in backwards order
     var end = offset2d(this.getRectPosition(), overlap, this.getSingleRectSize().h - this.get('arrowInnerMargin'));
@@ -125,10 +125,7 @@ var VisBranch = Backbone.Model.extend({
       maxWidth = Math.max(maxWidth, getTextWidth(
         branch.obj.get('visBranch')
       ));
-      console.log('this branch', branch.id, 'is selected', branch.selected);
-      console.log('and i just calculated its width', getTextWidth(branch.obj.get('visBranch')));
     });
-    console.log('I am ****', this.getName(), ' and got max width of', maxWidth);
 
     return {
       w: maxWidth,
@@ -168,6 +165,11 @@ var VisBranch = Backbone.Model.extend({
     return name + add;
   },
 
+  nonTextToFront: function() {
+    this.get('arrow').toFront();
+    this.get('rect').toFront();
+  },
+
   textToFront: function() {
     this.get('text').toFront();
   },
@@ -206,15 +208,18 @@ var VisBranch = Backbone.Model.extend({
     text.toFront();
   },
 
+  updateName: function() {
+    this.get('text').attr({
+      text: this.getName()
+    });
+  },
+
   animateUpdatedPos: function(speed, easing) {
     var s = speed !== undefined ? speed : this.get('animationSpeed');
     var e = easing || this.get('animationEasing');
     var masterOpacity = this.getBranchStackIndex() == 0 ? 1 : 0.0;
 
-    this.get('text').attr({
-      text: this.getName()
-    });
-
+    this.updateName();
     var textPos = this.getTextPosition();
     this.get('text').stop().animate({
       x: textPos.x,
@@ -279,6 +284,10 @@ var VisNode = Backbone.Model.extend({
     pos.y = this.get('depth') * depthIncrement;
   },
 
+  toFront: function() {
+    this.get('circle').toFront();
+  },
+
   animateUpdatedPosition: function(speed, easing) {
     var pos = this.getScreenCoords();
     this.get('circle').stop().animate({

src/visuals.js

@@ -72,7 +72,9 @@ GitVisuals.prototype.toScreenCoords = function(pos) {
  **************************************/
 
 GitVisuals.prototype.refreshTree = function() {
+  // this method can only be called after graphics are rendered
   this.calculateTreeCoords();
+  this.calculateGraphicsCoords();
 
   this.animateAll();
 };
@@ -84,12 +86,15 @@ GitVisuals.prototype.refreshTreeHarsh = function() {
 };
 
 GitVisuals.prototype.animateAll = function(speed) {
+  this.zIndexReflow();
+
   this.animateEdges(speed);
   this.animateNodePositions(speed);
   this.animateRefs(speed);
 };
 
 GitVisuals.prototype.calculateTreeCoords = function() {
+  // this method can only contain things that dont rely on graphics
   if (!this.rootCommit) {
     throw new Error('grr, no root commit!');
   }
@@ -100,6 +105,12 @@ GitVisuals.prototype.calculateTreeCoords = function() {
   this.calcBranchStacks();
 };
 
+GitVisuals.prototype.calculateGraphicsCoords = function() {
+  this.visBranchCollection.each(function(visBranch) {
+    visBranch.updateName();
+  });
+};
+
 GitVisuals.prototype.calcBranchStacks = function() {
   var branches = gitEngine.getBranches();
   var map = {};
@@ -313,6 +324,14 @@ GitVisuals.prototype.collectionChanged = function() {
 };
 
 GitVisuals.prototype.zIndexReflow = function() {
+  _.each(this.visNodeMap, function(visNode) {
+    visNode.toFront();
+  });
+
+  this.visBranchCollection.each(function(vBranch) {
+    vBranch.nonTextToFront();
+  });
+
   this.visBranchCollection.each(function(vBranch) {
     vBranch.textToFront();
   });