Удерживать один прямоугольник в границах другого, с одинаковым углом поворота?

С помощью каких вычислений можно удерживать один прямоугольник (назовем его target) в границах другого (назовем его targetBounds)?

Оба прямоугольника находятся в одной системе координат.

Прямоугольники могут иметь разную ширину и высоту, но угол всегда один.

Target может перемещаться и масштабироваться, но не должен выходит за границы targetBounds

Если угол равен 0 то я без проблем могу зафиксировать target в границах targetBounds
К примеру если при перемещении target, его x или y меньше чем у targetBounds, то target я задаю x/y как у targetBounds. Когда угол равен 0 - все просто.


Но когда объекты имеют угол < 0 или > 0, то я не могу зафиксировать target в границах targetBounds


Я создал песочницу с примером: https://codesandbox.io/s/k970vyv415

При двойном клике на изображение, создается красный прямоугольник и накладывается на изображение. Его можно масштабировать и перемещать. Если у картинки угол равен 0 то красный прямоугольник не выходит за границы картинки, но если картинку сначала повернуть, а потом открыть кроп, то проверки уже не правильно работают, это видно, когда перемещаешь красный прямоугольник.

Пример в песочнице на vuejs + fabricjs, но весь код, который отвечает за эту задачу находится в src/canvas/addons/crop и там только javascript (конечно вместе с fabricjs, но там конечно не сложно и интуитивно понятно)