In a previous post, we described how to create a layout for the Diagram component.  In this post, we'll focus specifically on how to control the initial position and zoom level of the Diagram.

 

By default, the Diagram content will be zoomed to fit and placed at the component center. This is done to allow users to see the Diagram as a whole. However, in some cases you might want to display the Diagram using a specific zoom level or pan the Diagram to a position to emphasize one of the nodes. You should be able to achieve this by calling setViewport() method in your layout. The setViewport() method is available on DvtDiagramLayoutContext object that is passed to the layout. The method expects an object with x, y, w, h properties that describes the visible viewport in layout coordinates.

 

Here is how it works. Let's assume that you have only one 50x50 px node that is positioned by the layout at (0,0) and the following component binding:

 

<div data-bind="ojComponent: {
     component: 'ojDiagram',
     minZoom:.5,
     maxZoom:2,
     panning:'auto',
     zooming:'auto',
     data: data}">
</div>

 

In this case the component can be zoomed out to 50% and zoomed in up to 200%. If you don't set a viewport in the layout, by default the Diagram content will be positioned at the center and zoomed to fit (zoomed at max in this case).

3_ViewportNull.PNG

 

If you want to set the initial display to 100% at (0,0), set viewport to the component size using the code below.

In this case, you can also use the getComponentSize() method. The method returns an object with x, y, w, h properties where x, y are always 0 and w, h represent the component's rendered width and height.

var compSize = layoutContext.getComponentSize();
layoutContext.setViewport(compSize);

3_Viewport100per.PNG

If you want to set the initial display to 200% at (0,0), set the viewport to half of the component size (this smaller viewport will then be zoomed in to fill the Diagram canvas):

layoutContext.setViewport({x:0, y:0, w:.5*compSize.w, h:.5*compSize.h});

3_Viewport200per.PNG

If you want to set the initial display to 50% at (0,0), set the viewport to twice the size of the component size (this larger viewport will then be zoomed out to fill the Diagram canvas):

layoutContext.setViewport({x:0, y:0, w:2*compSize.w, h:2*compSize.h});

3_Viewport50per.PNG

If you want to set the initial display to 50% and center it, set the viewport to twice the size of the component size and adjust x, y for the viewport.

// the diagram has a single node at (0,0) with the size 50x50
// the center of diagram content is 25, 25
var centerX = 25, centerY = 25;
var viewportWidth = 2*compSize.w, viewportHeight = 2*compSize.h;
layoutContext.setViewport({x: centerX - .5 * viewportWidth, y: centerY - .5 * viewportHeight, w: viewportWidth, h:viewportHeight});

3_Viewport50perCenter.PNG

 

As you see, you can calculate the viewport size, using this formula:

// Z is the zoom factor that you want to get on the initial display
viewportWidth = compSize.w / Z;
viewportHeight = compSize.h / Z;
// then adjust x, y to the desired position

And finally, if a user interaction changed the component viewport and you wish to preserve the viewport on Diagram refresh, take a look at the getCurrentViewport() method. The method will return the current, most recent viewport to the caller. You might use it in the following way:

 

if (layoutContext.getCurrentViewport() ) {
  layoutContext.setViewport( layoutContext.getCurrentViewport());
}

 

Once you are familiar with the above methods, you should be able to control the Diagram viewport the way you need. See additional information for the methods in JET JSDoc.