Масштабирование (увеличение/уменьшение) контейнера div и панорамирование внутри контейнера ⇐ CSS

[Anonymous]

Я создаю веб-приложение для диаграмм/блок-схем и завершил большую часть работы, осталось только несколько вещей.
Я пытаюсь реализовать способ увеличения и уменьшения масштаба контейнера (аналогично тому, как наглядно диаграмма делает это), а также дает возможность панорамировать контейнер.
Например, если в контейнере больше не осталось пробелов, пользователь просто перемещается в любом направлении, в любом направлении, больше места будет доступен. Сейчас у меня есть контейнер, содержащий узлы, позиционированные абсолютно. Эти узлы я могу перетаскивать и располагать так, как захочу. Возникает ошибка, когда я перемещаю узлы в положение, выходящее за пределы контейнера. Узел застрянет там, и я могу переместить его только в положение, которое еще больше переполняет контейнер, и я не могу вытащить его обратно.
Я никоим образом не являюсь продвинутым программистом Javascript, в На самом деле я начал заниматься веб-разработкой только в этом году, поэтому, пожалуйста, дайте четкий и простой для изучения/понимания ответ. И если подход экспертного уровня, пожалуйста, предоставьте мне источники для изучения.
Кроме того, если вы не понимаете, о чем я говорю, вы можете посетить Lucid Chart или любое приложение для построения диаграмм. и функции, о которых я говорил, будут присутствовать.
Полный пример здесь (без масштабирования и панорамирования):

Код: Выделить всё

 let initialX, initialY;

window.onmousedown=ev => {
initialX = ev.clientX;
initialY = ev.clientY;
}

function clickMe(element) {

document.onmousemove = function (event) {
drag(element, event);
};

document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
};
}

function drag(element, event) {

const finalY = event.clientY - initialY;
const finalX = event.clientX - initialX;
initialX = event.clientX;
initialY = event.clientY;
element.style.top = element.offsetTop + finalY + "px";
element.style.left = element.offsetLeft + finalX + "px";

}

Код: Выделить всё

.node{
width: 5rem;
height: 5rem;
border: 2px black solid;
cursor: pointer;
position: absolute;
}
.insideContainer{
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
display: flex;
overflow: scroll;
position: relative;
}
.container{
width: 30rem;
height: 30rem;
display: flex;
justify-content: center;
align-items: center;
border: 1px black solid;
overflow: scroll;
}
body{
display: flex;
justify-content: center;
align-items: center;
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/784 ... -container