WebGUI Сетка

---

Что такое grid и как это работает

/* Директива "Сетка" на подобии xaml grid
 * пример
 * Объявляем сетку
 *  ap-grid=""
 *  ap-grid-cols="200px, 400px, 30%, 70%" 
 *  ap-grid-rows="200px, 400px, 30%, 70%" 
 * */

Многие наверное знают , что такое xaml grid. Он очень помогает в быстрой верстке окон и интерфейсов приложений.

Но это не работает нативно в html. Данный "компонент - директива" исправляет этот недостаток.

Пример использования

<div class="grid" style="
    width: 400px;
    height: 200px;
    background-color: aliceblue;
    position: relative;"
    ap-grid=""
    grid-cols="50px, 100px, 30%, 30%, 40%, auto" 
    grid-rows="50px, 100px, 1em ,30%, 70%" 
    >

    <!-- первый блок -->
    <div    ap-gridblock="1,1,4,2"  
            style="background-color: brown;"
            onclick="alert('block_1')"  >
    </div>
    <!-- второй блок -->
    <div    ap-gridblock="4,2,5,2"  
            onclick="alert('block_2')"  
            style="background-color: aquamarine;"
            >
    </div>
</div>

Здесь задан грид, которому заданы извне размеры 400px X 200px.

Заданы линии / сетка.

• Столбцы : "50px, 100px, 30%, 30%, 40%, auto".
• Строки : "50px, 100px, 1em ,30%, 70%".

Некоторые в абсолютных единицах, некоторые в относительных (смешивать нельзя).

В этом гриде есть два блока.

• Первый блок начинается в ячейке 1,1 и меет ширину 4 столбца и высоту 2 сроки.
• второй блок начинается в ячейке 4,2 и имеет ширину 5столбцов и высоту 2 строки.

Сетка распологает их в зависимости от занимаемой площади.

Грид может содержать как обычную разметку так и блоки - система позволяет смешивать разные способы верстки.

Результат следующий :

Вы можете потаскать и поизменять размер сетки. Это рботает очень быстро и не нагружает браузер.

Таким методом возможно самое немыслимое нагромождение компонентов и блоков.

Сетки допускают иерархическую вставку друг в друга.

Логика вычисления позиции и ограничения

Будем все рассматривать на примере ширины в столбцах, для строк - все то же самое.

Размеры столбцов и строк могут иметь абсолютные (px,pt,em,in) или относительные размеры (%). Существует также auto размер.

Сначала из общей ширины вычитаются все абсолютные размеры.

Оставшееся пространство распределеяется на относительные доли и auto пропорционально долям. Внимание: это не доля от всей ширины, это доля от оставшейся ширины после вычитания абсолютных и auto.

Auto размер на самом деле по сути своей - имеет абсолютную величину. Эта величина (px) изначально равна нулю. Реальное выражение для всех auto расчитывается в результате решения уравнения.

Размеры распространяются вовнутрь и вовне. Вовнутрь - основной поток вычисления. Вовне - требует JS ресурсов , но иногда без него можно обойтись.

При инициализации сетки считываются все параметры размещения и расчитываются CSS правила для всех блоков внутри. Данный CSS работает далее для расчёта позиций блоков в потоке "вовнутрь".

Планы на будущее

Самый сложный пункт это "авторазмеры".

На данный момент они не работают так как надо, но обязательно будут работать в ближайшее время.

В обычной xaml grid блоки могут тянуть сетку вовне, а не только принимать размеры извне. При этом при изменении размеров блока сетка перерасчитывает во внешнем и внутреннем направлении все позиционирование.

У нас реализована только часть этой логики.

показать линии сетки, чтобы видеть их

Визуальный инструмент для настройки сетки и перетаскивания на неё компонентов