Port hover animations affects link positions

GoJS
1

Hi,

i have an animation on the port:

const animation = new go.Animation()
    animation.duration = 200
    animation.add(port, 'width', initData.width, setWidth)
    animation.add(port, 'height', initData.height, setHeight)

during animation, the link arrow changes its position
I’m trying to solve this problem

is it possible?

portProblem

Here is an example of how the node and port look like:

$(
        go.Node,
        go.Node.Spot,
        {
            locationSpot: go.Spot.Center,
            isShadowed: true,
        },
        $(go.Shape, "RoundedRectangle",
            {
                width: 175,
                height: 96,
                cursor: "pointer",
                fill: 'white',
            }),
        $(
            go.Panel,
            go.Node.Horizontal,
            {
                alignment: go.Spot.Left,
                //width: 20,
            },
            $(go.Shape, 'Circle', {
                portId: 'left',
                width: 10,
                height: 10,
                name: 'PORT',
                fill: 'white',
                strokeWidth: 2,
                stroke: 'gray',
                fromLinkable: true,
                toLinkable: true,
                opacity: 1,
                mouseEnter: (e, obj) => portHoverEventEnter(e, obj),
                mouseLeave: (e, obj) => portHoverEventLeave(e, obj),
            })
        ),
);
2

Of course if the port or node changes size or position, all connected links need to have their route recomputed so that they continue to appear properly “connected”.

If you just want to highlight the port, you don’t have to modify the port or the node – just show an Adornment (perhaps with its own Animation) where the port is.

3

ok, thank you