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 connect, он ведет себя не так, как ожидалось. Я хочу настроить ширину линии и тип стрелки. Есть ли альтернатива для этого?

ОБНОВЛЕНИЕ: я пытался подключиться, используя uuid конечных точек, также сначала добавляются uuid конечных точек, после чего пытаются их подключить и утешают как uuid, так и конечную точку с одним и тем же uuid, но все равно получаю ошибку источника не существует. введите здесь описание изображения

0
Akarshan Dehal 24 Мар 2020 в 09:01
maxConnections: -1 специально? Похоже, что это может помешать узлам принимать соединения.
 – 
J.Wincewicz
24 Мар 2020 в 11:03
Да, это специально, так как позволяет неограниченное количество подключений
 – 
Akarshan Dehal
24 Мар 2020 в 13:24

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
});
0
Akarshan Dehal 24 Мар 2020 в 13:54