jsplumb.connect is not working for second time after adding new source element in angular 4 - jsplumb

Question

I am using Angular 4, and I am trying to connect two elements using jsplumb connect plugin.
But it is working fine only for first time,
means if I am having 3 source elements and want to connect to a single target, then it will work fine, it will get connected.
But now if I add the 4th source element in that sources list programmatically, using the child component and then calling connect method, it's not working.
Means once I used that jsplumb.connect function, and then added new source element to list and again calling to connect, it is not working.
parentCreateLine.component.ts
sourceIds = ['s1', 's2', 's3'];
/* this is step 1 intial call from ui */
showIntialConnection() {
this.connectSourceToTargetUsingJSPlumb(this.sourceIds);
}
/* this function will be called from UI to add new source and then show connection */
addNewSourceToListAndConnect(){
this.sourceIds.push('s4');
this.connectSourceToTargetUsingJSPlumb(this.sourceIds);
}
connectSourceToTargetUsingJSPlumb(sourceIds) {
console.log('create connection');
jsPlumb.reset();
let labelName;
for (let i = 0; i < sourceIds.length; i++) {
labelName = 'connection' + (i + 1);
jsPlumb.connect({
connector: ['Flowchart', {stub: [212, 67], cornerRadius: 1, alwaysRespectStubs: true}],
source: sourceIds[i],
target: 'target0',
anchor: ['Right', 'Left'],
endpoint: 'Blank',
paintStyle: {stroke: '#B8C5D6', strokeWidth: 4},
overlays: [
['Label', {label: labelName, location: 0, cssClass: 'connectingConnectorLabel'}]
],
});
}
}
Please help me.
I have tried with uuid also, but got the same output.
Please suggest me the correct way of doing it in Angular 4.

Answer 1

Finally, I got the solution,
I have created the instance of jsplumb in ngAfterViewInit, and then using it and
resetting in the proper order,
this.jsPlumbInstance.reset();
jsPlumb.reset();
this.jsPlumbInstance = jsPlumb.getInstance();
so that everytime will get the new instance.
parentCreateLine.component.ts
jsPlumbInstance;
ngAfterViewInit() {
jsPlumb.reset();
this.jsPlumbInstance = jsPlumb.getInstance();
}
connectSourceToTargetUsingJSPlumb(sourceIds) {
this.jsPlumbInstance.reset();
jsPlumb.reset();
this.jsPlumbInstance = jsPlumb.getInstance();
let labelName;
for (let i = 0; i < sourceIds.length; i++) {
labelName = 'connection' + (i + 1);
this.jsPlumbInstance.connect({
... above code ...
});
}
}

Answer 2

You can share the common jsPlumb instance, Find code below
these works for me
app.component.ts
import { jsPlumb } from 'jsplumb';
constructor(private customService: CustomService) {
customService.jsPlumbInstance = jsPlumb.getInstance();
}
child.component.ts
import {CustomService} from '...path to the service';
constructor(private customService: CustomService) {}
ngAfterViewInit() {
this.jsPlumbInstance = this.customService.jsPlumbInstance;
this.jsPlumbInstance.deleteEveryConnection();
this.jsPlumbInstance.deleteEveryEndpoint();
this.jsPlumbInstance.importDefaults({...})
}