Searching node and re-position diagram

GoJS
1

I’ve added a textbox to search for a given node in my diagram. It is highlighted if the label matches the value of searchText.

First, do I really need wrap this around a transaction ? I’ve read the documentation but I still can’t see the benefit of it (works just fine without it).

Most importantly, I would like the diagram to be automatically centered and zoomed in on the highlighted node. How can I do that ?

this.observedDiagram.startTransaction("no highlighteds");

    var nodes = this.observedDiagram.findNodesByExample({ label: this.searchText });
    this.observedDiagram.clearHighlighteds();
    nodes.each(function (n: go.Node) {
      n.isHighlighted = true;
      console.log(n.key);
    });

    this.observedDiagram.commitTransaction("no highlighteds");`
```
2

Yes, you should use a transaction.

Call CommandHandler.scrollToPart. But note that users can do that by hitting the space key.

3

thanks, I didn’t know the space bar would center the diagram. Nice :)
But how to I zoom on the selected node ? For instance below, the selected node is hard to see, so the diagram should be centered and zoomed on the selected node.

image
image1044×647 110 KB

Why should I use a transaction ? What is the purpose in this use-case ? This is what I did not understand in the doc.

4

You might be interested in: Drawing Attention to a Node
[EDIT:] Hmmm, maybe you just need to make sure that the Diagram.scale is large enough to suit your needs. Be sure to set that before scrolling to the desired node.

Transactions guarantee that everything is up-to-date.

5

the animatedFocus sample is super nice :) I managed to reproduce it and it works as expected.