Add support for pan and zoom

[markbiddlecom]

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

Zooming with the mouse wheel+ctrl

Two-touch pinch-zoom and pan

[mexicantexan]

Would love this feature to be pulled :D

[tot-ra]

@embiem can this be merged?

[embiem]

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]

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]

@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]

@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]

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