Draw links (dynamically) from a node depending upon some variable value

Hi Team,

I’m working on a BPMN tool using GoJs in an Angular 6 application.

I’ve many nodes (Shape - Circle) created in my canvas and they have their own properties popup (created with contextMenu). That properties popup is a separate component and has simple form. I want to draw links (dynamically) from a node depending upon some variable value (variable value = number of links) on form submit of that popup.

So, I’m just starting a trxn and add one link that has static points array.

this.diagram.startTransaction("Add Links");
    from: 'START',
    points: [-243,-120,-233,-120,-205,-120,-205,-200,-177,-200,-167,-200]
this.diagram.commitTransaction("Add Links");

But the problem is - there will be multiple links depending upon that variable and I’ve to create the points array by computing the x, y coordinates of that node. I’m able to get the location of the node (this.diagram.findNodeForKey(‘START’).data.location).

But how to determine x,y coordinates and generate points array?

Kindly help me to solve this problem.

Thanks in advance!

I suggest that you not try to compute the route for any new links. Just specify both the from and to node keys and let the default routing take place. You seem to be missing to in your code.

Hi Walter,

Here the requirement is little different, we’ve to draw open links without the to node keys, a user can connect other nodes with those links that are created automatically in the canvas.


Oh, so you will need to compute the route yourself so that it is suitable for your app.

I think you probably do not want to use the location of the START node, since that is likely not to be a point where you want the link to come from. Instead you should compute the point at the edge or the side of the node where you want the link to come from. Then you can add some points so that the partly-disconnected link’s route looks reasonable.

Yeah thanks a lot Walter :)