diff --git a/src/commandModel.js b/src/commandModel.js index 2ddf7370..3a8255fb 100644 --- a/src/commandModel.js +++ b/src/commandModel.js @@ -100,6 +100,12 @@ var Command = Backbone.Model.extend({ git [] \ ") }); + }], + [/^refresh$/, function() { + events.trigger('refreshTree'); + throw new CommandResult({ + msg: "Refreshing tree..." + }); }] ]; }, diff --git a/src/commandViews.js b/src/commandViews.js index 78991fca..97d39f26 100644 --- a/src/commandViews.js +++ b/src/commandViews.js @@ -70,6 +70,7 @@ var CommandPromptView = Backbone.View.extend({ _.each(value.split(';'), _.bind(function(command) { command = command.replace(/^(\s+)/, ''); command = command.replace(/(\s+)$/, ''); + console.log('the command is', command); if (command.length) { this.addToCollection(command); } diff --git a/src/git.js b/src/git.js index a1c4da10..02486a75 100644 --- a/src/git.js +++ b/src/git.js @@ -40,6 +40,9 @@ GitEngine.prototype.init = function() { // commit once to get things going this.commit(); + + // update tree + events.trigger('treeRefresh'); }; GitEngine.prototype.getDetachedHead = function() { @@ -713,7 +716,7 @@ GitEngine.prototype.dispatch = function(command, callback) { } })); // TODO (get rid of) - for (var i = 0; i < 3; i++) { + for (var i = 0; i < 1; i++) { this.animationQueue.add(new Animation({closure: function() { console.log(Math.random()); }})); } diff --git a/src/main.js b/src/main.js index 1fd0baa9..2969b4eb 100644 --- a/src/main.js +++ b/src/main.js @@ -63,7 +63,6 @@ function windowResize() { var width = el.clientWidth - smaller; var height = el.clientHeight - smaller; - console.log('setting to', left, top, width, height); $(paper.canvas).css({ left: left + 'px', top: top + 'px' diff --git a/src/tree.js b/src/tree.js index 6227fd3e..dce80e9e 100644 --- a/src/tree.js +++ b/src/tree.js @@ -39,7 +39,7 @@ var VisNode = Backbone.Model.extend({ animateUpdatedPosition: function(speed, easing) { var pos = this.getScreenCoords(); - this.get('circle').animate({ + this.get('circle').stop().animate({ cx: pos.x, cy: pos.y }, @@ -90,9 +90,6 @@ var VisEdge = Backbone.Model.extend({ genSmoothBezierPathString: function(tail, head) { var tailPos = tail.getScreenCoords(); var headPos = head.getScreenCoords(); - - // first offset tail and head by radii - // we need to generate the path and control points for the bezier. format // is M(move abs) C (curve to) (control point 1) (control point 2) (final point) // the control points have to be __below__ to get the curve starting off straight. @@ -100,14 +97,18 @@ var VisEdge = Backbone.Model.extend({ var coords = function(pos) { return String(Math.round(pos.x)) + ',' + String(Math.round(pos.y)); }; - var offset = function(pos, dir, offset) { - offset = offset || GRAPHICS.curveControlPointOffset; + var offset = function(pos, dir, delta) { + delta = delta || GRAPHICS.curveControlPointOffset; return { x: pos.x, - y: pos.y + GRAPHICS.curveControlPointOffset * dir + y: pos.y + delta * dir }; }; + // first offset tail and head by radii + tailPos = offset(tailPos, -1, tail.getRadius()); + headPos = offset(headPos, 1, head.getRadius()); + var str = ''; // first move to bottom of tail str += 'M' + coords(tailPos) + ' '; @@ -134,7 +135,7 @@ var VisEdge = Backbone.Model.extend({ animateUpdatedPath: function(speed, easing) { var newPath = this.getBezierCurve(); this.get('path').toBack(); - this.get('path').animate({ + this.get('path').stop().animate({ path: newPath }, speed || this.get('animationSpeed'), diff --git a/src/visuals.js b/src/visuals.js index 3c56bbe4..5057f59e 100644 --- a/src/visuals.js +++ b/src/visuals.js @@ -1,5 +1,4 @@ function GitVisuals(options) { - // the this.commitCollection = options.collection; this.visNodeMap = {}; this.edgeCollection = new VisEdgeCollection(); @@ -19,6 +18,9 @@ function GitVisuals(options) { events.on('raphaelReady', _.bind( this.drawTreeFirstTime, this )); + events.on('refreshTree', _.bind( + this.refreshTree, this + )); } GitVisuals.prototype.getScreenBounds = function() { @@ -63,6 +65,8 @@ GitVisuals.prototype.toScreenCoords = function(pos) { **************************************/ GitVisuals.prototype.refreshTree = function() { + if (!this.paperReady) { return; } + this.calculateTreeCoords(); this.animateNodePositions(); this.animateEdges(); @@ -159,7 +163,6 @@ GitVisuals.prototype.calcDepth = function() { GitVisuals.prototype.animateNodePositions = function() { _.each(this.visNodeMap, function(visNode) { - console.log(visNode); visNode.animateUpdatedPosition(); }, this); }; @@ -178,8 +181,6 @@ GitVisuals.prototype.getDepthIncrement = function(maxDepth) { }; GitVisuals.prototype.calcDepthRecursive = function(commit, depth) { - console.log('calculating depth recursive for ', commit); - commit.get('visNode').set('depth', depth); var children = commit.get('children'); @@ -196,6 +197,8 @@ GitVisuals.prototype.calcDepthRecursive = function(commit, depth) { GitVisuals.prototype.canvasResize = function(width, height) { this.paperWidth = width; this.paperHeight = height; + // TODO figure out whether we are animating or not and possibly delay this + this.refreshTree(); }; GitVisuals.prototype.addNode = function(id, commit) { diff --git a/todo.txt b/todo.txt new file mode 100644 index 00000000..ce14e32d --- /dev/null +++ b/todo.txt @@ -0,0 +1,3 @@ +SAFE calling on tree animation -- so it will update when necessary (AnimationArbiter class) + +