Add lineDash option to branch and commits

Document existing branch lineDash options for templates.
Close #139

Author: nicoespeon

examples/index.js

@@ -6,12 +6,16 @@ var myTemplateConfig = {
   colors: ["#F00", "#0F0", "#00F"], // branches colors, 1 per column
   branch: {
     lineWidth: 8,
+    // Dash segments, see:
+    // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash
+    lineDash: [5, 3],
     spacingX: 50
   },
   commit: {
     spacingY: -80,
     dot: {
-      size: 12
+      size: 12,
+      lineDash: [4]
     },
     message: {
       displayAuthor: true,
@@ -56,6 +60,7 @@ gitGraph.commit("My second commit").commit("Add awesome feature");
 var dev = master.branch({
   name: "dev",
   color: "#F00",
+  // lineDash: [5],
   commitDefaultOptions: {
     color: "#F00"
   }
@@ -204,3 +209,16 @@ test.commit({
     console.log("You just clicked my commit.", commit, event);
   }
 });
+
+// Display WIP-like commit
+test
+  .commit({
+    lineDash: [3, 2],
+    dotStrokeWidth: 5,
+    dotColor: "white",
+    messageHashDisplay: false,
+    messageAuthorDisplay: false,
+    message: "Current WIP",
+    tag: "HEAD",
+    displayTagBox: false
+  });

src/gitgraph.js

@@ -462,6 +462,7 @@
    * @param {Branch} [options.parentBranch = options.parentCommit.branch] - Parent branch
    * @param {Commit} [options.parentCommit = _getLast(options.parentBranch.commits)] - Parent commit
    * @param {string} [options.name = "no-name"] - Branch name
+   * @param {number[]} [options.lineDash = this.template.branch.lineDash] - Branch line dash segments
    * @param {object} [options.commitDefaultOptions = {}] - Default options for commits
    *
    * @this Branch
@@ -605,19 +606,12 @@
     this.context.lineWidth = this.lineWidth;
     this.context.strokeStyle = this.color;
 
-    var prevLineDash;
-    if (this.context.setLineDash !== undefined) {
-      prevLineDash = this.context.getLineDash();
+    if (typeof this.context.setLineDash === "function") {
       this.context.setLineDash(this.lineDash);
     }
 
     this.context.stroke();
     this.context.closePath();
-
-    //Restore previous line dash setting, if any
-    if (prevLineDash !== undefined) {
-      this.context.setLineDash(prevLineDash);
-    }
   };
 
   /**
@@ -1049,6 +1043,7 @@
    * @param {number} [options.dotSize = this.template.commit.dot.size] - Dot size
    * @param {number} [options.dotStrokeWidth = this.template.commit.dot.strokeWidth] - Dot stroke width
    * @param {string} [options.dotStrokeColor = this.template.commit.dot.strokeColor]
+   * @param {number[]} [options.lineDash = this.template.commit.dot.lineDash]
    *
    * @param {string} [options.message = "He doesn't like George Michael! Boooo!"] - Commit message
    * @param {string} [options.messageColor = options.color] - Specific message color
@@ -1095,6 +1090,7 @@
     this.dotSize = options.dotSize || this.template.commit.dot.size;
     this.dotStrokeWidth = options.dotStrokeWidth || this.template.commit.dot.strokeWidth;
     this.dotStrokeColor = options.dotStrokeColor || this.template.commit.dot.strokeColor || options.color;
+    this.lineDash = options.lineDash || this.template.commit.dot.lineDash;
     this.type = options.type || null;
     this.tooltipDisplay = _booleanOptionOr(options.tooltipDisplay, true);
     this.onClick = options.onClick || null;
@@ -1121,7 +1117,6 @@
 
     // Label
     if (this.showLabel) {
-
       /*
        * 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.
@@ -1161,7 +1156,11 @@
     this.context.strokeStyle = this.dotStrokeColor;
     this.context.lineWidth = this.dotStrokeWidth;
 
-    if (typeof (this.dotStrokeWidth) === "number") {
+    if (typeof this.context.setLineDash === "function") {
+      this.context.setLineDash(this.lineDash);
+    }
+
+    if (typeof this.dotStrokeWidth === "number") {
       this.context.stroke();
     }
 
@@ -1362,6 +1361,7 @@
    * @param {number} [options.arrow.offset] - Arrow offset
    * @param {string} [options.branch.color] - Branch color
    * @param {number} [options.branch.lineWidth] - Branch line width
+   * @param {number[]} [options.branch.lineDash] - Branch line dash segments
    * @param {string} [options.branch.mergeStyle = ("bezier"|"straight")] - Branch merge style
    * @param {number} [options.branch.spacingX] - Space between branches
    * @param {number} [options.branch.spacingY] - Space between branches
@@ -1373,6 +1373,7 @@
    * @param {number} [options.commit.dot.size] - Commit dot size
    * @param {number} [options.commit.dot.strokeWidth] - Commit dot stroke width
    * @param {string} [options.commit.dot.strokeColor] - Commit dot stroke color
+   * @param {number[]} [options.commit.dot.lineDash] - Commit dot line dash segments
    * @param {string} [options.commit.message.color] - Commit message color
    * @param {boolean} [options.commit.message.display] - Commit display policy
    * @param {boolean} [options.commit.message.displayAuthor] - Commit message author policy
@@ -1446,6 +1447,7 @@
     this.commit.dot.size = options.commit.dot.size || 3;
     this.commit.dot.strokeWidth = options.commit.dot.strokeWidth || null;
     this.commit.dot.strokeColor = options.commit.dot.strokeColor || null;
+    this.commit.dot.lineDash = options.commit.dot.lineDash || this.branch.lineDash;
 
     this.commit.tag = {};
     this.commit.tag.color = options.commit.tag.color || this.commit.dot.color;