search

embiem / react-canvas-draw

React Component for drawing in canvas
https://embiem.github.io/react-canvas-draw/
MIT License
892 stars 315 forks source link

Unable to scroll on disabled canvas on mobile #84

Open sgardn opened 4 years ago

sgardn commented 4 years ago

Hi there. I'm using the canvas component for a game I'm creating, and I find myself unable to scroll past the canvas while on mobile because of the css property touch-action: 'none'; set on the wrapper div for the canvases. Basically, whether or not the canvas is disabled, all touch events fail to allow scroll. What I've done locally is conditionalize it like so: 

...
background: this.props.backgroundColor,
touchAction: this.props.disabled ? "auto" : "none",
...

I think that scrolling behavior should probably be enabled if the canvas isn't "paintable", since there's nothing else you'd intend to do to a disabled canvas. I'm happy to open a PR with the tiny change, seems like a use case other people will eventually bump into if they use it on mobile.

Thanks for making something cool!

NathTech commented 2 years ago

Defo would be useful :) although to be fair, you can just add the style on the CanvasDraw component :smile: 

style={{ touchAction: disabled ? 'auto' : 'none' }}

where disabled is your state for whether you are disabling drawing or not