Add the ability to put some text in the commit bubble. (commitDotText)

examples/index.js

@@ -77,6 +77,7 @@ var commitConfig = {
   dotStrokeWidth: 10,
   messageHashDisplay: false,
   messageAuthorDisplay: true,
+  commitDotText: "C1",
   message: "Alors c'est qui le papa ?",
   tooltipDisplay: false,
   author: "Me <me@planee.fr>"
@@ -128,7 +129,8 @@ test.merge(master, "My special merge commit message");
 
 // Then, continue committing on the "test" branch
 test.commit({
-  message: "It works !"
+  message: "It works !",
+  commitDotText: "C2"
 });
 
 var fastForwardBranch = test.branch("fast-forward");

src/gitgraph.js

@@ -1053,6 +1053,7 @@
    * @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.commitDotText] - short commit message (A few chars) to appear on the commit dot
    * @param {string} [options.messageColor = options.color] - Specific message color
    * @param {string} [options.messageFont = this.template.commit.message.font] - Font of the message
    * @param {boolean} [options.messageDisplay = this.template.commit.message.display] - Commit message display policy
@@ -1086,6 +1087,7 @@
     this.detail = options.detail || null;
     this.sha1 = options.sha1 || (Math.random(100)).toString(16).substring(3, 10);
     this.message = options.message || "He doesn't like George Michael! Boooo!";
+    this.commitDotText = options.commitDotText;
     this.arrowDisplay = options.arrowDisplay;
     this.messageDisplay = _booleanOptionOr(options.messageDisplay, this.template.commit.message.display);
     this.messageAuthorDisplay = _booleanOptionOr(options.messageAuthorDisplay, this.template.commit.message.displayAuthor);
@@ -1205,6 +1207,20 @@
       }
     }
 
+    // Commit Dot Text
+    if (this.commitDotText) {
+      var previousTextBaseline = this.context.textBaseline;
+      var previousTextAlign = this.context.textAlign;
+
+      this.context.fillStyle = "#000";
+      this.context.textAlign = "center";
+      this.context.textBaseline = 'middle';
+      this.context.fillText(this.commitDotText, this.x, this.y); 
+
+      this.context.textBaseline = previousTextBaseline;
+      this.context.textAlign = previousTextAlign;
+    }
+
     // Message
     if (this.messageDisplay) {
       var message = this.message;