Трансформации: сбивается опорная точка после rotate?

Question

[thehighhomie]

Пишу трансформер, который можно перемещать, скейлить, поворачивать (translate, scale, rotate), доделал почти до конца, но столкнулся с проблемой:

Когда элемент перемещаешь, скейлишь то все круто работает, но как только я поверну элемент (rotate), то сбивается опорная точка x, y при скейле.

К примеру возьму правую нижнюю кнопку за которую тяну: опорная точка должна быть верхняя левая.

Все модули хорошо работают, модуль ротейта работает тоже хорошо после скейла. Как я понимаю проблема в самом скейле, а точнее я что-то не так делаю в обработчике mousemove. Мне кажется нужно какую-то операцию провести с углом, но я не могу понять какую.

Этот трансформер пишется на vue, так как возможно не для всех будет понятен код, который я могу залить в песочницу, я пишу ниже код обработчика mousemove, в котором как я думаю и находится проблема/недоработка.

Вот как это выглядит обработчик для mousemove:

// функцию я просто вынес как модуль, она возвращает в переменную новую функцию, которая попадает в обработчик mousemove
export default (pointer, { mouseX, mouseY, startX, startY, x, y, width, height, scaleX, scaleY }, onUpdate) => {
  // эти две переменные созданы только для высчитывания скейла
  let originalWidth = width * scaleX // высчитываю новую ширину
  let originalHeight = height * scaleY // высчитываю новую высоту

  // возвращаемая функция для mousemove
  return event => {

    // расстояние, которое пройдено мышкой, которое используется для вычисления скейла
    const diffX = event.clientX - mouseX
    const diffY = event.clientY - mouseY

    if (pointer === 'br') { обработка для нижней правой кнопки
      scaleX = (originalWidth + diffX) / width
      scaleY = (originalHeight + diffY) / height
      x = startX + diffX
      y = startY + diffY
    }

    // обновление элемента
    onUpdate({ x, y, scaleX, scaleY })
  }
}

добавил в песочницу код https://codesandbox.io/s/88qjnz9kj8