Разрешение только прямоугольного выделения с сеткой флажков

Question

Извините за запутанное название, я действительно не мог придумать ничего лучшего.

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

Выбор коробок изображение должно занимать выглядит примерно так:

<div class="row"> 
    <div class="grid-position"> 
     <input type="checkbox" name="position[1]" disabled> 
    </div> 
    <div class="grid-position"> 
     <input type="checkbox" name="position[2]" disabled> 
    </div> 
    <div class="grid-position"> 
     <input type="checkbox" name="position[3]"> 
    </div> 
    <div class="grid-position"> 
     <input type="checkbox" name="position[4]"> 
    </div> 
</div> 
<div class="row"> 
    <div class="grid-position"> 
     <input type="checkbox" name="position[5]"> 
    </div> 
    <div class="grid-position"> 
     <input type="checkbox" name="position[6]"> 
    </div> 
    <div class="grid-position"> 
     <input type="checkbox" name="position[7]"> 
    </div> 
    <div class="grid-position"> 
     <input type="checkbox" name="position[8]"> 
    </div> 
</div> 

https://jsfiddle.net/17zt26wb/4/

Однако, как изображения могут быть только прямоугольной формы, я хочу, чтобы предотвратить их выбор что-то вроде этого:

Х - Х - О - О

Х - О - О - О

var selection = {p1: true, p2: true, p3: false, p4: false, p5: true, p6: false, p7: false, p8: false};

ИЛИ:

О - О - X - X

Х - О - О - О

var selection = {p1: false, p2: false, p3: true, p4: true, p5: true, p6: false, p7: false, p8: false};

Однако это справедливо:

X - O - O - O

О - О - О - О

var selection = {p1: true, p2: false, p3: false, p4: false, p5: false, p6: false, p7: false, p8: false};

ИЛИ:

О - Х - Х - Х

О - Х - Х - Х

var selection = {p1: false, p2: true, p3: true, p4: true, p5: false, p6: true, p7: true, p8: true};

и т.д.

Мне нужна помощь в вычислении и алгоритме, который вернет true/false, если выбранные флажки представляют квадрат/прямоугольник. Это можно сделать в Javascript, но это не имеет значения - мне просто нужно что-то начать, я сам пошлю его на свой язык.

В скрипке первые два флажка отключены, поскольку изображение уже занимает эти два блока. Значения p1 и p2 в объекте всегда являются ложными.

Возможно ли это? Я могу просто не заботиться о проверке, но было бы неплохо иметь.

Редактировать: Чтобы уточнить, размер сетки должен всегда оставаться как 4x2, однако было бы неплохо иметь возможность изменять размер с помощью констант.

Answer 1

Учитывая массив массивов, содержащих действительные «индексы» - в качестве примера (неполный)

// box 5 and 6 alone are valid. 
// 5 & 6 in combination is valid. 
// 3,4,7,8 in combination is valid 
// TODO: Add all other valid combinations 
var validCombinations = [[5],[6],[5,6],[3,4,7,8]]; 

Вы можете использовать алгоритм, как ниже. Обратите внимание, что это «жесткое кодирование» допустимых комбинаций, а не использование истинного алгоритма, чтобы определить, является ли выбор прямоугольным.

var validCombinations = [[5],[6],[5,6],[3,4,7,8]]; 
 

 
function isAll(input){ 
 
    var $checkedBoxes = $(':checkbox:checked'); 
 
    return $checkedBoxes.length == input.length 
 
      && input.every(function(i){   
 
        return $("[name='position[" + i + "]']:checkbox:checked").length; 
 
       }) 
 
} 
 

 
$(':checkbox').click(function(){ 
 
    var isValid = validCombinations.some(function(x) { return isAll(x);}) 
 
    console.log("Selection is valid?",isValid) 
 
})

.row { 
 
\t margin-bottom: 4px; 
 
} 
 

 
.row .grid-position { 
 
\t display: inline-block; 
 
\t background-color: #aaa; 
 
\t padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="grid-position"> 
 
     <input type="checkbox" name="position[1]" disabled> 
 
    </div> 
 
    <div class="grid-position"> 
 
     <input type="checkbox" name="position[2]" disabled> 
 
    </div> 
 
    <div class="grid-position"> 
 
     <input type="checkbox" name="position[3]"> 
 
    </div> 
 
    <div class="grid-position"> 
 
     <input type="checkbox" name="position[4]"> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="grid-position"> 
 
     <input type="checkbox" name="position[5]"> 
 
    </div> 
 
    <div class="grid-position"> 
 
     <input type="checkbox" name="position[6]"> 
 
    </div> 
 
    <div class="grid-position"> 
 
     <input type="checkbox" name="position[7]"> 
 
    </div> 
 
    <div class="grid-position"> 
 
     <input type="checkbox" name="position[8]"> 
 
    </div> 
 
</div>