OMG I AM RIGHT FUCKING HERE SO CLOSE

build/bundle.js

@@ -4491,30 +4491,44 @@ var Sandbox = Backbone.View.extend({
   initialize: function(options) {
     options = options || {};
 
+    this.initVisualization(options);
+    this.initCommandCollection(options);
+    this.initParseWaterfall(options);
+    this.initGitShim(options);
+
+    if (!options.wait) {
+      this.takeControl();
+    }
+  },
+
+  initVisualization: function(options) {
     this.mainVis = new Visualization({
       el: options.el || $('#canvasWrapper')[0]
     });
+  },
 
+  initCommandCollection: function(options) {
     // don't add it to just any collection -- adding to the
     // CommandUI collection will put in history
     this.commandCollection = Main.getCommandUI().commandCollection;
+  },
 
+  initParseWaterfall: function(options) {
     this.parseWaterfall = new ParseWaterfall();
-    /*
-    this.gitShim = new GitShim({
-      beforeCB: function() { console.log('before'); },
-      afterCB: function() { console.log('after'); }
-    });*/
-
     /* DISBALED MAP example!!!
     this.parseWaterfall.addFirst(
       'instantWaterfall',
       new DisabledMap().getInstantCommands()
     );*/
+  },
 
-    if (!options.wait) {
+  initGitShim: function(options) {
-      this.takeControl();
+    /*
-    }
+    this.gitShim = new GitShim({
+      beforeCB: function() { console.log('before'); },
+      afterCB: function() { console.log('after'); },
+      afterDeferHandler: function(deferred) { deferred.resolve(); },
+    });*/
   },
 
   takeControl: function() {
@@ -4524,17 +4538,21 @@ var Sandbox = Backbone.View.extend({
     // we obviously take care of sandbox commands
     Main.getEventBaton().stealBaton('processSandboxCommand', this.processSandboxCommand, this);
 
-    // and our git shim
+    this.insertGitShim();
-    // TODO HACKY needs to be AFTER PAPER INITIALIZE dropped down from visualization wtf
+  },
+
+  insertGitShim: function() {
+    // and our git shim goes in after the git engine is ready so it doesn't steal the baton
+    // too early
     if (this.gitShim) {
-      setTimeout(_.bind(function() {
+      this.mainVis.customEvents.on('gitEngineReady', function() {
-        this.gitShim.insertShim();
+          this.gitShim.insertShim();
-      }, this), 1000);
+      },this);
     }
   },
 
   commandSubmitted: function(value) {
-    // allow other things to see this command
+    // allow other things to see this command (aka command history on terminal)
     Main.getEvents().trigger('commandSubmittedPassive', value);
 
     util.splitTextCommand(value, function(command) {
@@ -4569,6 +4587,7 @@ var Sandbox = Backbone.View.extend({
 
 exports.Sandbox = Sandbox;
 
+
 });
 
 require.define("/src/js/app/index.js",function(require,module,exports,__dirname,__filename,process,global){var _ = require('underscore');
@@ -4652,7 +4671,7 @@ var init = function() {
   /* hacky demo functionality */
   if (/\?demo/.test(window.location.href)) {
     setTimeout(function() {
-      events.trigger('commandSubmitted', "gc; git checkout HEAD~1; git commit; git checkout -b bugFix; gc; gc; git rebase -i HEAD~2; git rebase master; git checkout master; gc; gc; git merge bugFix");
+      eventBaton.trigger('commandSubmitted', "gc; git checkout HEAD~1; git commit; git checkout -b bugFix; gc; gc; git rebase -i HEAD~2; git rebase master; git checkout master; gc; gc; git merge bugFix");
     }, 500);
   }
 };
@@ -4974,6 +4993,7 @@ var ModalView = Backbone.View.extend({
   getAnimationTime: function() { return 700; },
 
   initialize: function(options) {
+    this.shown = false;
     this.render();
     this.stealKeyboard();
   },
@@ -4982,6 +5002,7 @@ var ModalView = Backbone.View.extend({
     // add ourselves to the DOM
     this.$el.html(this.template({}));
     $('body').append(this.el);
+    // this doesnt necessarily show us though...
   },
 
   stealKeyboard: function() {
@@ -5022,16 +5043,21 @@ var ModalView = Backbone.View.extend({
 
   show: function() {
     this.toggleZ(true);
-    this.toggleShow(true);
+    // on reflow, change our class to animate. for whatever
+    // reason if this is done immediately, chrome might combine
+    // the two changes and lose the ability to animate and it looks bad.
+    process.nextTick(_.bind(function() {
+      this.toggleShow(true);
+    }, this));
   },
 
   hide: function() {
     this.toggleShow(false);
-    // TODO -- do this in a way where it wont
-    // bork if we call it back down. these views should
-    // be one-off though so...
     setTimeout(_.bind(function() {
-      this.toggleZ(false);
+      // if we are still hidden...
+      if (!this.shown) {
+        this.toggleZ(false);
+      }
     }, this), this.getAnimationTime());
   },
 
@@ -5040,6 +5066,7 @@ var ModalView = Backbone.View.extend({
   },
 
   toggleShow: function(value) {
+    this.shown = value;
     this.$el.toggleClass('show', value);
   },
 
@@ -11074,8 +11101,11 @@ var AnimationQueue = Backbone.Model.extend({
   },
 
   next: function() {
-    // ok so call the first animation, and then set a timeout to call the next
+    // ok so call the first animation, and then set a timeout to call the next.
-    // TODO: animations with callbacks!!
+    // since an animation is defined as taking a specific amount of time,
+    // we can simply just use timeouts rather than promises / deferreds.
+    // for graphical displays that require an unknown amount of time, use deferreds
+    // but not animation queue (see the finishAnimation for that)
     var animations = this.get('animations');
     var index = this.get('index');
     if (index >= animations.length) {
@@ -12281,7 +12311,7 @@ require.define("/src/js/util/keyboard.js",function(require,module,exports,__dirn
 var Backbone = require('backbone');
 
 var mapKeycodeToKey = function(keycode) {
-  // TODO -- internationalize? Dvorak? I have no idea
+  // HELP WANTED -- internationalize? Dvorak? I have no idea
   var keyMap = {
     37: 'left',
     38: 'up',
@@ -12344,6 +12374,8 @@ var GitVisuals = require('../visuals').GitVisuals;
 var Visualization = Backbone.View.extend({
   initialize: function(options) {
     var _this = this;
+    this.customEvents = _.clone(Backbone.Events);
+
     new Raphael(10, 10, 200, 200, function() {
 
       // for some reason raphael calls this function with a predefined
@@ -12391,6 +12423,8 @@ var Visualization = Backbone.View.extend({
 
     this.setTreeOpacity(0);
     this.fadeTreeIn();
+
+    this.customEvents.trigger('gitEngineReady');
   },
 
   setTreeOpacity: function(level) {
@@ -13399,7 +13433,7 @@ var VisNode = VisBase.extend({
 
   setBirthFromSnapshot: function(beforeSnapshot) {
     // first get parent attribute
-    // woof bad data access. TODO
+    // woof this is pretty bad data access...
     var parentID = this.get('commit').get('parents')[0].get('visNode').getID();
     var parentAttr = beforeSnapshot[parentID];
 
@@ -14748,7 +14782,7 @@ var init = function() {
   /* hacky demo functionality */
   if (/\?demo/.test(window.location.href)) {
     setTimeout(function() {
-      events.trigger('commandSubmitted', "gc; git checkout HEAD~1; git commit; git checkout -b bugFix; gc; gc; git rebase -i HEAD~2; git rebase master; git checkout master; gc; gc; git merge bugFix");
+      eventBaton.trigger('commandSubmitted', "gc; git checkout HEAD~1; git commit; git checkout -b bugFix; gc; gc; git rebase -i HEAD~2; git rebase master; git checkout master; gc; gc; git merge bugFix");
     }, 500);
   }
 };
@@ -17169,30 +17203,44 @@ var Sandbox = Backbone.View.extend({
   initialize: function(options) {
     options = options || {};
 
+    this.initVisualization(options);
+    this.initCommandCollection(options);
+    this.initParseWaterfall(options);
+    this.initGitShim(options);
+
+    if (!options.wait) {
+      this.takeControl();
+    }
+  },
+
+  initVisualization: function(options) {
     this.mainVis = new Visualization({
       el: options.el || $('#canvasWrapper')[0]
     });
+  },
 
+  initCommandCollection: function(options) {
     // don't add it to just any collection -- adding to the
     // CommandUI collection will put in history
     this.commandCollection = Main.getCommandUI().commandCollection;
+  },
 
+  initParseWaterfall: function(options) {
     this.parseWaterfall = new ParseWaterfall();
-    /*
-    this.gitShim = new GitShim({
-      beforeCB: function() { console.log('before'); },
-      afterCB: function() { console.log('after'); }
-    });*/
-
     /* DISBALED MAP example!!!
     this.parseWaterfall.addFirst(
       'instantWaterfall',
       new DisabledMap().getInstantCommands()
     );*/
+  },
 
-    if (!options.wait) {
+  initGitShim: function(options) {
-      this.takeControl();
+    /*
-    }
+    this.gitShim = new GitShim({
+      beforeCB: function() { console.log('before'); },
+      afterCB: function() { console.log('after'); },
+      afterDeferHandler: function(deferred) { deferred.resolve(); },
+    });*/
   },
 
   takeControl: function() {
@@ -17202,17 +17250,21 @@ var Sandbox = Backbone.View.extend({
     // we obviously take care of sandbox commands
     Main.getEventBaton().stealBaton('processSandboxCommand', this.processSandboxCommand, this);
 
-    // and our git shim
+    this.insertGitShim();
-    // TODO HACKY needs to be AFTER PAPER INITIALIZE dropped down from visualization wtf
+  },
+
+  insertGitShim: function() {
+    // and our git shim goes in after the git engine is ready so it doesn't steal the baton
+    // too early
     if (this.gitShim) {
-      setTimeout(_.bind(function() {
+      this.mainVis.customEvents.on('gitEngineReady', function() {
-        this.gitShim.insertShim();
+          this.gitShim.insertShim();
-      }, this), 1000);
+      },this);
     }
   },
 
   commandSubmitted: function(value) {
-    // allow other things to see this command
+    // allow other things to see this command (aka command history on terminal)
     Main.getEvents().trigger('commandSubmittedPassive', value);
 
     util.splitTextCommand(value, function(command) {
@@ -17247,6 +17299,7 @@ var Sandbox = Backbone.View.extend({
 
 exports.Sandbox = Sandbox;
 
+
 });
 require("/src/js/level/sandbox.js");
 
@@ -17906,7 +17959,7 @@ require.define("/src/js/util/keyboard.js",function(require,module,exports,__dirn
 var Backbone = require('backbone');
 
 var mapKeycodeToKey = function(keycode) {
-  // TODO -- internationalize? Dvorak? I have no idea
+  // HELP WANTED -- internationalize? Dvorak? I have no idea
   var keyMap = {
     37: 'left',
     38: 'up',
@@ -18504,6 +18557,7 @@ var ModalView = Backbone.View.extend({
   getAnimationTime: function() { return 700; },
 
   initialize: function(options) {
+    this.shown = false;
     this.render();
     this.stealKeyboard();
   },
@@ -18512,6 +18566,7 @@ var ModalView = Backbone.View.extend({
     // add ourselves to the DOM
     this.$el.html(this.template({}));
     $('body').append(this.el);
+    // this doesnt necessarily show us though...
   },
 
   stealKeyboard: function() {
@@ -18552,16 +18607,21 @@ var ModalView = Backbone.View.extend({
 
   show: function() {
     this.toggleZ(true);
-    this.toggleShow(true);
+    // on reflow, change our class to animate. for whatever
+    // reason if this is done immediately, chrome might combine
+    // the two changes and lose the ability to animate and it looks bad.
+    process.nextTick(_.bind(function() {
+      this.toggleShow(true);
+    }, this));
   },
 
   hide: function() {
     this.toggleShow(false);
-    // TODO -- do this in a way where it wont
-    // bork if we call it back down. these views should
-    // be one-off though so...
     setTimeout(_.bind(function() {
-      this.toggleZ(false);
+      // if we are still hidden...
+      if (!this.shown) {
+        this.toggleZ(false);
+      }
     }, this), this.getAnimationTime());
   },
 
@@ -18570,6 +18630,7 @@ var ModalView = Backbone.View.extend({
   },
 
   toggleShow: function(value) {
+    this.shown = value;
     this.$el.toggleClass('show', value);
   },
 
@@ -19346,8 +19407,11 @@ var AnimationQueue = Backbone.Model.extend({
   },
 
   next: function() {
-    // ok so call the first animation, and then set a timeout to call the next
+    // ok so call the first animation, and then set a timeout to call the next.
-    // TODO: animations with callbacks!!
+    // since an animation is defined as taking a specific amount of time,
+    // we can simply just use timeouts rather than promises / deferreds.
+    // for graphical displays that require an unknown amount of time, use deferreds
+    // but not animation queue (see the finishAnimation for that)
     var animations = this.get('animations');
     var index = this.get('index');
     if (index >= animations.length) {
@@ -21008,7 +21072,7 @@ var VisNode = VisBase.extend({
 
   setBirthFromSnapshot: function(beforeSnapshot) {
     // first get parent attribute
-    // woof bad data access. TODO
+    // woof this is pretty bad data access...
     var parentID = this.get('commit').get('parents')[0].get('visNode').getID();
     var parentAttr = beforeSnapshot[parentID];
 
@@ -21238,6 +21302,8 @@ var GitVisuals = require('../visuals').GitVisuals;
 var Visualization = Backbone.View.extend({
   initialize: function(options) {
     var _this = this;
+    this.customEvents = _.clone(Backbone.Events);
+
     new Raphael(10, 10, 200, 200, function() {
 
       // for some reason raphael calls this function with a predefined
@@ -21285,6 +21351,8 @@ var Visualization = Backbone.View.extend({
 
     this.setTreeOpacity(0);
     this.fadeTreeIn();
+
+    this.customEvents.trigger('gitEngineReady');
   },
 
   setTreeOpacity: function(level) {

grunt.js

@@ -84,7 +84,8 @@ module.exports = function(grunt) {
         describe: true,
         expect: true,
         it: true,
-        exports: true
+        exports: true,
+        process: true
       }
     },
     browserify: {

src/js/app/index.js

@@ -79,7 +79,7 @@ var init = function() {
   /* hacky demo functionality */
   if (/\?demo/.test(window.location.href)) {
     setTimeout(function() {
-      events.trigger('commandSubmitted', "gc; git checkout HEAD~1; git commit; git checkout -b bugFix; gc; gc; git rebase -i HEAD~2; git rebase master; git checkout master; gc; gc; git merge bugFix");
+      eventBaton.trigger('commandSubmitted', "gc; git checkout HEAD~1; git commit; git checkout -b bugFix; gc; gc; git rebase -i HEAD~2; git rebase master; git checkout master; gc; gc; git merge bugFix");
     }, 500);
   }
 };

src/js/level/sandbox.js

@@ -23,30 +23,44 @@ var Sandbox = Backbone.View.extend({
   initialize: function(options) {
     options = options || {};
 
+    this.initVisualization(options);
+    this.initCommandCollection(options);
+    this.initParseWaterfall(options);
+    this.initGitShim(options);
+
+    if (!options.wait) {
+      this.takeControl();
+    }
+  },
+
+  initVisualization: function(options) {
     this.mainVis = new Visualization({
       el: options.el || $('#canvasWrapper')[0]
     });
+  },
 
+  initCommandCollection: function(options) {
     // don't add it to just any collection -- adding to the
     // CommandUI collection will put in history
     this.commandCollection = Main.getCommandUI().commandCollection;
+  },
 
+  initParseWaterfall: function(options) {
     this.parseWaterfall = new ParseWaterfall();
-    /*
-    this.gitShim = new GitShim({
-      beforeCB: function() { console.log('before'); },
-      afterCB: function() { console.log('after'); }
-    });*/
-
     /* DISBALED MAP example!!!
     this.parseWaterfall.addFirst(
       'instantWaterfall',
       new DisabledMap().getInstantCommands()
     );*/
+  },
 
-    if (!options.wait) {
+  initGitShim: function(options) {
-      this.takeControl();
+    /*
-    }
+    this.gitShim = new GitShim({
+      beforeCB: function() { console.log('before'); },
+      afterCB: function() { console.log('after'); },
+      afterDeferHandler: function(deferred) { deferred.resolve(); },
+    });*/
   },
 
   takeControl: function() {
@@ -56,17 +70,21 @@ var Sandbox = Backbone.View.extend({
     // we obviously take care of sandbox commands
     Main.getEventBaton().stealBaton('processSandboxCommand', this.processSandboxCommand, this);
 
-    // and our git shim
+    this.insertGitShim();
-    // TODO HACKY needs to be AFTER PAPER INITIALIZE dropped down from visualization wtf
+  },
+
+  insertGitShim: function() {
+    // and our git shim goes in after the git engine is ready so it doesn't steal the baton
+    // too early
     if (this.gitShim) {
-      setTimeout(_.bind(function() {
+      this.mainVis.customEvents.on('gitEngineReady', function() {
-        this.gitShim.insertShim();
+          this.gitShim.insertShim();
-      }, this), 1000);
+      },this);
     }
   },
 
   commandSubmitted: function(value) {
-    // allow other things to see this command
+    // allow other things to see this command (aka command history on terminal)
     Main.getEvents().trigger('commandSubmittedPassive', value);
 
     util.splitTextCommand(value, function(command) {
@@ -100,3 +118,4 @@ var Sandbox = Backbone.View.extend({
 });
 
 exports.Sandbox = Sandbox;
+

src/js/util/keyboard.js

@@ -2,7 +2,7 @@ var _ = require('underscore');
 var Backbone = require('backbone');
 
 var mapKeycodeToKey = function(keycode) {
-  // TODO -- internationalize? Dvorak? I have no idea
+  // HELP WANTED -- internationalize? Dvorak? I have no idea
   var keyMap = {
     37: 'left',
     38: 'up',

src/js/views/index.js

@@ -125,6 +125,7 @@ var ModalView = Backbone.View.extend({
   getAnimationTime: function() { return 700; },
 
   initialize: function(options) {
+    this.shown = false;
     this.render();
     this.stealKeyboard();
   },
@@ -133,6 +134,7 @@ var ModalView = Backbone.View.extend({
     // add ourselves to the DOM
     this.$el.html(this.template({}));
     $('body').append(this.el);
+    // this doesnt necessarily show us though...
   },
 
   stealKeyboard: function() {
@@ -173,16 +175,21 @@ var ModalView = Backbone.View.extend({
 
   show: function() {
     this.toggleZ(true);
-    this.toggleShow(true);
+    // on reflow, change our class to animate. for whatever
+    // reason if this is done immediately, chrome might combine
+    // the two changes and lose the ability to animate and it looks bad.
+    process.nextTick(_.bind(function() {
+      this.toggleShow(true);
+    }, this));
   },
 
   hide: function() {
     this.toggleShow(false);
-    // TODO -- do this in a way where it wont
-    // bork if we call it back down. these views should
-    // be one-off though so...
     setTimeout(_.bind(function() {
-      this.toggleZ(false);
+      // if we are still hidden...
+      if (!this.shown) {
+        this.toggleZ(false);
+      }
     }, this), this.getAnimationTime());
   },
 
@@ -191,6 +198,7 @@ var ModalView = Backbone.View.extend({
   },
 
   toggleShow: function(value) {
+    this.shown = value;
     this.$el.toggleClass('show', value);
   },
 

src/js/visuals/animation/index.js

@@ -61,8 +61,11 @@ var AnimationQueue = Backbone.Model.extend({
   },
 
   next: function() {
-    // ok so call the first animation, and then set a timeout to call the next
+    // ok so call the first animation, and then set a timeout to call the next.
-    // TODO: animations with callbacks!!
+    // since an animation is defined as taking a specific amount of time,
+    // we can simply just use timeouts rather than promises / deferreds.
+    // for graphical displays that require an unknown amount of time, use deferreds
+    // but not animation queue (see the finishAnimation for that)
     var animations = this.get('animations');
     var index = this.get('index');
     if (index >= animations.length) {

src/js/visuals/visNode.js

@@ -217,7 +217,7 @@ var VisNode = VisBase.extend({
 
   setBirthFromSnapshot: function(beforeSnapshot) {
     // first get parent attribute
-    // woof bad data access. TODO
+    // woof this is pretty bad data access...
     var parentID = this.get('commit').get('parents')[0].get('visNode').getID();
     var parentAttr = beforeSnapshot[parentID];
 

src/js/visuals/visualization.js

@@ -11,6 +11,8 @@ var GitVisuals = require('../visuals').GitVisuals;
 var Visualization = Backbone.View.extend({
   initialize: function(options) {
     var _this = this;
+    this.customEvents = _.clone(Backbone.Events);
+
     new Raphael(10, 10, 200, 200, function() {
 
       // for some reason raphael calls this function with a predefined
@@ -58,6 +60,8 @@ var Visualization = Backbone.View.extend({
 
     this.setTreeOpacity(0);
     this.fadeTreeIn();
+
+    this.customEvents.trigger('gitEngineReady');
   },
 
   setTreeOpacity: function(level) {

todo.txt

@@ -7,6 +7,8 @@ Big Graphic things:
 
 Medium things:
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~
+[ ] do an after-paper-initialize type thing so we can insert git shim once
+    git engine is done.
 
 Commands
 ========
@@ -29,6 +31,8 @@ Big Bugs to fix:
 Done things:
 (I only started this on Dec 17th 2012 to get a better sense of what was done)
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+[x] fixed that to-do entry with the toggle Z thing. now its much more consistent
+[x] sandbox a real view now
 [x] awesome before and after shims with event baton stealing and passing back
 [x] sip from buffer with post-command hooks. ideally the git engine
     knows nothing about the level being played