Better flip logic, visuals improvement, and also advanced level section

featuring Aaron's modifier tutorial

Merge pull request #80 from aschrab/multiple_parents

src/js/level/sandbox.js

@@ -319,6 +319,7 @@ var Sandbox = Backbone.View.extend({
           deferred: whenLevelOpen,
           command: command
         });
+        this.hide();
 
         whenLevelOpen.promise.then(function() {
           command.finishWith(deferred);

src/js/views/gitDemonstrationView.js

@@ -227,7 +227,7 @@ var GitDemonstrationView = ContainedBase.extend({
 
   initVis: function() {
     this.mainVis = new Visualization({
-      el: this.$('div.visHolder')[0],
+      el: this.$('div.visHolder div.visHolderInside')[0],
       noKeyboardInput: true,
       noClick: true,
       smallCanvas: true,

src/js/visuals/index.js

@@ -685,7 +685,7 @@ GitVisuals.prototype.genResizeFunc = function() {
     _.bind(function(width, height) {
 
       // refresh when we are ready if we are animating som ething
-      if (GLOBAL.isAnimating) {
+      if (false && GLOBAL.isAnimating) {
         var Main = require('../app');
         Main.getEventBaton().trigger('commandSubmitted', 'refresh');
       } else {

src/js/visuals/visBranch.js

@@ -77,19 +77,34 @@ var VisBranch = VisBase.extend({
     var commit = this.gitEngine.getCommitFromRef(this.get('branch'));
     var visNode = commit.get('visNode');
 
-    var threshold = this.get('gitVisuals').getFlipPos();
-    // somewhat tricky flip management here
-    var flip;
-    if (visNode.get('pos').x > threshold) {
-      flip = (this.get('isHead')) ? 1 : -1;
-      this.set('flip', flip);
-    } else {
-      flip = (this.get('isHead')) ? -1 : 1;
-      this.set('flip', flip);
-    }
+    this.set('flip', this.getFlipBool(commit, visNode));
     return visNode.getScreenCoords();
   },
 
+  getFlipBool: function(commit, visNode) {
+    var threshold = this.get('gitVisuals').getFlipPos();
+    var overThreshold = (visNode.get('pos').x > threshold);
+
+    if (!this.get('isHead')) {
+      // easy logic first
+      return (overThreshold) ?
+        -1 :
+        1;
+    }
+    // now for HEAD....
+    if (overThreshold) {
+      // if by ourselves, then feel free to squeeze in. but
+      // if other branches are here, then we need to show separate
+      return (this.isBranchStackEmpty()) ?
+        -1 :
+        1;
+    } else {
+      return (this.isBranchStackEmpty()) ?
+        1 :
+        -1;
+    }
+  },
+
   getBranchStackIndex: function() {
     if (this.get('isHead')) {
       // head is never stacked with other branches
@@ -115,8 +130,25 @@ var VisBranch = VisBase.extend({
     return this.getBranchStackArray().length;
   },
 
+  isBranchStackEmpty: function() {
+    // useful function for head when computing flip logic
+    var arr = this.gitVisuals.branchStackMap[this.getCommitID()];
+    return (arr) ?
+      arr.length === 0 :
+      true;
+  },
+
+  getCommitID: function() {
+    var target = this.get('branch').get('target');
+    if (target.get('type') === 'branch') {
+      // for HEAD
+      target = target.get('target');
+    }
+    return target.get('id');
+  },
+
   getBranchStackArray: function() {
-    var arr = this.gitVisuals.branchStackMap[this.get('branch').get('target').get('id')];
+    var arr = this.gitVisuals.branchStackMap[this.getCommitID()];
     if (arr === undefined) {
       // this only occurs when we are generating graphics inside of
       // a new Branch instantiation, so we need to force the update