Инспектирование состояния Grid

Библиотека Muuri предоставляет мощный механизм для создания гибких, динамических сеток, которые можно сортировать, фильтровать и анимировать. Одним из ключевых аспектов работы с сеткой является инспектирование её состояния, что позволяет получать информацию о положении элементов, их видимости, сортировке и активности.

Получение экземпляра Grid

Для начала необходимо иметь экземпляр сетки. Создание Grid осуществляется через конструктор:

const grid = new Muuri('.grid', {
  dragEnabled: true,
  layout: {
    rounding: false
  }
});

Экземпляр grid становится главным инструментом для инспекции и управления состоянием.

Методы получения состояния элементов

  1. grid.getItems() – возвращает массив всех элементов сетки в виде объектов Item. Каждый Item содержит информацию о DOM-элементе и текущем положении в сетке.
const items = grid.getItems();
console.log(items.length); // количество элементов
  1. item.getElement() – возвращает оригинальный DOM-элемент элемента Item.
items.forEach(item => {
  console.log(item.getElement().textContent);
});
  1. item.getId() – уникальный идентификатор элемента в сетке. Полезно для сопоставления с внешними данными или сохранения состояния.
const firstItemId = items[0].getId();
  1. item.isActive() – проверяет, активен ли элемент. В Muuri активность влияет на визуальное отображение и участие в сортировке.
if (items[0].isActive()) {
  console.log('Элемент активен');
}
  1. item.isVisible() – возвращает true, если элемент видим после применения фильтров или скрытия.
console.log(items.filter(item => item.isVisible()).length);

Получение положения элементов

Muuri хранит текущие координаты каждого элемента внутри сетки. Для получения этих данных используются методы item.getPosition() и item.getWidth()/getHeight():

items.forEach(item => {
  const pos = item.getPosition();
  console.log(`Элемент #${item.getId()}: x=${pos.left}, y=${pos.top}`);
});

Важно: координаты учитывают текущую трансформацию элементов в DOM, что позволяет синхронизировать внешние скрипты с визуальным состоянием сетки.

Отслеживание изменений состояния

Muuri поддерживает события, которые позволяют динамически отслеживать изменения:

  • layoutStart / layoutEnd – начало и окончание перерасчета сетки.
  • filter / sort – изменения видимости или порядка элементов.
  • move / dragStart / dragEnd – перемещения элементов или начало/конец перетаскивания.
grid.on('layoutEnd', () => {
  console.log('Сетка обновлена');
});

grid.on('filter', (items) => {
  console.log(`Видимыми стали ${items.length} элементов`);
});

Использование событий позволяет всегда иметь актуальную информацию о состоянии Grid и реагировать на изменения без необходимости вручную опрашивать элементы.

Получение состояния всей сетки

Для анализа состояния Grid целиком используют комбинацию методов getItems(), isActive(), isVisible(), а также координат элементов:

const gridState = grid.getItems().map(item => ({
  id: item.getId(),
  visible: item.isVisible(),
  active: item.isActive(),
  position: item.getPosition()
}));

console.table(gridState);

Такой подход обеспечивает полную картину состояния сетки, включая видимость, активность и расположение каждого элемента.

Сравнение текущего и предыдущего состояния

Для реализации сложных логик, например анимации или синхронизации с внешним хранилищем, удобно сохранять снимки состояния и сравнивать их с текущим состоянием:

const previousState = grid.getItems().map(item => item.getId());

grid.on('layoutEnd', () => {
  const currentState = grid.getItems().map(item => item.getId());
  if (previousState.join() !== currentState.join()) {
    console.log('Порядок элементов изменился');
  }
});

Инспекция групп элементов

Muuri позволяет группировать элементы с помощью фильтров. Для получения состояния конкретной группы можно использовать grid.getItems(filter):

const visibleItems = grid.getItems(item => item.isVisible());
console.log(`Видимых элементов: ${visibleItems.length}`);

Фильт может быть любой функцией, возвращающей true для элементов, которые нужно включить в результат.

Практические советы

  • Использовать события для реагирования на изменения состояния вместо частых вызовов getItems().
  • Сохранять ID элементов, а не сами DOM-элементы, для удобного восстановления порядка или фильтрации.
  • Для сложных интерфейсов объединять позиционные данные и видимость элементов для точного управления анимациями и пользовательским взаимодействием.

Инспектирование состояния Grid в Muuri является фундаментальной частью построения динамических интерфейсов, позволяя получать детальную информацию о каждом элементе и всей сетке, обеспечивая гибкое управление и синхронизацию с другими компонентами приложения.

Оглавление