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.