Hi I’m new to GoJs, I wonder if it’s possible to make a link cross a node like this:
I guess this can be achieved if I can create ports inside a node and make the node opaque, but I haven’t found any samples like this so I wonder if this is possible?
Yes, you want to make the node’s Shape.fill a translucent white, and you want to set { layerName: "Background" } on your link template(s).
Did you actually want to have two or three green links connecting with that node in your screenshot? (And similarly for cyan blue links?) If so, you’ll need to set the Link.fromSpot and Link.toSpot so that the link point is where you want inside the node.
Alternatively, you might want to consider doing something like Multi-Node Path Links, where each link can have a list of nodes that it goes through (actually an Array of node keys). Of course you would need to change the custom routing that is computed by the custom MultiNodePathLink class.
Hi Walter, thanks for the answer. I can make a link connect to a spot inside a node. But when I use AvoidsNodes routing, I notice the link will add a middle point on the center of some edge, for example it may go to the top center spot of the node first and then down to the toSpot I specified:
Is it possible to remove this middle point on the edge of the node? Ideally I want the top red link to be like this(the black dash link I draw on the graph):
The direction for a link at the connection point by default is determined by the spot. So for example when the spot is towards the middle-top of the node, the end segment of links will be vertical. This is generally the right thing to do to keep links from crossing over the bulk of the node itself.
But you can override that behavior by setting or binding Link.toSpot and/or Link.fromSpot. Perhaps you want to use go.Spot.AllSides or some subset ...Sides value.
I’m not sure what you mean, I’ve already set the toSpot and fromSpot to be inside of the node and I do want the end segment to cross over the bulk of the node itself, wouldn’t using go.Spot.AllSides or some subset …Sides value cause the link to stop at the border? That’s not what I want though.
Not if you changed the port to be a small area (maybe half the width and half the height?) that is in the center of the gray rounded rectangle shape. That port object could be a completely transparent Shape (fill and stroke == null).