Zooming selected nodes

When i zoom out , diagram viewportchanged event doesn’t call . is there any way ?

The Diagram.lastInput’s InputEvent.delta being greater than zero indicates wanting to increase the scale, i.e. zoom in.

We have never heard of problems with not receiving “ViewportBoundsChanged” DiagramEvents in a DiagramEvent listener when the Diagram.scale has changed.

i have written zoom in zoom out selected nodes code as mentioned below on domousewheel–>

this.myDiagram.toolManager.doMouseWheel = function()
{
let inputEvent : go.InputEvent;
var diagram = this.diagram;
if (diagram === null) return;
inputEvent = diagram.lastInput;
if(inputEvent.delta > 0)
{
diagram.selection.each(function(node){
if (node === null) return;
node.scale += node.scale * 0.1;

        });
     

       }
       else if(inputEvent.delta < 0)
       {
         diagram.selection.each(function(node){
          if (node === null) return;
           node.scale -= node.scale * 0.1;
          
          });
           
       }
      
    }

but when i zoomed out , diagram viewportbounds doesn’t get called as i have to change the node template based on that. am i doing something wrong?

That is correct – you are not changing either Diagram.position or Diagram.scale, so the Diagram.viewportBounds has not changed.

What is it that you want to do after rescaling some Nodes?

By the way, you really do not want to change the scale of any Links, so you should check that the selected Part is not a Link.

i wan to change the node template after rescaling . which event should i write code into?

Why do you need an event? When you change the scale of a Node, you can make other changes too. In fact, if you want to set the Part.category, you probably want to do that first before changing the scale, since the new template might not have the new value for the scale.

if i change the node ports template after zoom in or zoom out the links between ports gets disconnected . why ?

It’s not clear why. In the example at the bottom of this page, the templates change as you change the scale, and the links act correctly.

What’s different about your code?

i have a node whose model data is of type IComponent and the for the ports in the node i have property called pins inside IComponent. i want to change the color of a particular pin on zoom in .

 if(inputEvent.delta > 0)
            {
                diagram.selection.each(function(node){
                if (node === null) return;
                node.scale += node.scale * 0.1;
                pinArray = node.data.pins;
                pinArray.forEach(pin=>{pin.isNameVisible = true});
                
                diagram.model.setDataProperty(node.data.pins,"pins",pinArray);
                diagram.model.updateTargetBindings(node.data,"pins");
                diagram.model.setDataProperty(node.data,"scale",node.scale);
                diagram.model.updateTargetBindings(node.data,"scale");
                 
                });
            }

without doing update target binding i am not able to change the pin color in the gui .

Is this happening inside of a transaction? Your edits should be wrapped inside

diagram.startTransaction('tx name');
...
diagram.commitTransaction('tx name');

yes its happening inside transaction

Do you have any screenshots of the behavior you’re seeing with the ports? Also, are you using the debug version of the library and checking for any errors in the console?