diff --git a/build/bundle.js b/build/bundle.js index e2984bd1..2635db88 100644 --- a/build/bundle.js +++ b/build/bundle.js @@ -9562,37 +9562,90 @@ GitVisuals.prototype.finishAnimation = function() { var defaultTime = GRAPHICS.defaultAnimationTime; var nodeRadius = GRAPHICS.nodeRadius; - deferred.promise.then(_.bind(function() { + var textString = 'Solved!!\n:D'; + var text = null; + var makeText = _.bind(function() { + text = this.paper.text( + this.paper.width / 2, + this.paper.height / 2, + textString + ); + text.attr({ + opacity: 0, + 'font-weight': 500, + 'font-size': '32pt', + 'font-family': 'Monaco, Courier, font-monospace', + stroke: '#000', + 'stroke-width': 2, + fill: '#000' + }); + text.animate({ opacity: 1 }, defaultTime); + }, this); + + // this is a BIG ANIMATION but it ends up just being + // a sweet chain of promises but is pretty nice. this is + // after I discovered promises / deferred's. Unfortunately + // I wrote a lot of the git stuff before promises, so + // that's somewhat ugly + + deferred.promise + // first fade out everything but circles + .then(_.bind(function() { return this.animateAllAttrKeys( { exclude: ['circle'] }, { opacity: 0 }, - defaultTime * 1.5 + defaultTime * 1.1 ); - }, this)) + // then make circle radii bigger .then(_.bind(function() { return this.animateAllAttrKeys( - { - include: ['circle'], - exclude: ['arrow', 'rect', 'path', 'text'] - }, + { exclude: ['arrow', 'rect', 'path', 'text'] }, { r: nodeRadius * 2 }, - defaultTime * 2 + defaultTime * 1.5 ); - + }, this)) + // then shrink em super fast + .then(_.bind(function() { + return this.animateAllAttrKeys( + { exclude: ['arrow', 'rect', 'path', 'text'] }, + { r: nodeRadius * 0.75 }, + defaultTime * 0.5 + ); + }, this)) + // then explode them and display text + .then(_.bind(function() { + makeText(); + return this.explodeNodes(); }, this)) .then(_.bind(function() { return this.explodeNodes(); - + }, this)) + // then fade circles (aka everything) in and back + .then(_.bind(function() { + return this.animateAllAttrKeys( + { exclude: ['arrow', 'rect', 'path', 'text'] }, + {}, + defaultTime * 1.25 + ); + }, this)) + // then fade everything in and remove text + .then(_.bind(function() { + text.animate({ opacity: 0 }, defaultTime, undefined, undefined, function() { + text.remove(); + }); + return this.animateAllAttrKeys( + {}, + {} + ); }, this)) .fail(function(reason) { console.warn('Finish animation failed due to ', reason); throw reason; - }) - .done(); + }); - deferred.resolve(); - return deferred; + deferred.resolve(); // start right away + return deferred.promise; }; GitVisuals.prototype.explodeNodes = function() { @@ -10522,7 +10575,7 @@ var VisNode = VisBase.extend({ cy: y }); // continuation calculation - return (vx * vx + vy * vy > 0.01) ? true : false; + return ((vx * vx + vy * vy) > 0.01) ? true : false; }; return stepFunc; }, @@ -10603,6 +10656,7 @@ var VisBase = Backbone.Model.extend({ exports.VisBase = VisBase; + }); require.define("/src/js/visuals/visBranch.js",function(require,module,exports,__dirname,__filename,process,global){var _ = require('underscore'); @@ -14894,37 +14948,90 @@ GitVisuals.prototype.finishAnimation = function() { var defaultTime = GRAPHICS.defaultAnimationTime; var nodeRadius = GRAPHICS.nodeRadius; - deferred.promise.then(_.bind(function() { + var textString = 'Solved!!\n:D'; + var text = null; + var makeText = _.bind(function() { + text = this.paper.text( + this.paper.width / 2, + this.paper.height / 2, + textString + ); + text.attr({ + opacity: 0, + 'font-weight': 500, + 'font-size': '32pt', + 'font-family': 'Monaco, Courier, font-monospace', + stroke: '#000', + 'stroke-width': 2, + fill: '#000' + }); + text.animate({ opacity: 1 }, defaultTime); + }, this); + + // this is a BIG ANIMATION but it ends up just being + // a sweet chain of promises but is pretty nice. this is + // after I discovered promises / deferred's. Unfortunately + // I wrote a lot of the git stuff before promises, so + // that's somewhat ugly + + deferred.promise + // first fade out everything but circles + .then(_.bind(function() { return this.animateAllAttrKeys( { exclude: ['circle'] }, { opacity: 0 }, - defaultTime * 1.5 + defaultTime * 1.1 ); - }, this)) + // then make circle radii bigger .then(_.bind(function() { return this.animateAllAttrKeys( - { - include: ['circle'], - exclude: ['arrow', 'rect', 'path', 'text'] - }, + { exclude: ['arrow', 'rect', 'path', 'text'] }, { r: nodeRadius * 2 }, - defaultTime * 2 + defaultTime * 1.5 ); - + }, this)) + // then shrink em super fast + .then(_.bind(function() { + return this.animateAllAttrKeys( + { exclude: ['arrow', 'rect', 'path', 'text'] }, + { r: nodeRadius * 0.75 }, + defaultTime * 0.5 + ); + }, this)) + // then explode them and display text + .then(_.bind(function() { + makeText(); + return this.explodeNodes(); }, this)) .then(_.bind(function() { return this.explodeNodes(); - + }, this)) + // then fade circles (aka everything) in and back + .then(_.bind(function() { + return this.animateAllAttrKeys( + { exclude: ['arrow', 'rect', 'path', 'text'] }, + {}, + defaultTime * 1.25 + ); + }, this)) + // then fade everything in and remove text + .then(_.bind(function() { + text.animate({ opacity: 0 }, defaultTime, undefined, undefined, function() { + text.remove(); + }); + return this.animateAllAttrKeys( + {}, + {} + ); }, this)) .fail(function(reason) { console.warn('Finish animation failed due to ', reason); throw reason; - }) - .done(); + }); - deferred.resolve(); - return deferred; + deferred.resolve(); // start right away + return deferred.promise; }; GitVisuals.prototype.explodeNodes = function() { @@ -15507,6 +15614,7 @@ var VisBase = Backbone.Model.extend({ exports.VisBase = VisBase; + }); require("/src/js/visuals/tree.js"); @@ -16498,7 +16606,7 @@ var VisNode = VisBase.extend({ cy: y }); // continuation calculation - return (vx * vx + vy * vy > 0.01) ? true : false; + return ((vx * vx + vy * vy) > 0.01) ? true : false; }; return stepFunc; }, diff --git a/src/js/visuals/index.js b/src/js/visuals/index.js index e28ade27..fb2b1e59 100644 --- a/src/js/visuals/index.js +++ b/src/js/visuals/index.js @@ -143,37 +143,90 @@ GitVisuals.prototype.finishAnimation = function() { var defaultTime = GRAPHICS.defaultAnimationTime; var nodeRadius = GRAPHICS.nodeRadius; - deferred.promise.then(_.bind(function() { + var textString = 'Solved!!\n:D'; + var text = null; + var makeText = _.bind(function() { + text = this.paper.text( + this.paper.width / 2, + this.paper.height / 2, + textString + ); + text.attr({ + opacity: 0, + 'font-weight': 500, + 'font-size': '32pt', + 'font-family': 'Monaco, Courier, font-monospace', + stroke: '#000', + 'stroke-width': 2, + fill: '#000' + }); + text.animate({ opacity: 1 }, defaultTime); + }, this); + + // this is a BIG ANIMATION but it ends up just being + // a sweet chain of promises but is pretty nice. this is + // after I discovered promises / deferred's. Unfortunately + // I wrote a lot of the git stuff before promises, so + // that's somewhat ugly + + deferred.promise + // first fade out everything but circles + .then(_.bind(function() { return this.animateAllAttrKeys( { exclude: ['circle'] }, { opacity: 0 }, - defaultTime * 1.5 + defaultTime * 1.1 ); - }, this)) + // then make circle radii bigger .then(_.bind(function() { return this.animateAllAttrKeys( - { - include: ['circle'], - exclude: ['arrow', 'rect', 'path', 'text'] - }, + { exclude: ['arrow', 'rect', 'path', 'text'] }, { r: nodeRadius * 2 }, - defaultTime * 2 + defaultTime * 1.5 ); - + }, this)) + // then shrink em super fast + .then(_.bind(function() { + return this.animateAllAttrKeys( + { exclude: ['arrow', 'rect', 'path', 'text'] }, + { r: nodeRadius * 0.75 }, + defaultTime * 0.5 + ); + }, this)) + // then explode them and display text + .then(_.bind(function() { + makeText(); + return this.explodeNodes(); }, this)) .then(_.bind(function() { return this.explodeNodes(); - + }, this)) + // then fade circles (aka everything) in and back + .then(_.bind(function() { + return this.animateAllAttrKeys( + { exclude: ['arrow', 'rect', 'path', 'text'] }, + {}, + defaultTime * 1.25 + ); + }, this)) + // then fade everything in and remove text + .then(_.bind(function() { + text.animate({ opacity: 0 }, defaultTime, undefined, undefined, function() { + text.remove(); + }); + return this.animateAllAttrKeys( + {}, + {} + ); }, this)) .fail(function(reason) { console.warn('Finish animation failed due to ', reason); throw reason; - }) - .done(); + }); - deferred.resolve(); - return deferred; + deferred.resolve(); // start right away + return deferred.promise; }; GitVisuals.prototype.explodeNodes = function() { diff --git a/src/js/visuals/tree.js b/src/js/visuals/tree.js index 984f4abf..e5952228 100644 --- a/src/js/visuals/tree.js +++ b/src/js/visuals/tree.js @@ -42,3 +42,4 @@ var VisBase = Backbone.Model.extend({ }); exports.VisBase = VisBase; + diff --git a/src/js/visuals/visNode.js b/src/js/visuals/visNode.js index a7c4d556..74854675 100644 --- a/src/js/visuals/visNode.js +++ b/src/js/visuals/visNode.js @@ -391,7 +391,7 @@ var VisNode = VisBase.extend({ cy: y }); // continuation calculation - return (vx * vx + vy * vy > 0.01) ? true : false; + return ((vx * vx + vy * vy) > 0.01) ? true : false; }; return stepFunc; }, diff --git a/todo.txt b/todo.txt index 19f6831e..0d63ca88 100644 --- a/todo.txt +++ b/todo.txt @@ -9,7 +9,6 @@ Big Graphic things: Medium things: ~~~~~~~~~~~~~~~~~~~~~~~~~~~ -[ ] level finish animation [ ] check animations [ ] view for anything above the fold [ ] rebase styling (get it better. even cuter -- make it like a command window) @@ -34,6 +33,7 @@ Big Bugs to fix: Done things: (I only started this on Dec 17th 2012 to get a better sense of what was done) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +[x] level finish animation [x] refactor visualization [x] aliases replace when put into commands [x] headless Git for testing (send it commands and expected trees)