Ufdjrw

im trying to figure out how to style a link when connecting two elements using drag and drop between ports.

I understand that you can style a link using the link.attr like this:

link.attr(
line: // selector for the visible <path> SVGElement
 stroke: 'orange' // SVG attribute and value

);

given that you manually create the link and add it to the graph. However the only option I found styling a magnet link is when creating the paper like this:

initializeScene(domNode) {
this.paper = new joint.dia.Paper(
 el: domNode,
 model: this.graph,
 width: "100%",
 height: "100%",
 gridSize: 1,
 //define the style of magnet links
 defaultLink: new joint.shapes.standard.Link(
 attrs: 
 line: 
 stroke: "#4e4e4e"
 
 
 )
);

Is there a way of individually style the links from a magnet. For example if I want a link created from port A to be blue and link created from port B to be red?

The defaultLink option of joint.dia.Paper can also be a function instead of plain object. The function is of the form function(cellView, magnet). This way, you can dynamically define your default link for when the user "drags" a magnet to create a new link. For example:

this.paper = new joint.dia.Paper(
 el: domNode,
 model: this.graph,
 width: "100%",
 height: "100%",
 gridSize: 1,
 //define the style of magnet links
 defaultLink: function(cellView, magnet) 
 return new joint.shapes.standard.Link(
 attrs: 
 line: 
 stroke: V(magnet).attr('port-group') === "blue-ports" ? "blue" : "red"
 
 
 
 )
);

Documentation to defaultLink option is here: https://resources.jointjs.com/docs/jointjs/v2.2/joint.html#dia.Paper.prototype.options.defaultLink