I am trying to add custom ports to a shape model in JointJS within an Angular application. However, when I attempt to import the shape from JSON to the graph, the port colors and styles do not appear to work properly. Here is my code for defining the ports
private ports = {
groups: {
in: {
position: 'top',
attrs: {
'.port-body': {
r: '6',
fill: '#0000ff',
magnet: true,
},
'.port-label': {
fill: 'transparent',
},
},
},
out: {
position: 'bottom',
attrs: {
'.port-body': {
r: '6',
fill: '#ff0000',
magnet: true,
},
'.port-label': {
fill: 'transparent',
},
},
},
},
};
And here is the code for the element:
if (!this.closeSw) {
this.closeSw = new joint.shapes.devs.Model({
id: 'closeSw',
type: 'closeSw',
size: { width: 50, height: 50 },
position: {x: 200, y: 200},
attrs: {
'.label': { text: 'My Element', 'ref-x': .4, 'ref-y': .2 },
rect: {
width: 100, height: 50,
rx: 2, ry: 2,
fill: '#2ECC71'
}
},
ports: this.ports,
inPorts: ['in'],
outPorts: ['out'],
});
this.canvasGraph.addCell(this.closeSw);
}
ports are linking to variable magnet is also working. When I convert the element to JSON and try to import it, the port colors disappear in the JSON view. Additionally, I attempted to use the markup approach, but it seemed to override the ports' functionality, and I was unable to link the ports. Here is the markup string I used:
enter image description here when i convert it to json and try to import from json ports color dissappaer in json view enter image description here
i used ports api but it does not make any changes and i tried to use markup which override the ports functionality and i was unable unable to link ports. using markup string markup: '<circle r="6" fill="red" />',
enter image description here I want to achieve custom port colors along with the linking functionality. How can I achieve this?
