nice hue blending and cursor focus blur

src/commandViews.js

@@ -18,7 +18,11 @@ var CommandPromptView = Backbone.View.extend({
       this.blur();
     }, this));
 
-    // hacky timeout focus TODO
+    events.on('processCommandFromEvent', _.bind(
+      this.addToCollection, this
+    ));
+
+    // hacky timeout focus
     setTimeout(_.bind(function() {
       this.focus();
     }, this), 100);
@@ -26,7 +30,9 @@ var CommandPromptView = Backbone.View.extend({
 
   events: {
     'keydown #commandTextField': 'onKey',
-    'keyup #commandTextField': 'onKeyUp'
+    'keyup #commandTextField': 'onKeyUp',
+    'blur #commandTextField': 'hideCursor',
+    'focus #commandTextField': 'showCursor'
   },
 
   blur: function() {
@@ -35,8 +41,19 @@ var CommandPromptView = Backbone.View.extend({
 
   focus: function() {
     this.$('#commandTextField').focus();
-    // we now our cursor is there so...
+    this.showCursor();
-    $(this.commandCursor).toggleClass('shown', true);
+  },
+
+  hideCursor: function() {
+    this.toggleCursor(false); 
+  },
+
+  showCursor: function() {
+    this.toggleCursor(true);
+  },
+
+  toggleCursor: function(state) {
+    $(this.commandCursor).toggleClass('shown', state);
   },
 
   onKey: function(e) {

src/git.js

@@ -693,9 +693,9 @@ GitEngine.prototype.merge = function(targetSource, currentLocation) {
   if (this.isUpstreamOf(currentLocation, targetSource)) {
     // just set the target of this current location to the source
     this.setLocationTarget(currentLocation, this.getCommitFromRef(targetSource));
-    throw new CommandResult({
+    // get fresh animation to happen
-      msg: 'Fast-forwarding...'
+    this.command.setResult('Fast-forwarding...');
-    });
+    return;
   }
 
   // now the part of making a merge commit
@@ -882,6 +882,26 @@ GitEngine.prototype.dispatch = function(command, callback) {
   this.animationQueue.start();
 };
 
+GitEngine.prototype.showStarter = function() {
+  if (this.generalArgs.length > 1) {
+    throw new GitError({
+      msg: 'git show with more than 1 argument does not make sense'
+    });
+  }
+  if (this.generalArgs.length == 0) {
+    this.generalArgs.push('HEAD');
+  }
+  this.show(this.generalArgs[0]);
+};
+
+GitEngine.prototype.show = function(ref) {
+  var commit = this.getCommitFromRef(ref);
+
+  throw new CommandResult({
+    msg: commit.getShowEntry()
+  });
+};
+
 GitEngine.prototype.logStarter = function() {
   if (this.generalArgs.length > 1) {
     throw new GitError({
@@ -1032,6 +1052,19 @@ var Commit = Backbone.Model.extend({
     ].join('\n' ) + '\n';
   },
 
+  getShowEntry: function() {
+    // same deal as above, show log entry and some fake changes
+    return [
+      this.getLogEntry(),
+      'diff --git a/bigGameResults.html b/bigGameResults.html',
+      '--- bigGameResults.html',
+      '+++ bigGameResults.html',
+      '@@ 13,27 @@ Winner, Score',
+      '- Stanfurd, 14-7',
+      '+ Cal, 21-14',
+    ].join('\n') + '\n';
+  },
+
   validateAtInit: function() {
     if (!this.get('id')) {
       this.set('id', uniqueId('C'));

src/tree.js

@@ -37,6 +37,8 @@ var VisBranch = Backbone.Model.extend({
 
   initialize: function() {
     this.validateAtInit();
+    this.get('branch').set('visBranch', this);
+
     var id = this.get('branch').get('id');
 
     if (id == 'HEAD') {
@@ -214,7 +216,7 @@ var VisBranch = Backbone.Model.extend({
     var totalNum = this.getBranchStackLength();
     return {
       w: textSize.w + vPad * 2,
-      h: textSize.h * totalNum + hPad * 2
+      h: textSize.h * totalNum * 1.1 + hPad * 2
     };
   },
 
@@ -236,9 +238,33 @@ var VisBranch = Backbone.Model.extend({
   },
 
   getFill: function() {
-    // in the easy case, just return your own fill
+    // in the easy case, just return your own fill if you are:
-    // TODO check
+    // - the HEAD ref
-    return this.get('fill');
+    // - by yourself (length of 1)
+    // - part of a multi branch, but your thing is hidden
+    if (this.get('isHead') ||
+        this.getBranchStackLength() == 1 ||
+        this.getBranchStackIndex() != 0) {
+      return this.get('fill');
+    }
+
+    // woof. now it's hard, we need to blend hues...
+    var myArray = this.getBranchStackArray();
+    var hueStrings = [];
+    _.each(this.getBranchStackArray(), function(branchWrapper) {
+      var fill = branchWrapper.obj.get('visBranch').get('fill');
+
+      if (fill.slice(0,3) !== 'hsb') {
+        // crap. convert to a hsb
+        var color = Raphael.color(fill);
+        fill = 'hsb(' + String(color.h) + ',' + String(color.s);
+        fill = fill + ',' + String(color.l) + ')';
+      }
+
+      hueStrings.push(fill);
+    });
+
+    return blendHueStrings(hueStrings);
   },
 
   genGraphics: function(paper) {
@@ -320,11 +346,13 @@ var VisBranch = Backbone.Model.extend({
         y: rectPos.y,
         width: rectSize.w,
         height: rectSize.h,
-        opacity: nonTextOpacity
+        opacity: nonTextOpacity,
+        fill: this.getFill(),
       },
       arrow: {
         path: arrowPath,
-        opacity: nonTextOpacity
+        opacity: nonTextOpacity,
+        fill: this.getFill()
       }
     };
   },
@@ -537,6 +565,15 @@ var VisNode = Backbone.Model.extend({
     }
   },
 
+  attachClickHandlers: function() {
+    var commandStr = 'git show ' + this.get('commit').get('id');
+    _.each([this.get('circle'), this.get('text')], function(rObj) {
+      rObj.click(function() {
+        events.trigger('processCommandFromEvent', commandStr);
+      });
+    });
+  },
+
   genGraphics: function(paper) {
     var pos = this.getScreenCoords();
     var textPos = this.getTextScreenCoords();
@@ -554,6 +591,8 @@ var VisNode = Backbone.Model.extend({
 
     this.set('circle', circle);
     this.set('text', text);
+
+    this.attachClickHandlers();
   }
 });
 

src/visuals.js

@@ -283,7 +283,6 @@ GitVisuals.prototype.addBranch = function(branch) {
   var visBranch = new VisBranch({
     branch: branch
   });
-  branch.set('visBranch', visBranch);
 
   this.visBranchCollection.add(visBranch);
   if (this.paperReady) {
@@ -424,6 +423,41 @@ GitVisuals.prototype.drawTreeFirstTime = function() {
 /************************
  * Random util functions, adapted from liquidGraph
  ***********************/
+function blendHueStrings(hueStrings) {
+  // assumes a sat of 0.7 and brightness of 1
+
+  var x = 0;
+  var y = 0;
+  var totalSat = 0;
+  var totalBright = 0;
+  var length = hueStrings.length;
+
+  _.each(hueStrings, function(hueString) {
+    var exploded = hueString.split('(')[1];
+    exploded = exploded.split(')')[0];
+    exploded = exploded.split(',');
+
+    totalSat += parseFloat(exploded[1]);
+    totalBright += parseFloat(exploded[2]);
+    var hue = parseFloat(exploded[0]);
+
+    var angle = hue * Math.PI * 2;
+    x += Math.cos(angle);
+    y += Math.sin(angle);
+  });
+
+  x = x / length;
+  y = y / length;
+  totalSat = totalSat / length;
+  totalBright = totalBright / length;
+
+  var hue = Math.atan2(y, x) / (Math.PI * 2);
+  if (hue < 0) {
+    hue = hue + 1;
+  }
+  return 'hsb(' + String(hue) + ',' + String(totalSat) + ',' + String(totalBright) + ')';
+}
+
 function constructPathStringFromCoords(points,wantsToClose) {
     var pathString = "M" + String(Math.round(points[0].x)) + "," + String(Math.round(points[0].y));
     var lp = points[0];

todo.txt

@@ -12,7 +12,7 @@ ALSO other big things:
 - Color on branch edges??
 
 Big Graphic things:
-~~~~~~~~~~~~~~~~~~~~~~~~~~
+~~~~~~~~~~~~~~~~~~~~~~~~~
 - colored branch edges. basically 
 - node rings, really think we should do it
 - When you are rebasing and you hit the bottom, all the nodes go in the wrong spot...
@@ -28,8 +28,6 @@ Medium things:
 
 Small things to implement:
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-- Git show
-- Git show when you click on a node (or the text technically)
 
 
 Bugs to fix: