documentationfor yFiles for HTML 2.6

Restricting the Viewport

You can restrict the area to which a user can interactively zoom and scroll. Such a limitation of the viewport of the GraphComponent is defined by a ViewportLimiter and can be set with viewportLimiter on the GraphComponent.

The limitations imposed by a ViewportLimiter are honored by features that are typically executed by the user, in particular interactive actions such as zooming and panning, layout morphing, and animations. However, programmatically changing the properties on GraphComponent like zoom or viewPoint will not be affected by the ViewportLimiter.

The usage of a ViewportLimiter is easy. A ViewportLimiter ready for usage is by default already set on the GraphComponent. For basic restrictions, a client can simply get the viewportLimiter property and use its bounds to restrict the viewport to that bounds.

The honorBothDimensions property can be adjusted to control whether the horizontal or vertical sides of the bounds should be limited or both (which is the default).

You can extend ViewportLimiter to override some of its methods for more advanced use cases. If you want to dynamically calculate the limited bounds for the viewport, you can override the getCurrentBounds method instead of setting the bounds property. The default implementation of getCurrentBounds simply returns the value of the bounds property.

Or you can override the method that calculates the limited viewport itself, which is limitViewport. This method is used by GraphComponent to actually limit the viewport by providing the suggested bounds. The method then calculates the actual bounds that should be used instead.

The Organization Chart demo uses a ViewportLimiter with static bounds to restrict the viewport to the actual bounds of its content.