mirror of
https://we.phorge.it/source/phorge.git
synced 2024-09-20 17:28:51 +02:00
16a0f4a88e
Summary: Reskinning tables to table-kit mocks, which includes new textures, spacing, slightly larger fonts. Looking for early feedback before adding in new row colors and other items into the class. Test Plan: http://phab1.pushlabs.net/uiexample/view/PhabricatorSortTableExample/ Reviewers: btrahan, epriestley Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D4396
137 lines
3.4 KiB
JavaScript
137 lines
3.4 KiB
JavaScript
/**
|
|
* @provides javelin-behavior-diffusion-commit-graph
|
|
* @requires javelin-behavior
|
|
* javelin-dom
|
|
* javelin-stratcom
|
|
*/
|
|
|
|
JX.behavior('diffusion-commit-graph', function(config) {
|
|
|
|
var nodes = JX.DOM.scry(document.body, 'div', 'commit-graph');
|
|
var cxt;
|
|
|
|
// Pick the color for column 'c'.
|
|
function color(c) {
|
|
var colors = [
|
|
'#cc0000',
|
|
'#cc0099',
|
|
'#6600cc',
|
|
'#0033cc',
|
|
'#00cccc',
|
|
'#00cc33',
|
|
'#66cc00',
|
|
'#cc9900',
|
|
];
|
|
return colors[c % colors.length];
|
|
}
|
|
|
|
// Stroke a line (for lines between commits).
|
|
function lstroke(c) {
|
|
cxt.lineWidth = 3;
|
|
cxt.strokeStyle = '#ffffff';
|
|
cxt.stroke();
|
|
cxt.lineWidth = 1;
|
|
cxt.strokeStyle = color(c);
|
|
cxt.stroke();
|
|
}
|
|
|
|
// Stroke with fill (for commit circles).
|
|
function fstroke(c) {
|
|
cxt.fillStyle = color(c);
|
|
cxt.strokeStyle = '#ffffff';
|
|
cxt.fill();
|
|
cxt.stroke();
|
|
}
|
|
|
|
|
|
for (var ii = 0; ii < nodes.length; ii++) {
|
|
var data = JX.Stratcom.getData(nodes[ii]);
|
|
|
|
var cell = 12; // Width of each thread.
|
|
function xpos(col) {
|
|
return (col * cell) + (cell / 2);
|
|
}
|
|
|
|
var h = 26;
|
|
var w = cell * config.count;
|
|
|
|
var canvas = JX.$N('canvas', {width: w, height: h});
|
|
cxt = canvas.getContext('2d');
|
|
|
|
cxt.lineWidth = 3;
|
|
// This gives us sharper lines, since lines drawn on an integer (like 5)
|
|
// are drawn from 4.5 to 5.5.
|
|
cxt.translate(0.5, 0.5);
|
|
|
|
cxt.strokeStyle = '#ffffff';
|
|
cxt.fillStyle = '#ffffff';
|
|
|
|
// First, figure out which column this commit appears in. It is marked by
|
|
// "o" (if it has a commit after it) or "^" (if no other commit has it as
|
|
// a parent). We use this to figure out where to draw the join/split lines.
|
|
|
|
var origin = null;
|
|
for (var jj = 0; jj < data.line.length; jj++) {
|
|
var c = data.line.charAt(jj);
|
|
switch (c) {
|
|
case 'o':
|
|
case '^':
|
|
origin = xpos(jj);
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Draw all the join lines. These start at some column at the top of the
|
|
// canvas and join the commit's column. They indicate branching.
|
|
|
|
for (var jj = 0; jj < data.join.length; jj++) {
|
|
var join = data.join[jj];
|
|
var x = xpos(join);
|
|
cxt.beginPath();
|
|
cxt.moveTo(x, 0);
|
|
cxt.bezierCurveTo(x, h/4, origin, h/4, origin, h/2);
|
|
lstroke(join);
|
|
}
|
|
|
|
// Draw all the split lines. These start at the commit and end at some
|
|
// column on the bottom of the canvas. They indicate merging.
|
|
|
|
for (var jj = 0; jj < data.split.length; jj++) {
|
|
var split = data.split[jj];
|
|
var x = xpos(split);
|
|
cxt.beginPath();
|
|
cxt.moveTo(origin, h/2);
|
|
cxt.bezierCurveTo(origin, 3*h/4, x, 3*h/4, x, h);
|
|
lstroke(split);
|
|
}
|
|
|
|
// Draw the vertical lines (a branch with no activity at this commit) and
|
|
// the commit circles.
|
|
|
|
for (var jj = 0; jj < data.line.length; jj++) {
|
|
var c = data.line.charAt(jj);
|
|
switch (c) {
|
|
case 'o':
|
|
case '^':
|
|
origin = xpos(jj);
|
|
case '|':
|
|
cxt.beginPath();
|
|
cxt.moveTo(xpos(jj), (c == '^' ? h/2 : 0));
|
|
cxt.lineTo(xpos(jj), h);
|
|
lstroke(jj);
|
|
|
|
if (c == 'o' || c == '^') {
|
|
cxt.beginPath();
|
|
cxt.arc(xpos(jj), h/2, 3, 0, 2 * Math.PI, true);
|
|
fstroke(jj);
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
|
|
JX.DOM.setContent(nodes[ii], canvas);
|
|
}
|
|
|
|
|
|
});
|
|
|