JSplumb подключается к нескольким конечным точкам - PullRequest
Новая
       8

JSplumb подключается к нескольким конечным точкам

0 голосов
/ 22 ноября 2018

Мне нужно нарисовать линии от d1 to d2 и d1 to d3, используя библиотеку JSplumb.

. Приведенный ниже код работает только с одним исходным и одним целевым ponints.

JS: 

 jsPlumb.ready(function(){
  jsPlumb.Defaults.Endpoint = "Blank";
  var container = document.getElementById("cartspace");
  jsPlumb.setContainer(container);

  var endpointOptions = { isSource: true, isTarget: true };
  var d1 = jsPlumb.addEndpoint( $('#m1'), { anchor: "LeftMiddle" }, endpointOptions );
  var d2 = jsPlumb.addEndpoint( $('#m2'), { anchor: "LeftMiddle" }, endpointOptions );
  var d3 = jsPlumb.addEndpoint( $('#m3'), { anchor: "LeftMiddle" }, endpointOptions );

  jsPlumb.connect({
    source: d1,
    target: d2,
    connector: [ "Flowchart", { curviness: 1, stub: 10 }, {cssClass:"connectorClass"} ],
    paintStyle:{ lineWidth:2, strokeStyle:'green' }
  });

   jsPlumb.connect({
    source: d1,
    target: d3,
    connector: [ "Flowchart", { curviness: 1, stub: 10 }, {cssClass:"connectorClass"} ],
    paintStyle:{ lineWidth:2, strokeStyle:'green' }

  });

});

Check for code: https://codepen.io/pvnkk/pen/qQxGvQ?editors=1010

**Console error: "could not add connection; source endpoint is full"**

Как подключиться к нескольким целевым точкам. Проверьте, где я делаю неправильно!

1 Ответ

0 голосов
/ 26 июня 2019

Вы должны указать jsplumb, что эта конкретная конечная точка может поддерживать более 1 соединения: 

var d1 = jsPlumb.addEndpoint( $('#m1'), { anchor: "LeftMiddle" }, endpointOptions );

с, например: 

let endpointOptions = {
            endpoint: ['Dot', { radius: 7 }],
            paintStyle: { fill: '#somecolor' },
            isSource: true,
            scope: 'green',
            connectorStyle: { stroke: '#somecolor', strokeWidth: 3 },
            connector: ['Bezier', { curviness: 63 } ],
            maxConnections: 30,
            isTarget: false,
            connectorOverlays: [ [ 'Arrow', { location:1 } ] ],
            dropOptions: exampleDropOptions
        };

здесь эта конечная точка будет поддерживать до 30соединения, вы можете использовать -1 как бесконечное число.

...