如何从 JointJS 中的现有端口绘制 link？

Question

我正在尝试弄清楚如何从元素中的现有端口绘制 link 到 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

我发现这可以通过在源端口属性中提供端口的 ID 来完成。像这样：

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

如何从 JointJS 中的现有端口绘制 link？

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

jointjs