Search code examples
javascriptjointjsrappid

JointJS Link with same source and target

In some cases I have links where source and target are the same element. (same ID).

  this.lastLink = this.link.clone().set({
    source: {id: ele1Id},
    target: {id: ele2Id},
    ...

It currently looks like this. Links have labels so don't be confused about it. (LINK_TABLE is a link label).

enter image description here

What I would like to achieve is that whenever source and target are the same, the link should look something like this.

enter image description here

My initial try was to get the position of target and then increment it for some value.

    var targetPositionX = ele2.attributes.position.x;
    var targetPositionY = ele2.attributes.position.y;

    source: {id: ele1Id},
    target: {x: targetPositionX+50, y:targetPositionY+50},
    ...

But that try didn't work as I encountered problems while trying to get the target position. If I would console.log(ele2), and then look for position, it would be fine. But If I would console.log(ele2.attributes.position) it would log {x:0, y:0} for some reason. But it's not related to this question.

So what else can I try?

Solution

  • I managed to solve this by adding two ports to my element.

      var port = {
    id: 'port2',
    position:{
      name: 'right'
    },
    markup: '<rect width="0"  height="1"/>'
  };
  var port2 = {
    id: 'port1',
    position:{
      name: 'right'
    },
    markup: '<rect width="0" height="1"/>'
  };
  ele1Id.addPort(port);
  ele1Id.addPort(port2);

    After adding the links I had to make sure that I also add ports to my source and target.

    source: {id: ele1Id.id, port: "port1"},
target: {id: ele2Id.id, port: "port2"}

    And another thing I added for that 'spinal' link look is this:

    connector: { name: 'rounded' },
router: { name: 'manhattan' }