JointJS Связь с тем же источником и целью

Question

В некоторых случаях у меня есть ссылки, где источник и цель - это один и тот же элемент. (тот же идентификатор).

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

В настоящее время это выглядит так. У ссылок есть ярлыки, так что не смущайтесь. (LINK_TABLE - это ярлык ссылки).

Чего я хотел бы добиться, так это то, что когда источник и цель совпадают, ссылка должна выглядеть примерно так.

Моя первоначальная попытка состояла в том, чтобы получить позицию цели и затем увеличить ее до некоторого значения.

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

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

Но эта попытка не сработала, так как я столкнулся с проблемами при попытке получить целевую позицию. Если бы я использовал console.log(ele2), а затем искал позицию, это было бы хорошо. Но если бы я использовал console.log(ele2.attributes.position), он бы по какой-то причине записывал в журнал {x:0, y:0}. Но это не связано с этим вопросом.

Так что еще я могу попробовать?

Answer 1

Мне удалось решить эту проблему, добавив два порта для моего элемента.

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

После добавления ссылок я должен был убедиться, что я также добавляю порты к своему источнику и цели.

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

И еще одна вещь, которую я добавил для этого вида "позвоночника":

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

Answer 2

Вы можете добавить дополнительную вершину к ссылке. Демо для вдохновения: http://resources.jointjs.com/demos/fsa