I'm in the process of developing an Angular application that allows users to dynamically create graphs. Currently, I am working on a function that adds ports to vertices and I want the user to be able to select the position of the port (right, left, top, bottom). While following an example from JointJS documentation, I encountered an issue where I can only adjust the position of the port label, not the port itself:
View ports created using the code below
This is the function I have created to return the port body based on the specified position ('top', 'right' etc.) and name:
getPort(portName: string, position: string): object {
return {
position: {
name: position
},
attrs: {
label: {
text: portName
},
portBody: {
magnet: true,
r: 10,
fill: '#023047',
stroke: '#023047'
}
},
label: {
position: {
name: position
},
markup: [{
tagName: 'text',
selector: 'label',
className: 'label-text'
}]
},
markup: [{
tagName: 'circle',
selector: 'portBody'
}]
};
}
Here is how I add the port to my graph (using the unique vertex name as an argument):
this.graph.getElements().forEach(element => {
if (element.attributes.attrs['label'].text == agentName) {
element.addPort(port)
}
})
Although I followed this tutorial, I am still facing issues where even after copying some port bodies intended for the right side, they appear on the left side instead. What could I possibly be doing wrong?