Как разместить дочерний элемент, не затрагивая трансформацию родительского элемента? ОБНОВЛЕНО !!! [Javascript]

Question

У меня есть родительский div, который отображает график, который можно вращать. Я хочу расставлять точки при щелчке мышью. Это моя функция места:

module.exports.place = function (event, id) {
  let div = document.createElement("div");
  div.className = "container-fluid";
  div.id = id;
  let avakio_wrapper = document.getElementById("avakio");
  avakio_wrapper.appendChild(div);
  let parentPosition = getPosition(event.currentTarget);

  xPosition = event.clientX - parentPosition.x - div.clientWidth / 2;
  yPosition = event.clientY - parentPosition.y - div.clientHeight / 2;
  div.style.left = xPosition + "px";
  div.style.top = yPosition + "px";
}

Когда график не повернут, он работает так, как ожидалось, хотя, когда я поворачиваю график, он сначала помещает точку под щелчком мыши, а затем применяет преобразование вращения и перемещается Это. У меня есть скриншоты, показывающие, что я описываю. Красная точка показывает позицию щелчка. Я ценю любую помощь.

ОБНОВЛЕНИЕ !!!!

Вот реализация моего кода:

// Calculate clicking pos based of top-left corner of div
  xPosition = event.clientX - parentPosition.x - dot.clientWidth / 2;
  yPosition = event.clientY - parentPosition.y - dot.clientHeight / 2;

  let centerx = parentDiv.clientWidth / 2;
  let centery = parentDiv.clientHeight / 2;

  // Find Rotation angle
  let rot = parentDiv.style.getPropertyValue("transform");
  if (rot != "") {
    rot = rot.split("(")[1].split("deg")[0];
  } else {
    rot = 0;
  }

  // Perform Invert Rotation
  xPosition = centerx - xPosition;
  yPosition = centery - yPosition;

  let xRot =
    xPosition * Math.cos(rot * (Math.PI / 180)) +
    yPosition * Math.sin(rot * (Math.PI / 180));
  let yRot =
    -xPosition * Math.sin(rot * (Math.PI / 180)) +
    yPosition * Math.cos(rot * (Math.PI / 180));

  // Calculate again based top-left corner
  dot.style.left = centerx - xRot + "px";
  dot.style.top = centery - yRot + "px";

Однако я бегаю по некоторым проблемам. Когда родительский div поворачивается, точки смещаются на несколько пикселей в зависимости от угла поворота. У меня есть скриншоты с разными углами поворота. Я много дней занимался математическими вычислениями на бумаге, но до сих пор не могу понять, чем это вызвано.

Answer 1

Вот приложение по математике. Они все еще немного двигаются (я думаю, это из-за неточности вычислений). Я как бы застрял здесь, может кто-нибудь сможет это исправить.

function rotate() {
  let parent = document.getElementById("parent")
  let rot = document.getElementById("value").value
  let transform = parent.style.transform
  transform = "rotate("+ (Number(transform.substr(7,transform.length-11)) + Number(rot)) +"deg)"
  parent.style.transform = transform
  let dots = document.getElementsByClassName("dot")
 for (i = 0; i < dots.length; i++)
  dotpos(parent, dots[i],rot)
}

function dotpos(parent,dot,rot) {
 rot = rot * (Math.PI/180) //convert to radian
 let xCenter = parent.offsetWidth /2
 let yCenter = parent.offsetHeight /2
 let x = xCenter - Number(dot.style.left.substring(0, dot.style.left.length - 2))
 let y = yCenter - Number(dot.style.top.substring(0, dot.style.top.length - 2))
 let xRot = x*Math.cos(rot)+y*Math.sin(rot)
 let yRot = -x*Math.sin(rot)+y*Math.cos(rot)
 dot.style.left = xCenter -xRot + "px"
 dot.style.top = yCenter -yRot + "px"
}

#parent {
  height: 100px;
  width : 100px;
  background-color: grey;
}
.dot {
  height: 5px;
  width : 5px;
  border-radius: 5px; 
  background-color: red;
}

<div id="parent" style = "transform:rotate(0deg)">
  <div class ="dot" style="position:relative;left:15px;top:30px;"></div>
  <div class ="dot" style="position:relative;left:60px;top:50px;"></div>
</div>
<form>
  <input type="text" id="value"><br>
</form>

<button onclick="rotate()">rotate</button>