deep in the hole trying to fix canvas positioning in visualizations

src/js/git/gitShim.js

@@ -57,7 +57,7 @@ GitShim.prototype.processGitCommand = function(command, deferred) {
 
   // if we didnt receive a defer handler in the options, this just
   // resolves immediately
-  this.beforeDeferHandler(beforeDefer);
+  this.beforeDeferHandler(beforeDefer, command);
 };
 
 GitShim.prototype.afterGitCommandProcessed = function(command, deferred) {
@@ -73,7 +73,7 @@ GitShim.prototype.afterGitCommandProcessed = function(command, deferred) {
   })
   .done();
 
-  this.afterDeferHandler(afterDefer);
+  this.afterDeferHandler(afterDefer, command);
 };
 
 exports.GitShim = GitShim;

src/js/git/treeCompare.js

@@ -110,8 +110,6 @@ TreeCompare.prototype.compareTrees = function(treeA, treeB) {
   // like createTime, message, author
   this.reduceTreeFields([treeA, treeB]);
 
-  console.log('comparing tree A', treeA, 'to', treeB);
-
   return _.isEqual(treeA, treeB);
 };
 

src/js/level/commands.js

@@ -0,0 +1,28 @@
+var _ = require('underscore');
+
+var regexMap = {
+  'show goal': /^show goal$/,
+  'hide goal': /^hide goal$/,
+  'show solution': /^show solution$/,
+  'hint': /^hint$/
+};
+
+var parse = function(str) {
+  var levelMethod;
+
+  _.each(regexMap, function(regex, method) {
+    if (regex.test(str)) {
+      levelMethod = method;
+    }
+  });
+
+  return (!levelMethod) ? false : {
+    toSet: {
+      eventName: 'processLevelCommand',
+      method: levelMethod
+    }
+  };
+};
+
+exports.parse = parse;
+

src/js/level/index.js

@@ -34,8 +34,7 @@ var Level = Sandbox.extend({
     this.goalTreeString = options.level.goalTree;
     if (!this.goalTreeString) {
       console.warn('woah no goal, using random other one');
-      this.goalTreeString = '{"branches":{"master":{"target":"C2","id":"master"}},"commits":{"C0":{"parents":[],"id":"C0","rootCommit":true},"C1":{"parents":["C0"],"id":"C1"},"C2":{"parents":["C1"],"id":"C2"}},"HEAD":{"target":"master","id":"HEAD"}}';
-      //this.goalTreeString = '{"branches":{"master":{"target":"C2","id":"master"}},"commits":{"C0":{"parents":[],"id":"C0","rootCommit":true},"C1":{"parents":["C0"],"id":"C1"},"C2":{"parents":["C1"],"id":"C2"}},"HEAD":{"target":"master","id":"HEAD"}}';
+      this.goalTreeString = '{"branches":{"master":{"target":"C1","id":"master"},"win":{"target":"C2","id":"win"}},"commits":{"C0":{"parents":[],"id":"C0","rootCommit":true},"C1":{"parents":["C0"],"id":"C1"},"C2":{"parents":["C1"],"id":"C2"}},"HEAD":{"target":"win","id":"HEAD"}}';
     }
 
     Sandbox.prototype.initialize.apply(this, [options]);
@@ -50,7 +49,7 @@ var Level = Sandbox.extend({
       treeString: options.level.startTree
     });
 
-    //this.initGoalVisualization(options);
+    this.initGoalVisualization(options);
   },
 
   getDefaultGoalVisEl: function() {
@@ -58,12 +57,22 @@ var Level = Sandbox.extend({
   },
 
   initGoalVisualization: function(options) {
-    this.goalVisualization = new Visualization({
+    // first we make the goal visualization holder
+
+    // then we make a visualization. the "el" here is the element to
+    // track for size information. the container is where the canvas will be placed
+    this.goalVis = new Visualization({
       el: options.goalEl || this.getDefaultGoalVisEl(),
       treeString: this.goalTreeString,
       wait: true,
       slideOut: true
     });
+    this.goalVis.customEvents.on('paperReady', _.bind(function() {
+      // this is tricky. at this point we have a canvas that has 0
+      // opacity but its floating in front of our command history. we need
+      // to move it out without an animation and then give it an opacity of 1
+      this.goalVis.setTreeOpacity(1);
+    }, this));
   },
 
   initParseWaterfall: function(options) {
@@ -73,11 +82,13 @@ var Level = Sandbox.extend({
     if (options.level.disabledMap) {
       // disable these other commands
       this.parseWaterfall.addFirst(
+        'instantWaterfall',
         new DisabledMap({
           disabledMap: options.level.disabledMap
         }).getInstantCommands()
       );
     }
+
   },
 
   initGitShim: function(options) {
@@ -117,11 +128,18 @@ var Level = Sandbox.extend({
     if (matched) {
       this.gitCommandsIssued++;
     }
-    console.log('git commands isssued', this.gitCommandsIssued);
   },
 
-  afterCommandDefer: function(defer) {
-    if (this.solved) { return; }
+  afterCommandDefer: function(defer, command) {
+    if (this.solved) {
+      command.addWarning(
+        "You've already solved this level, try other levels with 'show levels'" +
+        "or go back to the sandbox with 'sandbox'"
+      );
+      defer.resolve();
+      return;
+    }
+
     // ok so lets see if they solved it...
     var current = this.mainVis.gitEngine.exportTree();
     var solved = this.treeCompare.compareTrees(current, this.goalTreeString);
@@ -136,10 +154,19 @@ var Level = Sandbox.extend({
   },
 
   levelSolved: function(defer) {
+    this.solved = true;
     this.mainVis.gitVisuals.finishAnimation()
     .then(function() {
       defer.resolve();
     });
+  },
+
+  getInstantCommands: function() {
+
+  },
+
+  parse: function() {
+
   }
 });
 

src/js/level/parseWaterfall.js

@@ -38,6 +38,9 @@ ParseWaterfall.prototype.getWaterfallMap = function() {
 };
 
 ParseWaterfall.prototype.addFirst = function(which, value) {
+  if (!which || !value) {
+    throw new Error('need to know which!!!');
+  }
   this.getWaterfallMap()[which].unshift(value);
 };
 

src/js/level/sandbox.js

@@ -34,7 +34,7 @@ var Sandbox = Backbone.View.extend({
   },
 
   getDefaultVisEl: function() {
-    return $('#canvasWrapper')[0];
+    return $('#mainVisSpace')[0];
   },
 
   initVisualization: function(options) {

src/js/level/sandboxCommands.js

@@ -1,8 +1,5 @@
 var _ = require('underscore');
 
-var GitCommands = require('../git/commands');
-var GitOptionParser = GitCommands.GitOptionParser;
-
 var Errors = require('../util/errors');
 var CommandProcessError = Errors.CommandProcessError;
 var GitError = Errors.GitError;

src/js/views/index.js

@@ -127,7 +127,6 @@ var ModalView = Backbone.View.extend({
   initialize: function(options) {
     this.shown = false;
     this.render();
-    this.stealKeyboard();
   },
 
   render: function() {
@@ -198,6 +197,12 @@ var ModalView = Backbone.View.extend({
   },
 
   toggleShow: function(value) {
+    if (value) {
+      this.stealKeyboard();
+    } else {
+      this.releaseKeyboard();
+    }
+
     this.shown = value;
     this.$el.toggleClass('show', value);
   },

src/js/visuals/visualization.js

@@ -10,10 +10,14 @@ var GitVisuals = require('../visuals').GitVisuals;
 
 var Visualization = Backbone.View.extend({
   initialize: function(options) {
-    var _this = this;
+    options = options || {};
+    this.options = options;
     this.customEvents = _.clone(Backbone.Events);
 
-    new Raphael(10, 10, 200, 200, function() {
+    var _this = this;
+    // we want to add our canvas somewhere
+    var container = options.containerElement || $('#canvasHolder')[0];
+    new Raphael(container, 200, 200, function() {
 
       // for some reason raphael calls this function with a predefined
       // context...
@@ -23,7 +27,6 @@ var Visualization = Backbone.View.extend({
   },
 
   paperInitialize: function(paper, options) {
-    options = options || {};
     this.treeString = options.treeString;
     this.paper = paper;
 
@@ -69,6 +72,7 @@ var Visualization = Backbone.View.extend({
     }
 
     this.customEvents.trigger('gitEngineReady');
+    this.customEvents.trigger('paperReady');
   },
 
   setTreeOpacity: function(level) {
@@ -79,6 +83,9 @@ var Visualization = Backbone.View.extend({
     $(this.paper.canvas).css('opacity', 0);
   },
 
+  harshSlideChange: function(value) {
+  },
+
   slideOut: function() {
     this.toggleSlide(true);
   },
@@ -142,15 +149,22 @@ var Visualization = Backbone.View.extend({
     var smaller = 1;
     var el = this.el;
 
-    var left = el.offsetLeft;
-    var top = el.offsetTop;
     var width = el.clientWidth - smaller;
     var height = el.clientHeight - smaller;
 
-    $(this.paper.canvas).css({
-      left: left + 'px',
-      top: top + 'px'
-    });
+    // if we don't have a container, we need to set our
+    // position absolutely to whatever we are tracking
+    if (!this.options.containerElement) {
+
+      var left = el.offsetLeft;
+      var top = el.offsetTop;
+      $(this.paper.canvas).css({
+        position: 'absolute',
+        left: left + 'px',
+        top: top + 'px'
+      });
+    }
+
     this.paper.setSize(width, height);
     this.gitVisuals.canvasResize(width, height);
   }