Free Plugins (Learning Path)

Hi Bubblers,

Im asking for help in creating one plugin, so that I have the knowledge to create more plugins that would be free for the community so that creating interactive apps is easier.

Here is the item I would like to create:
A box that can be rotated
RotateBox

The code for this is:
HTML


Rotate the box using the red handle.

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

Javascript
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;
}

CSS
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;
}

Ideally it would make more sense to rotate a group so that you can put whatever you want inside and still have to rotational feature.

I believe if I learn how to do this it would give me the tools to create many more things like this (that would always be free to the community) but I need some help getting pointed in the right direction.

I have a background in game development and would like to implement some of the things I learned when I used to create games.

I just don’t know how to turn something like this into a plugin.

Thanks!

@luminrabbit

@vini_brito has a plugin development course if I am not mistaken. You may want to contact him as one of your options :slight_smile:

1 Like