diff --git a/examples/index.js b/examples/index.js index 3d890796..f662a14e 100644 --- a/examples/index.js +++ b/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 " @@ -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"); diff --git a/src/gitgraph.js b/src/gitgraph.js index 384c88b9..78f4234d 100644 --- a/src/gitgraph.js +++ b/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;