feat(scroll-on-touch): use finger to scroll on canvas #104
Conversation
|
@DaAnda97 Thanks for the PRs. Sorry, I just noticed them. I am currently working on improving the repo with |
|
@DaAnda97 It doesn't work on the Mac touchpad. |
|
@vinothpandian I meant "tablet" instead of a "touchpad". I have now revised the feature description. |
DaAnda97
force-pushed
the
feat/scroll-on-touch
branch
from
2ef217a
to
74ddf26
Compare
…feat/scroll-on-touch-sync # Conflicts: # packages/react-sketch-canvas/src/Canvas/index.tsx
feat(scroll-on-touch): use finger to scroll
|
@vinothpandian I resolved the merge conflicts |
|
Thanks, @DaAnda97. That was very helpful! I will add some tests and merge them by this week. |
| @@ -59,6 +60,7 @@ export const Canvas = React.forwardRef<CanvasRef, CanvasProps>((props, ref) => { | |||
| const { | |||
| paths, | |||
| isDrawing, | |||
| scrollOnTouch, | |||
There was a problem hiding this comment.
Users must not be able to set allowOnlyPointerType as touch or all while they set scrollOnTouch. ReactSketchCanvas must throw an error with some meaningful error message to avert users from running into this scenario. CanvasProps must also be updated to be conditional here.
| if (scrollOnTouch) { | ||
| canvasRef.current?.addEventListener("touchstart", listener, { passive: false }); | ||
| } | ||
| return () => canvasRef.current?.removeEventListener("touchstart", listener); |
There was a problem hiding this comment.
canvasRef.current might get cleaned up before this cleanup is run. so canvasRef.current must be copied to a variable in the scope of this function. and then you can add or remove event listeners.
| canvasRef.current?.addEventListener("touchstart", listener, { passive: false }); | ||
| } | ||
| return () => canvasRef.current?.removeEventListener("touchstart", listener); | ||
| }, []); |
There was a problem hiding this comment.
As the dependency array is empty, if the developer changes scrollOnTouch dynamically, this function will fail.
| @@ -291,13 +311,31 @@ release drawing even when point goes out of canvas */ | |||
| ); | |||
| }, [paths]); | |||
|
|
|||
| // avoid pen from scrolling if scrollOnTouch | |||
| useEffect(() => { | |||
| const listener = function( | |||
There was a problem hiding this comment.
It's better to move this listener as a callback using useCallback with empty dependency array.
There was a problem hiding this comment.
Thanks again for the PR @DaAnda97. I have some comments that will improve this PR. Also, it'll be great if you can add a test and update the documentation.
If you don't have much time to spend on it, I'll resolve the comments over the coming weekends.
As a user who works on a tablet, I want to be able to use my touch pen for writing and my finger for scrolling.
This feature is deactivated by default.