Как узнать, являются ли выделенные ячейки прямоугольником в сетке CSS?

Question

У меня есть div, который отображает сетку, например:

render() {
    return (
            <div style={{display: "grid", gridTemplateColumns: "10px 10px 10px 10px", gridTemplateRows: "10px 10px 10px 10px"}}>
                {this.renderCells()}
            </div>
    );
}

В моей функции renderCells () у меня есть:

renderCells = () => {
  let render = [];
  for(let i = 0; i < 16; i++)
    render.push(<div className="cell" key={i} onClick={() => this.clickElement(i)}>{i}</div>);
  return render;
}

Он успешно генерирует сетку 4x4 с 0 ..15 чисел в нем. В моей функции clickElement () у меня есть:

const clickElement = (index) => {
    this.array.push(index);
}

Я хочу создать функцию, чтобы проверить, имеет ли this.array порядковые номера, которые могут создавать прямоугольник или квадрат.

Пример:

Grid System
[0, 1, 2, 3]
[4, 5, 6, 7]
[8,9,10,11]
[12,13,14,15]

Если пользователь нажимает 4, 5, 8 и 9 соответственно, и после того, как мы запускаем функцию isRectangleorSquare (), она должна вернуть true, для 5, 6, 9 она должна вернуть false например.

Как мне написать функцию isRectangleorSquare ()?

Answer 1

Этот ответ будет означать, что у вас есть переменная javascript (в данном случае называемая «матрицей»), которая представляет вашу css сетку.

Вы можете найти координаты для выбранных элементов и поместите их в список (например, для 4,5,8,9):

[
    [1 (vertical), 0 (horizontal)]
    [1, 1]
    [2, 0]
    [2, 9]
]

Затем получите координаты для верхнего левого и нижнего правого углов.

На этом этапе l oop просмотрите исходную матрицу и посмотрите, есть ли каждый элемент в вашем списке выбранных элементов.

Вот исходный код в качестве примера:

let matrix = [
    [0, 1, 2, 3],
    [4, 5, 6, 7],
    [8, 9, 10,11],
    [12,13,14,15]
];

let selected = [4,5,8,9];

function isRectangle(selected) {
    let coords = [];

    // get the coords (could be optimised)

    for (let val of selected) {
        for (let row = 0; row < matrix.length; row++) {
            let idx = matrix[row].findIndex((x) => x == val);
            if (idx > -1) {
                coords.push([row, idx]);
            }
        }
    }

    // get the corners

    let mtop = Math.min(...coords.map((c) => c[0]));
    let mbottom = Math.max(...coords.map((c) => c[0]));
    let mleft = Math.min(...coords.map((c) => c[1]));
    let mright = Math.max(...coords.map((c) => c[1]));

    // check the values

    for (let i=mtop; i<=mbottom; i++) {
        for (let c=mleft; c<=mright; c++) {
            if (! selected.includes(matrix[i][c])) {
                return false;
            }
        }
    }

    return true;
}

isRectangle(selected);

Это код можно улучшить как минимум двумя способами:

• Прекратить поиск координат значения, как только вы их нашли
• Получите положение углов, пока вы ищете координаты выбранных объектов