How to avoid nodes laid out in a 'step' pattern

I’m creating a GraphLinksModel with Bezier curves and normal routing. It gives me a ‘stepped’ layout for a series of nodes which I think should be in a vertical line:

Is it possible to make them be in a straight line?

DEMO:

https://clients.areaweb.cl/.bupry/v15-fixed.html

I noticed that when I selected a node, its selection adornment extended into empty space on the right side. So I specified the Node.locationSpot and Node.locationObjectName to refer to the visible Shape:

            gm(go.Node, "Spot",
                {locationSpot: go.Spot.Center, locationObjectName: "PORT", padding: 0, margin: 0},
                gm(go.Shape,  // the border
                    {
                        name: "PORT",
                        figure: "RoundedRectangle",
                        parameter1: CORNER_RADIUS,  // the corner has a large radius
                        fill: "white", stroke: "#c7c7c7", width: NODE_WIDTH, height: NODE_HEIGHT, strokeWidth: 1.5,
                        portId: "",

                    },
                    new go.Binding("stroke", '', color_binder),
                ),
                . , .

It would be better if you cleaned up your node template so that it is exactly as big as it looks, but I didn’t take the time to do that.

On an unrelated issue, I notice that there’s a zillion warning messages about making changes outside of a transaction. I suggest you conduct a transaction for each step where you move those tokens, and also set skipsUndoManager to false (as I see you have commented out). One way to do both is by the following change to updateTokens:

        function updateTokens() {
          diagram.commit(diagram => {
            add_token(tick);
            . . .
            window.requestAnimationFrame(updateTokens);
          }, null);  // null means skipsUndoManager
        }

Thanks, that did the trick.

It would be better if you cleaned up your node template so that it is exactly as big as it looks,

there are some optional graphical elements that aren’t active in the demo, but could be. that’s why there’s some empty space.

I suggest you conduct a transaction for each step where you move those tokens, and also set skipsUndoManager to false (as I see you have commented out). One way to do both is by the following change to updateTokens :

I commented it out because there was a strange behavior: the animation was stuttering a bit, not as smooth as it could be, and when I dragged a node it got faster and smoother. Trying different things, I noticed that when I turned off UndManager, it got more fluid. I also don’t want undos on the animation, is it necessary or beneficial to turn them on?

Passing null as the second argument to commit automatically sets skipsUndoManager to true.

I see, thank you!