Process flow link animation direction

GoJS
1

I have a relatively simple application using the GoJS Planogram example with Process Flow links. The links use the animated strokeDashArray and I’d like to reverse the direction of animation or its “flow” with respect to the variable it represents.

The only way I can currently find to do this is to modify the toNode and FromNode parameters of the link, which has the desired effect however it has the nasty side-effect of recalculating the link paths.

var number = link.toNode;
link.toNode = link.fromNode;
link.fromNode = number;

Is it possible to modify from / to without a redraw? Presumably changing the direction of an animation should be straightforward regardless of its intended nodes.

Thanks in advance, Sophie

2

Just exchange the start and end animation values that the Shape.strokeDashOffset gets. I would probably add a property on the link data objects that indicated that the flow should be reversed. Maybe a boolean or a volume/time number that could be negative. Here’s some additional code that depends on a new boolean “rev” property on the link data objects.

function init() {
  const $ = go.GraphObject.make;  // for more concise visual tree definitions

  myDiagram =
    $(go.Diagram, "myDiagramDiv",
      { // . . .
        "ModelChanged": e => {
          if (e.isTransactionFinished) updateAnimation();
        }
      });

  // . . . templates . . .

  load();
}

var myAnimation = null;

function updateAnimation() {
  if (myAnimation) myAnimation.stop();
  // Animate the flow in the pipes
  myAnimation = new go.Animation();
  myAnimation.easing = go.Animation.EaseLinear;
  myDiagram.links.each(link => {
    if (link.data.rev) {
      myAnimation.add(link.findObject("PIPE"), "strokeDashOffset", 0, 20);
    } else {
      myAnimation.add(link.findObject("PIPE"), "strokeDashOffset", 20, 0);
    }
  });
  // Run indefinitely
  myAnimation.runCount = Infinity;
  myAnimation.start();
}

// . . . save and load . . .

You could then reverse the flow in a particular link by executing something like:

myDiagram.model.commit(m => m.set(link.data, "rev", !link.data.rev));
3

Thank you, great answer! My code needs some refining but on the whole that’s resolved it. It’s a shame you have to stop and start the animation but I kinda get why; it just causes jitter if you happen to switch direction often (e.g. <= 2 seconds). Also modifying the speed each time (changing the 20 to 40 for example) runs out of steam after a few iterations. Presumably the process required to restart an animation has inherent compound latency.

I don’t intend to switch often, but it was an interesting test! I tried it at a 10-second interval and it seemed much happier.

Thanks again,

Sophie

4

The 20 corresponds to the length of the repeating dash pattern – in this case 10+10. So the offset (default zero) decreases from or increases to 20.

If you want it faster or slower, change the Animation.duration.

5

Ah, now I feel silly. And that’ll require a new animation per link, I assume. Thank you again!