Zoom/Scale on Selection

I want the selected node to stand out from all the other nodes so I’d like to have it grow on selection or have everything else shrink. I have it working using:

diagram.addDiagramListener(“ChangedSelection”, function (e){
var part = diagram.selection.first();
diagram.startTransaction(“scale Nodes”);
diagram.nodes.each(function(node) {
node.scale = 1;

part.scale = 1.1;

diagram.commitTransaction(“scale Nodes”);

There are a few questions:
1. The size change isn’t animated. I’d like for it grow and shrink like it was being zoomed. How do I animate it?
2. Because the size is changing links and groups redraw. I’m guessing I can’t do anything about that.
3. Should I be using scale for this purpose? Is there something better?

Also the growing seems to happen for the top left corner. Is it possible to have it grow from the center?

That’s one way to do it. Another way is by adding this Binding to the Node:
myDiagram.nodeTemplate =
$(go.Node, . . .,
{ locationSpot: go.Spot.Center },
new go.Binding(“scale”, “isSelected”, function(s) { return s ? 1.2 : 1.0; }).ofObject(),
. . .

  1. We haven’t generalized the AnimationManager in order to support such behaviors. You’ll need to do it yourself using a timer.
  2. That’s correct. What would you want to have happen instead?
  3. Using the scale property is natural. Just as with #2, I don’t know what other effects you might be happy with.

Also, set the locationSpot: go.Spot.Center, as I did above.