diff --git a/build/bundle.js b/build/bundle.js index 2e3c32ca..40a9a664 100644 --- a/build/bundle.js +++ b/build/bundle.js @@ -4502,7 +4502,7 @@ var Sandbox = Backbone.View.extend({ }, getDefaultVisEl: function() { - return $('#canvasWrapper')[0]; + return $('#mainVisSpace')[0]; }, initVisualization: function(options) { @@ -4761,8 +4761,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]); @@ -4777,7 +4776,7 @@ var Level = Sandbox.extend({ treeString: options.level.startTree }); - //this.initGoalVisualization(options); + this.initGoalVisualization(options); }, getDefaultGoalVisEl: function() { @@ -4785,12 +4784,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) { @@ -4800,11 +4809,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) { @@ -4844,11 +4855,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); @@ -4863,10 +4881,19 @@ var Level = Sandbox.extend({ }, levelSolved: function(defer) { + this.solved = true; this.mainVis.gitVisuals.finishAnimation() .then(function() { defer.resolve(); }); + }, + + getInstantCommands: function() { + + }, + + parse: function() { + } }); @@ -6458,10 +6485,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... @@ -6471,7 +6502,6 @@ var Visualization = Backbone.View.extend({ }, paperInitialize: function(paper, options) { - options = options || {}; this.treeString = options.treeString; this.paper = paper; @@ -6517,6 +6547,7 @@ var Visualization = Backbone.View.extend({ } this.customEvents.trigger('gitEngineReady'); + this.customEvents.trigger('paperReady'); }, setTreeOpacity: function(level) { @@ -6527,6 +6558,9 @@ var Visualization = Backbone.View.extend({ $(this.paper.canvas).css('opacity', 0); }, + harshSlideChange: function(value) { + }, + slideOut: function() { this.toggleSlide(true); }, @@ -6590,15 +6624,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); } @@ -8879,8 +8920,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); }; @@ -9243,7 +9282,6 @@ var ModalView = Backbone.View.extend({ initialize: function(options) { this.shown = false; this.render(); - this.stealKeyboard(); }, render: function() { @@ -9314,6 +9352,12 @@ var ModalView = Backbone.View.extend({ }, toggleShow: function(value) { + if (value) { + this.stealKeyboard(); + } else { + this.releaseKeyboard(); + } + this.shown = value; this.$el.toggleClass('show', value); }, @@ -11999,6 +12043,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); }; @@ -12059,9 +12106,6 @@ exports.ParseWaterfall = ParseWaterfall; require.define("/src/js/level/SandboxCommands.js",function(require,module,exports,__dirname,__filename,process,global){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; @@ -14085,7 +14129,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) { @@ -14101,7 +14145,7 @@ GitShim.prototype.afterGitCommandProcessed = function(command, deferred) { }) .done(); - this.afterDeferHandler(afterDefer); + this.afterDeferHandler(afterDefer, command); }; exports.GitShim = GitShim; @@ -15359,7 +15403,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) { @@ -15375,7 +15419,7 @@ GitShim.prototype.afterGitCommandProcessed = function(command, deferred) { }) .done(); - this.afterDeferHandler(afterDefer); + this.afterDeferHandler(afterDefer, command); }; exports.GitShim = GitShim; @@ -17239,8 +17283,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); }; @@ -17250,6 +17292,38 @@ exports.TreeCompare = TreeCompare; }); require("/src/js/git/treeCompare.js"); +require.define("/src/js/level/commands.js",function(require,module,exports,__dirname,__filename,process,global){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; + + +}); +require("/src/js/level/commands.js"); + require.define("/src/js/level/disabledMap.js",function(require,module,exports,__dirname,__filename,process,global){var _ = require('underscore'); var GitCommands = require('../git/commands'); @@ -17329,8 +17403,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]); @@ -17345,7 +17418,7 @@ var Level = Sandbox.extend({ treeString: options.level.startTree }); - //this.initGoalVisualization(options); + this.initGoalVisualization(options); }, getDefaultGoalVisEl: function() { @@ -17353,12 +17426,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) { @@ -17368,11 +17451,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) { @@ -17412,11 +17497,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); @@ -17431,10 +17523,19 @@ var Level = Sandbox.extend({ }, levelSolved: function(defer) { + this.solved = true; this.mainVis.gitVisuals.finishAnimation() .then(function() { defer.resolve(); }); + }, + + getInstantCommands: function() { + + }, + + parse: function() { + } }); @@ -17484,6 +17585,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); }; @@ -17579,7 +17683,7 @@ var Sandbox = Backbone.View.extend({ }, getDefaultVisEl: function() { - return $('#canvasWrapper')[0]; + return $('#mainVisSpace')[0]; }, initVisualization: function(options) { @@ -17671,9 +17775,6 @@ require("/src/js/level/sandbox.js"); require.define("/src/js/level/sandboxCommands.js",function(require,module,exports,__dirname,__filename,process,global){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; @@ -18926,7 +19027,6 @@ var ModalView = Backbone.View.extend({ initialize: function(options) { this.shown = false; this.render(); - this.stealKeyboard(); }, render: function() { @@ -18997,6 +19097,12 @@ var ModalView = Backbone.View.extend({ }, toggleShow: function(value) { + if (value) { + this.stealKeyboard(); + } else { + this.releaseKeyboard(); + } + this.shown = value; this.$el.toggleClass('show', value); }, @@ -21679,10 +21785,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... @@ -21692,7 +21802,6 @@ var Visualization = Backbone.View.extend({ }, paperInitialize: function(paper, options) { - options = options || {}; this.treeString = options.treeString; this.paper = paper; @@ -21738,6 +21847,7 @@ var Visualization = Backbone.View.extend({ } this.customEvents.trigger('gitEngineReady'); + this.customEvents.trigger('paperReady'); }, setTreeOpacity: function(level) { @@ -21748,6 +21858,9 @@ var Visualization = Backbone.View.extend({ $(this.paper.canvas).css('opacity', 0); }, + harshSlideChange: function(value) { + }, + slideOut: function() { this.toggleSlide(true); }, @@ -21811,15 +21924,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); } diff --git a/src/index.html b/src/index.html index 4f62c3e6..3336ed35 100644 --- a/src/index.html +++ b/src/index.html @@ -51,10 +51,14 @@ -
+
+
+ +
+ diff --git a/src/js/git/gitShim.js b/src/js/git/gitShim.js index a506725f..970bced5 100644 --- a/src/js/git/gitShim.js +++ b/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; diff --git a/src/js/git/treeCompare.js b/src/js/git/treeCompare.js index 20a29069..d1f06304 100644 --- a/src/js/git/treeCompare.js +++ b/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); }; diff --git a/src/js/level/commands.js b/src/js/level/commands.js new file mode 100644 index 00000000..64e43853 --- /dev/null +++ b/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; + diff --git a/src/js/level/index.js b/src/js/level/index.js index 752c417f..4a3e0306 100644 --- a/src/js/level/index.js +++ b/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() { + } }); diff --git a/src/js/level/parseWaterfall.js b/src/js/level/parseWaterfall.js index 1bdba026..541413fc 100644 --- a/src/js/level/parseWaterfall.js +++ b/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); }; diff --git a/src/js/level/sandbox.js b/src/js/level/sandbox.js index c3c33f36..3630f522 100644 --- a/src/js/level/sandbox.js +++ b/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) { diff --git a/src/js/level/sandboxCommands.js b/src/js/level/sandboxCommands.js index f538a65b..2c7b378e 100644 --- a/src/js/level/sandboxCommands.js +++ b/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; diff --git a/src/js/views/index.js b/src/js/views/index.js index a5fb1d37..51245fa3 100644 --- a/src/js/views/index.js +++ b/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); }, diff --git a/src/js/visuals/visualization.js b/src/js/visuals/visualization.js index 624955e5..fea50527 100644 --- a/src/js/visuals/visualization.js +++ b/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); } diff --git a/src/style/main.css b/src/style/main.css index be8834ed..c7a6d2a5 100644 --- a/src/style/main.css +++ b/src/style/main.css @@ -6,13 +6,9 @@ body { margin: 0px; border: 0px; padding: 0px; - -webkit-perspective: 800; - -webkit-perspective-origin: 50% 225px; } html, body { - -webkit-perspective: 600px; - font-family: Monaco, Courier, font-monospace; color: #eee; } @@ -118,7 +114,16 @@ body svg, transition: all 1700ms cubic-bezier(0.260, 0.860, 0.440, 0.985); } -#canvasWrapper { +/* Some interface things */ + +#canvasHolder { + position: absolute; + top: 0; + left: 0; + width: 100%; +} + +#mainVisSpace { background-color: #4183C4; }