How to draw a link from an existing port in JointJS?

Question

Im trying to figure out how to draw a link from an existing port in an element to another element in JointJS.

For example using the following code won't work as I want to specify the source as a specific port in the element not the element itself:

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

I there a way to achieve this?

Answer 1

I found out that this can be done by providing the id of the port in the source port propery. Like this:

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