I am developing a coloring book app, (attached screenshot). I have this UI state implemented currently,
-
Initially, bucket fill is enabled and the user can click on the image to fill the image on the canvas.
-
To zoom in /out, pan, the user needs to drag the input slider, it enables zoom mode and panning of the image (at the same time disables any click event like fill/brush)
-
To start painting/filling (ie enabling drawing mode) the user has to click on either bucket/brush icon again.
-
It’s quite confusing from the user perspective once in pan zoom mode clicking on anywhere will not perform any action until bucket/brush icons are clicked (to enter drawing mode again)
I am all confused about how to handle this scenario in a more effective way.