Changing node template depending on zoom level?

GoJS
1

Hi,

I’m sorry but I couldn’t find a similar question on this forum using search functionality.

I would like to change node template slightly depending on the zoom level on a diagram. This should enhance overall clarity of a diagram.

Should I implement it as an extension to ToolManager or something similar?

Thanks in advance for any suggestions.

2

Here’s an example where all of the Nodes are rebuilt using a different template, depending on the zoom level (i.e. Diagram.scale): GoJS Template Maps -- Northwoods Software
It depends on the “ViewportBoundsChanged” DiagramEvent: GoJS Events -- Northwoods Software

But that’s an unusually blunt and discontinuous way to change appearances (and behaviors). You mention wanting to change things “slightly”. In such cases, rather than discarding the old nodes and creating new ones from different template(s), it might be better to just toggle the visible property of certain elements in each node. That too would be done in a “ViewportBoundsChanged” DiagramEvent listener. Something like:

new go.Diagram(. . .,
  { . . .,
    "ViewportBoundsChanged": e => {
      const oldsc = e.subject.scale;  // the previous value of Diagram.scale
      const newsc = e.diagram.scale;
      const limit = 0.5;
      if (newsc < limit && oldsc >= limit) {  // zooming out beyond limit
        e.diagram.commit(d => d.nodes.each(n => ...modify n...));
      } else if (newsc > limit && oldsc <= limit) {  // zooming in beyond limit
        e.diagram.commit(d => d.nodes.each(n => ...modify n...));
      }
    }
  })
3

Thanks a lot @walter! I will try both solutions, it may be that I need to change nodeTemplate at some point but perhaps I’ll start with adjusting existing elements of nodes first.

It’s great that you pointed out to the relevant section of the documentation which I obviously missed previously, thanks!