Path Animation with multiple start tokens

I’m working on Path Animation, I have defined Start and End nodes of my graph and customize the code to traverse, it works very well with single token, but when I want multiple start tokens(which get added on button click) to work without affecting each other’s token.data value (like data.next, frac,etc).

I tried creating copy of parts data and used it to iterate but result were more or less same, I assume that if I can create the deep copy of GraphObject every time I click button to create new token I can run multiples tokens from “START” to “END” node without affecting each other’s data.

Please suggest .

Using gojs 2.0 with Typescript
Link Refered : Path Animation

I don’t know what customizations you made to your code, but I imagine you want to add a new node data object for each new token you are creating when you click your button. I tried this with the default sample behavior and it worked as expected:

function addToken() {
  var oldskips = myDiagram.skipsUndoManager;
  myDiagram.skipsUndoManager = true;
  myDiagram.model.addNodeData({ category: "token", at: 11, next: 18, color: "lime" });
  myDiagram.skipsUndoManager = oldskips;
  window.requestAnimationFrame(updateTokens);
}