Как развернуть блок (div или др.) в другую сторону? (HTML, CSS, React.js)

Question

Всем привет. Столкнулся с такой проблемой, делаю выделение на React.js (по аналогии как на рабочем столе). Все работает хорошо, но выделение работает слева-направо / сверху-вниз (top, left, width, height). Когда я перебрасываю выделение в левую сторону, чтобы оно как бы "вывернулось" - ничего не работает. Есть ли какие-то готовые параметры в CSS и HTML чтобы можно было при отрицательном значении параметров left, top и тд - выворачивать его? Либо как это сделать с помощью JS?

P.S Библиотеки не предлагать

Answer 1

Вам не надо что-либо выворачивать, вам надо правильно строить фигуру, исходя из координат курсора - clientX, clientY в эвентах mousedown, mousemove, mouseup, а также ориентируясь на смещение курсора относительно начальных координат, назовем это axisX, axisY

Запомнить стартовую позицию курсора в эвенте mousedown, объект startPosition = {clientX, clientY}
Понять в каком направлении движется курсор в mousemove
Если event.clientX - startPosition.clientX >= 0, то движемся слеванаправо и прикрепляем блок относительно left, иначе справа налево прикрепляем к right.
Если event.clientY - startPosition.clientY >= 0, то движемся сверху вниз и прикрепляем к top, иначе - снизу вверх и прикрепляем к bottom.
Считаем высоту и ширину элемента, с учетом смещения и прикрепления.

Корявенький пример.

const root = document.querySelector('#root');
let select; //хранилище созданного select`а
let startPosition //хранилищи стартовой позиции;

// получаем направление движение
const getAxis = (startPos, newPos) => ({
    x: newPos.clientX - startPos.clientX,
    y: newPos.clientY - startPos.clientY
})

//получаем позицию
const getPosition = ({ x, y }) => {
    let position = {};
    (x >= 0)
        ? position.left = `${startPosition.clientX}px`
        : position.right = `${root.offsetWidth - startPosition.clientX}px`;

    (y >= 0)
        ? position.top = `${startPosition.clientY}px`
        : position.bottom = `${root.offsetHeight - startPosition.clientY}px`;

    return position;
}

//создаем селект
const createSelect = () => {
    select = document.createElement('div');
    select.classList.add('select');
    root.appendChild(select);
}

//удаляем селект
const removeSelect = () => {
    root.removeChild(select) //удаляем элемент
    select = null; //сбрасываем селект
}

//эвент нажатия
document.addEventListener("mousedown", ({ clientX, clientY }) => {
    startPosition = { clientX, clientY }; //записываем стартовую позицию
    createSelect() //создаем элемент
})

//эвент передвижения
document.addEventListener("mousemove", ({ currentTarget, clientX, clientY }) => {
    //интересует только если есть селект
    if (select) {
        let axis = getAxis(startPosition, { clientX, clientY }) //получаем направление
        let position = getPosition(axis); //устанавливаем позицию
        let size = { width: `${Math.abs(axis.x)}px`, height: `${Math.abs(axis.y)}px`} //размер
        let style = {...position, ...size};
        
        select.setAttribute('style', `${Object.keys(style).map((key) => `${key}:${style[key]}`).join(';')}`); //устанавливаем стиль
    }
})

//Эвент отжатия
document.addEventListener("mouseup", () => {
    removeSelect();
})

body,
html {
  margin: 0;
  padding: 0;
  min-height: 100vh, min-width: 100vw;
  height: 100%;
  width: 100%;
}

#root {
  background: pink;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.select {
  background: blue;
  position: absolute;
}

<div id="root">
</div>

БЛОГ НА HUSL

Как развернуть блок (div или др.) в другую сторону? (HTML, CSS, React.js)

Ответы (1 шт):