final polish on visbranch update

build/bundle.js

@@ -16604,6 +16604,7 @@ var VisBranch = VisBase.extend({
       // switch to a head ref
       this.set('isHead', true);
       this.set('flip', -1);
+      this.refreshOffset();
 
       this.set('fill', GRAPHICS.headRectFill);
     } else if (id !== 'master') {
@@ -16616,11 +16617,12 @@ var VisBranch = VisBase.extend({
     var commit = this.gitEngine.getCommitFromRef(this.get('branch'));
     var visNode = commit.get('visNode');
 
-    this.set('flip', this.getFlipBool(commit, visNode));
+    this.set('flip', this.getFlipValue(commit, visNode));
+    this.refreshOffset();
     return visNode.getScreenCoords();
   },
 
-  getFlipBool: function(commit, visNode) {
+  getFlipValue: function(commit, visNode) {
     var threshold = this.get('gitVisuals').getFlipPos();
     var overThreshold = (visNode.get('pos').x > threshold);
 
@@ -16639,6 +16641,39 @@ var VisBranch = VisBase.extend({
     }
   },
 
+  shouldOffsetY: function() {
+    return this.gitEngine.getBranches().length > 1;
+  },
+
+  refreshOffset: function() {
+    var baseOffsetX = GRAPHICS.nodeRadius * 4.75;
+    if (!this.shouldOffsetY()) {
+      this.set('offsetY', 0);
+      this.set('offsetX', baseOffsetX);
+      return;
+    }
+
+    var offsetY = 33;
+    var deltaX = 10;
+    if (this.get('flip') === 1) {
+      this.set('offsetY', -offsetY);
+      this.set('offsetX', baseOffsetX - deltaX);
+    } else {
+      this.set('offsetY', offsetY);
+      this.set('offsetX', baseOffsetX - deltaX);
+    }
+  },
+
+  getArrowTransform: function() {
+    if (!this.shouldOffsetY()) {
+      return '';
+    } else if (this.get('flip') === 1) {
+      return 't-2,-20R-35';
+    } else {
+      return 't2,20R-35';
+    }
+  },
+
   getBranchStackIndex: function() {
     if (this.get('isHead')) {
       // head is never stacked with other branches
@@ -17002,6 +17037,7 @@ var VisBranch = VisBase.extend({
         opacity: nonTextOpacity,
         fill: this.getFill(),
         stroke: this.get('stroke'),
+        transform: this.getArrowTransform(),
         'stroke-width': this.get('stroke-width')
       }
     };
@@ -32432,6 +32468,7 @@ var VisBranch = VisBase.extend({
       // switch to a head ref
       this.set('isHead', true);
       this.set('flip', -1);
+      this.refreshOffset();
 
       this.set('fill', GRAPHICS.headRectFill);
     } else if (id !== 'master') {
@@ -32444,11 +32481,12 @@ var VisBranch = VisBase.extend({
     var commit = this.gitEngine.getCommitFromRef(this.get('branch'));
     var visNode = commit.get('visNode');
 
-    this.set('flip', this.getFlipBool(commit, visNode));
+    this.set('flip', this.getFlipValue(commit, visNode));
+    this.refreshOffset();
     return visNode.getScreenCoords();
   },
 
-  getFlipBool: function(commit, visNode) {
+  getFlipValue: function(commit, visNode) {
     var threshold = this.get('gitVisuals').getFlipPos();
     var overThreshold = (visNode.get('pos').x > threshold);
 
@@ -32467,6 +32505,39 @@ var VisBranch = VisBase.extend({
     }
   },
 
+  shouldOffsetY: function() {
+    return this.gitEngine.getBranches().length > 1;
+  },
+
+  refreshOffset: function() {
+    var baseOffsetX = GRAPHICS.nodeRadius * 4.75;
+    if (!this.shouldOffsetY()) {
+      this.set('offsetY', 0);
+      this.set('offsetX', baseOffsetX);
+      return;
+    }
+
+    var offsetY = 33;
+    var deltaX = 10;
+    if (this.get('flip') === 1) {
+      this.set('offsetY', -offsetY);
+      this.set('offsetX', baseOffsetX - deltaX);
+    } else {
+      this.set('offsetY', offsetY);
+      this.set('offsetX', baseOffsetX - deltaX);
+    }
+  },
+
+  getArrowTransform: function() {
+    if (!this.shouldOffsetY()) {
+      return '';
+    } else if (this.get('flip') === 1) {
+      return 't-2,-20R-35';
+    } else {
+      return 't2,20R-35';
+    }
+  },
+
   getBranchStackIndex: function() {
     if (this.get('isHead')) {
       // head is never stacked with other branches
@@ -32830,6 +32901,7 @@ var VisBranch = VisBase.extend({
         opacity: nonTextOpacity,
         fill: this.getFill(),
         stroke: this.get('stroke'),
+        transform: this.getArrowTransform(),
         'stroke-width': this.get('stroke-width')
       }
     };

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.min.b916d7b7.js"></script>
+  <script src="build/bundle.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/visuals/visBranch.js

@@ -131,7 +131,7 @@ var VisBranch = VisBase.extend({
     } else if (this.get('flip') === 1) {
       return 't-2,-20R-35';
     } else {
-      return 't-2,20R-35';
+      return 't2,20R-35';
     }
   },