Минимальные и максимальные размеры

Gridstack.js предоставляет возможность управлять размерами виджетов на сетке через установку минимальных и максимальных значений ширины и высоты. Это критично для обеспечения адаптивности интерфейса и предотвращения непредсказуемого поведения при изменении размеров виджетов пользователем.

Установка минимальных размеров

Минимальные размеры (minWidth и minHeight) определяют, каких размеров не может достигнуть элемент при перетаскивании или изменении размера. Например, если виджет должен оставаться читаемым, можно ограничить его минимальную ширину и высоту:

const grid = GridStack.init({
  minWidth: 1,  // минимальная ширина всех виджетов в ячейках
  minHeight: 1  // минимальная высота всех виджетов в ячейках
});

grid.addWidget({
  x: 0,
  y: 0,
  w: 3,
  h: 2,
  minW: 2,
  minH: 1
});

Особенности:

minW и minH задаются в ячейках сетки, а не в пикселях.
Если виджет имеет индивидуальные значения minW/minH, они переопределяют глобальные настройки сетки.
Значения должны быть больше 0 и меньше либо равны maxW/maxH.

Установка максимальных размеров

Максимальные размеры (maxWidth и maxHeight) ограничивают рост виджетов. Это особенно важно для элементов, которые должны оставаться компактными или не перекрывать соседние виджеты при растяжении:

grid.addWidget({
  x: 0,
  y: 0,
  w: 2,
  h: 2,
  maxW: 4,
  maxH: 3
});

Особенности:

Если пользователь пытается увеличить виджет за пределы maxW или maxH, Gridstack.js автоматически фиксирует размер.
Значения должны быть больше либо равны minW/minH.
Максимальные размеры позволяют сохранять гармонию сетки при динамическом добавлении или перетаскивании элементов.

Гибридное управление размерами

Gridstack.js позволяет комбинировать глобальные и локальные ограничения:

Глобальные (minWidth, minHeight, maxWidth, maxHeight) применяются ко всем виджетам по умолчанию.
Локальные (minW, minH, maxW, maxH) задаются для отдельного виджета при добавлении или динамически через API.

Пример динамического изменения размеров после инициализации:

const widget = grid.addWidget({
  x: 1,
  y: 1,
  w: 3,
  h: 2
});

// Ограничение размеров после добавления
widget.el.setAttribute('gs-min-w', 2);
widget.el.setAttribute('gs-max-w', 5);
grid.update(widget.el);

Особенности обновления:

Изменение атрибутов gs-min-* и gs-max-* напрямую на элементе требует вызова grid.update() для применения.
Можно динамически адаптировать ограничения в зависимости от состояния интерфейса.

Взаимодействие с draggable и resizable

Gridstack.js интегрирует размеры с перетаскиванием и изменением размеров:

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

Пример использования с включенным ресайзом:

grid.addWidget({
  x: 0,
  y: 0,
  w: 3,
  h: 2,
  minW: 2,
  minH: 1,
  maxW: 4,
  maxH: 3,
  resizable: { handles: 'all' }
});

При попытке увеличить ширину до 5 ячеек Gridstack.js заставит оставаться на 4.
При попытке уменьшить высоту ниже 1 ячейки – высота останется равной 1.

Важные нюансы

Конфликты размеров: если соседние виджеты ограничивают расширение, Gridstack.js пытается найти ближайшее допустимое значение. Если оно недостижимо, изменение размера может быть заблокировано.
Мобильная адаптивность: минимальные и максимальные размеры могут быть переопределены при изменении column или при адаптивной сетке.
CSS-ограничения: размеры в ячейках соотносятся с CSS grid-auto-rows и grid-column/grid-row. Неправильное определение размеров CSS может приводить к визуальным несоответствиям.

API для работы с ограничениями размеров

Gridstack.js предоставляет методы для получения и установки ограничений:

getNode(el) – возвращает объект виджета с minW, minH, maxW, maxH.
update(el, opts) – обновляет размеры и ограничения виджета.
makeWidget(el, opts) – добавляет новые ограничения при создании элемента.

Пример изменения ограничений через API:

let node = grid.getNode(widget.el);
node.minW = 2;
node.maxW = 6;
grid.update(widget.el, node);