Поворот элемента с ограничениями

!function(){
  const box = document.querySelector('.box');
  let rotStarted = false,
      busy = false,
      prevX = null,
      prevY = null,
      currRot = 360,
      rotStep = 1,
      dRotMax = 10,
      dRotMin = -10;
  window.addEventListener("mousedown", () => rotStarted = true)
  window.addEventListener("mouseup", () => {
    prevX = null;
    prevY = null;
    rotStarted = false;
  })
  window.addEventListener("mousemove", function(e) {
    if (!rotStarted){return}
    if (busy){return}
    busy = true;
    window.requestAnimationFrame(()=> busy = false)
    prevX = prevX ?? e.clientX;
    prevY = prevY ?? e.clientY;
    let dX = -prevX + (prevX = e.clientX),
        dY = -prevY + (prevY = e.clientY),
        dRot = Math.max(dRotMin, Math.min(dRotMax, (dX - dY) * rotStep));
    currRot = Math.max(0, Math.min(360, dRot + currRot))
    box.style.transform = `rotate(${currRot}deg)`
    //console.info(dX, dY, dRot)
  })
}()

body {
  margin: 0;
  height: 100vh;
}

#app {
  display: grid;
  place-items: center;
  height: inherit;
}

.box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  width: 200px;
  height: 200px;
  background-color: #bbd6b8;
  border: 1px solid #94af9f;
  cursor: move;
}

.direction {
  width: 50px;
  height: 50px;
  background-color: #333;
  border-radius: 50%;
  color: white;
  text-align: center;
  line-height: 50px;
  user-select: none;
}

.north {
  grid-column: 2;
  grid-row: 1;
}

.east {
  grid-column: 3;
  grid-row: 2;
}

.south {
  grid-column: 2;
  grid-row: 3;
}

.west {
  grid-column: 1;
  grid-row: 2;
}

<div id = "app">
  <div class = "box">
    <div class = "direction north">N</div>
    <div class = "direction east">E</div>
    <div class = "direction south">S</div>
    <div class = "direction west">W</div>
  </div>
</div>

!function(){
  const box = document.querySelector('.box');
  let rotStarted = false,
      busy = false,
      prevX = null,
      prevY = null,
      currRot = 360,
      epsilon = 10e-1,
      rotStep = (r, axis) => { //0 for x, 1 for y
        let quad = r / 90,
            //at transition points, disable 1 axis to prevent jitter
            isTransition = Math.abs(Math.round(quad) - quad) <= epsilon;
        switch(quad | 0) {
          case 0:
            return 1
          case 1: //3 o'clock, 
            return axis 
              ? 1 
              : isTransition ? 0 : -1
          case 2: //6 o'clock
            return axis 
              ? isTransition ? 0 : -1 
              : -1
          case 3: //9 o'clock
          case 4:
            return axis 
              ? -1 
              : isTransition ? 0 : 1
        }
      },
      dRotMax = 10,
      dRotMin = -10;
  window.addEventListener("mousedown", () => rotStarted = true)
  window.addEventListener("mouseup", () => {
    prevX = null;
    prevY = null;
    rotStarted = false;
  })
  window.addEventListener("mousemove", function(e) {
    if (!rotStarted){return}
    if (busy){return}
    busy = true;
    window.requestAnimationFrame(()=> busy = false)
    prevX = prevX ?? e.clientX;
    prevY = prevY ?? e.clientY;
    let dX = -prevX + (prevX = e.clientX),
        dY = -prevY + (prevY = e.clientY),
        dRot = Math.max(dRotMin, Math.min(dRotMax, dX * rotStep(currRot, 0) + dY * rotStep(currRot, 1)));
    currRot = Math.max(0, Math.min(360, dRot + currRot))
    box.style.transform = `rotate(${currRot}deg)`
    //console.info(dX, dY, dRot)
  })
}()

body {
  margin: 0;
  height: 100vh;
}

#app {
  display: grid;
  place-items: center;
  height: inherit;
}

.box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  width: 200px;
  height: 200px;
  background-color: #bbd6b8;
  border: 1px solid #94af9f;
  cursor: move;
}

.direction {
  width: 50px;
  height: 50px;
  background-color: #333;
  border-radius: 50%;
  color: white;
  text-align: center;
  line-height: 50px;
  user-select: none;
}

.north {
  grid-column: 2;
  grid-row: 1;
}

.east {
  grid-column: 3;
  grid-row: 2;
}

.south {
  grid-column: 2;
  grid-row: 3;
}

.west {
  grid-column: 1;
  grid-row: 2;
}

<div id = "app">
  <div class = "box">
    <div class = "direction north">N</div>
    <div class = "direction east">E</div>
    <div class = "direction south">S</div>
    <div class = "direction west">W</div>
  </div>
</div>

const box = document.querySelector('.box');
const { x, y, width } = box.getBoundingClientRect();
const boxCenter = width / 2;
let boxXPos = x;
let boxYPos = y;
let pointerToNorthDegree; // degrees of where north is relative to where pointer is
let northDegree = 0; // degrees of where north is relative to top

// Map any angle to range 0..359
const mod = ang => ((ang % 360) + 360) % 360;
// Clamp a value between min/max range
const clamp = (value, min, max) => Math.min(max, Math.max(min, value));

const calcDegree = (x, y) => mod(Math.floor(Math.atan2(y, x) * (180 / Math.PI) + 90));

const getPos = (e) => [e.clientX - boxXPos - boxCenter, e.clientY - boxYPos - boxCenter];

function onPointerMove(event) {
  const pointerDegree = calcDegree(...getPos(event)); 
  // Calculate a relative angle change in the range -180..179, 
  //   and determine where north should be. It will get an 
  //   angle that might exceed 0..359 range, which can be used to
  //   detect an overrun:
  northDegree += mod(pointerDegree + pointerToNorthDegree - northDegree + 180) - 180;
  // Should not rotate beyond home position in either direction:
  const clampedNorthDegree = clamp(northDegree, -360, 0); // This range allows a full CCW turn from 0 degrees
  if (northDegree != clampedNorthDegree) {
    // If cursor was moving further than allowed, then use the current degree 
    //    as the new offset, so that if the cursor moves in the opposite 
    //    direction, rotation will happen immediately from that reference onwards.
    northDegree = clampedNorthDegree;
    pointerToNorthDegree = northDegree - pointerDegree;
  }
  box.style.transform = `rotate(${northDegree}deg)`;
}

box.addEventListener('pointerdown', (event) => {
  const pointerDegree = calcDegree(...getPos(event));
  // Remove next line if you don't want to allow another CCW turn from the home position 
  //    when the previous operation ended at north via a CCW turn.
  if (northDegree == -360) northDegree = 0;
  pointerToNorthDegree = northDegree - pointerDegree;
  box.setPointerCapture(event.pointerId);
  box.addEventListener('pointermove', onPointerMove);
  box.addEventListener('pointerup', () => box.removeEventListener('pointermove', onPointerMove));
});

window.addEventListener('resize', () => ({ x: boxXPos, y: boxYPos } = box.getBoundingClientRect()));

body {
  margin: 0;
  height: 100vh;
}

#app {
  display: grid;
  place-items: center;
  height: inherit;
}

.box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  width: 200px;
  height: 200px;
  background-color: #bbd6b8;
  border: 1px solid #94af9f;
  cursor: move;
}

.direction {
  width: 50px;
  height: 50px;
  background-color: #333;
  border-radius: 50%;
  color: white;
  text-align: center;
  line-height: 50px;
  user-select: none;
}

.north {
  grid-column: 2;
  grid-row: 1;
}

.east {
  grid-column: 3;
  grid-row: 2;
}

.south {
  grid-column: 2;
  grid-row: 3;
}

.west {
  grid-column: 1;
  grid-row: 2;
}

<div id = "app">
  <div class = "box">
    <div class = "direction north">N</div>
    <div class = "direction east">E</div>
    <div class = "direction south">S</div>
    <div class = "direction west">W</div>
  </div>
</div>