origin graphics should i do branch stack?

build/bundle.js

@@ -8595,6 +8595,14 @@ var Ref = Backbone.Model.extend({
     }
   },
 
+  getIsRemote: function() {
+    return false;
+  },
+
+  getName: function() {
+    return this.get('id');
+  },
+
   targetChanged: function(model, targetValue, ev) {
     // push our little 3 stack back. we need to do this because
     // backbone doesn't give you what the value WAS, only what it was changed
@@ -8611,10 +8619,13 @@ var Ref = Backbone.Model.extend({
 var Branch = Ref.extend({
   defaults: {
     visBranch: null,
-    isOrigin: false,
     origin: null
   },
 
+  getIsRemote: function() {
+    return this.get('origin') !== null;
+  },
+
   initialize: function() {
     Ref.prototype.initialize.call(this);
     this.set('type', 'branch');
@@ -16241,23 +16252,22 @@ var VisBranch = VisBase.extend({
     var threshold = this.get('gitVisuals').getFlipPos();
     var overThreshold = (visNode.get('pos').x > threshold);
 
-    if (!this.get('isHead')) {
     // easy logic first
-      return (overThreshold) ?
+    if (!this.get('isHead')) {
-        -1 :
+      if (this.getIsRemote()) {
-        1;
+        return (overThreshold) ? 1 : -1;
+      } else {
+        return (overThreshold) ? -1 : 1;
       }
+    }
+
     // now for HEAD....
     if (overThreshold) {
       // if by ourselves, then feel free to squeeze in. but
       // if other branches are here, then we need to show separate
-      return (this.isBranchStackEmpty()) ?
+      return (this.isBranchStackEmpty()) ? -1 : 1;
-        -1 :
-        1;
     } else {
-      return (this.isBranchStackEmpty()) ?
+      return (this.isBranchStackEmpty()) ? 1 : -1;
-        1 :
-        -1;
     }
   },
 
@@ -16446,12 +16456,16 @@ var VisBranch = VisBase.extend({
     };
   },
 
-  getName: function() {
+  getIsRemote: function() {
-    var name = this.get('branch').get('id');
+    return this.get('branch').getIsRemote();
-    var selected = this.gitEngine.HEAD.get('target').get('id');
+  },
 
-    var add = (selected == name) ? '*' : '';
+  getName: function() {
-    return name + add;
+    var name = this.get('branch').getName();
+    var selected = this.get('branch') === this.gitEngine.HEAD.get('target');
+
+    var after = (selected) ? '*' : '';
+    return name + after;
   },
 
   nonTextToFront: function() {
@@ -16568,6 +16582,7 @@ var VisBranch = VisBase.extend({
     var rectSize = this.getRectSize();
 
     var arrowPath = this.getArrowPath();
+    var dashArray = (this.getIsRemote()) ? '--' : '';
 
     return {
       text: {
@@ -16583,6 +16598,7 @@ var VisBranch = VisBase.extend({
         opacity: nonTextOpacity,
         fill: this.getFill(),
         stroke: this.get('stroke'),
+        'stroke-dasharray': dashArray,
         'stroke-width': this.get('stroke-width')
       },
       arrow: {
@@ -24033,6 +24049,14 @@ var Ref = Backbone.Model.extend({
     }
   },
 
+  getIsRemote: function() {
+    return false;
+  },
+
+  getName: function() {
+    return this.get('id');
+  },
+
   targetChanged: function(model, targetValue, ev) {
     // push our little 3 stack back. we need to do this because
     // backbone doesn't give you what the value WAS, only what it was changed
@@ -24049,10 +24073,13 @@ var Ref = Backbone.Model.extend({
 var Branch = Ref.extend({
   defaults: {
     visBranch: null,
-    isOrigin: false,
     origin: null
   },
 
+  getIsRemote: function() {
+    return this.get('origin') !== null;
+  },
+
   initialize: function() {
     Ref.prototype.initialize.call(this);
     this.set('type', 'branch');
@@ -31739,23 +31766,22 @@ var VisBranch = VisBase.extend({
     var threshold = this.get('gitVisuals').getFlipPos();
     var overThreshold = (visNode.get('pos').x > threshold);
 
-    if (!this.get('isHead')) {
     // easy logic first
-      return (overThreshold) ?
+    if (!this.get('isHead')) {
-        -1 :
+      if (this.getIsRemote()) {
-        1;
+        return (overThreshold) ? 1 : -1;
+      } else {
+        return (overThreshold) ? -1 : 1;
       }
+    }
+
     // now for HEAD....
     if (overThreshold) {
       // if by ourselves, then feel free to squeeze in. but
       // if other branches are here, then we need to show separate
-      return (this.isBranchStackEmpty()) ?
+      return (this.isBranchStackEmpty()) ? -1 : 1;
-        -1 :
-        1;
     } else {
-      return (this.isBranchStackEmpty()) ?
+      return (this.isBranchStackEmpty()) ? 1 : -1;
-        1 :
-        -1;
     }
   },
 
@@ -31944,12 +31970,16 @@ var VisBranch = VisBase.extend({
     };
   },
 
-  getName: function() {
+  getIsRemote: function() {
-    var name = this.get('branch').get('id');
+    return this.get('branch').getIsRemote();
-    var selected = this.gitEngine.HEAD.get('target').get('id');
+  },
 
-    var add = (selected == name) ? '*' : '';
+  getName: function() {
-    return name + add;
+    var name = this.get('branch').getName();
+    var selected = this.get('branch') === this.gitEngine.HEAD.get('target');
+
+    var after = (selected) ? '*' : '';
+    return name + after;
   },
 
   nonTextToFront: function() {
@@ -32066,6 +32096,7 @@ var VisBranch = VisBase.extend({
     var rectSize = this.getRectSize();
 
     var arrowPath = this.getArrowPath();
+    var dashArray = (this.getIsRemote()) ? '--' : '';
 
     return {
       text: {
@@ -32081,6 +32112,7 @@ var VisBranch = VisBase.extend({
         opacity: nonTextOpacity,
         fill: this.getFill(),
         stroke: this.get('stroke'),
+        'stroke-dasharray': dashArray,
         'stroke-width': this.get('stroke-width')
       },
       arrow: {

index.html

@@ -426,7 +426,7 @@
        For a much easier time perusing the source, see the individual files at:
           https://github.com/pcottle/learnGitBranching
   -->
-  <script src="build/bundle.js"></script>
+  <script src="build/bundle.min.034684c7.js"></script>
 
   <!-- The advantage of github pages: super-easy, simple, slick static hostic.
        The downside? No raw logs to parse for analytics, so I have to include

src/js/git/index.js

@@ -1633,6 +1633,14 @@ var Ref = Backbone.Model.extend({
     }
   },
 
+  getIsRemote: function() {
+    return false;
+  },
+
+  getName: function() {
+    return this.get('id');
+  },
+
   targetChanged: function(model, targetValue, ev) {
     // push our little 3 stack back. we need to do this because
     // backbone doesn't give you what the value WAS, only what it was changed
@@ -1649,10 +1657,13 @@ var Ref = Backbone.Model.extend({
 var Branch = Ref.extend({
   defaults: {
     visBranch: null,
-    isOrigin: false,
     origin: null
   },
 
+  getIsRemote: function() {
+    return this.get('origin') !== null;
+  },
+
   initialize: function() {
     Ref.prototype.initialize.call(this);
     this.set('type', 'branch');

src/js/visuals/visBranch.js

@@ -85,23 +85,22 @@ var VisBranch = VisBase.extend({
     var threshold = this.get('gitVisuals').getFlipPos();
     var overThreshold = (visNode.get('pos').x > threshold);
 
-    if (!this.get('isHead')) {
     // easy logic first
-      return (overThreshold) ?
+    if (!this.get('isHead')) {
-        -1 :
+      if (this.getIsRemote()) {
-        1;
+        return (overThreshold) ? 1 : -1;
+      } else {
+        return (overThreshold) ? -1 : 1;
       }
+    }
+
     // now for HEAD....
     if (overThreshold) {
       // if by ourselves, then feel free to squeeze in. but
       // if other branches are here, then we need to show separate
-      return (this.isBranchStackEmpty()) ?
+      return (this.isBranchStackEmpty()) ? -1 : 1;
-        -1 :
-        1;
     } else {
-      return (this.isBranchStackEmpty()) ?
+      return (this.isBranchStackEmpty()) ? 1 : -1;
-        1 :
-        -1;
     }
   },
 
@@ -290,12 +289,16 @@ var VisBranch = VisBase.extend({
     };
   },
 
-  getName: function() {
+  getIsRemote: function() {
-    var name = this.get('branch').get('id');
+    return this.get('branch').getIsRemote();
-    var selected = this.gitEngine.HEAD.get('target').get('id');
+  },
 
-    var add = (selected == name) ? '*' : '';
+  getName: function() {
-    return name + add;
+    var name = this.get('branch').getName();
+    var selected = this.get('branch') === this.gitEngine.HEAD.get('target');
+
+    var after = (selected) ? '*' : '';
+    return name + after;
   },
 
   nonTextToFront: function() {
@@ -412,6 +415,7 @@ var VisBranch = VisBase.extend({
     var rectSize = this.getRectSize();
 
     var arrowPath = this.getArrowPath();
+    var dashArray = (this.getIsRemote()) ? '--' : '';
 
     return {
       text: {
@@ -427,6 +431,7 @@ var VisBranch = VisBase.extend({
         opacity: nonTextOpacity,
         fill: this.getFill(),
         stroke: this.get('stroke'),
+        'stroke-dasharray': dashArray,
         'stroke-width': this.get('stroke-width')
       },
       arrow: {