Как нарисовать ссылку с существующего порта в JointJS?

Question

Я пытаюсь выяснить, как нарисовать ссылку от существующего порта в элементе к другому элементу в JointJS.

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

var link = new joint.shapes.devs.Link({
  source: {
    id: elementFrom.Id,
    port: "out"
  },
  target: {
    id: elementTo.id,
    port: "in"
  }
});
this.graph.addCell(link);

Есть ли способ добиться этого?

Answer 1

Я обнаружил, что это можно сделать, указав идентификатор порта в исходном порте. Как это:

//add a port
var port = {
  id: "my_port_id"
};

var sourceElement = this.findElement(my_element_id);
sourceElement.addPort(port);
sourceElement.portProp("my_port_id", "attrs/circle/fill", "#f2f2f2");
sourceElement.portProp("my_port_id", "attrs/label/position/name", "outsideOriented");
sourceElement.portProp("my_port_id", "attrs/text/text", "some port label");

//add link
var link = new joint.dia.Link({
  source: {
    id: sourceElement.Id,
    port: "my_port_id"
  },
  target: {
    id: targetElement.id
  }
});
this.graph.addCell(link);