2017-03-03 19:15:57 -05:00
|
|
|
import Raphael from 'raphael/raphael';
|
2022-02-02 07:14:58 -05:00
|
|
|
import { formatDate } from '~/lib/utils/datetime_utility';
|
2017-03-03 19:15:57 -05:00
|
|
|
|
|
|
|
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);
|
2022-02-02 07:14:58 -05:00
|
|
|
const dateText = this.text(x, y + 35, formatDate(commit.date));
|
|
|
|
const idText = this.text(x, y + 55, commit.id);
|
|
|
|
const messageText = this.text(x, y + 70, commit.message.replace(/\r?\n/g, ' \n '));
|
|
|
|
const textSet = this.set(icon, nameText, dateText, idText, messageText).attr({
|
2017-03-03 19:15:57 -05:00
|
|
|
'text-anchor': 'start',
|
|
|
|
font: '12px Monaco, monospace',
|
|
|
|
});
|
|
|
|
nameText.attr({
|
|
|
|
font: '14px Arial',
|
|
|
|
'font-weight': 'bold',
|
|
|
|
});
|
2022-02-02 07:14:58 -05:00
|
|
|
dateText.attr({
|
|
|
|
fill: '#666',
|
|
|
|
});
|
2017-03-03 19:15:57 -05:00
|
|
|
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];
|
2018-10-10 03:13:34 -04:00
|
|
|
if (x + word.length * letterWidth > width) {
|
2017-03-03 19:15:57 -05:00
|
|
|
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;
|