P3X GitList

Raw View History

Blames found: 80 Mode: javascript Binary: false

Hang on, we reloading big blames...

ffe8814b

/** * Network Graph JS * This File is a part of the GitList Project at http://gitlist.org * * @license http://www.opensource.org/licenses/bsd-license.php * @author Lukas Domnick <lukx@lukx.de> http://github.com/lukx */ $( function() { // initialise network graph only when there is one network graph container on the page

7fb0016a

if( $('div.network-graph').length !== 1 ) {

ffe8814b

return; } var

77dd4e3b

cfg = { laneColors: ['#ff0000', '#0000FF', '#00FFFF', '#00FF00', '#FFFF00', '#ff00ff'],

7fb0016a

laneHeight: 20, columnWidth: 42, dotRadius: 3

77dd4e3b

}, // the table element into which we will render our graph

7fb0016a

commitsGraph = $('div.network-graph').first(), nextPage = commitsGraph.data('source'),

ffe8814b

7fb0016a

refreshButton = $('<button class="btn btn-small"></button>').insertAfter(commitsGraph.parent('div')), paper = Raphael( commitsGraph[0], commitsGraph.width(), commitsGraph.height()), usedColumns = 0

68136679

;

b1cb35f3

7fb0016a

window.pap = paper;

68136679

function fetchCommitData( url ) { console.log('Starting to fetch commit data from ', url); setRefreshButtonState(true);

b1cb35f3

$.ajax({ dataType: "json", url: url, success: handleNetworkDataLoaded, error: handleNetworkDataError }); }

68136679

function setRefreshButtonState( isCurrentlyLoading ) { var newInner = '<i class="icon-repeat"></i> Load more'; if( isCurrentlyLoading ) { newInner = '<i class="icon-refresh"></i> Loading...'; } refreshButton.html(newInner); };

7fb0016a

function refreshButtonClickHandler() {

b1cb35f3

fetchCommitData(nextPage); };

ffe8814b

68136679

ffe8814b

function handleNetworkDataLoaded( data ) {

68136679

setRefreshButtonState(false);

b1cb35f3

console.log('Retreived Commit Data', data);

68136679

// store the next page as gotten from pagination

b1cb35f3

nextPage = data.nextPage;

ffe8814b

// no commits or empty commits array? Well, we can't draw a graph of that if( !data.commits || data.commits.length < 1 ) { handleNoAvailableData(); return;

b1cb35f3

}

ffe8814b

prepareCommits( data.commits ); renderCommits( data.commits ); } function handleNetworkDataError( err ){

68136679

setRefreshButtonState(false);

ffe8814b

console.log(err); } function handleNoAvailableData() {

b1cb35f3

console.log('No Data available');

ffe8814b

}

77dd4e3b

var parentsBeingWaitedFor = {}, occupiedLanes = [], maxLanes = 0;

ffe8814b

function prepareCommits( commits ) { $.each( commits, function ( index, commit) { prepareCommit( commit ); }); } function findFreeLane() { var i = 0; while( true ) { // if an array index is not yet defined or set to false, the lane with that number is free. if( !occupiedLanes[i] ) { return i; } i ++; } } 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 rendered commit.parents = []; // get children for this commit commit.children = []; if( parentsBeingWaitedFor.hasOwnProperty( commit.hash )) { // there are child commits waiting commit.children = parentsBeingWaitedFor[commit.hash]; // let the children know their parent objects $.each( commit.children, function(key, thisChild ) { thisChild.parents.push( commit ); }); // remove this item from parentsBeingWaitedFor delete parentsBeingWaitedFor[commit.hash]; } commit.isFork = ( commit.children.length > 1 ); commit.isMerge = ( commit.parentsHash.length > 1 );

77dd4e3b

// 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 ) {

7fb0016a

// free this lane

77dd4e3b

occupiedLanes[thisChild.lane.number] = false; }); }

ffe8814b

// find out which lane we're on. Start with a free one var laneNumber = findFreeLane(); // if the child is a merge, we need to figure out which lane we may render this commit on. // Rules are simple: A "parent" by the same author as the merge may render on the same line as the parent // others take the next free lane. if( commit.children.length > 0) { if( commit.children[0].isMerge && commit.children[0].author.email === commit.author.email ) { console.log('same author, same lane', commit); laneNumber = commit.children[0].lane.number; // furthermore, commits in a linear line of events may stay on the same lane, too } else if ( !commit.children[0].isMerge ) { console.log('Taking the childs lane because it was not a merge', commit); laneNumber = commit.children[0].lane.number; } } commit.lane = getLaneInfo( laneNumber ); // now the lane we chose must be marked occupied again. occupiedLanes[commit.lane.number] = true;

77dd4e3b

maxLanes = Math.max( occupiedLanes.length, maxLanes);

ffe8814b

// This commit's parents are not on stage yet, 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 ) { // iterating over the rendered commit's parent hashes... // parent hash should always be a string, but although I can't imagine a reason why it shouldn't, // let's just clear out the case where it is a complete commit object... // If parentsBeingWaitedFor does not already have a key for thisParent's hash, initialise as array if( !parentsBeingWaitedFor.hasOwnProperty(thisParentHash) ) { parentsBeingWaitedFor[thisParentHash] = []; } // allright, now register the commit that is currently being rendered with the parent queue parentsBeingWaitedFor[ thisParentHash ].push( commit ); }); } var lastRenderedDate = new Date(0); function renderCommits( commits ) {

7fb0016a

var neededWidth = ((usedColumns + Object.keys(commits).length) * cfg.columnWidth); if ( neededWidth > paper.width ) { console.log(neededWidth); extendPaper( neededWidth, paper.height ); } else { console.log( paper.width, neededWidth); }

ffe8814b

$.each( commits, function ( index, commit) { if( lastRenderedDate.getYear() !== commit.date.getYear() || lastRenderedDate.getMonth() !== commit.date.getMonth() || lastRenderedDate.getDate() !== commit.date.getDate() ) { // insert date row } renderCommit(commit); lastRenderedDate = commit.date; }); }

7fb0016a

function extendPaper( newWidth, newHeight ) { var deltaX = newWidth - paper.width;

ffe8814b

7fb0016a

paper.setSize( newWidth, newHeight ); // fixup parent's scroll position paper.canvas.parentNode.scrollLeft = paper.canvas.parentNode.scrollLeft + deltaX;

ffe8814b

7fb0016a

// now fixup the x position

ffe8814b

7fb0016a

paper.forEach( function( el ) {

ffe8814b

7fb0016a

if( el.type === "circle" ) { el.attr('cx', el.attr('cx') + deltaX); } else if ( el.type === "path") { var newXTranslation = el.data('currentXTranslation') || 0; newXTranslation += deltaX; el.transform( 't' + newXTranslation + ' 0' ); el.data('currentXTranslation', newXTranslation); } }); }

ffe8814b

7fb0016a

function renderCommit( commit ) { // find the column this dot is drawn on usedColumns++; commit.column = usedColumns;

ffe8814b

7fb0016a

// now the parent with the highest lane number determines whether we need more space to the right...

ffe8814b

68136679

7fb0016a

commit.dot = paper.circle( getXPositionForColumnNumber(commit.column), commit.lane.centerY, cfg.dotRadius );

ffe8814b

commit.dot.attr({ fill: commit.lane.color,

7fb0016a

stroke: 'none', cursor: 'pointer' }) .data('commit', commit) .click( dotClickHandler );

ffe8814b

$.each( commit.children, function ( idx, thisChild ) {

7fb0016a

// 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 );

68136679

}); }

77dd4e3b

7fb0016a

/** * * @param firstCommit * @param secondCommit * @param switchLanesEarly (boolean): Move the line to the secondCommit's lane ASAP? Defaults to false */ function connectDots( firstCommit, secondCommit, switchLanesEarly ) { switchLanesEarly = switchLanesEarly || false; var lineLane = switchLanesEarly ? secondCommit.lane : firstCommit.lane; // the connection has 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 // draw the line between the two dots 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],

77dd4e3b

7fb0016a

[secondCommit.dot.attr('cx'), secondCommit.dot.attr('cy')] )).attr({

68136679

stroke: lineLane.color, "stroke-width": 2

7fb0016a

}).toBack(); return;

ffe8814b

}

7fb0016a

// set together a path string from any amount of arguments // each argument is an array of [x, y] function getSvgLineString( ) { if (arguments.length < 2) return // we are using a little trick here: Due to the right-to-left direction of the graph, the fix point is at the // right hand side. But the top-right point will change each time we extend the drawing area, which would // result in a terrible parsing and re-assembling every single sub path. // Instead, we use the moveto feature to start the line at "our" base (top-right), and draw the lines using // relative linetos: The linetos will always stay the same - we only have to update the base var svgString = 'M' + arguments[0][0] + ' ' + arguments[0][1]; for (var i = 1, j = arguments.length; i < j; i++){ // x =0 means a relatively unchanged x value svgString += 'L' + arguments[i][0] + ' ' + arguments[i][1]; } return svgString;

ffe8814b

}

68136679

function lineClickHandler() {

1cee41a0

console.log('Hi, I am connecting', this.data('theCommit'), 'with', this.data('theChild')); flashDot( this.data('theCommit').dot ); flashDot( this.data('theChild').dot ); } function flashDot( dot ) { var origCol = dot.attr('fill'); dot.attr('fill', '#00FF00'); dot.animate( { 'fill': origCol }, 1000); }

ffe8814b

function dotClickHandler(evt) { console.log(this.data('commit')); } function getLaneInfo( laneNumber ) { return { 'number': laneNumber,

7fb0016a

'centerY': ( laneNumber * cfg.laneHeight ) + (cfg.laneHeight/2),

77dd4e3b

'color': cfg.laneColors[ laneNumber % cfg.laneColors.length ]

68136679

};

ffe8814b

}

7fb0016a

function getXPositionForColumnNumber( columnNumber ) { // we want the column's center point return ( paper.width - ( columnNumber * cfg.columnWidth ) - (cfg.columnWidth / 2 )); } function initScrolling() { commitsGraph.on('mousedown', handleMouseDown); var lastX, lastY; function handleMouseDown( evt ) { commitsGraph.on('mousemove', handleMouseMove); commitsGraph.on('mouseup', handleMouseUp); commitsGraph.on('mouseleave', handleMouseUp); lastX = evt.pageX; lastY = evt.pageY; } function handleMouseMove(evt) { evt.preventDefault(); commitsGraph[0].scrollLeft = commitsGraph[0].scrollLeft + lastX - evt.pageX; commitsGraph[0].scrollTop = commitsGraph[0].scrollTop + lastY - evt.pageY; lastX = evt.pageX; lastY = evt.pageY; } function handleMouseUp(evt) { commitsGraph.off('mousemove', handleMouseMove); commitsGraph.off('mouseup', handleMouseUp); commitsGraph.off('mouseleave', handleMouseUp); } } refreshButton.click(refreshButtonClickHandler); initScrolling(); // load initial data fetchCommitData( nextPage );

ffe8814b

});