Настройка изменения размеров

Gridstack.js предоставляет гибкую систему для построения интерактивных сеток с возможностью перетаскивания и изменения размеров виджетов. Контроль над изменением размеров элементов является одной из ключевых возможностей библиотеки и требует понимания параметров конфигурации, событий и методов API.

Основные параметры изменения размеров

Изменение размеров контролируется с помощью опции resizable. Она может быть задана при инициализации сетки или при добавлении отдельных элементов.

const grid = GridStack.init({
  resizable: {
    handles: 'se, sw, ne, nw', // углы, за которые можно менять размер
    autoHide: true             // скрывать ручки изменения размеров до наведения
  }
});

Ключевые моменты:

  • handles – указывает, с каких сторон или углов можно изменять размер элемента (n, e, s, w, ne, nw, se, sw).
  • autoHide – если true, элементы управления изменением размеров будут скрыты до наведения курсора на виджет.
  • minWidth / minHeight, maxWidth / maxHeight – позволяют задавать минимальные и максимальные размеры виджетов в единицах сетки (grid units). Например:
grid.addWidget({
  w: 3, h: 2,
  minW: 2, minH: 1,
  maxW: 6, maxH: 4
});

Различие глобальных и локальных настроек

Gridstack.js позволяет задавать опции изменения размеров на уровне всей сетки и для отдельных виджетов. Глобальная настройка применяет один стиль ко всем элементам:

GridStack.init({
  resizable: { handles: 'se', autoHide: false }
});

Для отдельного элемента можно переопределить:

const node = grid.addWidget({ w: 2, h: 2 });
grid.resizable(node, {
  handles: 'ne, sw',
  autoHide: true
});

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

Работа с событиями изменения размеров

Gridstack.js генерирует несколько событий, связанных с изменением размеров. Наиболее важные:

  • resizestart – запускается при начале изменения размеров.
  • resize – вызывается в процессе изменения размеров.
  • resizestop – происходит после завершения изменения размеров.

Пример подписки на события:

grid.on('resizestart', (event, element) => {
  console.log('Начало изменения размеров:', element);
});

grid.on('resize', (event, element) => {
  console.log('Изменение размеров:', element);
});

grid.on('resizestop', (event, element) => {
  console.log('Завершение изменения размеров:', element);
});

Совет: для точного контроля за поведением виджетов можно комбинировать события с методами API для программного ограничения размеров или динамического изменения других параметров сетки.

Динамическое включение и отключение изменения размеров

С помощью методов resizable и disableResize можно управлять возможностью изменения размеров на лету:

const node = grid.addWidget({ w: 3, h: 2 });

// отключить изменение размеров
grid.disableResize(node);

// включить изменение размеров с настройками
grid.resizable(node, { handles: 'se', autoHide: false });

Метод disableResize удобно использовать при создании виджетов с фиксированным размером или при временном блокировании интерфейса.

Ограничение размеров и пропорций

Gridstack.js позволяет задавать жесткие ограничения для виджетов. Помимо minW, minH, maxW, maxH можно использовать связь ширины и высоты, чтобы сохранить пропорции. Это достигается через события:

grid.on('resize', (event, element) => {
  const node = element.gridstackNode;
  // сохраняем пропорции 2:1
  node.h = Math.round(node.w / 2);
});

Таким образом, можно реализовать виджеты с фиксированными пропорциями или динамически подгонять размеры под контент.

Использование CSS для ручек изменения размеров

Для кастомизации внешнего вида ручек можно применять CSS-селекторы .ui-resizable-handle. Gridstack добавляет классы для каждого направления: .ui-resizable-se, .ui-resizable-nw и т.д.

Пример стилизации:

.ui-resizable-se {
  background-color: #007BFF;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

Это позволяет создавать виджеты с визуально аккуратными и заметными точками изменения размеров.

Интеграция с другими функциями Gridstack

Изменение размеров тесно связано с:

  • Drag & Drop – изменение размеров может сдвигать соседние виджеты.
  • Dynamic Grid – добавление новых элементов после изменения размеров требует пересчета сетки.
  • Nested Grids – вложенные сетки наследуют возможность изменения размеров, но могут иметь свои ограничения.

Использование этих возможностей совместно обеспечивает создание сложных, интерактивных панелей и дашбордов с контролируемым поведением виджетов.

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

Оглавление