|
|
/* eslint-disable func-names, no-var, one-var, consistent-return, camelcase */
|
|
/* eslint-disable func-names, consistent-return, camelcase */
|
|
|
|
|
|
|
|
import $ from 'jquery';
|
|
import $ from 'jquery';
|
|
|
import { __ } from '../locale';
|
|
import { __ } from '../locale';
|
| ... | @@ -40,18 +40,20 @@ export default class BranchGraph { |
... | @@ -40,18 +40,20 @@ export default class BranchGraph { |
|
|
}
|
|
}
|
|
|
|
|
|
|
|
prepareData(days, commits) {
|
|
prepareData(days, commits) {
|
|
|
var c, ch, cw, j, len, ref;
|
|
let c = 0;
|
|
|
|
let j = 0;
|
|
|
|
let len = 0;
|
|
|
this.days = days;
|
|
this.days = days;
|
|
|
this.commits = commits;
|
|
this.commits = commits;
|
|
|
this.collectParents();
|
|
this.collectParents();
|
|
|
this.graphHeight = $(this.element).height();
|
|
this.graphHeight = $(this.element).height();
|
|
|
this.graphWidth = $(this.element).width();
|
|
this.graphWidth = $(this.element).width();
|
|
|
ch = Math.max(this.graphHeight, this.offsetY + this.unitTime * this.mtime + 150);
|
|
const ch = Math.max(this.graphHeight, this.offsetY + this.unitTime * this.mtime + 150);
|
|
|
cw = Math.max(this.graphWidth, this.offsetX + this.unitSpace * this.mspace + 300);
|
|
const cw = Math.max(this.graphWidth, this.offsetX + this.unitSpace * this.mspace + 300);
|
|
|
this.r = Raphael(this.element.get(0), cw, ch);
|
|
this.r = Raphael(this.element.get(0), cw, ch);
|
|
|
this.top = this.r.set();
|
|
this.top = this.r.set();
|
|
|
this.barHeight = Math.max(this.graphHeight, this.unitTime * this.days.length + 320);
|
|
this.barHeight = Math.max(this.graphHeight, this.unitTime * this.days.length + 320);
|
|
|
ref = this.commits;
|
|
const ref = this.commits;
|
|
|
for (j = 0, len = ref.length; j < len; j += 1) {
|
|
for (j = 0, len = ref.length; j < len; j += 1) {
|
|
|
c = ref[j];
|
|
c = ref[j];
|
|
|
if (c.id in this.parents) {
|
|
if (c.id in this.parents) {
|
| ... | @@ -64,18 +66,20 @@ export default class BranchGraph { |
... | @@ -64,18 +66,20 @@ export default class BranchGraph { |
|
|
}
|
|
}
|
|
|
|
|
|
|
|
collectParents() {
|
|
collectParents() {
|
|
|
var c, j, len, p, ref, results;
|
|
let j = 0;
|
|
|
var l, len1, ref1, results1;
|
|
let l = 0;
|
|
|
ref = this.commits;
|
|
let len = 0;
|
|
|
results = [];
|
|
let len1 = 0;
|
|
|
|
const ref = this.commits;
|
|
|
|
const results = [];
|
|
|
for (j = 0, len = ref.length; j < len; j += 1) {
|
|
for (j = 0, len = ref.length; j < len; j += 1) {
|
|
|
c = ref[j];
|
|
const c = ref[j];
|
|
|
this.mtime = Math.max(this.mtime, c.time);
|
|
this.mtime = Math.max(this.mtime, c.time);
|
|
|
this.mspace = Math.max(this.mspace, c.space);
|
|
this.mspace = Math.max(this.mspace, c.space);
|
|
|
ref1 = c.parents;
|
|
const ref1 = c.parents;
|
|
|
results1 = [];
|
|
const results1 = [];
|
|
|
for (l = 0, len1 = ref1.length; l < len1; l += 1) {
|
|
for (l = 0, len1 = ref1.length; l < len1; l += 1) {
|
|
|
p = ref1[l];
|
|
const p = ref1[l];
|
|
|
this.parents[p[0]] = true;
|
|
this.parents[p[0]] = true;
|
|
|
results1.push((this.mspace = Math.max(this.mspace, p[1])));
|
|
results1.push((this.mspace = Math.max(this.mspace, p[1])));
|
|
|
}
|
|
}
|
| ... | @@ -85,9 +89,8 @@ export default class BranchGraph { |
... | @@ -85,9 +89,8 @@ export default class BranchGraph { |
|
|
}
|
|
}
|
|
|
|
|
|
|
|
collectColors() {
|
|
collectColors() {
|
|
|
var k, results;
|
|
let k = 0;
|
|
|
k = 0;
|
|
const results = [];
|
|
|
results = [];
|
|
|
|
|
while (k < this.mspace) {
|
|
while (k < this.mspace) {
|
|
|
this.colors.push(Raphael.getColor(0.8));
|
|
this.colors.push(Raphael.getColor(0.8));
|
|
|
// Skipping a few colors in the spectrum to get more contrast between colors
|
|
// Skipping a few colors in the spectrum to get more contrast between colors
|
| ... | @@ -99,20 +102,21 @@ export default class BranchGraph { |
... | @@ -99,20 +102,21 @@ export default class BranchGraph { |
|
|
}
|
|
}
|
|
|
|
|
|
|
|
buildGraph() {
|
|
buildGraph() {
|
|
|
var cuday, cumonth, day, len, mm, ref;
|
|
let mm = 0;
|
|
|
|
let len = 0;
|
|
|
|
let cuday = 0;
|
|
|
|
let cumonth = '';
|
|
|
const { r } = this;
|
|
const { r } = this;
|
|
|
cuday = 0;
|
|
|
|
|
cumonth = '';
|
|
|
|
|
r.rect(0, 0, 40, this.barHeight).attr({
|
|
r.rect(0, 0, 40, this.barHeight).attr({
|
|
|
fill: '#222',
|
|
fill: '#222',
|
|
|
});
|
|
});
|
|
|
r.rect(40, 0, 30, this.barHeight).attr({
|
|
r.rect(40, 0, 30, this.barHeight).attr({
|
|
|
fill: '#444',
|
|
fill: '#444',
|
|
|
});
|
|
});
|
|
|
ref = this.days;
|
|
const ref = this.days;
|
|
|
|
|
|
|
|
for (mm = 0, len = ref.length; mm < len; mm += 1) {
|
|
for (mm = 0, len = ref.length; mm < len; mm += 1) {
|
|
|
day = ref[mm];
|
|
const day = ref[mm];
|
|
|
if (cuday !== day[0] || cumonth !== day[1]) {
|
|
if (cuday !== day[0] || cumonth !== day[1]) {
|
|
|
// Dates
|
|
// Dates
|
|
|
r.text(55, this.offsetY + this.unitTime * mm, day[0]).attr({
|
|
r.text(55, this.offsetY + this.unitTime * mm, day[0]).attr({
|
| ... | @@ -137,26 +141,25 @@ export default class BranchGraph { |
... | @@ -137,26 +141,25 @@ export default class BranchGraph { |
|
|
}
|
|
}
|
|
|
|
|
|
|
|
renderPartialGraph() {
|
|
renderPartialGraph() {
|
|
|
var commit, end, i, isGraphEdge, start, x, y;
|
|
const isGraphEdge = true;
|
|
|
start = Math.floor((this.element.scrollTop() - this.offsetY) / this.unitTime) - 10;
|
|
let i = 0;
|
|
|
|
let start = Math.floor((this.element.scrollTop() - this.offsetY) / this.unitTime) - 10;
|
|
|
if (start < 0) {
|
|
if (start < 0) {
|
|
|
isGraphEdge = true;
|
|
|
|
|
start = 0;
|
|
start = 0;
|
|
|
}
|
|
}
|
|
|
end = start + 40;
|
|
let end = start + 40;
|
|
|
if (this.commits.length < end) {
|
|
if (this.commits.length < end) {
|
|
|
isGraphEdge = true;
|
|
|
|
|
end = this.commits.length;
|
|
end = this.commits.length;
|
|
|
}
|
|
}
|
|
|
if (this.prev_start === -1 || Math.abs(this.prev_start - start) > 10 || isGraphEdge) {
|
|
if (this.prev_start === -1 || Math.abs(this.prev_start - start) > 10 || isGraphEdge) {
|
|
|
i = start;
|
|
i = start;
|
|
|
this.prev_start = start;
|
|
this.prev_start = start;
|
|
|
while (i < end) {
|
|
while (i < end) {
|
|
|
commit = this.commits[i];
|
|
const commit = this.commits[i];
|
|
|
i += 1;
|
|
i += 1;
|
|
|
if (commit.hasDrawn !== true) {
|
|
if (commit.hasDrawn !== true) {
|
|
|
x = this.offsetX + this.unitSpace * (this.mspace - commit.space);
|
|
const x = this.offsetX + this.unitSpace * (this.mspace - commit.space);
|
|
|
y = this.offsetY + this.unitTime * commit.time;
|
|
const y = this.offsetY + this.unitTime * commit.time;
|
|
|
this.drawDot(x, y, commit);
|
|
this.drawDot(x, y, commit);
|
|
|
this.drawLines(x, y, commit);
|
|
this.drawLines(x, y, commit);
|
|
|
this.appendLabel(x, y, commit);
|
|
this.appendLabel(x, y, commit);
|
| ... | @@ -203,27 +206,25 @@ export default class BranchGraph { |
... | @@ -203,27 +206,25 @@ export default class BranchGraph { |
|
|
}
|
|
}
|
|
|
|
|
|
|
|
appendLabel(x, y, commit) {
|
|
appendLabel(x, y, commit) {
|
|
|
var label, rect, shortrefs, text, textbox;
|
|
|
|
|
|
|
|
|
|
if (!commit.refs) {
|
|
if (!commit.refs) {
|
|
|
return;
|
|
return;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
const { r } = this;
|
|
const { r } = this;
|
|
|
shortrefs = commit.refs;
|
|
let shortrefs = commit.refs;
|
|
|
// Truncate if longer than 15 chars
|
|
// Truncate if longer than 15 chars
|
|
|
if (shortrefs.length > 17) {
|
|
if (shortrefs.length > 17) {
|
|
|
shortrefs = `${shortrefs.substr(0, 15)}…`;
|
|
shortrefs = `${shortrefs.substr(0, 15)}…`;
|
|
|
}
|
|
}
|
|
|
text = r.text(x + 4, y, shortrefs).attr({
|
|
const text = r.text(x + 4, y, shortrefs).attr({
|
|
|
'text-anchor': 'start',
|
|
'text-anchor': 'start',
|
|
|
font: '10px Monaco, monospace',
|
|
font: '10px Monaco, monospace',
|
|
|
fill: '#FFF',
|
|
fill: '#FFF',
|
|
|
title: commit.refs,
|
|
title: commit.refs,
|
|
|
});
|
|
});
|
|
|
textbox = text.getBBox();
|
|
const textbox = text.getBBox();
|
|
|
// Create rectangle based on the size of the textbox
|
|
// Create rectangle based on the size of the textbox
|
|
|
rect = r.rect(x, y - 7, textbox.width + 5, textbox.height + 5, 4).attr({
|
|
const rect = r.rect(x, y - 7, textbox.width + 5, textbox.height + 5, 4).attr({
|
|
|
fill: '#000',
|
|
fill: '#000',
|
|
|
'fill-opacity': 0.5,
|
|
'fill-opacity': 0.5,
|
|
|
stroke: 'none',
|
|
stroke: 'none',
|
| ... | @@ -234,7 +235,7 @@ export default class BranchGraph { |
... | @@ -234,7 +235,7 @@ export default class BranchGraph { |
|
|
'fill-opacity': 0.5,
|
|
'fill-opacity': 0.5,
|
|
|
stroke: 'none',
|
|
stroke: 'none',
|
|
|
});
|
|
});
|
|
|
label = r.set(rect, text);
|
|
const label = r.set(rect, text);
|
|
|
label.transform(['t', -rect.getBBox().width - 15, 0]);
|
|
label.transform(['t', -rect.getBBox().width - 15, 0]);
|
|
|
// Set text to front
|
|
// Set text to front
|
|
|
return text.toFront();
|
|
return text.toFront();
|
| ... | @@ -286,17 +287,21 @@ export default class BranchGraph { |
... | @@ -286,17 +287,21 @@ export default class BranchGraph { |
|
|
}
|
|
}
|
|
|
|
|
|
|
|
drawLines(x, y, commit) {
|
|
drawLines(x, y, commit) {
|
|
|
var arrow, color, i, len, offset, parent, parentCommit, parentX1, parentX2, parentY, route;
|
|
let i = 0;
|
|
|
|
let len = 0;
|
|
|
|
let arrow = '';
|
|
|
|
let offset = [];
|
|
|
|
let color = [];
|
|
|
const { r } = this;
|
|
const { r } = this;
|
|
|
const ref = commit.parents;
|
|
const ref = commit.parents;
|
|
|
const results = [];
|
|
const results = [];
|
|
|
|
|
|
|
|
for (i = 0, len = ref.length; i < len; i += 1) {
|
|
for (i = 0, len = ref.length; i < len; i += 1) {
|
|
|
parent = ref[i];
|
|
const parent = ref[i];
|
|
|
parentCommit = this.preparedCommits[parent[0]];
|
|
const parentCommit = this.preparedCommits[parent[0]];
|
|
|
parentY = this.offsetY + this.unitTime * parentCommit.time;
|
|
const parentY = this.offsetY + this.unitTime * parentCommit.time;
|
|
|
parentX1 = this.offsetX + this.unitSpace * (this.mspace - parentCommit.space);
|
|
const parentX1 = this.offsetX + this.unitSpace * (this.mspace - parentCommit.space);
|
|
|
parentX2 = this.offsetX + this.unitSpace * (this.mspace - parent[1]);
|
|
const parentX2 = this.offsetX + this.unitSpace * (this.mspace - parent[1]);
|
|
|
// Set line color
|
|
// Set line color
|
|
|
if (parentCommit.space <= commit.space) {
|
|
if (parentCommit.space <= commit.space) {
|
|
|
color = this.colors[commit.space];
|
|
color = this.colors[commit.space];
|
| ... | @@ -315,7 +320,7 @@ export default class BranchGraph { |
... | @@ -315,7 +320,7 @@ export default class BranchGraph { |
|
|
arrow = 'l-5,0,2,4,3,-4,-4,2';
|
|
arrow = 'l-5,0,2,4,3,-4,-4,2';
|
|
|
}
|
|
}
|
|
|
// Start point
|
|
// Start point
|
|
|
route = ['M', x + offset[0], y + offset[1]];
|
|
const route = ['M', x + offset[0], y + offset[1]];
|
|
|
// Add arrow if not first parent
|
|
// Add arrow if not first parent
|
|
|
if (i > 0) {
|
|
if (i > 0) {
|
|
|
route.push(arrow);
|
|
route.push(arrow);
|
| ... | |
... | |
| ... | | ... | |