As a beginner in Angular >2 development, I am excited to build my first application from scratch. One of the features I'm trying to implement is drawing flow charts using jsPlumb. However, I have encountered an issue where the connectors are not being rendered when setting the component host element as the source and destination.
Here is a snippet of my code - I retrieve data from a REST API that returns an array of items. These items are then rendered on my "Canvas" by calling addNodeToCanvas function within a loop.
addNodeToCanvas(card) {
const factory = this.ComponentFactoryResolver.resolveComponentFactory(CardComponent);
const ref = this.cardDontainer.createComponent(factory);
ref.location.nativeElement.id = card.uuid;
ref.instance.cardData = card;
}
In line 4 of the code above, I set the unique identifier of the object as the DOM element's ID for referencing in jsPlumb connections. After running the application, a list of rendered DOM elements similar to the one below is displayed -
<card _nghost-c4="" id="6c7e7bd4-200f-4b8b-8492-a59fb8809819" class="ng-star-inserted">
<div _ngcontent-c4="" class="item">
Hi! I'm a node. My name is Dest 1.
</div>
</card>
Once the elements are added to the DOM, connections are created as follows -
for (let c in cards) {
this.jsPlumbInstance.draggable(cards[c].uuid);
}
for(let e in edges) {
this.jsPlumbInstance.connect({
source: edges[e].source,
target: edges[e].destination,
}, routeConnectionSettings);
}
The issue arises when jsPlumb fails to find the element with ID card#6c7e7bd4-200f-4b8b-8492-a59fb8809819 and hence does not establish the required connections.
A couple of observations made - Setting the ID on a div instead of the component selector resolves the issue, while adding styles to the component selector via CSS also seems ineffective.
Could this be due to limitations on accessing component selectors? Any assistance on this matter would be highly appreciated.
Below is the JSON data for reference -
"edges": [
{
"uuid": "dcc1151f-4668-4b3a-bbce-bc473545fcd7",
"source": "770a7359-d8cf-4803-9901-0383a8d080f2",
"destination": "6c7e7bd4-200f-4b8b-8492-a59fb8809819"
}
],
"cards": [
{
"uuid": "6c7e7bd4-200f-4b8b-8492-a59fb8809819",
"name": "Dest 1",
"type": "DESTINATION"
},
{
"uuid": "770a7359-d8cf-4803-9901-0383a8d080f2",
"name": "Src 1",
"type": "SOURCE"
}
]