Is there any handler to rotate an object?

Question

This seems to be possible in the mobile version of interact.js while I am looking for a solution that works also in standard desktop browser.

Answer 1

I've found one solution on this Blog by bhch

Here is the code:

/* 
 * Some code borrowed from: https://codepen.io/taye/pen/wrrxKb
*/

interact('.rotation-handle')
  .draggable({
    onstart: function(event) {
      var box = event.target.parentElement;
      var rect = box.getBoundingClientRect();

      // store the center as the element has css `transform-origin: center center`
      box.setAttribute('data-center-x', rect.left + rect.width / 2);
      box.setAttribute('data-center-y', rect.top + rect.height / 2);
      // get the angle of the element when the drag starts
      box.setAttribute('data-angle', getDragAngle(event));
    },
    onmove: function(event) {
      var box = event.target.parentElement;

      var pos = {
        x: parseFloat(box.getAttribute('data-x')) || 0,
        y: parseFloat(box.getAttribute('data-y')) || 0
      };

      var angle = getDragAngle(event);

      // update transform style on dragmove
      box.style.transform = 'translate(' + pos.x + 'px, ' + pos.y + 'px) rotate(' + angle + 'rad' + ')';
    },
    onend: function(event) {
      var box = event.target.parentElement;

      // save the angle on dragend
      box.setAttribute('data-angle', getDragAngle(event));
    },
  })

function getDragAngle(event) {
  var box = event.target.parentElement;
  var startAngle = parseFloat(box.getAttribute('data-angle')) || 0;
  var center = {
    x: parseFloat(box.getAttribute('data-center-x')) || 0,
    y: parseFloat(box.getAttribute('data-center-y')) || 0
  };
  var angle = Math.atan2(center.y - event.clientY,
    center.x - event.clientX);

  return angle - startAngle;
}

body {
  font-family: sans-serif;
}

.box {
  width: 150px;
  height: 100px;
  position: relative;
  background-color: #4be091;
  border-radius: 6px;
}

.rotation-handle {
  padding: 3px 4px;
  display: table;
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -35px;
  background-color: #ff1661;
  border-radius: 10rem;
  line-height: 1;
  text-align: center;
  font-weight: bold;
  color: #fff;
  cursor: move;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.9/interact.min.js"></script>
<p>
  <strong>Rotate the box using the red handle.</strong>
</p>

<div class="box">
  <div class="rotation-handle">&circlearrowright;</div>
</div>