Restricting the Viewport

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

The limitations imposed by a ViewportLimiter are applied to features that are typically triggered by the user. This includes interactive actions like zooming and panning, layout transitions, and animations. However, programmatically changing the properties on GraphComponent, such as zoom or viewPoint, will not be affected by the ViewportLimiter.

Using a ViewportLimiter is straightforward. A ViewportLimiter is already set on the GraphComponent by default and is ready to use. For basic restrictions, you can simply get the viewportLimiter property and use its bounds to restrict the viewport to those bounds.

If no bounds are set, but the useContentBounds property is true, the CanvasComponent.contentBounds are used as bounds.

A new GraphComponent has a ViewportLimiter set with its useContentBounds property set to true, so the viewport is restricted to the content bounds by default.

How the bounds are interpreted depends on the policy that is set. The following policies are provided:

STRICT

Strictly applies the bounds.

TOWARDS_LIMIT

If the current viewport is outside the bounds, the ViewportLimiter allows changes that move the viewport towards the bounds, but prevents changes that move it away from them.

WITHIN_MARGINS

Strictly limits the viewport to ensure that the bounds are always contained within the viewportContentMargins.

UNRESTRICTED

Disables limiting of the viewport.

The strictBoundsContainment property can be adjusted to control whether the horizontal or vertical sides of the bounds should be limited, or both.

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 getCurrentBoundingPolygon method instead of setting the bounds property. The default implementation of getCurrentBoundingPolygon 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 a ViewportDescriptor containing the suggested center and zoom values. The method then calculates the actual ViewportDescriptor 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.