Zoom/Scale on Selection

GoJS
1

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?

2

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

3

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.