drag and drop with interact.js

I am trying to build an interface that allows both resize/drag and rotate on some element and to acheive this I am using interact.js javascript library.

I have my interact functions working:

    interact('.resize-drag-ratio')
      .draggable({
        onmove: window.dragMoveListener
      })
      .resizable({
        preserveAspectRatio: true,
        edges: { left: true, right: true, bottom: true, top: true }
      })
      .on('resizemove', function (event) {
        var target = event.target,
            x = (parseFloat(target.getAttribute('data-x')) || 0),
            y = (parseFloat(target.getAttribute('data-y')) || 0);

        var min_size = 35;

        if(event.rect.width>min_size){
            // update the element's style
            target.style.width  = event.rect.width + 'px';
            target.style.height = event.rect.height + 'px';


            // translate when resizing from top or left edges
            x += event.deltaRect.left;
            y += event.deltaRect.top;

            target.style.webkitTransform = target.style.transform =
                'translate(' + x + 'px,' + y + 'px)';

            target.setAttribute('data-x', x);
            target.setAttribute('data-y', y);

            }
      });

and drag-rotate that allows for rotation

    interact('.drag-rotate')
      .draggable({
      onstart: function (event) {
        const element = event.target;
        const rect = element.getBoundingClientRect();
        // store the center as the element has css `transform-origin: center center`
        element.dataset.centerX = rect.left + rect.width / 2;
        element.dataset.centerY = rect.top + rect.height / 2;

        console.log("element.dataset.centerX: "+element.dataset.centerX);
        console.log("element.dataset.centerY: "+element.dataset.centerY);



        // get the angle of the element when the drag starts
        element.dataset.angle = getDragAngle(event);
      },
      onmove: function (event) {
        var element = event.target;
        var center = {
          x: 300,
          y: 300,
        };


        console.log("element.dataset.centerX: "+element.dataset.centerX);
        console.log("element.dataset.centerY: "+element.dataset.centerY);


        var angle = getDragAngle(event);

        // update transform style on dragmove
      element.style.transform = 'rotate(' + angle + 'rad' + ')';
      },
      onend: function (event) {
        const element = event.target;

        // save the angle on dragend
        element.dataset.angle = getDragAngle(event);
      },
    })

The two classes get switched using jquery thus turning drag into rotaion and vice versa . My problem is that object location and rotation angle do not stay as placed and I am not sure how to fix that.

After i drag an element to some position and press the rotate button, one i start rotating the element it moves to top:0px left:0px and does not stay at its dragged position.

you can see the full working code right here: https://codepen.io/yaary-vidanpeled/pen/ZZwGmE

from drag and drop with interact.js