JSFiddle - React, Tailwind, and code Playground

HTML

<div id="canvas">

</div>

JavaScript

const canvas = document.getElementById('canvas')

d3.select(canvas).append('svg')
      					 .attr('width', '500')
                 .attr('height', '500')
                 .append('g')
                 .attr('id', 'group')
                 .append('rect')
                 .attr('width', '100')
                 .attr('height', '100')
                 .attr('x', '100')
                 .attr('y', '100')

d3.select('#group').append('circle')
									 .attr('r', '10')
                   .attr('cx', '150')
                   .attr('cy', '80')
                   .call(d3.drag().on('start', startRotation).on('drag', rotate))
                   
  let rotateHandleStartPos,
      r = { angle: 0, cx: 0, cy: 0 }
                   
  function startRotation () {
    const target = d3.select(d3.event.sourceEvent.target)
    r.cx = getElementCenter().x
    r.cy = getElementCenter().y
    let updatedRotateCoordinates = r

    // updates the rotate handle start posistion object with
    // basic information from the model and the handles
    rotateHandleStartPos = {
      angle: r.angle, // the current angle
      x: parseFloat(target.attr('cx')), // the current cx value of the target handle
      y: parseFloat(target.attr('cy')), // the current cy value of the target handle
    };

    // calc the rotated top & left corner
    if (rotateHandleStartPos.angle > 0) {
      var correctsRotateHandleStartPos = getHandleRotatePosition(
        rotateHandleStartPos
      );
      rotateHandleStartPos.x = correctsRotateHandleStartPos.x;
      rotateHandleStartPos.y = correctsRotateHandleStartPos.y;
    }

    // adds the initial angle in degrees
    rotateHandleStartPos.iniAngle = calcAngleDeg(
      updatedRotateCoordinates,
      rotateHandleStartPos
    );
  }

  function rotate () {
    dragPointRotate(rotateHandleStartPos)
  }

  function getElementCenter () {
    const box = document.querySelector('#group > rect').getBBox()
    console.log(box)
    return {
      x: box.x +...