CODEWITHSUNDEEP
jointjs
user3187258
user3187258

Reputation: 11

JOINTJS : Self referencing a shape in a link

I would like to self-reference a shape in a link. Basically the source and the target of the link are the same.

It is working but the link is hidden by the shape: https://imageshack.com/i/f2mu7jp

Here is what I would like to do: https://imageshack.com/i/mujp9lp

I know that I can use "vertices" in the definition of a link but I don't know the XY position of the start and the end point

var connect = function(source, sourcePort, target, targetPort) {
    var link = new joint.shapes.devs.Link({
        source: { id: source.id, selector: source.getPortSelector(sourcePort) },
        target: { id: target.id, selector: target.getPortSelector(targetPort) }
    });
    if(source == target){
        console.log(link);
        console.log(source);
    }

    graph.addCell(link);
};

How can I get the position of the start and the end point ?

Thank you

Upvotes: 1

Views: 1391

Answers (1)

dave
dave

Reputation: 4403

It is not in the official API but there is a getConnectionPoint() method on link views. By knowing the connection points, you can compute the 2 vertices needed for the self-link:

... after graph.addCell(link)... - at this point the link view is created in the paper...

var linkView = paper.findViewByModel(link);
var sourcePoint = linkView.getConnectionPoint(
    'source', 
    link.get('source'),
    _.first(link.get('vertices')) || link.get('target'));
var targetPoint = linkView.getConnectionPoint(
    'target',
    link.get('target'),
    _.last(link.get('vertices')) || sourcePoint);

... now you can compute the 2 other vertices (for orthogonal self-link) and do:

link.set('vertices', myTwoVertexArray);

The signature of the getConnectionPoint() method is:

getConnectionPoint(end, sourceOrTargetOrPoint, referenceSourceOrTargetOrPoint);

Where end is either 'source' or 'target', sourceOrTargetOrPoint is either link.get('source') or link.get('target') and referenceSourceOrTargetOrPoint is the reference point needed to compute the "sticky" point (usually the other side of the link or the closest vertex).

Upvotes: 1

Related Questions