How to use the raphael/raphael.prototype function in raphael

To help you get started, we’ve selected a few raphael examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github gitlabhq / gitlabhq / app / assets / javascripts / network / raphael.js View on Github external
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');
github gitlabhq / gitlabhq / app / assets / javascripts / network / raphael.js View on Github external
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',
  });