Update Diagram on Window Resize

GoJS
#1

We are trying to have our diagram resize when the browser window resizes. We never want the user to be able to zoom further out than the natural size of the diagram in it’s window. Additionally when the resize occurs we want the diagram to re-zoom to it’s new rect. (This is why we reset the minScaleForDiagram property in the code below)

To accomplish this we created a method to be called when the window is resized:

pfdRenderer.refresh = function() {

    this.diagram.commandHandler.minScaleForDiagram = this.diagram.scale;

this.diagram.requestUpdate();
this.diagram.zoomToRect(this.diagram.documentBounds)
};

We then attach a function to call this method when the window is resized:

     $(window).resize(function() {

pfdRenderer.refresh(); // Have to do it twice for some reason
pfdRenderer.refresh();
});

I have two questions:
1.) Notice that we have to call the refresh() method twice for this to work for some reason. Obviously we must be doing something wrong, is there a timing issue or something?
2.) Is this a decent pattern to use to do what we need to do or is there a more elegant way?

Thanks for any ideas,

#2

We also use the window resize event, but with a timer so that shortly after the last resize we update the size of the diagram and do a layout (if there is a layout with isViewportSized set to true). This is primarily so that such a layout and re-render only happens once, instead of over and over during the resize.

So a timing issue is very possible.

I’m not sure what you’re trying to do with the refresh though, can you describe it in a picture? Why does autoScale not do what you want?

#3

Thanks for the confirmation that we were on the right track. I did wrap the call to our refresh method in a timeout but found I still needed to call our refresh method twice. I guess I can live with that as it works. I’m guessing the owning containers in our framework are doing some delayed layout stuff. We are using OpenUI5. To answer your other question:

If we set autoScale to something other than Diagram.None we lose zoom capabilities, which we need. Here are our constraints:

  • We want the user to be able to zoom into our diagram (with the mouse wheel) as our diagrams can have lots of nodes and when the diagram is sized to fill the container it’s difficult to see the detail.
  • When the diagram fills it’s container is the minimum zoom level we want to allow. In otherwords we don’t want the user to be able to zoom out beyond the point where the diagram fills it’s container.
  • When the browser is resized we want the diagram to be redrawn to fill it’s new container’s space while also keeping the original zooming behavior in the previous constraints.

Thanks for the info, for now we’ll live with the double refresh. I might look into our framework to see if there is a place to hook in after it’s containers have been rerendered after a window resize. That is probably the correct answer to our double refresh problem.

#4

Perhaps you can implement a “DocumentBoundsChanged” DiagramEvent listener to set Diagram.minScale to the value that you want to enforce, depending on the size of the DIV element.