BOOM\! Got branch stack ordering down

src/constants.js

@@ -20,11 +20,12 @@ var GRAPHICS = {
   defaultAnimationTime: 300,
   rectFill: '#FF3A3A',
   rectStroke: '#FFF',
-  rectStrokeWidth: '3'
+  rectStrokeWidth: '3',
+  multiBranchY: 20,
 };
 
 /**
- * Graphics style
+ * Graphics style -- DEPRECATED
  */
 var graphics = {
   // colors
@@ -46,7 +47,7 @@ var graphics = {
   arrowFill: '#FFF',
   arrowStroke: '#000',
   arrowWidth: 4,
-  arrowHeadWidth: 5
+  arrowHeadWidth: 5,
 };
 
 function randomString(string_length) {

src/tree.js

@@ -32,11 +32,28 @@ var VisBranch = Backbone.Model.extend({
     return visNode.getScreenCoords();
   },
 
+  getBranchStackIndex: function() {
+    var myArray = this.getBranchStackArray();
+    return myArray.indexOf(this.get('branch').get('id'));
+  },
+
+  getBranchStackLength: function() {
+    return this.getBranchStackArray().length;
+  },
+
+  getBranchStackArray: function() {
+    return gitVisuals.branchStackMap[this.get('branch').get('target').get('id')];
+  },
+
   getTextPosition: function() {
     var pos = this.getCommitPosition();
+
+    // then order yourself accordingly. we use alphabetical sorting
+    // so everything is independent
+    var myPos = this.getBranchStackIndex();
     return {
       x: pos.x + this.get('offsetX'),
-      y: pos.y + this.get('offsetY')
+      y: pos.y + myPos * GRAPHICS.multiBranchY + this.get('offsetY')
     };
   },
 
@@ -51,6 +68,7 @@ var VisBranch = Backbone.Model.extend({
   },
 
   getArrowPath: function() {
+    // should make these util functions...
     var offset2d = function(pos, x, y) {
       return {
         x: pos.x + x,
@@ -62,7 +80,7 @@ var VisBranch = Backbone.Model.extend({
     };
 
 
-    // worst variable names evar
+    // worst variable names evar!!! warning
     // start at rect corner
     var overlap = 5;
     var startPos = offset2d(this.getRectPosition(), overlap, this.get('arrowInnerMargin'));
@@ -75,7 +93,7 @@ var VisBranch = Backbone.Model.extend({
       -this.get('arrowLength') * this.get('arrowRatio'), 0);
 
     // get the next three points in backwards order
-    var end = offset2d(this.getRectPosition(), overlap, this.getRectSize().h - this.get('arrowInnerMargin'));
+    var end = offset2d(this.getRectPosition(), overlap, this.getSingleRectSize().h - this.get('arrowInnerMargin'));
     var beforeEnd = offset2d(end, -this.get('arrowLength'), 0);
     var beforeBeforeEnd = offset2d(beforeEnd, 0, this.get('arrowEdgeHeight'));
 
@@ -98,9 +116,8 @@ var VisBranch = Backbone.Model.extend({
     };
   },
 
-  getRectSize: function() {
+  getSingleRectSize: function() {
     var textSize = this.getTextSize();
-    // enforce padding
     var vPad = this.get('vPad');
     var hPad = this.get('hPad');
     return {
@@ -109,6 +126,20 @@ var VisBranch = Backbone.Model.extend({
     };
   },
 
+  getRectSize: function() {
+    var textSize = this.getTextSize();
+    // enforce padding
+    var vPad = this.get('vPad');
+    var hPad = this.get('hPad');
+
+    // number of other branch names we are housing
+    var totalNum = this.getBranchStackLength();
+    return {
+      w: textSize.w + vPad * 2,
+      h: textSize.h * totalNum + hPad * 2
+    };
+  },
+
   getName: function() {
     var name = this.get('branch').get('id');
     var selected = gitEngine.HEAD.get('target').get('id');
@@ -117,6 +148,10 @@ var VisBranch = Backbone.Model.extend({
     return name + add;
   },
 
+  textToFront: function() {
+    this.get('text').toFront();
+  },
+
   genGraphics: function(paper) {
     var textPos = this.getTextPosition();
 
@@ -153,6 +188,7 @@ var VisBranch = Backbone.Model.extend({
   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()
@@ -169,12 +205,14 @@ var VisBranch = Backbone.Model.extend({
       x: rectPos.x,
       y: rectPos.y,
       width: rectSize.w,
-      height: rectSize.h
+      height: rectSize.h,
+      opacity: masterOpacity,
     }, s, e);
 
     var arrowPath = this.getArrowPath();
     this.get('arrow').stop().animate({
-      path: arrowPath
+      path: arrowPath,
+      opacity: masterOpacity
     }, s, e);
   }
 });

src/visuals.js

@@ -8,6 +8,7 @@ function GitVisuals(options) {
 
   this.commitMap = {};
   this.rootCommit = null;
+  this.branchStackMap = {};
 
   this.paperReady = false;
   this.paperWidth = null;
@@ -95,6 +96,21 @@ GitVisuals.prototype.calculateTreeCoords = function() {
 
   this.calcDepth();
   this.calcWidth();
+
+  this.calcBranchStacks();
+};
+
+GitVisuals.prototype.calcBranchStacks = function() {
+  var branches = gitEngine.getBranches();
+  var map = {};
+  _.each(branches, function(branch) {
+    var thisId = branch.target.get('id');
+
+    map[thisId] = map[thisId] || [];
+    map[thisId].push(branch.id);
+    map[thisId].sort();
+  });
+  this.branchStackMap = map;
 };
 
 GitVisuals.prototype.calcWidth = function() {
@@ -195,6 +211,7 @@ GitVisuals.prototype.addBranch = function(branch) {
   this.visBranchCollection.add(visBranch);
   if (this.paperReady) {
     visBranch.genGraphics(paper);
+    this.zIndexReflow();
   }
 };
 
@@ -287,8 +304,16 @@ GitVisuals.prototype.collectionChanged = function() {
   // redo stuff
 };
 
+GitVisuals.prototype.zIndexReflow = function() {
+  this.visBranchCollection.each(function(vBranch) {
+    vBranch.textToFront();
+  });
+};
+
 GitVisuals.prototype.drawTreeFirstTime = function() {
   this.paperReady = true;
+  this.calculateTreeCoords();
+
   _.each(this.visNodeMap, function(visNode) {
     visNode.genGraphics(paper);
   }, this);
@@ -301,7 +326,7 @@ GitVisuals.prototype.drawTreeFirstTime = function() {
     visBranch.genGraphics(paper);
   }, this);
 
-  this.refreshTreeHarsh();
+  this.zIndexReflow();
 };
 
 

todo.txt

@@ -11,11 +11,11 @@ animation factory? stuff like:
 -clearHighlightsAllNodes
 
 
-
 ALSO other big things:
 
 - Text on commit nodes
 - Division in their rings based on how many / what branches they are part of
+- Color on branch edges??
 
 - Commits go transparent when no longer downstream of anything (also their weights are adjusted? and sent to back?)