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…