Я пытаюсь создать компонент React, который масштабируется со всех сторон (N, NE, E, SE, S, SW, W, NW), как показано в этом GIF. Масштаб
Прежде чем я начал заниматься масштабированием по всем направлениям, упомянутым выше, я хотел сначала посмотреть, могу ли я реализовать его из угла NE, но у меня возникли проблемы.
Подход, который я использовал, заключается в том, чтобы каким-то образом преобразовать смещение перетаскивания мыши от его начала координат, чтобы определить коэффициент масштабирования, который затем может быть применен к компоненту с помощью свойства преобразования CSS, чтобы соответственно масштабировать ширину и высоту.
У меня проблемы с поддержанием состояния перетаскивания, когда мышь нажата на кнопке, расположенной в северо-восточном углу основного компонента, что приводит к непоследовательному изменению размера компонента или ошибочному перемещению. Я подозреваю, что это как-то связано с моими событиями «mousemove» и «mouseup», но я не совсем уверен.
Есть какие-нибудь советы о том, как решить эту проблему / реализовать эту функцию? Очень хотелось бы реализовать это без использования плагинов. Заранее спасибо.