I am developing a coloring book app, (attached screenshot). I have this UI state implemented currently,

1. Initially, bucket fill is enabled and the user can click on the image to fill the image on the canvas.

2. 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)

3. To start painting/filling (ie enabling drawing mode) the user has to click on either bucket/brush icon again.

4. 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.