Panning and Zooming

The default pan and zoom behavior of Vue Flow is inspired by slippy maps . You pan by dragging your pointer and zoom by scrolling. You can customize this behavior easily with the interaction and keyboard props on the <VueFlow /> component.

Common viewport configurations

There are two common viewport configurations that most Vue Flow apps will use, inspired by existing canvas-based tools. One is based on how map tools often work and is the default Vue Flow setup, and the other is based on design tools like Figma and Sketch.

Map-style configuration

The configuration affects how three common interactions work: panning, zooming, and selection. The default, map-style configuration works as follows:

Design tool viewport controls

If you’d prefer a configuration that is more similar to design tools like Figma or Sketch, there are a couple of props you can change on the <VueFlow /> component:

• panOnScroll and selectionOnDrag should be set to true.
• panOnDrag should be set to false or a non-left mouse button (e.g. [1, 2]).

This produces the following behavior:

In this example we also set selectionMode prop to "partial". This makes it possible to add nodes to a selection that are only partially selected.