reaviz / reagraph

🕸 WebGL Graph Visualizations for React. Maintained by @goodcodeus.
https://reagraph.dev
Apache License 2.0
660 stars 64 forks source link

Add dolly camera controls #247

Closed ghsteff closed 4 months ago

ghsteff commented 4 months ago

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

There's no way to dolly the camera other than mouse scroll wheel

What is the new behavior?

There's camera control methods to dolly in and out

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

The mouse scroll wheel dolly's the camera towards the mouse position. Doing this in combination with zoom can leave the graph in a weird state because dolly has min and max values while zoom does not (e.g. zoom very far in, then you can only dolly back out with the scroll wheel a limited amount. It's not clear these are 2 different methods)

This adds dolly methods to the camera controls that are more comfortable to use in combination with the mouse scroll wheel

https://github.com/reaviz/reagraph/assets/40581813/9f194602-390c-4818-b6a2-bedd98b37450

netlify[bot] commented 4 months ago

Deploy Preview for reagraph ready!

Name Link
Latest commit a04e7031d5bae01ca2519e29b902f61c39759d90
Latest deploy log https://app.netlify.com/sites/reagraph/deploys/665788370cce8c00082e4669
Deploy Preview https://deploy-preview-247--reagraph.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.