Adding zoom and panning to your react-konva stage

Apologies for the motions but I wanted to demo the zooming and panning ability

In my last blog I talked about some of the work I’ve been doing with react-konva in order to produce an example user journey map for the new product I’m working on — reciprocal.dev .

In that post I created a very basic user journey which had one logical branch, which, while great for showing the techniques being used isn’t really reflective of the scale of most user journey maps once they have a high level of functionality.

As the width of the Stage was set to window.innerWidth in the example, there is also the constraint of the user’s browser window. Anyone viewing on a small screen or with a small window size would have the map cut off.

Rendering content larger than the stage size

Without adding some additional functionality to your Konva based view there will be no means of accessing anything plotted outside the bounds of the initial stage coordinates.

In order to access this content you can use and combine two techniques that will allow the user to change the stage’s viewbox coordinates (panning) and the scale of the content rendered (zooming).

Panning

Panning is probably the easiest solution to implement, it requires you to add one prop to your Stage component which is draggable .

With the draggable prop the user will now be able to click on your stage and drag it in order to change the current viewbox and by doing so, change what content is visible.

If you already have draggable content on your Stage then you won’t need to worry about those breaking as the Stage drag events only fire when the user selects the ‘background’ of the stage.

Zooming

Zooming is a little more complicated as we need to implement some custom logic to update the scale that the objects in the Stage are rendered to.