dataRetriever.bindIndicator(commitsGraph.parent('.network-view'));
detailOverlay.appendTo(commitsGraph);
function handleEnterHotZone() {
dataRetriever.retrieve();
}
function handleCommitsRetrieved(commits) {
// no commits or empty commits array? Well, we can't draw a graph of that
if (commits === null) {
handleNoAvailableData();
return;
}
prepareCommits(commits);
renderCommits(commits);
}
function handleNoAvailableData() {
window.console && console.log('No (more) Data available');
}
const awaitedParents = {};
function prepareCommits(commits) {
$.each(commits, function (index, commit) {
prepareCommit(commit);
});
}
function prepareCommit(commit) {
// make "date" an actual JS Date object
commit.date = new Date(commit.date * 1000);
// the parents will be filled once they have become prepared
commit.parents = [];
// we will want to store this commit's children
commit.children = getChildrenFor(commit);
commit.isFork = (commit.children.length > 1);
commit.isMerge = (commit.parentsHash.length > 1);
// after a fork, the occupied lanes must be cleaned up. The children used some lanes we no longer occupy
if (commit.isFork === true) {
$.each(commit.children, function (key, thisChild) {
// free this lane
laneManager.occupy(thisChild.lane);
});
}
commit.lane = laneManager.getLaneForCommit(commit);
// now the lane we chose must be marked occupied again.
laneManager.occupy(commit.lane);
registerAwaitedParentsFor(commit);
}
/**
* Add a new childCommit to the dictionary of awaited parents
*
* @param commit who is waiting?
*/
function registerAwaitedParentsFor(commit) {
// This commit's parents are not yet known in our little world, as we are rendering following the time line.
// Therefore we are registering this commit as "waiting" for each of the parent hashes
$.each(commit.parentsHash, function (key, thisParentHash) {
// If awaitedParents does not already have a key for thisParent's hash, initialise as array
if (!awaitedParents.hasOwnProperty(thisParentHash)) {
awaitedParents[thisParentHash] = [commit];
} else {
awaitedParents[thisParentHash].push(commit);
}
});
}
function getChildrenFor(commit) {
let children = [];
if (awaitedParents.hasOwnProperty(commit.hash)) {
// there are child commits waiting
children = awaitedParents[commit.hash];
// let the children know their parent objects
$.each(children, function (key, thisChild) {
thisChild.parents.push(commit);
});
// remove this item from parentsBeingWaitedFor
delete awaitedParents[commit.hash];
}
return children;
}
const lastRenderedDate = new Date(0);
function renderCommits(commits) {
let neededWidth = ((usedColumns + Object.keys(commits).length) * cfg.columnWidth);
if (neededWidth > paper.width) {
extendPaper(neededWidth, paper.height);
} else if (dataRetriever.hasMore()) {
// this is the case when we have not loaded enough commits to fill the paper yet. Get some more then...
dataRetriever.retrieve();
}
$.each(commits, function (index, commit) {
if (lastRenderedDate.getYear() !== commit.date.getYear()
|| lastRenderedDate.getMonth() !== commit.date.getMonth()
|| lastRenderedDate.getDate() !== commit.date.getDate()) {
// TODO: If desired, one could add a time scale on top, maybe.
}
renderCommit(commit);
});
}
function renderCommit(commit) {
// find the column this dot is drawn on
usedColumns++;
commit.column = usedColumns;
commit.dot = paper.circle(getXPositionForColumnNumber(commit.column), commit.lane.centerY, cfg.dotRadius);
commit.dot.attr({
fill: commit.lane.color,
stroke: 'none',
cursor: 'pointer'
})
.data('commit', commit)
.mouseover(handleCommitMouseover)
.mouseout(handleCommitMouseout)
.click(handleCommitClick);
// maybe we have not enough space for the lane yet
if (commit.lane.centerY + cfg.laneHeight > paper.height) {
extendPaper(paper.width, commit.lane.centerY + cfg.laneHeight)
}
$.each(commit.children, function (idx, thisChild) {
// if there is one child only, stay on the commit's lane as long as possible when connecting the dots.
// but if there is more than one child, switch to the child's lane ASAP.
// this is to display merges and forks where they happen (ie. at a commit node/ a dot), rather than
// connecting from a line.
// So: commit.isFork decides whether or not we must switch lanes early
connectDots(commit, thisChild, commit.isFork);
});
}
/**
*
* @param firstCommit
* @param secondCommit
* @param switchLanesEarly (boolean): Move the line to the secondCommit's lane ASAP? Defaults to false
*/
function connectDots(firstCommit, secondCommit, switchLanesEarly) {
// default value for switchLanesEarly
switchLanesEarly = switchLanesEarly || false;
const lineLane = switchLanesEarly ? secondCommit.lane : firstCommit.lane;
// the connection has 4 stops, resulting in the following 3 segments:
// - from the x/y center of firstCommit.dot to the rightmost end (x) of the commit's column, with y=lineLane
// - from the rightmost end of firstCommit's column, to the leftmost end of secondCommit's column
// - from the leftmost end of secondCommit's column (y=lineLane) to the x/y center of secondCommit
paper.path(
getSvgLineString(
[firstCommit.dot.attr('cx'), firstCommit.dot.attr('cy')],
[firstCommit.dot.attr('cx') + (cfg.columnWidth / 2), lineLane.centerY],
[secondCommit.dot.attr('cx') - (cfg.columnWidth / 2), lineLane.centerY],
[secondCommit.dot.attr('cx'), secondCommit.dot.attr('cy')]
)
).attr({"stroke": lineLane.color, "stroke-width": 2}).toBack();
}
// set together a path string from any amount of arguments
// each argument is an array of [x, y] within the paper's coordinate system
function getSvgLineString() {
if (arguments.length < 2) return;
let svgString = 'M' + arguments[0][0] + ' ' + arguments[0][1];
for (let i = 1, j = arguments.length; i < j; i++) {
svgString += 'L' + arguments[i][0] + ' ' + arguments[i][1];
}
return svgString;
}
function handleCommitMouseover(evt) {
detailOverlay.setCommit(this.data('commit'))
.show();
let xPos = evt.pageX - commitsGraph.offset().left + commitsGraph.scrollLeft() - (detailOverlay.outerWidth() / 2);
// check that x doesn't run out the viewport
xPos = Math.max(xPos, commitsGraph.scrollLeft() + 10);
xPos = Math.min(xPos, commitsGraph.scrollLeft() + commitsGraph.width() - detailOverlay.outerWidth() - 10);
detailOverlay.positionTo(xPos,
evt.pageY - commitsGraph.offset().top + commitsGraph.scrollTop() + 10);
}
function handleCommitMouseout(evt) {
detailOverlay.hide();
}
function handleCommitClick(evt) {
location.href = this.data('commit').details;
}
function getXPositionForColumnNumber(columnNumber) {
// we want the column's center point
return (paper.width - (columnNumber * cfg.columnWidth) + (cfg.columnWidth / 2));
}
function extendPaper(newWidth, newHeight) {
const deltaX = newWidth - paper.width;
paper.setSize(newWidth, newHeight);
// fixup parent's scroll position