fiel refactor

src/js/app/index.js

@@ -11,10 +11,10 @@ var mainVis = null;
 ///////////////////////////////////////////////////////////////////////
 
 var init = function(){
-  var Visuals = require('../visuals');
+  var Visualization = require('../visuals/visualization').Visualization;
 
   ui = new UI();
-  mainVis = new Visuals.Visualization({
+  mainVis = new Visualization({
     el: $('#canvasWrapper')[0]
   });
 

src/js/views/miscViews.js

@@ -44,7 +44,6 @@ var InteractiveRebaseView = Backbone.View.extend({
   },
 
   toggleVisibility: function(toggle) {
-    console.log('toggling');
     $('#dialogHolder').toggleClass('shown', toggle);
   },
 

src/js/visuals/index.js

@@ -16,84 +16,6 @@ var VisNode = Tree.VisNode;
 var VisBranch = Tree.VisBranch;
 var VisEdge = Tree.VisEdge;
 
-var Visualization = Backbone.View.extend({
-  initialize: function(options) {
-    var _this = this;
-    new Raphael(10, 10, 200, 200, function() {
-
-      // for some reason raphael calls this function with a predefined
-      // context...
-      // so switch it
-      _this.paperInitialize(this, options);
-    });
-  },
-
-  paperInitialize: function(paper, options) {
-    options = options || {};
-    this.treeString = options.treeString;
-    this.paper = paper;
-
-    var Main = require('../app');
-    this.events = Main.getEvents();
-
-    this.commitCollection = new CommitCollection();
-    this.branchCollection = new BranchCollection();
-
-    this.gitVisuals = new GitVisuals({
-      commitCollection: this.commitCollection,
-      branchCollection: this.branchCollection,
-      paper: this.paper
-    });
-
-    var GitEngine = require('../git').GitEngine;
-    this.gitEngine = new GitEngine({
-      collection: this.commitCollection,
-      branches: this.branchCollection,
-      gitVisuals: this.gitVisuals,
-      events: this.events
-    });
-    this.gitEngine.init();
-    this.gitVisuals.assignGitEngine(this.gitEngine);
-
-    this.myResize();
-    $(window).on('resize', _.bind(this.myResize, this));
-    this.gitVisuals.drawTreeFirstTime();
-
-    if (this.treeString) {
-      this.gitEngine.loadTreeFromString(this.treeString);
-    }
-
-    this.setTreeOpacity(0);
-    this.fadeTreeIn();
-  },
-
-  setTreeOpacity: function(level) {
-    $(this.paper.canvas).css('opacity', 0);
-  },
-
-  fadeTreeIn: function() {
-    $(this.paper.canvas).animate({opacity: 1}, 300);
-  },
-
-  myResize: function() {
-    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'
-    });
-    this.paper.setSize(width, height);
-    this.gitVisuals.canvasResize(width, height);
-  }
-
-});
-
 function GitVisuals(options) {
   this.commitCollection = options.commitCollection;
   this.branchCollection = options.branchCollection;
@@ -173,7 +95,7 @@ GitVisuals.prototype.initHeadBranch = function() {
   this.addBranchFromEvent(this.gitEngine.HEAD);
 };
 
-GitVisuals.prototype.getScreenBounds = function() {
+GitVisuals.prototype.getScreenPadding = function() {
   // for now we return the node radius subtracted from the walls
   return {
     widthPadding: GRAPHICS.nodeRadius * 1.5,
@@ -185,15 +107,15 @@ GitVisuals.prototype.toScreenCoords = function(pos) {
   if (!this.paper.width) {
     throw new Error('being called too early for screen coords');
   }
-  var bounds = this.getScreenBounds();
+  var padding = this.getScreenPadding();
 
   var shrink = function(frac, total, padding) {
     return padding + frac * (total - padding * 2);
   };
 
   return {
-    x: shrink(pos.x, this.paper.width, bounds.widthPadding),
+    x: shrink(pos.x, this.paper.width, padding.widthPadding),
-    y: shrink(pos.y, this.paper.height, bounds.heightPadding)
+    y: shrink(pos.y, this.paper.height, padding.heightPadding)
   };
 };
 
@@ -700,6 +622,4 @@ function blendHueStrings(hueStrings) {
   return 'hsb(' + String(hue) + ',' + String(totalSat) + ',' + String(totalBright) + ')';
 }
 
-exports.Visualization = Visualization;
 exports.GitVisuals = GitVisuals;
-

src/js/visuals/tree.js

@@ -750,6 +750,16 @@ var VisNode = VisBase.extend({
     }, this);
   },
 
+  finishAnimation: function() {
+    var circle = this.get('circle');
+
+    // decide on a speed
+    var speedMag = 10;
+    var angle = Math.random() * 2 * Math.PI;
+    var vx = speedMag * Math.cos(angle);
+    var vy = speedMap * Math.sin(angle);
+  },
+
   genGraphics: function() {
     var paper = this.gitVisuals.paper;
 

todo.txt

@@ -10,6 +10,10 @@ 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)
+[ ] fix multiple rebases
 
 Small things to implement:
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -29,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] refactor visualization
 [x] aliases replace when put into commands
 [x] headless Git for testing (send it commands and expected trees)
 [x] few tests