Add `rotateOnDrag` prop to give ability to disable rotation on drag

[cgat]

Add rotateOnDrag prop

The current rotation on drag implementation (web) works decently for smaller-sized cards like in the demo, but gets fairly janky for larger cards, especially when using the mouse on desktop.

This option allows the consumer to opt out of rotating on drag.

I've forked the demo to create a comparison: https://github.com/cgat/react-tinder-card-demo/tree/cgat/react-tinder-card-demo

Here's the demo. The first example is the current version of react-tinder-card. The second version is my update to react-tinder-card with the rotateOnDrag option set to true (default value). This should mostly be the same, but is also used to demonstrate a couple other fixes I added don't break things. The 3rd version is my update with rotateOnDrag set to false. https://share.getcloudapp.com/xQujoXoG

To see what react-tinder-card looks like with bigger cards, I changed the card sizes in chrome inspector. https://share.getcloudapp.com/d5u6X7qp

Haven't been able to test the react native change, but in theory it should work as well (likely less of an issue on native though)

[LinusU]

Could you run npx standard --fix and npx ts-readme-generator to fix all linting errors and update the API docs in the readme?

[cgat]

@LinusU done. Sorry I missed that.

[3DJakob]

Hello @cgat! Thank you for contributing to this project. Your addition to this project looks great!

I only have one thought though. Maybe we should instead have implemented a prop called something like rotationMultiplier which would have multiplied the rotation. In that case you could still disable rotation by setting it to zero but you could also try to simply reduce the motion if you wanted to. What do you think about that? I think it would allow for more customisation while keeping the prop count the same.

[cgat]

@3DJakob yup, that works too. Updated.

This prop aside (which I think is a valid tool to tune the rotation for bigger cards), I do think there is an underlying performance issue while dragging. The movement of the card lags behind the movement of the cursor. This is especially the case with rotate. The calculations are pretty basic though, so I'm not sure what's causing it. Updating transform values like rotation and translate shouldn't cause the lag though. I guess this is more of a conversation for issues. One thing that crossed my mind is that multiple handleMove events will be executing in parallel, but all of them use the same lastLocation closure, so they are competing to update the value.

Anyway, thanks to the contributors