more progress on arrows and stuff

src/commandModel.js

@@ -100,6 +100,12 @@ var Command = Backbone.Model.extend({
               git <command> [<args>] \
           ")
         });
+      }],
+      [/^refresh$/, function() {
+        events.trigger('refreshTree');
+        throw new CommandResult({
+          msg: "Refreshing tree..."
+        });
       }]
     ];
   },

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);
       }

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()); }}));
   }
 

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'

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'),

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) {

todo.txt

@@ -0,0 +1,3 @@
+SAFE calling on tree animation -- so it will update when necessary (AnimationArbiter class)
+
+