search

embiem / react-canvas-draw

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

Add support for pan and zoom #87

Closed markbiddlecom closed 3 years ago

markbiddlecom commented 4 years ago

Hello!

First: thanks so much for building and publishing this awesome component! I've been using it in a pet project and wanted to add the ability to zoom in and move the canvas around to make drawing fine detail a little bit easier.

This PR accomplishes that, plus a few other things:

  1. I got a lot of npm audit failures when I first started the project, so I upgraded the nwb version and resolved the few remainin audit errors. That's in a separate commit if you don't want to include that part of the PR.
  2. The extra logic for determining view coordinates and for handling the various pointer/touch interactions made the main component class very difficult to reason about. So I took the liberty of reorganizing the methods in it and splitting the complicated logic into two new files--one for coordinate calculations/transforms and another to handle the interaction logic. I used a state machine to handle the different behaviors for each of the event handlers depending on whether the user was drawing, panning, or pinch-and-zooming.

I hope you don't find the refactoring too presumptuous of me! No worries at all if you don't dig it; I'd be happy to change the approach!

Panning with mouse+ctrl mouse-pan.gif

Zooming with the mouse wheel+ctrl mouse-wheel-scroll.gif

Two-touch pinch-zoom and pan pinch-and-pan.gif

mexicantexan commented 4 years ago

Would love this feature to be pulled :D

tot-ra commented 3 years ago

@embiem can this be merged?

embiem commented 3 years ago

Sorry for the very late response... I didn't have time to care for this project in a while. I'm currently going through all issues and PRs and will create a new release including this one very soon! Thank you @markbiddlecom for this PR, this is a really cool feature.

leocostaba commented 3 years ago

How much time do you pretend to enable the pan & zoom feature? I like a lot your pkg and this feature is very nice!

tot-ra commented 3 years ago

@markbiddlecom I tried your branch in my project. I can't seem to get mouse scrolling or panning to work, only touch gestures work.

markbiddlecom commented 3 years ago

@markbiddlecom I tried your branch in my project. I can't seem to get mouse scrolling or panning to work, only touch gestures work.

@tot-ra 🤔 what browser/os/versions? I tested this last on Windows Chrome and Chrome on my Android phone. But it's been a long time since I was working with this code (got distracted on another project 😅)

embiem commented 3 years ago

Sorry again for the long delay.... but I finally got around to properly acknowledge how great this PR is. I'm glad you included the overdue refactor as well. I love the way that you moved all the interactions into a state machine. We could now add unit tests for interaction much easier as well.

Again, thanks so much @markbiddlecom. PR is merged and I'll include it in the next deployment (most likely 1.2.0).