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.


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.


Here's a fiddle containing the demo:

Link to the fiddle:


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.