具有相同源和目标的JointJS链接

Question

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).

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

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?

Answer 1

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' }

Answer 2

you can add an extra vertex to the link. There is a demo for the inspiration: http://resources.jointjs.com/demos/fsa