JointJS Links: Custom Markup?

Question

So, I'm trying to create an ERD tool using JointJS and would like to create a custom link with markup something like

<path><rect><path>

The idea is to have a rhombus in the middle of the link, I know I can do this with a an Element and two links, but I really want to be able to have some custom markup in the link. Can this be done? If so, how?

Answer 1

You can have your own markup for links, just like for other elements. However, the supplied Link markup code is pretty complex, compared with that of, say, a Rect. In joint.js:

joint.dia.Link = joint.dia.Cell.extend({

// The default markup for links.
markup: [
    '<path class="connection" stroke="black" d="M 0 0 0 0"/>',
    '<path class="marker-source" fill="black" stroke="black" d="M 0 0 0 0"/>',
    '<path class="marker-target" fill="black" stroke="black" d="M 0 0 0 0"/>',
    '<path class="connection-wrap" d="M 0 0 0 0"/>',
    '<g class="labels"/>',
    '<g class="marker-vertices"/>',
    '<g class="marker-arrowheads"/>',
    '<g class="link-tools"/>'
].join(''),

As you can see, unlike a Rect a Link is really made up of several objects. And that's just for the Link; there is also markup for labels, vertices, etc., and you might have to take those into account, depending on your requirements.

In my case, I am adding a tooltip --- HTML <title> element --- to elements. For a Rect I simply hard-coded:

    markup: '<g class="rotatable"><g class="scalable"><rect/></g><text/><title/></g>'

but for Links I elected to go for:

initialize: function()
{
  // called from Backbone constructor
  // call base initialize()
  joint.dia.Link.prototype.initialize.apply(this, arguments);

  // link markup is so complex that we need to fetch its definition
  var markup = (this.markup || this.get('markup'));
  // append <title> to markup, so that it covers whole path
  markup += '<title/>';
  this.set('markup', markup);
}

That should give you a start at least.