yFiles for HTML Demos Basic Features Tutorial 03 Managing Viewport yFiles Demos

Managing the Viewport

How to influence the viewport.

This step shows how to work with the viewport of a GraphComponent.

The graph in this example consists of four nodes, only three of which are visible in the initial viewport. The fourth node is initially outside of the viewport. Calling fitGraphBounds adjusts the viewport of the GraphComponent to contain the complete graph.

graphComponent.fitGraphBounds()

The zoom and viewPoint can also be set manually. In this sample, we use both to reset the viewport to the initial state.

graphComponent.zoom = 1
graphComponent.viewPoint = Point.ORIGIN

Fitting the graph bounds actually consists of two operations, which are combined in fitGraphBounds. First, the contentRect of the GraphComponent is adjusted to the current graph size. Then, the content rect is fitted into the view using fitContent. Calling fitGraphBounds has the same result as the following code:

graphComponent.updateContentRect()
graphComponent.fitContent()

Fitting the graph bounds can also be animated using the optional parameters of the fitGraphBounds method.

await graphComponent.fitGraphBounds({ animated: true })

Note	Whether some of the default (keyboard) commands are animated can be configured with animatedViewportChanges.

04 Setting Styles