I am attempting to animate an object within a node so that it rotates indefinitely based on the status property in node data.
I am using the code below to attempt to create and initialize a looping animation on the angle property of the STATUS_ICON object within qualifying nodes.
The problem that I am running into is that the object does not animate and I am not sure what other steps to troubleshoot. I have been able to animate transitions in the same project with no issue using AnimationTrigger on bound properties, but using the Animation class to create an infinite animation has not yielded any results so far.
diagram.model.addChangedListener(function(evt, obj) {
if (!evt.isTransactionFinished) return;
const txn = evt.object;
if (txn === null) return;
txn.changes.each(function(e) {
if (e.model === null) return;
const nodes = e.model.nodeDataArray;
nodes.forEach(node => {
if (node.status === 'running') {
const statusIcon = diagram.findNodeForKey(node.id).findObject('STATUS_ICON');
if (!statusIcon) return;
// rotate the status icon
const animation = new go.Animation({
duration: 2000,
runCount: Infinity,
easing: go.Animation.EaseLinear,
});
animation.add(statusIcon, 'angle', statusIcon.angle, statusIcon.angle + 359, true);
animation.start();
// debugging
console.log('animation.isAnimating', animation.isAnimating);
console.log(
'diagram.animationManager.isAnimating',
diagram.animationManager.isAnimating,
);
console.log('diagram.animationManager.isEnabled', diagram.animationManager.isEnabled);
console.log('diagram.animationManager.isTicking', diagram.animationManager.isTicking);
}
});
});
});
The output of the console.logs immediately following animation.start() are below:
The STATUS_ICON object is:
GraphObject.make(
TextBlock,
{
name: 'STATUS_ICON',
angle: 0,
font: '12px rodeoicons, rodeoicons',
stroke: '#FFF',
margin: new Margin(0, 0, 2, 0),
},
new Binding('angle'),
new Binding('text', '', ({ status }) => nodeStatusMapping?.[status]?.icon),
new Binding('stroke', '', ({ status }) => nodeStatusMapping?.[status]?.stroke),
)
Do you have any suggestions for what to try next to solve this problem?
GoJs version: 2.2.15
GoJs-react 1.1.1
React: 17.0.1