Adding rotation handles in Interact JS

The documentation of Interact JS doesn't mention anything about rotating interactable elements. I will show you how you can implement rotation handles using Interact JS.

Concept

Here's a general outline of how it works:

  1. Create a separate interactable object which we will use as rotation handle.
  2. When this rotation handle is dragged, instead of changing its position, we will change its parent's rotation angle.

Demo

Here's a fiddle containing the demo:

Link to the fiddle: https://jsfiddle.net/axnyfuj8/1/.

Credits

I didn't come up with this solution all on my own. Most of the important code which does the trigonometric calculations to find the angle has been borrowed from this Codepen.