Transitions and zooming

GoJS
1

Hi there. I have read up on the AnimationManager and looked into scrollToPart, but I can’t seem to get my diagram to nicely animate / transition from one zoom state to another.

Below is the simple function that I’m using to scroll to the selected node and zoom in. Below that, you’ll see my controls for the zoom button. How can I add transitions / animation to the scrollToRect and scale functions?

On a related note, I would ideally like the links to fade to the darker highlight color when selected. Is there any way to add transitions to fade in to the isHighlighted state?

You can see a test version of my diagram at Malnutrition | IRC Theory of Change.

function zoomInToSelectedNode(node){
  var nodeKey = node.data.key;

  if (node.isSelected){
    // Zoom in on node
    zoomInButtonClickCount = 2; // zoom level
    jq('#zoomIn').trigger('click');
    myDiagram.scrollToRect(myDiagram.findNodeForKey(nodeKey).actualBounds);
  }
}

// ZOOM CONTROLS
var zoomInButtonClickCount    = 1; // number of zooms
var zoomInButtonClickCountMax = 4; // max zoom
var scaleLevelChange          = 0.35; // percent zoom
var scaleLevel;

// On zoom in click, zoom in up to 4x
document.getElementById('zoomIn').addEventListener('click', function() {
  scaleLevel = scaleLevelChange * zoomInButtonClickCount;   // Set scale level to number of times button clicked

  // Scale the diagram and center it
  myDiagram.scale = scaleLevel;
  myDiagram.centerRect(myDiagram.findNodeForKey(1).actualBounds);

  // If max limit is reached, disable button
  if (zoomInButtonClickCount < zoomInButtonClickCountMax){
    document.getElementById('zoomOut').classList.remove('disabled');
    zoomInButtonClickCount++;
  } else {
    this.classList.add('disabled');
    zoomInButtonClickCount = 4;
  }
});
2

You need to call CommandHandler.scrollToPart, which is new in version 1.6.

There isn’t any built-in support for doing per-Part animations of colors. Of course you could implement it yourself easily enough. But it’s not coming in version 1.6.

3

By the way, you might be interested in using the zooming commands of CommandHandler. Notice also the CommandHandler.zoomFactor property. The Diagram.minScale and Diagram.maxScale properties might be useful to you too.

4

Is there an example showing the usage for CommandHandler.scrollToPart? Specifically how to activate it in line with the scrollToRect I was using?

myDiagram.scrollToRect(myDiagram.findNodeForKey(nodeKey).actualBounds);
5

There is a commented out example in the new Org Chart (static) sample:

  // OR: Scroll to show a particular node, once the layout has determined where that node is
  "InitialLayoutCompleted": function(e) {
    var node = e.diagram.findNodeForKey(28);
    if (node !== null) e.diagram.commandHandler.scrollToPart(node);
  },
1 Like
6

Thanks Walter, that’s really helpful.

Is there any animation / transition baked into the zoom functions? Sort of like a growing zoom, similar to Google Maps?

7

I don’t think there is – repeating the Control-- or Control-+ commands normally zooms by a small enough CommandHandler.scaleFactor that it’s pretty obvious where you’re going or where you’ve come from, so no animation is needed. The same goes for Control-mouse-wheel and pinch zoom.

Control-0 and Shift-Z do not animate, but might benefit from it, so that’s a consideration for the future.