When you start to build your own diagrams you may be wondering how to control the "initial" view of the diagram inside of the component. By default, the initial view that you see will be sized correctly to see the entirety of the diagram - all nodes will be visible. However, what if you need more control? Well there are two approaches you can take, the first a simple declarative approach and the second which involves your layout code.
Looking at the simple approach first. If you look at the diagramNodes component you will see a property called centerRowKey. This property can be set to an EL expression which needs to evaluate to the rowKey of the node that you want to center on - typically you can use this in combination with node selection (see: Guide to Diagram Part 11- Selected Node Information) to allow a user to re-focus the diagram to the clicked node.
Now centerRowKey is perfectly suitable for most situations, however, what if you need more control? An example of this might be where you want to start the view of the diagram off in a zoomed state - just focusing on a particular subset of nodes for example.
Both of these use DvtDiagramRectangle which is an object with the properties .x,.y,.w and .h, you can hopefully guess what each of those properties holds! A new DvyDiagramRectangle object can be created using the code:
var vp = new DvtDiagramRectangle(xpos, ypos, width, height)
For the task in hand, the setViewport() function is what we are interested in. You can think of it as drawing a scaled rectangle over the entirety of the diagram. If you proportionally reduce the size of the viewport then that will zoom in on the diagram. So you use the width and height attributes of the DvtDiagramRectangle that you pass to control the scaling, and then the x and y position to place the zoomed viewport relative to the base diagram.
For example - lets say I want to zoom into the centre of a diagram that is defined as a rectangle diagRect, I would use:
Alternatively the following would apply the same zoom level but show the top left hand quadrant of the diagram:
The one thing to watch out for here is not to assume that the rectangle returned by getComponentSize is actually the size of your diagram, it is not. It provides the basic size in pixels of the physical diagram component. The diagram (nodes and links) itself is sized based on your layout and then scaled to provide a best fit in the available space in that physical component. Accordingly if you want to set the viewport, it pays to keep track of how wide and high your diagram actually grows to as you add nodes and links. You can then work out the scaling factor that will have to be used to "fit" that into the physical component and then you will have the information that you need to manipulate the view port.