Putting HTML code on JointJS link

Question

I have worked with JointJS now for a while, managing to create elements with HTML in them.

However, I am stuck with another problem, is it possible to place HTML code, like href, img etc, on a JointJS link and how do I do this?

For example, if I have this link, how do I modify it to contain HTML:

var link = new joint.dia.Link({
        source: { id: sourceId },
        target: { id: targetId },
        attrs: { 
            '.connection': { 'stroke-width': 3, stroke: '#000000' }
        }
    });

Thank you!

Answer 1

JointJS doesn't have a direct support for HTML in links. However, it is possible to do with a little bit of JointJS trickery:

// Update position of our HTML whenever source/target or vertices of our link change:
link.on('change:source change:target change:vertices', function() { updateHTMLPosition(link, $html) });
// Update position of our HTML whenever a position of an element in the graph changes:
graph.on('change:position', function() { updateHTMLPosition(link, $html) });

var $html = $('<ul><li>one</li><li>two</li></ul>');
$html.css({ position: 'absolute' }).appendTo(paper.el);

// Function for updating position of our HTML list.
function updateHTMLPosition(link, $html) {

    var linkView = paper.findViewByModel(link);
    var connectionEl = linkView.$('.connection')[0];
    var connectionLength = connectionEl.getTotalLength();
    // Position our HTML to the middle of the link.
    var position = connectionEl.getPointAtLength(connectionLength/2);
    $html.css({ left: position.x, top: position.y });
}