Along the bottom of our nodes, we have a list of button icons that are the status of the node. Some of them should be animated, and I’m struggling to find a clean way to get this to work. Sometimes the below code works, sometimes it crashes everything.
Most of the examples I see (ex: here) seem to only animate the models after the diagram has been loaded, not from the get-go. The end goal here is that I would like to pass an object to that list of statuses that has an “animate” boolean on it that tells the graph item that it should be animating/spinning. We can also remove the icon button in the list at different times, in which case the animation would need to stop and the item be removed. I have looked at AnimationTriggers, and those seem to be bound to the graph object itself and not the object data provided (so it doesn’t look like I can optionally animate with those). Any advice here would be greatly appreciated for the proper way of handling something like this.
public static BottomNodeDecorators(handlers: Map<string, Function>): Panel {
return GO(Panel, 'Horizontal', new Binding('itemArray', 'bottomOrnaments'), {
alignment: new Spot(0.5, 0.95, 0, 0),
itemTemplate: GO(
Panel,
'Spot',
GO('CircularButton', {
/** Omitted button props*/
}),
GO(
TextBlock,
{
textAlign: 'center',
isActionable: false,
pickable: false,
font: Styles.ICON_FONT,
},
new Binding('text', 'icon'),
new Binding('stroke', 'stroke')
),
// the problem is here. I don't like binding to '' which may be the cause of the strange issues
new Binding('', 'animate', (animated: boolean, graphOrnament: Panel) => {
const ornament = graphOrnament.data;
if (animated && !ornament.animation) {
const animation = new Animation();
animation.add(graphOrnament, 'angle', graphOrnament.angle, 360); // do a full loop
animation.easing = Animation.EaseLinear;
animation.runCount = Infinity;
animation.duration = 1000; // animate over one second
animation.start();
ornament.animation = animation;
// const clickHandler = handlers.get('updateItemProperty'); // this calls setDataProperty
// clickHandler!(ornament, 'animation', animation);
} else if (!animated) {
if (ornament.animation) {
ornament.animation.stop();
}
}
})
),
});
}
** Update: I’ve gotten a bit closer by modifying my code to look like below; however, it does not appear that AnimationTrigger has the same property of runCount available to it to allow it to run infinitely:
new Binding('angle', 'animate', (_animated: boolean, graphOrnament: Panel) => {
return graphOrnament.angle + 270; // this shows it rotated, but I need it continual
}),
new AnimationTrigger(
'angle',
{
duration: 600,
easing: Animation.EaseLinear,
},
AnimationTrigger.Immediate
)