[Hackathon] Hg mode initial

build/bundle.js

@@ -5381,6 +5381,11 @@ require.define("/src/js/intl/strings.js",function(require,module,exports,__dirna
     'fr_FR': 'Voyons si vous pouvez descendre à {best} :D'
   },
   ///////////////////////////////////////////////////////////////////////////
+  'hg-prune-tree': {
+    '__desc__': 'warning when pruning tree',
+    'en_US': 'Warning! Mercurial does aggressive garbage collection and thus needs to prune your tree'
+  },
+  ///////////////////////////////////////////////////////////////////////////
   'hg-a-option': {
     '__desc__': 'warning for when using -A option',
     'en_US': 'The -A option is not needed for this app, since there is no staging of files. just commit away!'
@@ -6069,7 +6074,8 @@ function CommandUI() {
   var Collections = require('../models/collections');
   var CommandViews = require('../views/commandViews');
 
-  var mainHelprBar = new Views.MainHelperBar();
+  var mainHelperBar = new Views.MainHelperBar();
+  var backgroundView = new Views.BackgroundView();
 
   this.commandCollection = new Collections.CommandCollection();
   this.commandBuffer = new Collections.CommandBuffer({
@@ -7151,6 +7157,7 @@ var AnimationQueue = require('../visuals/animation').AnimationQueue;
 var TreeCompare = require('./treeCompare').TreeCompare;
 
 var Errors = require('../util/errors');
+var Main = require('../app');
 var Commands = require('../commands');
 var GitError = Errors.GitError;
 var CommandResult = Errors.CommandResult;
@@ -7162,6 +7169,7 @@ function GitEngine(options) {
   this.refs = {};
   this.HEAD = null;
   this.origin = null;
+  this.mode = 'git';
   this.localRepo = null;
 
   this.branchCollection = options.branches;
@@ -7189,6 +7197,36 @@ GitEngine.prototype.initUniqueID = function() {
   })();
 };
 
+GitEngine.prototype.handleModeChange = function(vcs, callback) {
+  if (this.mode === vcs) {
+    // dont fire event aggressively
+    callback();
+    return;
+  }
+  Main.getEvents().trigger('vcsModeChange', {mode: vcs});
+  var chain = this.setMode(vcs);
+  if (this.origin) {
+    this.origin.setMode(vcs, function() {});
+  }
+
+  if (!chain) {
+    callback();
+    return;
+  }
+  // we have to do it async
+  chain.then(callback);
+};
+
+GitEngine.prototype.setMode = function(vcs) {
+  var switchedToHg = (this.mode === 'git' && vcs === 'hg');
+  this.mode = vcs;
+  if (switchedToHg) {
+    // if we are switching to mercurial then we have some
+    // garbage collection and other tidying up to do
+    return this.pruneTree();
+  }
+};
+
 GitEngine.prototype.assignLocalRepo = function(repo) {
   this.localRepo = repo;
 };
@@ -8321,6 +8359,40 @@ GitEngine.prototype.setTargetLocation = function(ref, target) {
   ref.set('target', target);
 };
 
+GitEngine.prototype.pruneTree = function() {
+  var set = this.getUpstreamBranchSet();
+  // dont prune dangling commits if we are on head
+  var underHeadID = this.getCommitFromRef('HEAD').get('id');
+  set[underHeadID] = set[underHeadID] || [];
+  set[underHeadID].push('HEAD');
+
+  var toDelete = [];
+  this.commitCollection.each(function(commit) {
+    // nothing cares about this commit :(
+    if (!set[commit.get('id')]) {
+      toDelete.push(commit);
+    }
+  }, this);
+
+  if (toDelete.length) {
+    this.command.addWarning(intl.str('hg-prune-tree'));
+  }
+
+  _.each(toDelete, function(commit) {
+    commit.removeFromParents();
+    this.commitCollection.remove(commit);
+    var ID = commit.get('id');
+    this.refs[ID] = undefined;
+    delete this.refs[ID];
+    var visNode = commit.get('visNode');
+    if (visNode) {
+      visNode.removeAll();
+    }
+  }, this);
+
+  return this.animationFactory.playRefreshAnimationSlow(this.gitVisuals);
+};
+
 GitEngine.prototype.getUpstreamBranchSet = function() {
   // this is expensive!! so only call once in a while
   var commitToSet = {};
@@ -8864,7 +8936,16 @@ GitEngine.prototype.externalRefresh = function() {
 
 GitEngine.prototype.dispatch = function(command, deferred) {
   this.command = command;
+  var vcs = command.get('vcs');
+  var executeCommand = _.bind(function() {
+    this.dispatchProcess(command, deferred);
+  }, this);
+  // handle mode change will either execute sync or
+  // animate during tree pruning / etc
+  this.handleModeChange(vcs, executeCommand);
+};
 
+GitEngine.prototype.dispatchProcess = function(command, deferred) {
   // set up the animation queue
   var whenDone = _.bind(function() {
     command.finishWith(deferred);
@@ -8873,9 +8954,10 @@ GitEngine.prototype.dispatch = function(command, deferred) {
     callback: whenDone
   });
 
-  try {
   var vcs = command.get('vcs');
   var methodName = command.get('method').replace(/-/g, '');
+
+  try {
     Commands.commands.execute(vcs, methodName, this, this.command);
   } catch (err) {
     this.filterError(err);
@@ -9177,6 +9259,22 @@ var Commit = Backbone.Model.extend({
     }
   },
 
+  removeFromParents: function() {
+    _.each(this.get('parents'), function(parent) {
+      parent.removeChild(this);
+    }, this);
+  },
+
+  removeChild: function(childToRemove) {
+    var newChildren = [];
+    _.each(this.get('children'), function(child) {
+      if (child !== childToRemove) {
+        newChildren.push(child);
+      }
+    }, this);
+    this.set('children', newChildren);
+  },
+
   isMainParent: function(parent) {
     var index = this.get('parents').indexOf(parent);
     return index === 0;
@@ -9306,10 +9404,16 @@ AnimationFactory.playRefreshAnimationAndFinish = function(gitVisuals, animationQ
   animationQueue.thenFinish(animation.getPromise());
 };
 
-AnimationFactory.playRefreshAnimation = function(gitVisuals) {
+AnimationFactory.playRefreshAnimationSlow = function(gitVisuals) {
+  var time = GRAPHICS.defaultAnimationTime;
+  return this.playRefreshAnimation(gitVisuals, time * 2);
+};
+
+AnimationFactory.playRefreshAnimation = function(gitVisuals, speed) {
   var animation = new PromiseAnimation({
+    duration: speed,
     closure: function() {
-      gitVisuals.refreshTree();
+      gitVisuals.refreshTree(speed)
     }
   });
   animation.play();
@@ -11564,6 +11668,20 @@ var NextLevelConfirm = ConfirmCancelTerminal.extend({
   }
 });
 
+var BackgroundView = Backbone.View.extend({
+  initialize: function() {
+    this.$body = $('body');
+    Main.getEvents().on('vcsModeChange', this.updateMode, this);
+  },
+
+  updateMode: function(eventData) {
+    eventData = eventData || {};
+    var isGit = eventData.mode === 'git';
+    this.$body.toggleClass('gitMode', isGit);
+    this.$body.toggleClass('hgMode', !isGit);
+  }
+});
+
 var ViewportAlert = Backbone.View.extend({
   initialize: function(options) {
     this.grabBatons();
@@ -11937,6 +12055,7 @@ var CanvasTerminalHolder = BaseView.extend({
 });
 
 exports.BaseView = BaseView;
+exports.BackgroundView = BackgroundView;
 exports.GeneralButton = GeneralButton;
 exports.ModalView = ModalView;
 exports.ModalTerminal = ModalTerminal;
@@ -16458,7 +16577,7 @@ GitVisuals.prototype.removeVisBranch = function(visBranch) {
 };
 
 GitVisuals.prototype.removeVisNode = function(visNode) {
-  this.visNodeMap[visNode.getID()] = undefined;
+  delete this.visNodeMap[visNode.getID()];
 };
 
 GitVisuals.prototype.removeVisEdge = function(visEdge) {
@@ -23581,7 +23700,8 @@ function CommandUI() {
   var Collections = require('../models/collections');
   var CommandViews = require('../views/commandViews');
 
-  var mainHelprBar = new Views.MainHelperBar();
+  var mainHelperBar = new Views.MainHelperBar();
+  var backgroundView = new Views.BackgroundView();
 
   this.commandCollection = new Collections.CommandCollection();
   this.commandBuffer = new Collections.CommandBuffer({
@@ -24977,6 +25097,7 @@ var AnimationQueue = require('../visuals/animation').AnimationQueue;
 var TreeCompare = require('./treeCompare').TreeCompare;
 
 var Errors = require('../util/errors');
+var Main = require('../app');
 var Commands = require('../commands');
 var GitError = Errors.GitError;
 var CommandResult = Errors.CommandResult;
@@ -24988,6 +25109,7 @@ function GitEngine(options) {
   this.refs = {};
   this.HEAD = null;
   this.origin = null;
+  this.mode = 'git';
   this.localRepo = null;
 
   this.branchCollection = options.branches;
@@ -25015,6 +25137,36 @@ GitEngine.prototype.initUniqueID = function() {
   })();
 };
 
+GitEngine.prototype.handleModeChange = function(vcs, callback) {
+  if (this.mode === vcs) {
+    // dont fire event aggressively
+    callback();
+    return;
+  }
+  Main.getEvents().trigger('vcsModeChange', {mode: vcs});
+  var chain = this.setMode(vcs);
+  if (this.origin) {
+    this.origin.setMode(vcs, function() {});
+  }
+
+  if (!chain) {
+    callback();
+    return;
+  }
+  // we have to do it async
+  chain.then(callback);
+};
+
+GitEngine.prototype.setMode = function(vcs) {
+  var switchedToHg = (this.mode === 'git' && vcs === 'hg');
+  this.mode = vcs;
+  if (switchedToHg) {
+    // if we are switching to mercurial then we have some
+    // garbage collection and other tidying up to do
+    return this.pruneTree();
+  }
+};
+
 GitEngine.prototype.assignLocalRepo = function(repo) {
   this.localRepo = repo;
 };
@@ -26147,6 +26299,40 @@ GitEngine.prototype.setTargetLocation = function(ref, target) {
   ref.set('target', target);
 };
 
+GitEngine.prototype.pruneTree = function() {
+  var set = this.getUpstreamBranchSet();
+  // dont prune dangling commits if we are on head
+  var underHeadID = this.getCommitFromRef('HEAD').get('id');
+  set[underHeadID] = set[underHeadID] || [];
+  set[underHeadID].push('HEAD');
+
+  var toDelete = [];
+  this.commitCollection.each(function(commit) {
+    // nothing cares about this commit :(
+    if (!set[commit.get('id')]) {
+      toDelete.push(commit);
+    }
+  }, this);
+
+  if (toDelete.length) {
+    this.command.addWarning(intl.str('hg-prune-tree'));
+  }
+
+  _.each(toDelete, function(commit) {
+    commit.removeFromParents();
+    this.commitCollection.remove(commit);
+    var ID = commit.get('id');
+    this.refs[ID] = undefined;
+    delete this.refs[ID];
+    var visNode = commit.get('visNode');
+    if (visNode) {
+      visNode.removeAll();
+    }
+  }, this);
+
+  return this.animationFactory.playRefreshAnimationSlow(this.gitVisuals);
+};
+
 GitEngine.prototype.getUpstreamBranchSet = function() {
   // this is expensive!! so only call once in a while
   var commitToSet = {};
@@ -26690,7 +26876,16 @@ GitEngine.prototype.externalRefresh = function() {
 
 GitEngine.prototype.dispatch = function(command, deferred) {
   this.command = command;
+  var vcs = command.get('vcs');
+  var executeCommand = _.bind(function() {
+    this.dispatchProcess(command, deferred);
+  }, this);
+  // handle mode change will either execute sync or
+  // animate during tree pruning / etc
+  this.handleModeChange(vcs, executeCommand);
+};
 
+GitEngine.prototype.dispatchProcess = function(command, deferred) {
   // set up the animation queue
   var whenDone = _.bind(function() {
     command.finishWith(deferred);
@@ -26699,9 +26894,10 @@ GitEngine.prototype.dispatch = function(command, deferred) {
     callback: whenDone
   });
 
-  try {
   var vcs = command.get('vcs');
   var methodName = command.get('method').replace(/-/g, '');
+
+  try {
     Commands.commands.execute(vcs, methodName, this, this.command);
   } catch (err) {
     this.filterError(err);
@@ -27003,6 +27199,22 @@ var Commit = Backbone.Model.extend({
     }
   },
 
+  removeFromParents: function() {
+    _.each(this.get('parents'), function(parent) {
+      parent.removeChild(this);
+    }, this);
+  },
+
+  removeChild: function(childToRemove) {
+    var newChildren = [];
+    _.each(this.get('children'), function(child) {
+      if (child !== childToRemove) {
+        newChildren.push(child);
+      }
+    }, this);
+    this.set('children', newChildren);
+  },
+
   isMainParent: function(parent) {
     var index = this.get('parents').indexOf(parent);
     return index === 0;
@@ -27605,6 +27817,11 @@ require.define("/src/js/intl/strings.js",function(require,module,exports,__dirna
     'fr_FR': 'Voyons si vous pouvez descendre à {best} :D'
   },
   ///////////////////////////////////////////////////////////////////////////
+  'hg-prune-tree': {
+    '__desc__': 'warning when pruning tree',
+    'en_US': 'Warning! Mercurial does aggressive garbage collection and thus needs to prune your tree'
+  },
+  ///////////////////////////////////////////////////////////////////////////
   'hg-a-option': {
     '__desc__': 'warning for when using -A option',
     'en_US': 'The -A option is not needed for this app, since there is no staging of files. just commit away!'
@@ -30689,7 +30906,6 @@ var toGlobalize = {
 
 _.each(toGlobalize, function(module) {
   for (var key in module) {
-    console.log('assigning', key);
     window['debug_' + key] = module[key];
   }
 });
@@ -32637,6 +32853,20 @@ var NextLevelConfirm = ConfirmCancelTerminal.extend({
   }
 });
 
+var BackgroundView = Backbone.View.extend({
+  initialize: function() {
+    this.$body = $('body');
+    Main.getEvents().on('vcsModeChange', this.updateMode, this);
+  },
+
+  updateMode: function(eventData) {
+    eventData = eventData || {};
+    var isGit = eventData.mode === 'git';
+    this.$body.toggleClass('gitMode', isGit);
+    this.$body.toggleClass('hgMode', !isGit);
+  }
+});
+
 var ViewportAlert = Backbone.View.extend({
   initialize: function(options) {
     this.grabBatons();
@@ -33010,6 +33240,7 @@ var CanvasTerminalHolder = BaseView.extend({
 });
 
 exports.BaseView = BaseView;
+exports.BackgroundView = BackgroundView;
 exports.GeneralButton = GeneralButton;
 exports.ModalView = ModalView;
 exports.ModalTerminal = ModalTerminal;
@@ -33861,10 +34092,16 @@ AnimationFactory.playRefreshAnimationAndFinish = function(gitVisuals, animationQ
   animationQueue.thenFinish(animation.getPromise());
 };
 
-AnimationFactory.playRefreshAnimation = function(gitVisuals) {
+AnimationFactory.playRefreshAnimationSlow = function(gitVisuals) {
+  var time = GRAPHICS.defaultAnimationTime;
+  return this.playRefreshAnimation(gitVisuals, time * 2);
+};
+
+AnimationFactory.playRefreshAnimation = function(gitVisuals, speed) {
   var animation = new PromiseAnimation({
+    duration: speed,
     closure: function() {
-      gitVisuals.refreshTree();
+      gitVisuals.refreshTree(speed)
     }
   });
   animation.play();
@@ -34693,7 +34930,7 @@ GitVisuals.prototype.removeVisBranch = function(visBranch) {
 };
 
 GitVisuals.prototype.removeVisNode = function(visNode) {
-  this.visNodeMap[visNode.getID()] = undefined;
+  delete this.visNodeMap[visNode.getID()];
 };
 
 GitVisuals.prototype.removeVisEdge = function(visEdge) {

build/main.d4092b65.css

@@ -171,6 +171,7 @@ body,
   transition: opacity 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 }
 
+.visBackgroundColor,
 .transitionAll {
   -webkit-transition: all 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
   -moz-transition: all 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
@@ -187,6 +188,24 @@ body,
   transition: all 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 }
 
+/* mode stuff */
+#mainVisSpace {
+  position: relative;
+}
+
+#mainVisSpace .modeText {
+  position: absolute;
+  bottom: 0;
+  opacity: 0.0;
+  font-size: 60pt;
+  color: black;
+}
+
+body.gitMode #mainVisSpace .modeText.gitMode,
+body.hgMode #mainVisSpace .modeText.hgMode {
+  opacity: 0.5;
+}
+
 /* Some interface things */
 
 div.canvasTerminalHolder {
@@ -210,6 +229,12 @@ div.gitDemonstrationView > div.visHolder,
   background-color: #5cbcfc;
 }
 
+body.hgMode div.gitDemonstrationView > div.visHolder,
+body.hgMode .visBackgroundColor {
+  background: #5CFCD6;
+  background-color: #5CFCD6;
+}
+
 #interfaceWrapper {
   min-width: 600px;
   min-height: 600px;

index.html

@@ -13,7 +13,7 @@
   <meta property="og:image" content="http://pcottle.github.io/learnGitBranching/assets/learnGitBranching.png"/>
   <meta property="og:description" content="A interactive Git visualization tool to educate and challenge!"/>
 
-	<link rel="stylesheet" href="build/main.e882d864.css" type="text/css" charset="utf-8">
+	<link rel="stylesheet" href="build/main.d4092b65.css" type="text/css" charset="utf-8">
 	<link rel="stylesheet" href="src/style/font-awesome.css" type="text/css" charset="utf-8">
 </head>
 <body>
@@ -67,7 +67,13 @@
       </div>
     </div>
 
-    <div id="mainVisSpace" class="box flex1 horizontal visBackgroundColor">
+    <div id="mainVisSpace" class="box flex1 horizontal transitionAll visBackgroundColor">
+      <span class="modeText transitionOpacity gitMode">
+        Git
+      </span>
+      <span class="modeText transitionOpacity hgMode">
+        Hg
+      </span>
     </div>
   </div>
 
@@ -439,7 +445,7 @@
        For a much easier time perusing the source, see the individual files at:
           https://github.com/pcottle/learnGitBranching
   -->
-  <script src="build/bundle.min.01a0e7e1.js"></script>
+  <script src="build/bundle.min.4104878e.js"></script>
 
   <!-- The advantage of github pages: super-easy, simple, slick static hostic.
        The downside? No raw logs to parse for analytics, so I have to include

src/js/app/index.js

@@ -168,7 +168,8 @@ function CommandUI() {
   var Collections = require('../models/collections');
   var CommandViews = require('../views/commandViews');
 
-  var mainHelprBar = new Views.MainHelperBar();
+  var mainHelperBar = new Views.MainHelperBar();
+  var backgroundView = new Views.BackgroundView();
 
   this.commandCollection = new Collections.CommandCollection();
   this.commandBuffer = new Collections.CommandBuffer({

src/js/git/index.js

@@ -10,6 +10,7 @@ var AnimationQueue = require('../visuals/animation').AnimationQueue;
 var TreeCompare = require('./treeCompare').TreeCompare;
 
 var Errors = require('../util/errors');
+var Main = require('../app');
 var Commands = require('../commands');
 var GitError = Errors.GitError;
 var CommandResult = Errors.CommandResult;
@@ -21,6 +22,7 @@ function GitEngine(options) {
   this.refs = {};
   this.HEAD = null;
   this.origin = null;
+  this.mode = 'git';
   this.localRepo = null;
 
   this.branchCollection = options.branches;
@@ -48,6 +50,36 @@ GitEngine.prototype.initUniqueID = function() {
   })();
 };
 
+GitEngine.prototype.handleModeChange = function(vcs, callback) {
+  if (this.mode === vcs) {
+    // dont fire event aggressively
+    callback();
+    return;
+  }
+  Main.getEvents().trigger('vcsModeChange', {mode: vcs});
+  var chain = this.setMode(vcs);
+  if (this.origin) {
+    this.origin.setMode(vcs, function() {});
+  }
+
+  if (!chain) {
+    callback();
+    return;
+  }
+  // we have to do it async
+  chain.then(callback);
+};
+
+GitEngine.prototype.setMode = function(vcs) {
+  var switchedToHg = (this.mode === 'git' && vcs === 'hg');
+  this.mode = vcs;
+  if (switchedToHg) {
+    // if we are switching to mercurial then we have some
+    // garbage collection and other tidying up to do
+    return this.pruneTree();
+  }
+};
+
 GitEngine.prototype.assignLocalRepo = function(repo) {
   this.localRepo = repo;
 };
@@ -1180,6 +1212,40 @@ GitEngine.prototype.setTargetLocation = function(ref, target) {
   ref.set('target', target);
 };
 
+GitEngine.prototype.pruneTree = function() {
+  var set = this.getUpstreamBranchSet();
+  // dont prune dangling commits if we are on head
+  var underHeadID = this.getCommitFromRef('HEAD').get('id');
+  set[underHeadID] = set[underHeadID] || [];
+  set[underHeadID].push('HEAD');
+
+  var toDelete = [];
+  this.commitCollection.each(function(commit) {
+    // nothing cares about this commit :(
+    if (!set[commit.get('id')]) {
+      toDelete.push(commit);
+    }
+  }, this);
+
+  if (toDelete.length) {
+    this.command.addWarning(intl.str('hg-prune-tree'));
+  }
+
+  _.each(toDelete, function(commit) {
+    commit.removeFromParents();
+    this.commitCollection.remove(commit);
+    var ID = commit.get('id');
+    this.refs[ID] = undefined;
+    delete this.refs[ID];
+    var visNode = commit.get('visNode');
+    if (visNode) {
+      visNode.removeAll();
+    }
+  }, this);
+
+  return this.animationFactory.playRefreshAnimationSlow(this.gitVisuals);
+};
+
 GitEngine.prototype.getUpstreamBranchSet = function() {
   // this is expensive!! so only call once in a while
   var commitToSet = {};
@@ -1723,7 +1789,16 @@ GitEngine.prototype.externalRefresh = function() {
 
 GitEngine.prototype.dispatch = function(command, deferred) {
   this.command = command;
+  var vcs = command.get('vcs');
+  var executeCommand = _.bind(function() {
+    this.dispatchProcess(command, deferred);
+  }, this);
+  // handle mode change will either execute sync or
+  // animate during tree pruning / etc
+  this.handleModeChange(vcs, executeCommand);
+};
 
+GitEngine.prototype.dispatchProcess = function(command, deferred) {
   // set up the animation queue
   var whenDone = _.bind(function() {
     command.finishWith(deferred);
@@ -1732,9 +1807,10 @@ GitEngine.prototype.dispatch = function(command, deferred) {
     callback: whenDone
   });
 
-  try {
   var vcs = command.get('vcs');
   var methodName = command.get('method').replace(/-/g, '');
+
+  try {
     Commands.commands.execute(vcs, methodName, this, this.command);
   } catch (err) {
     this.filterError(err);
@@ -2036,6 +2112,22 @@ var Commit = Backbone.Model.extend({
     }
   },
 
+  removeFromParents: function() {
+    _.each(this.get('parents'), function(parent) {
+      parent.removeChild(this);
+    }, this);
+  },
+
+  removeChild: function(childToRemove) {
+    var newChildren = [];
+    _.each(this.get('children'), function(child) {
+      if (child !== childToRemove) {
+        newChildren.push(child);
+      }
+    }, this);
+    this.set('children', newChildren);
+  },
+
   isMainParent: function(parent) {
     var index = this.get('parents').indexOf(parent);
     return index === 0;

src/js/intl/strings.js

@@ -32,6 +32,11 @@ exports.strings = {
     'fr_FR': 'Voyons si vous pouvez descendre à {best} :D'
   },
   ///////////////////////////////////////////////////////////////////////////
+  'hg-prune-tree': {
+    '__desc__': 'warning when pruning tree',
+    'en_US': 'Warning! Mercurial does aggressive garbage collection and thus needs to prune your tree'
+  },
+  ///////////////////////////////////////////////////////////////////////////
   'hg-a-option': {
     '__desc__': 'warning for when using -A option',
     'en_US': 'The -A option is not needed for this app, since there is no staging of files. just commit away!'

src/js/util/debug.js

@@ -31,7 +31,6 @@ var toGlobalize = {
 
 _.each(toGlobalize, function(module) {
   for (var key in module) {
-    console.log('assigning', key);
     window['debug_' + key] = module[key];
   }
 });

src/js/views/index.js

@@ -472,6 +472,20 @@ var NextLevelConfirm = ConfirmCancelTerminal.extend({
   }
 });
 
+var BackgroundView = Backbone.View.extend({
+  initialize: function() {
+    this.$body = $('body');
+    Main.getEvents().on('vcsModeChange', this.updateMode, this);
+  },
+
+  updateMode: function(eventData) {
+    eventData = eventData || {};
+    var isGit = eventData.mode === 'git';
+    this.$body.toggleClass('gitMode', isGit);
+    this.$body.toggleClass('hgMode', !isGit);
+  }
+});
+
 var ViewportAlert = Backbone.View.extend({
   initialize: function(options) {
     this.grabBatons();
@@ -845,6 +859,7 @@ var CanvasTerminalHolder = BaseView.extend({
 });
 
 exports.BaseView = BaseView;
+exports.BackgroundView = BackgroundView;
 exports.GeneralButton = GeneralButton;
 exports.ModalView = ModalView;
 exports.ModalTerminal = ModalTerminal;

src/js/visuals/animation/animationFactory.js

@@ -103,10 +103,16 @@ AnimationFactory.playRefreshAnimationAndFinish = function(gitVisuals, animationQ
   animationQueue.thenFinish(animation.getPromise());
 };
 
-AnimationFactory.playRefreshAnimation = function(gitVisuals) {
+AnimationFactory.playRefreshAnimationSlow = function(gitVisuals) {
+  var time = GRAPHICS.defaultAnimationTime;
+  return this.playRefreshAnimation(gitVisuals, time * 2);
+};
+
+AnimationFactory.playRefreshAnimation = function(gitVisuals, speed) {
   var animation = new PromiseAnimation({
+    duration: speed,
     closure: function() {
-      gitVisuals.refreshTree();
+      gitVisuals.refreshTree(speed)
     }
   });
   animation.play();

src/js/visuals/index.js

@@ -631,7 +631,7 @@ GitVisuals.prototype.removeVisBranch = function(visBranch) {
 };
 
 GitVisuals.prototype.removeVisNode = function(visNode) {
-  this.visNodeMap[visNode.getID()] = undefined;
+  delete this.visNodeMap[visNode.getID()];
 };
 
 GitVisuals.prototype.removeVisEdge = function(visEdge) {

src/style/main.css

@@ -171,6 +171,7 @@ body,
   transition: opacity 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 }
 
+.visBackgroundColor,
 .transitionAll {
   -webkit-transition: all 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
   -moz-transition: all 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
@@ -187,6 +188,24 @@ body,
   transition: all 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 }
 
+/* mode stuff */
+#mainVisSpace {
+  position: relative;
+}
+
+#mainVisSpace .modeText {
+  position: absolute;
+  bottom: 0;
+  opacity: 0.0;
+  font-size: 60pt;
+  color: black;
+}
+
+body.gitMode #mainVisSpace .modeText.gitMode,
+body.hgMode #mainVisSpace .modeText.hgMode {
+  opacity: 0.5;
+}
+
 /* Some interface things */
 
 div.canvasTerminalHolder {
@@ -210,6 +229,12 @@ div.gitDemonstrationView > div.visHolder,
   background-color: #5cbcfc;
 }
 
+body.hgMode div.gitDemonstrationView > div.visHolder,
+body.hgMode .visBackgroundColor {
+  background: #5CFCD6;
+  background-color: #5CFCD6;
+}
+
 #interfaceWrapper {
   min-width: 600px;
   min-height: 600px;

src/template.index.html

@@ -67,7 +67,13 @@
       </div>
     </div>
 
-    <div id="mainVisSpace" class="box flex1 horizontal visBackgroundColor">
+    <div id="mainVisSpace" class="box flex1 horizontal transitionAll visBackgroundColor">
+      <span class="modeText transitionOpacity gitMode">
+        Git
+      </span>
+      <span class="modeText transitionOpacity hgMode">
+        Hg
+      </span>
     </div>
   </div>