Skip to content
This repository has been archived by the owner on Jul 13, 2024. It is now read-only.

Commit

Permalink
Merge develop into master
Browse files Browse the repository at this point in the history
  • Loading branch information
@nicoespeon
nicoespeon committed Feb 4, 2016
2 parents e44dbac + 4e71f84 commit 0bbc8c7
Show file tree
Hide file tree
Showing 13 changed files with 448 additions and 248 deletions.
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "gitgraph.js",
"version": "1.1.2",
"version": "1.1.3",
"main": [ "./build/gitgraph.js", "./build/gitgraph.css" ],
"ignore": [
"**/.*"
Expand Down
154 changes: 86 additions & 68 deletions build/gitgraph.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* ==========================================================
* GitGraph v1.1.2
* GitGraph v1.1.3
* https://github.com/nicoespeon/gitgraph.js
* ==========================================================
* Copyright (c) 2016 Nicolas CARLO (@nicoespeon) ٩(^‿^)۶
Expand All @@ -13,6 +13,7 @@

/**
* Emit an event on the given element.
*
* @param {HTMLElement} element - DOM element to trigger the event on.
* @param {String} eventName - Name of the triggered event.
* @param {Object} [data={}] - Custom data to attach to the event.
Expand All @@ -39,6 +40,34 @@
}
}

/**
* Returns the scaling factor of given canvas `context`.
* Handles high-resolution displays.
*
* @param {Object} context
* @returns {Number}
* @private
*/
function _getScale ( context ) {
var backingStorePixelRatio;
var scalingFactor;

// Account for high-resolution displays
scalingFactor = 1;

if ( window.devicePixelRatio ) {
backingStorePixelRatio = context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;

scalingFactor *= window.devicePixelRatio / backingStorePixelRatio;
}

return scalingFactor;
}

/**
* GitGraph
*
Expand Down Expand Up @@ -255,21 +284,7 @@
* @this GitGraph
**/
GitGraph.prototype.render = function () {
var backingStorePixelRatio;
var scalingFactor;

// Account for high-resolution displays
scalingFactor = 1;

if ( window.devicePixelRatio ) {
backingStorePixelRatio = this.context.webkitBackingStorePixelRatio ||
this.context.mozBackingStorePixelRatio ||
this.context.msBackingStorePixelRatio ||
this.context.oBackingStorePixelRatio ||
this.context.backingStorePixelRatio || 1;

scalingFactor *= window.devicePixelRatio / backingStorePixelRatio;
}
var scalingFactor = _getScale( this.context );

// Resize canvas
var unscaledResolution = {
Expand All @@ -293,8 +308,6 @@
this.canvas.width = unscaledResolution.x * scalingFactor;
this.canvas.height = unscaledResolution.y * scalingFactor;

this.context.scale( scalingFactor, scalingFactor );

// Clear All
this.context.clearRect( 0, 0, this.canvas.width, this.canvas.height );

Expand All @@ -311,6 +324,9 @@
this.offsetX = this.canvas.width - this.marginX * 2;
}

// Scale the context when every transformations have been made.
this.context.scale( scalingFactor, scalingFactor );

// Render branches
for ( var i = this.branches.length - 1, branch; !!(branch = this.branches[ i ]); i-- ) {
branch.render();
Expand Down Expand Up @@ -338,22 +354,18 @@
* @param {MouseEvent} event - Mouse event
* @param {commitCallback} callbackFn - A callback function that will be called for each commit
*
* @self Gitgraph
* @this GitGraph
**/
GitGraph.prototype.applyCommits = function(event, callbackFn) {
// Fix firefox MouseEvent
if ( typeof InstallTrigger !== "undefined" )/* == (is Firefox) */ {
event.x = event.x ? event.x : event.clientX;
event.y = event.y ? event.y : event.clientY;
}
GitGraph.prototype.applyCommits = function ( event, callbackFn ) {
var scalingFactor = _getScale( this.context );

for ( var i = 0, commit; !!(commit = this.commits[ i ]); i++ ) {
var distanceX = (commit.x + this.offsetX + this.marginX - event.offsetX);
var distanceY = (commit.y + this.offsetY + this.marginY - event.offsetY);
var distanceX = (commit.x + (this.offsetX + this.marginX) / scalingFactor - event.offsetX);
var distanceY = (commit.y + (this.offsetY + this.marginY) / scalingFactor - event.offsetY);
var distanceBetweenCommitCenterAndMouse = Math.sqrt( Math.pow( distanceX, 2 ) + Math.pow( distanceY, 2 ) );
var isOverCommit = distanceBetweenCommitCenterAndMouse < this.template.commit.dot.size;

callbackFn(commit, isOverCommit);
callbackFn( commit, isOverCommit );
}
};

Expand All @@ -362,24 +374,30 @@
*
* @param {MouseEvent} event - Mouse event
*
* @self Gitgraph
* @this GitGraph
**/
GitGraph.prototype.hover = function ( event ) {
var self = this.gitgraph;
var isOut = true;

function showCommitTooltip (commit) {
function showCommitTooltip ( commit ) {
// Fix firefox MouseEvent
if ( typeof InstallTrigger !== "undefined" )/* == (is Firefox) */ {
event.x = event.x ? event.x : event.clientX;
event.y = event.y ? event.y : event.clientY;
}

self.tooltip.style.left = event.x + "px"; // TODO Scroll bug
self.tooltip.style.top = event.y + "px"; // TODO Scroll bug
if (self.template.commit.tooltipHTMLFormatter !== null) {
self.tooltip.innerHTML = self.template.commit.tooltipHTMLFormatter(commit);
if ( self.template.commit.tooltipHTMLFormatter !== null ) {
self.tooltip.innerHTML = self.template.commit.tooltipHTMLFormatter( commit );
} else {
self.tooltip.textContent = commit.sha1 + " - " + commit.message;
}
self.tooltip.style.display = "block";
}

function emitMouseoverEvent (commit) {
function emitMouseoverEvent ( commit ) {
var mouseoverEventOptions = {
author: commit.author,
message: commit.message,
Expand All @@ -390,22 +408,22 @@
_emitEvent( self.canvas, "commit:mouseover", mouseoverEventOptions );
}

self.applyCommits(event, function(commit, isOverCommit) {
self.applyCommits( event, function ( commit, isOverCommit ) {
if ( isOverCommit ) {
if ( !self.template.commit.message.display ) {
showCommitTooltip(commit);
showCommitTooltip( commit );
}

if ( !commit.isMouseover ) {
emitMouseoverEvent(commit);
emitMouseoverEvent( commit );
}

isOut = false;
commit.isMouseover = true;
} else {
commit.isMouseover = false;
}
});
} );

if ( isOut ) {
self.tooltip.style.display = "none";
Expand All @@ -417,18 +435,18 @@
*
* @param {MouseEvent} event - Mouse event
*
* @self Gitgraph
* @this GitGraph
**/
GitGraph.prototype.click = function ( event ) {
this.gitgraph.applyCommits(event, function(commit, isOverCommit) {
if (!isOverCommit) {
this.gitgraph.applyCommits( event, function ( commit, isOverCommit ) {
if ( !isOverCommit ) {
return;
}

if (commit.onClick !== null) {
commit.onClick(commit, true);
if ( commit.onClick !== null ) {
commit.onClick( commit, true );
}
});
} );
};

// --------------------------------------------------------------------
Expand Down Expand Up @@ -462,7 +480,7 @@
this.template = this.parent.template;
this.lineWidth = options.lineWidth || this.template.branch.lineWidth;
this.lineDash = options.lineDash || this.template.branch.lineDash;
this.showLabel = booleanOptionOr(options.showLabel, this.template.branch.showLabel);
this.showLabel = booleanOptionOr( options.showLabel, this.template.branch.showLabel );
this.spacingX = this.template.branch.spacingX;
this.spacingY = this.template.branch.spacingY;
this.size = 0;
Expand Down Expand Up @@ -633,8 +651,8 @@
options.showLabel = (isPathBeginning && this.showLabel) ? true : false;

if ( options.showLabel ) {
options.x -= this.template.commit.spacingX;
options.y -= this.template.commit.spacingY;
options.x -= this.template.commit.spacingX;
options.y -= this.template.commit.spacingY;
}

var commit = new Commit( options );
Expand Down Expand Up @@ -778,7 +796,7 @@
this.column = 0;
for ( ; ; this.column++ ) {
if ( !( this.column in candidates ) || candidates[ this.column ] === 0 ) {
break;
break;
}
}
};
Expand Down Expand Up @@ -872,7 +890,7 @@

// Label
if ( this.showLabel ) {
drawTextBG( this.context, this.x + this.template.commit.spacingX, this.y + this.template.commit.spacingY, this.branch.name, "black", this.labelColor, this.labelFont, this.template.branch.labelRotation);
drawTextBG( this.context, this.x + this.template.commit.spacingX, this.y + this.template.commit.spacingY, this.branch.name, "black", this.labelColor, this.labelFont, this.template.branch.labelRotation );
}

// Dot
Expand Down Expand Up @@ -900,17 +918,17 @@
var tagWidth = this.template.commit.tag.spacingX;
if ( this.tag !== null ) {
this.parent.tagNum++;
var textWidth = this.context.measureText(this.tag).width;
var textWidth = this.context.measureText( this.tag ).width;
if ( this.template.branch.labelRotation !== 0 ) {
var textHeight = getFontHeight(this.tagFont);
var textHeight = getFontHeight( this.tagFont );
drawTextBG( this.context,
this.x - this.dotSize/2,
((this.parent.columnMax + 1) * this.template.commit.tag.spacingY) - this.template.commit.tag.spacingY/2 + (this.parent.tagNum % 2) * textHeight * 1.5,
this.x - this.dotSize / 2,
((this.parent.columnMax + 1) * this.template.commit.tag.spacingY) - this.template.commit.tag.spacingY / 2 + (this.parent.tagNum % 2) * textHeight * 1.5,
this.tag, "black", this.tagColor, this.tagFont, 0 );
} else {
drawTextBG( this.context,
((this.parent.columnMax + 1) * this.template.commit.tag.spacingX) - this.template.commit.tag.spacingX/2 + textWidth/2,
this.y - this.dotSize/2,
((this.parent.columnMax + 1) * this.template.commit.tag.spacingX) - this.template.commit.tag.spacingX / 2 + textWidth / 2,
this.y - this.dotSize / 2,
this.tag, "black", this.tagColor, this.tagFont, 0 );
}
tagWidth = (tagWidth < textWidth) ? textWidth : tagWidth;
Expand Down Expand Up @@ -939,7 +957,7 @@
}

this.context.fillStyle = this.messageColor;
this.context.fillText( message, commitOffsetLeft, this.y + this.dotSize / 2);
this.context.fillText( message, commitOffsetLeft, this.y + this.dotSize / 2 );
}
};

Expand Down Expand Up @@ -1172,14 +1190,14 @@
// --------------------------------------------------------------------

var getFontHeight = function ( font ) {
var body = document.getElementsByTagName("body")[0];
var dummy = document.createElement("div");
var dummyText = document.createTextNode("Mg");
dummy.appendChild(dummyText);
dummy.setAttribute("style", "font: " + font + ";");
body.appendChild(dummy);
var body = document.getElementsByTagName( "body" )[ 0 ];
var dummy = document.createElement( "div" );
var dummyText = document.createTextNode( "Mg" );
dummy.appendChild( dummyText );
dummy.setAttribute( "style", "font: " + font + ";" );
body.appendChild( dummy );
var result = dummy.offsetHeight;
body.removeChild(dummy);
body.removeChild( dummy );
return result;
};

Expand All @@ -1189,24 +1207,24 @@

function drawTextBG ( context, x, y, text, fgcolor, bgcolor, font, angle ) {
context.save();
context.translate(x, y);
context.rotate(angle*(Math.PI/180));
context.translate( x, y );
context.rotate( angle * (Math.PI / 180) );
context.textAlign = "center";

context.font = font;
var width = context.measureText(text).width;
var height = getFontHeight(font);
var width = context.measureText( text ).width;
var height = getFontHeight( font );

context.beginPath();
context.rect(-(width/2)-4, -(height/2)+2, width+8, height+2);
context.rect( -(width / 2) - 4, -(height / 2) + 2, width + 8, height + 2 );
context.fillStyle = bgcolor;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "black";
context.stroke();

context.fillStyle = fgcolor;
context.fillText(text, 0, height/2);
context.fillText( text, 0, height / 2 );
context.restore();
}

Expand Down
4 changes: 2 additions & 2 deletions build/gitgraph.min.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 0bbc8c7

Please sign in to comment.