Question

要操纵标记的图表，我想我需要在jsPlumb连接的每个标签上添加一个额外的属性。例如，当我点击连接标签时，即使可以从标签ID（或属性）推断出源点和目标点，我也无法知道点击了哪种类型的边缘。

仅仅改变jsPlumb图是不够的，因为存在由jsPlumb图形表示的underyling数据结构。使用jsPlumb.ready和jsPlumb.bind的代码已经很好地实现并且工作正常。

var newConn = jsPlumb.connect({ source: from, target: to,
  endpoint: epStyle, detachable: false,
  anchor: "Continuous", connector: ["StateMachine", { curviness: 20}],
  paintStyle: lineSt, hoverPaintStyle: lineHoverSt,
  overlays: [
    ["Arrow", { width: 10, length: 10, foldback: 1, location: 0.25,
     id: "arrow_" + from + to + 1}],
    ["Arrow", { width: 10, length: 10, foldback: 1, location: 0.75,
     id: "arrow_" + from + to + 2}],
    ["Label",
      { label: relation.name, id: "label_" + from + to + rel_id, cssClass: "edgeLabel"}
      // Any additional property here?
    ]
  ]
});

//Or add property here?
newConn.type = SOME_EDGE_TYPE;

jsPlumb.ready(function () {
  jsPlumb.bind("click", function (c) {
    jsPlumb.detach(c);
  });
  jsPlumb.bind("beforeDetach", function (conn) {
    return confirm(
      "Are you sure you want to disconnect ["
      + conn.sourceId + "=>" + conn.targetId + "]?");
  });
});

Answer 1

您可以绑定事件 jsPlumbConnection ，以便在创建新连接时收到通知：

jsPlumb.bind("jsPlumbConnection", function(ci) {
            console.log(ci.connection);
            console.log(ci.sourceId+" is connected to "+ci.targetId);
});

为了操纵jsPlumb连接，请参考API Document。

ci（连接信息）对象包含以下数据：

连接 - 新建立的连接。
source - Connection中的source元素
sourceEndpoint - 连接中的源端点。
sourceId - 源元素的ID。
target - Connection中的目标元素。
targetEndpoint - 连接中的目标端点。
targetId - 目标元素的ID。

确定在jsPlumb中单击了哪个标签

1 个答案: