Skip to content

G
gitlab-ce
Commit 34742710 authored by Mike Greiling's avatar Mike Greiling
Browse files
Options

refactor BranchGraph class

parent 545397c6
Hide whitespace changes
Inline Side-by-side
Showing with 388 additions and 392 deletions
app/assets/javascripts/network/branch_graph.js
View file @ 34742710
/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, quotes, comma-dangle, one-var, one-var-declaration-per-line, no-mixed-operators, new-cap, no-loop-func, no-floating-decimal, consistent-return, no-unused-vars, prefer-template, prefer-arrow-callback, camelcase, max-len */ /* eslint-disable func-names, space-before-function-paren, no-var, wrap-iife, quotes, comma-dangle, one-var, one-var-declaration-per-line, no-mixed-operators, no-loop-func, no-floating-decimal, consistent-return, no-unused-vars, prefer-template, prefer-arrow-callback, camelcase, max-len */
import Raphael from 'raphael/raphael'; import Raphael from './raphael';
(function() { export default (function() {
var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; }; function BranchGraph(element1, options1) {
this.element = element1;
this.options = options1;
this.scrollTop = this.scrollTop.bind(this);
this.scrollBottom = this.scrollBottom.bind(this);
this.scrollRight = this.scrollRight.bind(this);
this.scrollLeft = this.scrollLeft.bind(this);
this.scrollUp = this.scrollUp.bind(this);
this.scrollDown = this.scrollDown.bind(this);
this.preparedCommits = {};
this.mtime = 0;
this.mspace = 0;
this.parents = {};
this.colors = ["#000"];
this.offsetX = 150;
this.offsetY = 20;
this.unitTime = 30;
this.unitSpace = 10;
this.prev_start = -1;
this.load();
}
this.BranchGraph = (function() { BranchGraph.prototype.load = function() {
function BranchGraph(element1, options1) { return $.ajax({
this.element = element1; url: this.options.url,
this.options = options1; method: "get",
this.scrollTop = bind(this.scrollTop, this); dataType: "json",
this.scrollBottom = bind(this.scrollBottom, this); success: $.proxy(function(data) {
this.scrollRight = bind(this.scrollRight, this); $(".loading", this.element).hide();
this.scrollLeft = bind(this.scrollLeft, this); this.prepareData(data.days, data.commits);
this.scrollUp = bind(this.scrollUp, this); return this.buildGraph();
this.scrollDown = bind(this.scrollDown, this); }, this)
this.preparedCommits = {}; });
this.mtime = 0; };
this.mspace = 0;
this.parents = {};
this.colors = ["#000"];
this.offsetX = 150;
this.offsetY = 20;
this.unitTime = 30;
this.unitSpace = 10;
this.prev_start = -1;
this.load();
}
BranchGraph.prototype.load = function() { BranchGraph.prototype.prepareData = function(days, commits) {
return $.ajax({ var c, ch, cw, j, len, ref;
url: this.options.url, this.days = days;
method: "get", this.commits = commits;
dataType: "json", this.collectParents();
success: $.proxy(function(data) { this.graphHeight = $(this.element).height();
$(".loading", this.element).hide(); this.graphWidth = $(this.element).width();
this.prepareData(data.days, data.commits); ch = Math.max(this.graphHeight, this.offsetY + this.unitTime * this.mtime + 150);
return this.buildGraph(); cw = Math.max(this.graphWidth, this.offsetX + this.unitSpace * this.mspace + 300);
}, this) this.r = Raphael(this.element.get(0), cw, ch);
}); this.top = this.r.set();
}; this.barHeight = Math.max(this.graphHeight, this.unitTime * this.days.length + 320);
ref = this.commits;
for (j = 0, len = ref.length; j < len; j += 1) {
c = ref[j];
if (c.id in this.parents) {
c.isParent = true;
}
this.preparedCommits[c.id] = c;
this.markCommit(c);
}
return this.collectColors();
};
BranchGraph.prototype.prepareData = function(days, commits) { BranchGraph.prototype.collectParents = function() {
var c, ch, cw, j, len, ref; var c, j, len, p, ref, results;
this.days = days; ref = this.commits;
this.commits = commits; results = [];
this.collectParents(); for (j = 0, len = ref.length; j < len; j += 1) {
this.graphHeight = $(this.element).height(); c = ref[j];
this.graphWidth = $(this.element).width(); this.mtime = Math.max(this.mtime, c.time);
ch = Math.max(this.graphHeight, this.offsetY + this.unitTime * this.mtime + 150); this.mspace = Math.max(this.mspace, c.space);
cw = Math.max(this.graphWidth, this.offsetX + this.unitSpace * this.mspace + 300); results.push((function() {
this.r = Raphael(this.element.get(0), cw, ch); var l, len1, ref1, results1;
this.top = this.r.set(); ref1 = c.parents;
this.barHeight = Math.max(this.graphHeight, this.unitTime * this.days.length + 320); results1 = [];
ref = this.commits; for (l = 0, len1 = ref1.length; l < len1; l += 1) {
for (j = 0, len = ref.length; j < len; j += 1) { p = ref1[l];
c = ref[j]; this.parents[p[0]] = true;
if (c.id in this.parents) { results1.push(this.mspace = Math.max(this.mspace, p[1]));
c.isParent = true;
} }
this.preparedCommits[c.id] = c; return results1;
this.markCommit(c); }).call(this));
} }
return this.collectColors(); return results;
}; };
BranchGraph.prototype.collectParents = function() { BranchGraph.prototype.collectColors = function() {
var c, j, len, p, ref, results; var k, results;
ref = this.commits; k = 0;
results = []; results = [];
for (j = 0, len = ref.length; j < len; j += 1) { while (k < this.mspace) {
c = ref[j]; this.colors.push(Raphael.getColor(.8));
this.mtime = Math.max(this.mtime, c.time); // Skipping a few colors in the spectrum to get more contrast between colors
this.mspace = Math.max(this.mspace, c.space); Raphael.getColor();
results.push((function() { Raphael.getColor();
var l, len1, ref1, results1; results.push(k += 1);
ref1 = c.parents; }
results1 = []; return results;
for (l = 0, len1 = ref1.length; l < len1; l += 1) { };
p = ref1[l];
this.parents[p[0]] = true;
results1.push(this.mspace = Math.max(this.mspace, p[1]));
}
return results1;
}).call(this));
}
return results;
};
BranchGraph.prototype.collectColors = function() { BranchGraph.prototype.buildGraph = function() {
var k, results; var cuday, cumonth, day, j, len, mm, r, ref;
k = 0; r = this.r;
results = []; cuday = 0;
while (k < this.mspace) { cumonth = "";
this.colors.push(Raphael.getColor(.8)); r.rect(0, 0, 40, this.barHeight).attr({
// Skipping a few colors in the spectrum to get more contrast between colors fill: "#222"
Raphael.getColor(); });
Raphael.getColor(); r.rect(40, 0, 30, this.barHeight).attr({
results.push(k += 1); fill: "#444"
});
ref = this.days;
for (mm = j = 0, len = ref.length; j < len; mm = (j += 1)) {
day = ref[mm];
if (cuday !== day[0] || cumonth !== day[1]) {
// Dates
r.text(55, this.offsetY + this.unitTime * mm, day[0]).attr({
font: "12px Monaco, monospace",
fill: "#BBB"
});
cuday = day[0];
} }
return results; if (cumonth !== day[1]) {
}; // Months
r.text(20, this.offsetY + this.unitTime * mm, day[1]).attr({
BranchGraph.prototype.buildGraph = function() { font: "12px Monaco, monospace",
var cuday, cumonth, day, j, len, mm, r, ref; fill: "#EEE"
r = this.r; });
cuday = 0; cumonth = day[1];
cumonth = "";
r.rect(0, 0, 40, this.barHeight).attr({
fill: "#222"
});
r.rect(40, 0, 30, this.barHeight).attr({
fill: "#444"
});
ref = this.days;
for (mm = j = 0, len = ref.length; j < len; mm = (j += 1)) {
day = ref[mm];
if (cuday !== day[0] || cumonth !== day[1]) {
// Dates
r.text(55, this.offsetY + this.unitTime * mm, day[0]).attr({
font: "12px Monaco, monospace",
fill: "#BBB"
});
cuday = day[0];
}
if (cumonth !== day[1]) {
// Months
r.text(20, this.offsetY + this.unitTime * mm, day[1]).attr({
font: "12px Monaco, monospace",
fill: "#EEE"
});
cumonth = day[1];
}
} }
this.renderPartialGraph(); }
return this.bindEvents(); this.renderPartialGraph();
}; return this.bindEvents();
};
BranchGraph.prototype.renderPartialGraph = function() { BranchGraph.prototype.renderPartialGraph = function() {
var commit, end, i, isGraphEdge, start, x, y; var commit, end, i, isGraphEdge, start, x, y;
start = Math.floor((this.element.scrollTop() - this.offsetY) / this.unitTime) - 10; start = Math.floor((this.element.scrollTop() - this.offsetY) / this.unitTime) - 10;
if (start < 0) { if (start < 0) {
isGraphEdge = true; isGraphEdge = true;
start = 0; start = 0;
} }
end = start + 40; end = start + 40;
if (this.commits.length < end) { if (this.commits.length < end) {
isGraphEdge = true; 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]; 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); x = this.offsetX + this.unitSpace * (this.mspace - commit.space);
y = this.offsetY + this.unitTime * commit.time; 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);
this.appendAnchor(x, y, commit); this.appendAnchor(x, y, commit);
commit.hasDrawn = true; commit.hasDrawn = true;
}
} }
return this.top.toFront();
} }
}; return this.top.toFront();
}
BranchGraph.prototype.bindEvents = function() { };
var element;
element = this.element;
return $(element).scroll((function(_this) {
return function(event) {
return _this.renderPartialGraph();
};
})(this));
};
BranchGraph.prototype.scrollDown = function() {
this.element.scrollTop(this.element.scrollTop() + 50);
return this.renderPartialGraph();
};
BranchGraph.prototype.scrollUp = function() {
this.element.scrollTop(this.element.scrollTop() - 50);
return this.renderPartialGraph();
};
BranchGraph.prototype.scrollLeft = function() {
this.element.scrollLeft(this.element.scrollLeft() - 50);
return this.renderPartialGraph();
};
BranchGraph.prototype.scrollRight = function() {
this.element.scrollLeft(this.element.scrollLeft() + 50);
return this.renderPartialGraph();
};
BranchGraph.prototype.scrollBottom = function() {
return this.element.scrollTop(this.element.find('svg').height());
};
BranchGraph.prototype.scrollTop = function() { BranchGraph.prototype.bindEvents = function() {
return this.element.scrollTop(0); var element;
}; element = this.element;
return $(element).scroll((function(_this) {
return function(event) {
return _this.renderPartialGraph();
};
})(this));
};
BranchGraph.prototype.appendLabel = function(x, y, commit) { BranchGraph.prototype.scrollDown = function() {
var label, r, rect, shortrefs, text, textbox, triangle; this.element.scrollTop(this.element.scrollTop() + 50);
if (!commit.refs) { return this.renderPartialGraph();
return; };
}
r = this.r;
shortrefs = commit.refs;
// Truncate if longer than 15 chars
if (shortrefs.length > 17) {
shortrefs = shortrefs.substr(0, 15) + "…";
}
text = r.text(x + 4, y, shortrefs).attr({
"text-anchor": "start",
font: "10px Monaco, monospace",
fill: "#FFF",
title: commit.refs
});
textbox = text.getBBox();
// Create rectangle based on the size of the textbox
rect = r.rect(x, y - 7, textbox.width + 5, textbox.height + 5, 4).attr({
fill: "#000",
"fill-opacity": .5,
stroke: "none"
});
triangle = r.path(["M", x - 5, y, "L", x - 15, y - 4, "L", x - 15, y + 4, "Z"]).attr({
fill: "#000",
"fill-opacity": .5,
stroke: "none"
});
label = r.set(rect, text);
label.transform(["t", -rect.getBBox().width - 15, 0]);
// Set text to front
return text.toFront();
};
BranchGraph.prototype.appendAnchor = function(x, y, commit) { BranchGraph.prototype.scrollUp = function() {
var anchor, options, r, top; this.element.scrollTop(this.element.scrollTop() - 50);
r = this.r; return this.renderPartialGraph();
top = this.top; };
options = this.options;
anchor = r.circle(x, y, 10).attr({
fill: "#000",
opacity: 0,
cursor: "pointer"
}).click(function() {
return window.open(options.commit_url.replace("%s", commit.id), "_blank");
}).hover(function() {
this.tooltip = r.commitTooltip(x + 5, y, commit);
return top.push(this.tooltip.insertBefore(this));
}, function() {
return this.tooltip && this.tooltip.remove() && delete this.tooltip;
});
return top.push(anchor);
};
BranchGraph.prototype.drawDot = function(x, y, commit) { BranchGraph.prototype.scrollLeft = function() {
var avatar_box_x, avatar_box_y, r; this.element.scrollLeft(this.element.scrollLeft() - 50);
r = this.r; return this.renderPartialGraph();
r.circle(x, y, 3).attr({ };
fill: this.colors[commit.space],
stroke: "none"
});
avatar_box_x = this.offsetX + this.unitSpace * this.mspace + 10;
avatar_box_y = y - 10;
r.rect(avatar_box_x, avatar_box_y, 20, 20).attr({
stroke: this.colors[commit.space],
"stroke-width": 2
});
r.image(commit.author.icon, avatar_box_x, avatar_box_y, 20, 20);
return r.text(this.offsetX + this.unitSpace * this.mspace + 35, y, commit.message.split("\n")[0]).attr({
"text-anchor": "start",
font: "14px Monaco, monospace"
});
};
BranchGraph.prototype.drawLines = function(x, y, commit) { BranchGraph.prototype.scrollRight = function() {
var arrow, color, i, j, len, offset, parent, parentCommit, parentX1, parentX2, parentY, r, ref, results, route; this.element.scrollLeft(this.element.scrollLeft() + 50);
r = this.r; return this.renderPartialGraph();
ref = commit.parents; };
results = [];
for (i = j = 0, len = ref.length; j < len; i = (j += 1)) {
parent = ref[i];
parentCommit = this.preparedCommits[parent[0]];
parentY = this.offsetY + this.unitTime * parentCommit.time;
parentX1 = this.offsetX + this.unitSpace * (this.mspace - parentCommit.space);
parentX2 = this.offsetX + this.unitSpace * (this.mspace - parent[1]);
// Set line color
if (parentCommit.space <= commit.space) {
color = this.colors[commit.space];
} else {
color = this.colors[parentCommit.space];
}
// Build line shape
if (parent[1] === commit.space) {
offset = [0, 5];
arrow = "l-2,5,4,0,-2,-5,0,5";
} else if (parent[1] < commit.space) {
offset = [3, 3];
arrow = "l5,0,-2,4,-3,-4,4,2";
} else {
offset = [-3, 3];
arrow = "l-5,0,2,4,3,-4,-4,2";
}
// Start point
route = ["M", x + offset[0], y + offset[1]];
// Add arrow if not first parent
if (i > 0) {
route.push(arrow);
}
// Circumvent if overlap
if (commit.space !== parentCommit.space || commit.space !== parent[1]) {
route.push("L", parentX2, y + 10, "L", parentX2, parentY - 5);
}
// End point
route.push("L", parentX1, parentY);
results.push(r.path(route).attr({
stroke: color,
"stroke-width": 2
}));
}
return results;
};
BranchGraph.prototype.markCommit = function(commit) { BranchGraph.prototype.scrollBottom = function() {
var r, x, y; return this.element.scrollTop(this.element.find('svg').height());
if (commit.id === this.options.commit_id) { };
r = this.r;
x = this.offsetX + this.unitSpace * (this.mspace - commit.space);
y = this.offsetY + this.unitTime * commit.time;
r.path(["M", x + 5, y, "L", x + 15, y + 4, "L", x + 15, y - 4, "Z"]).attr({
fill: "#000",
"fill-opacity": .5,
stroke: "none"
});
// Displayed in the center
return this.element.scrollTop(y - this.graphHeight / 2);
}
};
return BranchGraph; BranchGraph.prototype.scrollTop = function() {
})(); return this.element.scrollTop(0);
};
Raphael.prototype.commitTooltip = function(x, y, commit) { BranchGraph.prototype.appendLabel = function(x, y, commit) {
var boxHeight, boxWidth, icon, idText, messageText, nameText, rect, textSet, tooltip; var label, r, rect, shortrefs, text, textbox, triangle;
boxWidth = 300; if (!commit.refs) {
boxHeight = 200; return;
icon = this.image(gon.relative_url_root + commit.author.icon, x, y, 20, 20); }
nameText = this.text(x + 25, y + 10, commit.author.name); r = this.r;
idText = this.text(x, y + 35, commit.id); shortrefs = commit.refs;
messageText = this.text(x, y + 50, commit.message.replace(/\r?\n/g, " \n ")); // Truncate if longer than 15 chars
textSet = this.set(icon, nameText, idText, messageText).attr({ if (shortrefs.length > 17) {
shortrefs = shortrefs.substr(0, 15) + "…";
}
text = r.text(x + 4, y, shortrefs).attr({
"text-anchor": "start", "text-anchor": "start",
font: "12px Monaco, monospace" font: "10px Monaco, monospace",
}); fill: "#FFF",
nameText.attr({ title: commit.refs
font: "14px Arial",
"font-weight": "bold"
}); });
idText.attr({ textbox = text.getBBox();
fill: "#AAA" // Create rectangle based on the size of the textbox
rect = r.rect(x, y - 7, textbox.width + 5, textbox.height + 5, 4).attr({
fill: "#000",
"fill-opacity": .5,
stroke: "none"
}); });
messageText.node.style["white-space"] = "pre"; triangle = r.path(["M", x - 5, y, "L", x - 15, y - 4, "L", x - 15, y + 4, "Z"]).attr({
this.textWrap(messageText, boxWidth - 50); fill: "#000",
rect = this.rect(x - 10, y - 10, boxWidth, 100, 4).attr({ "fill-opacity": .5,
fill: "#FFF", stroke: "none"
stroke: "#000",
"stroke-linecap": "round",
"stroke-width": 2
}); });
tooltip = this.set(rect, textSet); label = r.set(rect, text);
rect.attr({ label.transform(["t", -rect.getBBox().width - 15, 0]);
height: tooltip.getBBox().height + 10, // Set text to front
width: tooltip.getBBox().width + 10 return text.toFront();
};
BranchGraph.prototype.appendAnchor = function(x, y, commit) {
var anchor, options, r, top;
r = this.r;
top = this.top;
options = this.options;
anchor = r.circle(x, y, 10).attr({
fill: "#000",
opacity: 0,
cursor: "pointer"
}).click(function() {
return window.open(options.commit_url.replace("%s", commit.id), "_blank");
}).hover(function() {
this.tooltip = r.commitTooltip(x + 5, y, commit);
return top.push(this.tooltip.insertBefore(this));
}, function() {
return this.tooltip && this.tooltip.remove() && delete this.tooltip;
}); });
tooltip.transform(["t", 20, 20]); return top.push(anchor);
return tooltip;
}; };
Raphael.prototype.textWrap = function(t, width) { BranchGraph.prototype.drawDot = function(x, y, commit) {
var abc, b, content, h, j, len, letterWidth, s, word, words, x; var avatar_box_x, avatar_box_y, r;
content = t.attr("text"); r = this.r;
abc = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; r.circle(x, y, 3).attr({
t.attr({ fill: this.colors[commit.space],
text: abc stroke: "none"
}); });
letterWidth = t.getBBox().width / abc.length; avatar_box_x = this.offsetX + this.unitSpace * this.mspace + 10;
t.attr({ avatar_box_y = y - 10;
text: content r.rect(avatar_box_x, avatar_box_y, 20, 20).attr({
stroke: this.colors[commit.space],
"stroke-width": 2
}); });
words = content.split(" "); r.image(commit.author.icon, avatar_box_x, avatar_box_y, 20, 20);
x = 0; return r.text(this.offsetX + this.unitSpace * this.mspace + 35, y, commit.message.split("\n")[0]).attr({
s = []; "text-anchor": "start",
for (j = 0, len = words.length; j < len; j += 1) { font: "14px Monaco, monospace"
word = words[j]; });
if (x + (word.length * letterWidth) > width) { };
s.push("\n");
x = 0; BranchGraph.prototype.drawLines = function(x, y, commit) {
var arrow, color, i, j, len, offset, parent, parentCommit, parentX1, parentX2, parentY, r, ref, results, route;
r = this.r;
ref = commit.parents;
results = [];
for (i = j = 0, len = ref.length; j < len; i = (j += 1)) {
parent = ref[i];
parentCommit = this.preparedCommits[parent[0]];
parentY = this.offsetY + this.unitTime * parentCommit.time;
parentX1 = this.offsetX + this.unitSpace * (this.mspace - parentCommit.space);
parentX2 = this.offsetX + this.unitSpace * (this.mspace - parent[1]);
// Set line color
if (parentCommit.space <= commit.space) {
color = this.colors[commit.space];
} else {
color = this.colors[parentCommit.space];
} }
if (word === "\n") { // Build line shape
s.push("\n"); if (parent[1] === commit.space) {
x = 0; offset = [0, 5];
arrow = "l-2,5,4,0,-2,-5,0,5";
} else if (parent[1] < commit.space) {
offset = [3, 3];
arrow = "l5,0,-2,4,-3,-4,4,2";
} else { } else {
s.push(word + " "); offset = [-3, 3];
x += word.length * letterWidth; arrow = "l-5,0,2,4,3,-4,-4,2";
}
// Start point
route = ["M", x + offset[0], y + offset[1]];
// Add arrow if not first parent
if (i > 0) {
route.push(arrow);
}
// Circumvent if overlap
if (commit.space !== parentCommit.space || commit.space !== parent[1]) {
route.push("L", parentX2, y + 10, "L", parentX2, parentY - 5);
} }
// End point
route.push("L", parentX1, parentY);
results.push(r.path(route).attr({
stroke: color,
"stroke-width": 2
}));
}
return results;
};
BranchGraph.prototype.markCommit = function(commit) {
var r, x, y;
if (commit.id === this.options.commit_id) {
r = this.r;
x = this.offsetX + this.unitSpace * (this.mspace - commit.space);
y = this.offsetY + this.unitTime * commit.time;
r.path(["M", x + 5, y, "L", x + 15, y + 4, "L", x + 15, y - 4, "Z"]).attr({
fill: "#000",
"fill-opacity": .5,
stroke: "none"
});
// Displayed in the center
return this.element.scrollTop(y - this.graphHeight / 2);
} }
t.attr({
text: s.join("").trim()
});
b = t.getBBox();
h = Math.abs(b.y2) + 1;
return t.attr({
y: h
});
}; };
}).call(window);
return BranchGraph;
})();
app/assets/javascripts/network/network.js
View file @ 34742710
/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, quotes, quote-props, prefer-template, comma-dangle, max-len */ /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, quotes, quote-props, prefer-template, comma-dangle, max-len */
/* global BranchGraph */
import BranchGraph from './branch_graph';
(function() { (function() {
this.Network = (function() { this.Network = (function() {
......
app/assets/javascripts/network/network_bundle.js
View file @ 34742710
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
/* global Network */ /* global Network */
/* global ShortcutsNetwork */ /* global ShortcutsNetwork */
require('./branch_graph');
require('./network'); require('./network');
(function() { (function() {
......
app/assets/javascripts/network/raphael.js 0 → 100644
View file @ 34742710
import Raphael from 'raphael/raphael';
Raphael.prototype.commitTooltip = function commitTooltip(x, y, commit) {
const boxWidth = 300;
const icon = this.image(gon.relative_url_root + commit.author.icon, x, y, 20, 20);
const nameText = this.text(x + 25, y + 10, commit.author.name);
const idText = this.text(x, y + 35, commit.id);
const messageText = this.text(x, y + 50, commit.message.replace(/\r?\n/g, ' \n '));
const textSet = this.set(icon, nameText, idText, messageText).attr({
'text-anchor': 'start',
font: '12px Monaco, monospace',
});
nameText.attr({
font: '14px Arial',
'font-weight': 'bold',
});
idText.attr({
fill: '#AAA',
});
messageText.node.style['white-space'] = 'pre';
this.textWrap(messageText, boxWidth - 50);
const rect = this.rect(x - 10, y - 10, boxWidth, 100, 4).attr({
fill: '#FFF',
stroke: '#000',
'stroke-linecap': 'round',
'stroke-width': 2,
});
const tooltip = this.set(rect, textSet);
rect.attr({
height: tooltip.getBBox().height + 10,
width: tooltip.getBBox().width + 10,
});
tooltip.transform(['t', 20, 20]);
return tooltip;
};
Raphael.prototype.textWrap = function testWrap(t, width) {
const content = t.attr('text');
const abc = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
t.attr({
text: abc,
});
const letterWidth = t.getBBox().width / abc.length;
t.attr({
text: content,
});
const words = content.split(' ');
let x = 0;
const s = [];
for (let j = 0, len = words.length; j < len; j += 1) {
const word = words[j];
if (x + (word.length * letterWidth) > width) {
s.push('\n');
x = 0;
}
if (word === '\n') {
s.push('\n');
x = 0;
} else {
s.push(`${word} `);
x += word.length * letterWidth;
}
}
t.attr({
text: s.join('').trim(),
});
const b = t.getBBox();
const h = Math.abs(b.y2) + 1;
return t.attr({
y: h,
});
};
export default Raphael;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7