I wanted to animate the selected link with dotted animation. How can I do that, I tried with below code it’s not working.
this.myDiagram = $(go.Diagram, this.diagramDiv.nativeElement, {
layout: new TableLayout(),
"SelectionMoved": this.relayoutDiagram.bind(this),
initialContentAlignment: go.Spot.Top,
"animationManager.isEnabled": true,
});
this.myDiagram.linkTemplate =
$(go.Link, {
routing: go.Routing.AvoidsNodes,
corner: 5,
toShortLength: 4,
selectable: true,
})
.bind('fromSpot')
.bind('toSpot')
.add(
$(go.Shape, {
name: 'SHAPE-LINK',
strokeWidth: 3,
})
.bind("stroke", "color")
.bind("stroke", "isSelected", function(sel) {
return sel ? "red" : "green"; // Blue when selected
}),
$(go.Shape, { toArrow: "OpenTriangle", strokeWidth: 3 }).bind("stroke", "color")
);
// Store active animations
var animations = new Map();
// Listen for selection changes
this.myDiagram.addDiagramListener("ChangedSelection", function(e) {
console.log('Show animation ');
// Stop all existing animations
animations.forEach(function(anim, link) {
anim.stop();
animations.delete(link);
});
// Get the selected link
var selectedLink = e.diagram.selection.first();
console.log('selectedLink ', selectedLink);
if (selectedLink instanceof go.Link) {
var shape = selectedLink.findObject("SHAPE-LINK"); // Name the Shape in the link template
if (shape) {
// Create an animation
console.log('animation started ', shape);
var animation = new go.Animation();
animation.easing = go.Animation.EaseLinear;
animation.duration = 20; // Animation duration in milliseconds
animation.add(shape, "strokeDashOffset", 0, -8); // Move dashes by 8 pixels
animation.reversible = true; // Loops back and forth
animation.runCount = Infinity; // Loop indefinitely
// Start the animation and store it
animation.start();
animations.set(selectedLink, animation);
console.log('animation ended');
}
}
console.log('animations ', animations);
});