Merge pull request #134 from cgddrd/orientation-modes-support-label-r…

…otation Support branch label rotation in 'horizontal mode'.
nicoespeon · Jan 6, 2017 · 5a3326d · 5a3326d
2 parents a35d8b2 + 830b1f0
commit 5a3326d
Show file tree

Hide file tree

Showing 13 changed files with 297 additions and 71 deletions.
diff --git a/.gitignore b/.gitignore
@@ -143,3 +143,6 @@ Thumbs.db
 
 # Temporary files
 *~
+
+# VSCode
+.vscode/
diff --git a/build/gitgraph.js b/build/gitgraph.js
@@ -1,5 +1,5 @@
 /* ==========================================================
- *                  GitGraph v1.7.1
+ *                  GitGraph v1.8.0
  *      https://github.com/nicoespeon/gitgraph.js
  * ==========================================================
  * Copyright (c) 2016 Nicolas CARLO (@nicoespeon) ٩(^‿^)۶
@@ -55,7 +55,9 @@
     case "vertical-reverse" :
       this.template.commit.spacingY *= -1;
       this.orientation = "vertical-reverse";
-      this.template.branch.labelRotation = 0;
+      this.template.branch.labelRotation =  options.template.branch !== undefined &&
+                                            options.template.branch.labelRotation !== null ?
+                                            options.template.branch.labelRotation : 0;
       this.template.commit.tag.spacingY *= -1;
       break;
     case "horizontal" :
@@ -65,7 +67,9 @@
       this.template.commit.spacingY = 0;
       this.template.branch.spacingX = 0;
       this.orientation = "horizontal";
-      this.template.branch.labelRotation = -90;
+      this.template.branch.labelRotation =  options.template.branch !== undefined &&
+                                            options.template.branch.labelRotation !== null ?
+                                            options.template.branch.labelRotation : -90;
       this.template.commit.tag.spacingX = -this.template.commit.spacingX;
       this.template.commit.tag.spacingY = this.template.branch.spacingY;
       break;
@@ -76,13 +80,17 @@
       this.template.commit.spacingY = 0;
       this.template.branch.spacingX = 0;
       this.orientation = "horizontal-reverse";
-      this.template.branch.labelRotation = 90;
+      this.template.branch.labelRotation =  options.template.branch !== undefined &&
+                                            options.template.branch.labelRotation !== null ?
+                                            options.template.branch.labelRotation : 90;
       this.template.commit.tag.spacingX = -this.template.commit.spacingY;
       this.template.commit.tag.spacingY = this.template.branch.spacingY;
       break;
     default:
       this.orientation = "vertical";
-      this.template.branch.labelRotation = 0;
+      this.template.branch.labelRotation =  options.template.branch !== undefined &&
+                                            options.template.branch.labelRotation !== null ?
+                                            options.template.branch.labelRotation : 0;
       break;
     }
 
@@ -1026,7 +1034,39 @@
 
     // Label
     if ( this.showLabel ) {
-      _drawTextBG( this.context, this.x + this.template.commit.spacingX, this.y + this.template.commit.spacingY, this.branch.name, this.labelColor, this.labelFont, this.template.branch.labelRotation, true );
+
+      /*
+       * For cases where we want a 0 or 180 degree label rotation in horizontal mode,
+       * we need to modify the position of the label to sit centrally above the commit dot.
+       */
+      if ((this.parent.orientation.indexOf('horizontal') === 0)
+          && (this.template.branch.labelRotation % 180 === 0))
+      {
+
+        /*
+         * Take into account the dot size and the height of the label
+         * (calculated from the font size) to arrive at the Y position.
+         */
+        var yNegativeMargin = this.y - this.dotSize - _getFontHeight(this.labelFont);
+        _drawTextBG( this.context,
+                     this.x,
+                     yNegativeMargin,
+                     this.branch.name,
+                     this.labelColor,
+                     this.labelFont,
+                     this.template.branch.labelRotation,
+                     true );
+    } else {
+         _drawTextBG( this.context,
+                      this.x + this.template.commit.spacingX,
+                      this.y + this.template.commit.spacingY,
+                      this.branch.name,
+                      this.labelColor,
+                      this.labelFont,
+                      this.template.branch.labelRotation,
+                      true );
+      }
+
     }
 
     // Dot
@@ -1054,7 +1094,9 @@
       this.parent.tagNum++;
       this.context.font = this.tagFont;
       var textWidth = this.context.measureText( this.tag ).width;
-      if ( this.template.branch.labelRotation !== 0 ) {
+
+      // Can't base this on the label rotation angle anymore, as both orientation modes can support varied angles.
+      if ((this.parent.orientation.indexOf('horizontal') === 0)) {
         var textHeight = _getFontHeight( this.tagFont );
         _drawTextBG( this.context,
           this.x - this.dotSize / 2,
@@ -1066,7 +1108,9 @@
           this.y - this.dotSize / 2,
           this.tag, this.tagColor, this.tagFont, 0, this.displayTagBox );
       }
+
       tagWidth = (tagWidth < textWidth) ? textWidth : tagWidth;
+
     }
 
     this.context.font = this.messageFont;
@@ -1233,7 +1277,14 @@
     this.branch.showLabel = options.branch.showLabel || false;
     this.branch.labelColor = options.branch.labelColor || null;
     this.branch.labelFont = options.branch.labelFont || "normal 8pt Calibri";
-    this.branch.labelRotation = options.branch.labelRotation || 0;
+
+    /*
+     * Set to 'null' by default, as a value of '0' can no longer be used to test
+     * whether rotation angle has been defined
+     * ('0' is an acceptable value).
+     */
+    this.branch.labelRotation = options.branch.labelRotation !== undefined ?
+                                options.branch.labelRotation : null;
 
     // Merge style = "bezier" | "straight"
     this.branch.mergeStyle = options.branch.mergeStyle || "bezier";
@@ -1398,6 +1449,7 @@
    * @private
    */
   function _drawTextBG ( context, x, y, text, color, font, angle, useStroke ) {
+
     context.save();
     context.translate( x, y );
     context.rotate( angle * (Math.PI / 180) );

diff --git a/build/gitgraph.min.js b/build/gitgraph.min.js
diff --git a/docs/Branch.html b/docs/Branch.html
@@ -363,7 +363,7 @@ <h6>Properties</h6>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line445">line 445</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line453">line 453</a>
     </li></ul></dd>
 
 
@@ -504,7 +504,7 @@ <h5>Parameters:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line535">line 535</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line543">line 543</a>
     </li></ul></dd>
 
 
@@ -605,7 +605,7 @@ <h5>This:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line865">line 865</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line873">line 873</a>
     </li></ul></dd>
 
 
@@ -677,7 +677,7 @@ <h5>This:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line749">line 749</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line757">line 757</a>
     </li></ul></dd>
 
 
@@ -872,7 +872,7 @@ <h6>Properties</h6>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line609">line 609</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line617">line 617</a>
     </li></ul></dd>
 
 
@@ -951,7 +951,7 @@ <h5>This:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line758">line 758</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line766">line 766</a>
     </li></ul></dd>
 
 
@@ -1199,7 +1199,7 @@ <h6>Properties</h6>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line773">line 773</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line781">line 781</a>
     </li></ul></dd>
 
 
@@ -1294,7 +1294,7 @@ <h5>This:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line890">line 890</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line898">line 898</a>
     </li></ul></dd>
 
 
@@ -1366,7 +1366,7 @@ <h5>This:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line560">line 560</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line568">line 568</a>
     </li></ul></dd>
 
 
@@ -1413,7 +1413,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="Branch.h
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.2</a> on Sat Dec 17 2016 10:12:59 GMT+0100 (CET)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.2</a> on Mon Dec 26 2016 22:08:46 GMT-0000 (GMT)
 </footer>
 
 <script> prettyPrint(); </script>

diff --git a/docs/Commit.html b/docs/Commit.html
@@ -1335,7 +1335,7 @@ <h6>Properties</h6>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line964">line 964</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line972">line 972</a>
     </li></ul></dd>
 
 
@@ -1425,7 +1425,7 @@ <h5>This:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line1096">line 1096</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line1140">line 1140</a>
     </li></ul></dd>
 
 
@@ -1497,7 +1497,7 @@ <h5>This:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line1015">line 1015</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line1023">line 1023</a>
     </li></ul></dd>
 
 
@@ -1544,7 +1544,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="Branch.h
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.2</a> on Sat Dec 17 2016 10:12:59 GMT+0100 (CET)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.2</a> on Mon Dec 26 2016 22:08:46 GMT-0000 (GMT)
 </footer>
 
 <script> prettyPrint(); </script>

diff --git a/docs/GitGraph.html b/docs/GitGraph.html
@@ -674,7 +674,7 @@ <h5>Parameters:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line313">line 313</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line321">line 321</a>
     </li></ul></dd>
 
 
@@ -797,7 +797,7 @@ <h5>Parameters:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line145">line 145</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line153">line 153</a>
     </li></ul></dd>
 
 
@@ -946,7 +946,7 @@ <h5>Parameters:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line415">line 415</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line423">line 423</a>
     </li></ul></dd>
 
 
@@ -1066,7 +1066,7 @@ <h5>Parameters:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line204">line 204</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line212">line 212</a>
     </li></ul></dd>
 
 
@@ -1167,7 +1167,7 @@ <h5>This:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line130">line 130</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line138">line 138</a>
     </li></ul></dd>
 
 
@@ -1287,7 +1287,7 @@ <h5>Parameters:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line345">line 345</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line353">line 353</a>
     </li></ul></dd>
 
 
@@ -1407,7 +1407,7 @@ <h5>Parameters:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line218">line 218</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line226">line 226</a>
     </li></ul></dd>
 
 
@@ -1548,7 +1548,7 @@ <h5>Parameters:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line175">line 175</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line183">line 183</a>
     </li></ul></dd>
 
 
@@ -1649,7 +1649,7 @@ <h5>This:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line230">line 230</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line238">line 238</a>
     </li></ul></dd>
 
 
@@ -1696,7 +1696,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="Branch.h
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.2</a> on Sat Dec 17 2016 10:12:59 GMT+0100 (CET)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.2</a> on Mon Dec 26 2016 22:08:46 GMT-0000 (GMT)
 </footer>
 
 <script> prettyPrint(); </script>

diff --git a/docs/Template.html b/docs/Template.html
@@ -1093,7 +1093,7 @@ <h6>Properties</h6>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line1205">line 1205</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line1249">line 1249</a>
     </li></ul></dd>
 
 
@@ -1228,7 +1228,7 @@ <h5>Parameters:</h5>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line1285">line 1285</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line1336">line 1336</a>
     </li></ul></dd>
 
 
@@ -1297,7 +1297,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="Branch.h
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.2</a> on Sat Dec 17 2016 10:12:59 GMT+0100 (CET)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.2</a> on Mon Dec 26 2016 22:08:46 GMT-0000 (GMT)
 </footer>
 
 <script> prettyPrint(); </script>