JS Plumb连接功能不接受参数答案

【问题标题】：JS Plumb connect function not accepting paramsJS Plumb连接功能不接受参数
【发布时间】：2020-03-24 06:01:12
【问题描述】：

instance.connect({
  source: "src",
  target: "tar",
  endpoint: ["Dot", {
    radius: 5,
    cssClass: "hasInfluencedEndpointStrong"
  }],
  anchor: "Center",
  paintStyle: {
    width: 25,
    height: 21,
    fill: "transparent"
  },
  scope: "hasInfluencedStrong",
  isSource: true,
  reattach: true,
  maxConnections: -1,
  connectorStyle: {
    stroke: "#708088",
    strokeWidth: 2.6,
    outlineStroke: "transparent",
    outlineWidth: 4
  },
  connectorOverlays: [
    ["Arrow", {
      location: -15.5,
      id: "arrow",
      length: 14,
      width: 14,
      foldback: 1,
      direction: 1
    }]
  ],
  isTarget: true,
})

我已经在 jsplumb 连接函数中传递了这个对象，它的行为不像预期的那样我想调整线条和箭头类型的宽度，有什么替代方法吗？

更新： 我尝试使用端点的 uuid 进行连接，也首先添加端点的 uuid，然后尝试连接它们并安慰 uuid 和端点其相同的 uuid 但仍然获取源不存在错误。enter image description here

【问题讨论】：

maxConnections: -1 是故意的吗？它似乎可以阻止节点接受连接。
是的，这是故意的，因为它允许无限连接

标签： javascript reactjs jsplumb

【解决方案1】：

它对我来说是这样的

let e1 = instance.addEndpoint("src", {
  endpoint: ["Dot", { radius: 5,  cssClass:"hasInfluencedEndpointStrong" }], 
  anchor: "Center", 
  paintStyle: { 
    width: 25, 
    height: 21, 
    fill:"transparent"
  }, 
  scope: "hasInfluencedStrong", 
  isSource: true, 
  reattach: true,
  maxConnections: -1, 
  connectorStyle: { 
    stroke: "#708088", 
    strokeWidth: 2.6, 
    outlineStroke: "transparent", 
    outlineWidth: 4 
  }, 
  connectorOverlays:[ 
    [ "Arrow", { location: -15.5, id: "arrow", length: 14, width:14, foldback: 1, direction:1 } ] 
  ]
});

let e2 = instance.addEndpoint("target", {
  endpoint: ["Dot", { radius: 5,  cssClass:"hasInfluencedEndpointStrong" }], 
  anchor: "Center", 
  paintStyle: { 
    width: 25, 
    height: 21, 
    fill:"transparent"
  }, 
  scope: "hasInfluencedStrong", 
  isTarget: true, 
  reattach: true,
  maxConnections: -1, 
  connectorStyle: { 
    stroke: "#708088", 
    strokeWidth: 2.6, 
    outlineStroke: "transparent", 
    outlineWidth: 4 
  }, 
  connectorOverlays:[ 
    [ "Arrow", { location: -15.5, id: "arrow", length: 14, width:14, foldback: 1, direction:1 } ] 
  ]
});

然后连接这些端点：

instance.connect({
  source:e1,
  target:e2
});

【讨论】：