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 is probably the easiest solution to implement, it requires you to add one prop to your
Stage component which is
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 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.