Set initial points of link when using normal routing with reshapable set to true

GoJS
#1

Hi,
I am using normal routing with reshapable and resegmentable set to true.
When the user creates a new link, I want to set a custom shape to the link, let’s say not straight but having a 45° corner.

I thought I could modify the link and set custom points in the LinkDrawn event.
This works initially, the link is displayed with the new points but

  • No handle point is displayed at the corner even though reshapable is set to true
  • The link is reset to a straight line as soon as I move a node or something

How could I create such a custom link layout? I don’t think I should override computePoints as the points should only be set initially and the points shouldn’t be recalculated after the link as been drawn.

#2

Two screenshots/sketches would have been helpful, since it isn’t clear what routing you want the link to keep after moving one of the connected nodes.

From your description, I’m also confused by the apparently contradictory desires of wanting to keep the cut-off corner and not wanting to re-route after one node has moved.

#3

After the user draws an link it should look like this:
grafik

After moving a node, it could look like this:
grafik

So I guess what I need is:

  • routing = normal
  • reshapable = true
  • resegmentable = true
  • adjusting = go.Link.Scale

So actually I need to override computePoints? I am a bit confused because after creating the initial link I basically want the normal routing to take over.
This means if the user manually adds more segements, I don’t want my routing to reset it to the initial “lightning” shape.

Also, I need to switch this behaviour at runtime. The user might want to draw “lightning” links, or normal or orthogonal links.

#4

Link.adjusting is the right idea if you want to keep the general shape, but want it to adapt to the actual relative positions of the two ports. And you might prefer go.Link.Stretch rather than Scale.

Still, if you want to change the behavior, you can change the properties of the Link.

For example, if you only want to have that zig-zag route for a user’s newly drawn link, you could implement a “LinkDrawn” DiagramEvent listener that modifies the Link.points the way that you want. Or override **LinkingTool.

For example, after the user has finished doing some reshaping of the link route, you could change other properties of the Link. One way is by implementing a “LinkReshaped” DiagramEvent listener. Another way is to override LinkReshapingTool.doMouseUp.

#5

Okay good, that’s almost what I’ve tried :-)
I set the points almost directly after the “LinkDrawn” DiagramEvent has fired (but not inside the handler)
However, when doing this it works initially (the link is displayed at the new coordinates) but

  • No handle/reshape points are displayed on the link
  • The link is reset to a straight line as soon as I move a node or something

This is what I do (the line coordinates are not correct, but doesn’t matter for the described issue):

diagram.startTransaction("Update link");
const points = new go.List<go.Point>();
points.add(link.fromNode.position);
points.add(new go.Point(link.fromNode.position.x - link.toNode.position.x + 20, link.fromNode.position.y - link.toNode.position.y + 20));
points.add(link.toNode.position);
diagram.model.setDataProperty(link.data, "points", points);
diagram.commitTransaction("Update link");

Any idea why this happens?

#6

You might need to call Part.updateAdornments.

Does that Link have Link.adjusting set the way that you want?

#7

The issue was that a normal link already has 4 points, but I tried to create a link with 3 points only. Now it works fine, thanks for your help!