[Origin] Makes two visualizations now and links the objects and small graphical updates

build/bundle.js

@@ -3155,12 +3155,13 @@ var GRAPHICS = {
   defaultEasing: 'easeInOut',
   defaultAnimationTime: 400,
 
-  //rectFill: '#FF3A3A',
   rectFill: 'hsb(0.8816909813322127,0.7,1)',
   headRectFill: '#2831FF',
   rectStroke: '#FFF',
   rectStrokeWidth: '3',
 
+  originDash: '- ',
+
   multiBranchY: 20,
   upstreamHeadOpacity: 0.5,
   upstreamNoneOpacity: 0.2,
@@ -15850,6 +15851,8 @@ var VisNode = VisBase.extend({
     var pos = this.getScreenCoords();
     var textPos = this.getTextScreenCoords();
     var opacity = this.getOpacity();
+    var dashArray = (this.getIsInOrigin()) ?
+      GRAPHICS.originDash : '';
 
     return {
       circle: {
@@ -15859,6 +15862,7 @@ var VisNode = VisBase.extend({
         r: this.getRadius(),
         fill: this.getFill(),
         'stroke-width': this.get('stroke-width'),
+        'stroke-dasharray': dashArray,
         stroke: this.get('stroke')
       },
       text: {
@@ -15903,19 +15907,16 @@ var VisNode = VisBase.extend({
     this.animateToAttr(snapShot[this.getID()], speed, easing);
   },
 
-  animateToAttr: function(attr, speed, easing) {
+  setAttr: function(attr, instant, speed, easing) {
-    if (speed === 0) {
+    var keys = ['text', 'circle'];
-      this.get('circle').attr(attr.circle);
+    this.setAttrBase(keys, attr, instant, speed, easing);
-      this.get('text').attr(attr.text);
+  },
-      return;
-    }
 
+  animateToAttr: function(attr, speed, easing) {
+    VisBase.prototype.animateToAttr.apply(this, arguments);
     var s = speed !== undefined ? speed : this.get('animationSpeed');
     var e = easing || this.get('animationEasing');
 
-    this.get('circle').stop().animate(attr.circle, s, e);
-    this.get('text').stop().animate(attr.text, s, e);
-
     if (easing == 'bounce' &&
         attr.circle && attr.circle.cx !== undefined &&
         attr.text && attr.text.x !== undefined ) {
@@ -16192,6 +16193,50 @@ var VisBase = Backbone.Model.extend({
     }, this);
   },
 
+  getNonAnimateKeys: function() {
+    return [
+      'stroke-dasharray'
+    ];
+  },
+
+  getIsInOrigin: function() {
+    if (!this.get('gitEngine')) {
+      return false;
+    }
+    return this.get('gitEngine').isOrigin();
+  },
+
+  animateToAttr: function(attr, speed, easing) {
+    if (speed === 0) {
+      this.setAttr(attr, /* instant */ true);
+      return;
+    }
+
+    var s = speed !== undefined ? speed : this.get('animationSpeed');
+    var e = easing || this.get('animationEasing');
+    this.setAttr(attr, /* instance */ false, s, e);
+  },
+
+  setAttrBase: function(keys, attr, instant, speed, easing) {
+    _.each(keys, function(key) {
+      if (instant) {
+        this.get(key).attr(attr[key]);
+      } else {
+        this.get(key).stop().animate(attr[key], speed, easing);
+        // some keys dont support animating too, so set those instantly here
+        _.forEach(this.getNonAnimateKeys(), function(nonAnimateKey) {
+          if (attr[key] && attr[key][nonAnimateKey] !== undefined) {
+            this.get(key).attr(nonAnimateKey, attr[key][nonAnimateKey]);
+          }
+        }, this);
+      }
+
+      if (attr.css) {
+        $(this.get(key).node).css(attr.css);
+      }
+    }, this);
+  },
+
   animateAttrKeys: function(keys, attrObj, speed, easing) {
     // either we animate a specific subset of keys or all
     // possible things we could animate
@@ -16527,7 +16572,7 @@ var VisBranch = VisBase.extend({
     var name = this.get('branch').getName();
     var selected = this.get('branch') === this.gitEngine.HEAD.get('target');
 
-    var after = (selected) ? '*' : '';
+    var after = (selected && !this.getIsInOrigin()) ? '*' : '';
     return name + after;
   },
 
@@ -16665,7 +16710,8 @@ var VisBranch = VisBase.extend({
     var rectSize = this.getRectSize();
 
     var arrowPath = this.getArrowPath();
-    var dashArray = (this.getIsRemote()) ? '--' : '';
+    var dashArray = (this.getIsRemote() || this.getIsInOrigin()) ?
+      GRAPHICS.originDash : '';
     var cursorStyle = (this.shouldDisableClick()) ?
       'auto' :
       'pointer';
@@ -16687,7 +16733,7 @@ var VisBranch = VisBase.extend({
         opacity: nonTextOpacity,
         fill: this.getFill(),
         stroke: this.get('stroke'),
-        'stroke-dasharray': dashArray,
+        //'stroke-dasharray': dashArray,
         'stroke-width': this.get('stroke-width')
       },
       arrow: {
@@ -16713,26 +16759,7 @@ var VisBranch = VisBase.extend({
 
   setAttr: function(attr, instant, speed, easing) {
     var keys = ['text', 'rect', 'arrow'];
-    _.each(keys, function(key) {
+    this.setAttrBase(keys, attr, instant, speed, easing);
-      if (instant) {
-        this.get(key).attr(attr[key]);
-      } else {
-        this.get(key).stop().animate(attr[key], speed, easing);
-      }
-
-      $(this.get(key).node).css(attr.css);
-    }, this);
-  },
-
-  animateToAttr: function(attr, speed, easing) {
-    if (speed === 0) {
-      this.setAttr(attr, /* instant */ true);
-      return;
-    }
-
-    var s = speed !== undefined ? speed : this.get('animationSpeed');
-    var e = easing || this.get('animationEasing');
-    this.setAttr(attr, /* instance */ false, s, e);
   }
 });
 
@@ -27463,12 +27490,13 @@ var GRAPHICS = {
   defaultEasing: 'easeInOut',
   defaultAnimationTime: 400,
 
-  //rectFill: '#FF3A3A',
   rectFill: 'hsb(0.8816909813322127,0.7,1)',
   headRectFill: '#2831FF',
   rectStroke: '#FFF',
   rectStrokeWidth: '3',
 
+  originDash: '- ',
+
   multiBranchY: 20,
   upstreamHeadOpacity: 0.5,
   upstreamNoneOpacity: 0.2,
@@ -31783,6 +31811,50 @@ var VisBase = Backbone.Model.extend({
     }, this);
   },
 
+  getNonAnimateKeys: function() {
+    return [
+      'stroke-dasharray'
+    ];
+  },
+
+  getIsInOrigin: function() {
+    if (!this.get('gitEngine')) {
+      return false;
+    }
+    return this.get('gitEngine').isOrigin();
+  },
+
+  animateToAttr: function(attr, speed, easing) {
+    if (speed === 0) {
+      this.setAttr(attr, /* instant */ true);
+      return;
+    }
+
+    var s = speed !== undefined ? speed : this.get('animationSpeed');
+    var e = easing || this.get('animationEasing');
+    this.setAttr(attr, /* instance */ false, s, e);
+  },
+
+  setAttrBase: function(keys, attr, instant, speed, easing) {
+    _.each(keys, function(key) {
+      if (instant) {
+        this.get(key).attr(attr[key]);
+      } else {
+        this.get(key).stop().animate(attr[key], speed, easing);
+        // some keys dont support animating too, so set those instantly here
+        _.forEach(this.getNonAnimateKeys(), function(nonAnimateKey) {
+          if (attr[key] && attr[key][nonAnimateKey] !== undefined) {
+            this.get(key).attr(nonAnimateKey, attr[key][nonAnimateKey]);
+          }
+        }, this);
+      }
+
+      if (attr.css) {
+        $(this.get(key).node).css(attr.css);
+      }
+    }, this);
+  },
+
   animateAttrKeys: function(keys, attrObj, speed, easing) {
     // either we animate a specific subset of keys or all
     // possible things we could animate
@@ -32119,7 +32191,7 @@ var VisBranch = VisBase.extend({
     var name = this.get('branch').getName();
     var selected = this.get('branch') === this.gitEngine.HEAD.get('target');
 
-    var after = (selected) ? '*' : '';
+    var after = (selected && !this.getIsInOrigin()) ? '*' : '';
     return name + after;
   },
 
@@ -32257,7 +32329,8 @@ var VisBranch = VisBase.extend({
     var rectSize = this.getRectSize();
 
     var arrowPath = this.getArrowPath();
-    var dashArray = (this.getIsRemote()) ? '--' : '';
+    var dashArray = (this.getIsRemote() || this.getIsInOrigin()) ?
+      GRAPHICS.originDash : '';
     var cursorStyle = (this.shouldDisableClick()) ?
       'auto' :
       'pointer';
@@ -32279,7 +32352,7 @@ var VisBranch = VisBase.extend({
         opacity: nonTextOpacity,
         fill: this.getFill(),
         stroke: this.get('stroke'),
-        'stroke-dasharray': dashArray,
+        //'stroke-dasharray': dashArray,
         'stroke-width': this.get('stroke-width')
       },
       arrow: {
@@ -32305,26 +32378,7 @@ var VisBranch = VisBase.extend({
 
   setAttr: function(attr, instant, speed, easing) {
     var keys = ['text', 'rect', 'arrow'];
-    _.each(keys, function(key) {
+    this.setAttrBase(keys, attr, instant, speed, easing);
-      if (instant) {
-        this.get(key).attr(attr[key]);
-      } else {
-        this.get(key).stop().animate(attr[key], speed, easing);
-      }
-
-      $(this.get(key).node).css(attr.css);
-    }, this);
-  },
-
-  animateToAttr: function(attr, speed, easing) {
-    if (speed === 0) {
-      this.setAttr(attr, /* instant */ true);
-      return;
-    }
-
-    var s = speed !== undefined ? speed : this.get('animationSpeed');
-    var e = easing || this.get('animationEasing');
-    this.setAttr(attr, /* instance */ false, s, e);
   }
 });
 
@@ -32638,6 +32692,8 @@ var VisNode = VisBase.extend({
     var pos = this.getScreenCoords();
     var textPos = this.getTextScreenCoords();
     var opacity = this.getOpacity();
+    var dashArray = (this.getIsInOrigin()) ?
+      GRAPHICS.originDash : '';
 
     return {
       circle: {
@@ -32647,6 +32703,7 @@ var VisNode = VisBase.extend({
         r: this.getRadius(),
         fill: this.getFill(),
         'stroke-width': this.get('stroke-width'),
+        'stroke-dasharray': dashArray,
         stroke: this.get('stroke')
       },
       text: {
@@ -32691,19 +32748,16 @@ var VisNode = VisBase.extend({
     this.animateToAttr(snapShot[this.getID()], speed, easing);
   },
 
-  animateToAttr: function(attr, speed, easing) {
+  setAttr: function(attr, instant, speed, easing) {
-    if (speed === 0) {
+    var keys = ['text', 'circle'];
-      this.get('circle').attr(attr.circle);
+    this.setAttrBase(keys, attr, instant, speed, easing);
-      this.get('text').attr(attr.text);
+  },
-      return;
-    }
 
+  animateToAttr: function(attr, speed, easing) {
+    VisBase.prototype.animateToAttr.apply(this, arguments);
     var s = speed !== undefined ? speed : this.get('animationSpeed');
     var e = easing || this.get('animationEasing');
 
-    this.get('circle').stop().animate(attr.circle, s, e);
-    this.get('text').stop().animate(attr.text, s, e);
-
     if (easing == 'bounce' &&
         attr.circle && attr.circle.cx !== undefined &&
         attr.text && attr.text.x !== undefined ) {

src/js/util/constants.js

@@ -25,12 +25,13 @@ var GRAPHICS = {
   defaultEasing: 'easeInOut',
   defaultAnimationTime: 400,
 
-  //rectFill: '#FF3A3A',
   rectFill: 'hsb(0.8816909813322127,0.7,1)',
   headRectFill: '#2831FF',
   rectStroke: '#FFF',
   rectStrokeWidth: '3',
 
+  originDash: '- ',
+
   multiBranchY: 20,
   upstreamHeadOpacity: 0.5,
   upstreamNoneOpacity: 0.2,

src/js/visuals/visBase.js

@@ -10,6 +10,50 @@ var VisBase = Backbone.Model.extend({
     }, this);
   },
 
+  getNonAnimateKeys: function() {
+    return [
+      'stroke-dasharray'
+    ];
+  },
+
+  getIsInOrigin: function() {
+    if (!this.get('gitEngine')) {
+      return false;
+    }
+    return this.get('gitEngine').isOrigin();
+  },
+
+  animateToAttr: function(attr, speed, easing) {
+    if (speed === 0) {
+      this.setAttr(attr, /* instant */ true);
+      return;
+    }
+
+    var s = speed !== undefined ? speed : this.get('animationSpeed');
+    var e = easing || this.get('animationEasing');
+    this.setAttr(attr, /* instance */ false, s, e);
+  },
+
+  setAttrBase: function(keys, attr, instant, speed, easing) {
+    _.each(keys, function(key) {
+      if (instant) {
+        this.get(key).attr(attr[key]);
+      } else {
+        this.get(key).stop().animate(attr[key], speed, easing);
+        // some keys dont support animating too, so set those instantly here
+        _.forEach(this.getNonAnimateKeys(), function(nonAnimateKey) {
+          if (attr[key] && attr[key][nonAnimateKey] !== undefined) {
+            this.get(key).attr(nonAnimateKey, attr[key][nonAnimateKey]);
+          }
+        }, this);
+      }
+
+      if (attr.css) {
+        $(this.get(key).node).css(attr.css);
+      }
+    }, this);
+  },
+
   animateAttrKeys: function(keys, attrObj, speed, easing) {
     // either we animate a specific subset of keys or all
     // possible things we could animate

src/js/visuals/visBranch.js

@@ -297,7 +297,7 @@ var VisBranch = VisBase.extend({
     var name = this.get('branch').getName();
     var selected = this.get('branch') === this.gitEngine.HEAD.get('target');
 
-    var after = (selected) ? '*' : '';
+    var after = (selected && !this.getIsInOrigin()) ? '*' : '';
     return name + after;
   },
 
@@ -435,7 +435,8 @@ var VisBranch = VisBase.extend({
     var rectSize = this.getRectSize();
 
     var arrowPath = this.getArrowPath();
-    var dashArray = (this.getIsRemote()) ? '--' : '';
+    var dashArray = (this.getIsRemote() || this.getIsInOrigin()) ?
+      GRAPHICS.originDash : '';
     var cursorStyle = (this.shouldDisableClick()) ?
       'auto' :
       'pointer';
@@ -457,7 +458,7 @@ var VisBranch = VisBase.extend({
         opacity: nonTextOpacity,
         fill: this.getFill(),
         stroke: this.get('stroke'),
-        'stroke-dasharray': dashArray,
+        //'stroke-dasharray': dashArray,
         'stroke-width': this.get('stroke-width')
       },
       arrow: {
@@ -483,26 +484,7 @@ var VisBranch = VisBase.extend({
 
   setAttr: function(attr, instant, speed, easing) {
     var keys = ['text', 'rect', 'arrow'];
-    _.each(keys, function(key) {
+    this.setAttrBase(keys, attr, instant, speed, easing);
-      if (instant) {
-        this.get(key).attr(attr[key]);
-      } else {
-        this.get(key).stop().animate(attr[key], speed, easing);
-      }
-
-      $(this.get(key).node).css(attr.css);
-    }, this);
-  },
-
-  animateToAttr: function(attr, speed, easing) {
-    if (speed === 0) {
-      this.setAttr(attr, /* instant */ true);
-      return;
-    }
-
-    var s = speed !== undefined ? speed : this.get('animationSpeed');
-    var e = easing || this.get('animationEasing');
-    this.setAttr(attr, /* instance */ false, s, e);
   }
 });
 

src/js/visuals/visNode.js

@@ -109,6 +109,8 @@ var VisNode = VisBase.extend({
     var pos = this.getScreenCoords();
     var textPos = this.getTextScreenCoords();
     var opacity = this.getOpacity();
+    var dashArray = (this.getIsInOrigin()) ?
+      GRAPHICS.originDash : '';
 
     return {
       circle: {
@@ -118,6 +120,7 @@ var VisNode = VisBase.extend({
         r: this.getRadius(),
         fill: this.getFill(),
         'stroke-width': this.get('stroke-width'),
+        'stroke-dasharray': dashArray,
         stroke: this.get('stroke')
       },
       text: {
@@ -162,19 +165,16 @@ var VisNode = VisBase.extend({
     this.animateToAttr(snapShot[this.getID()], speed, easing);
   },
 
-  animateToAttr: function(attr, speed, easing) {
+  setAttr: function(attr, instant, speed, easing) {
-    if (speed === 0) {
+    var keys = ['text', 'circle'];
-      this.get('circle').attr(attr.circle);
+    this.setAttrBase(keys, attr, instant, speed, easing);
-      this.get('text').attr(attr.text);
+  },
-      return;
-    }
 
+  animateToAttr: function(attr, speed, easing) {
+    VisBase.prototype.animateToAttr.apply(this, arguments);
     var s = speed !== undefined ? speed : this.get('animationSpeed');
     var e = easing || this.get('animationEasing');
 
-    this.get('circle').stop().animate(attr.circle, s, e);
-    this.get('text').stop().animate(attr.text, s, e);
-
     if (easing == 'bounce' &&
         attr.circle && attr.circle.cx !== undefined &&
         attr.text && attr.text.x !== undefined ) {