Структура Item

Библиотека Muuri управляет сеткой DOM-элементов, каждый из которых представлен объектом Item. Item — это внутренний объект Muuri, который инкапсулирует:

  • ссылку на DOM-элемент
  • состояние элемента
  • размеры
  • позицию в сетке
  • анимации
  • логику сортировки, фильтрации и перетаскивания

Каждый элемент сетки автоматически превращается в экземпляр Item при инициализации Muuri.

const grid = new Muuri('.grid');

Если внутри контейнера .grid находятся элементы .item, для каждого из них будет создан объект Item.

Схематически структура выглядит следующим образом:

Grid
 ├── Item
 │    ├── DOM Element
 │    ├── Layout data
 │    ├── Position
 │    ├── Visibility state
 │    ├── Drag state
 │    └── Animation handlers
 ├── Item
 └── Item

Grid управляет коллекцией Item, а Item отвечает за собственное состояние.

DOM-структура элемента

Muuri не требует сложной HTML-разметки. Минимальная структура:

<div class="grid">
  <div class="item">
    <div class="item-content">
      Контент
    </div>
  </div>
</div>

Распространённая структура:

grid
 └── item
      └── item-content

Причина разделения

  • item — контейнер, которым управляет Muuri
  • item-content — содержимое, которое можно стилизовать и анимировать независимо

Muuri изменяет CSS-свойства контейнера .item, например:

  • transform
  • left / top
  • opacity

Это обеспечивает независимость визуального контента от позиционирования.

Внутренний объект Item

Каждый элемент сетки представлен экземпляром класса Item.

Получение всех элементов:

const items = grid.getItems();

Получение первого элемента:

const item = grid.getItems()[0];

Объект Item содержит ряд внутренних данных.

Основные свойства

Свойство Назначение
_element DOM-элемент
_grid ссылка на родительский Grid
_width ширина
_height высота
_left координата X
_top координата Y
_isActive участвует ли элемент в layout
_isVisible отображается ли элемент
_isDragging находится ли в состоянии drag

Часть этих свойств является внутренней и не предназначена для прямого изменения.

Связь Item с DOM-элементом

Каждый Item напрямую связан с DOM-узлом.

Получение DOM-элемента:

item.getElement();

Пример:

const element = item.getElement();
console.log(element);

Этот метод используется, когда необходимо изменить содержимое или стили элемента.

Позиционирование Item

Muuri использует CSS transforms для перемещения элементов.

Типичное состояние элемента:

.item {
  position: absolute;
  transform: translate(120px, 200px);
}

Координаты хранятся внутри Item:

Item
 ├── x (left)
 └── y (top)

Muuri вычисляет:

  1. размер элемента
  2. доступные позиции в сетке
  3. оптимальное размещение

После расчёта применяется transform.

Размеры элемента

Размеры элемента определяются на основе DOM.

Muuri вычисляет:

  • ширину
  • высоту
  • margin

Размеры используются для построения layout.

Получение размеров:

item.getWidth();
item.getHeight();

Пример:

const width = item.getWidth();
const height = item.getHeight();

Эти данные используются при:

  • перестроении сетки
  • drag-операциях
  • сортировке

Состояние активности

Элемент может быть активным или неактивным.

Активный элемент участвует в layout.

Неактивный:

  • исключён из сетки
  • не влияет на расположение других элементов

Проверка:

item.isActive();

Muuri использует это состояние при:

  • фильтрации
  • скрытии элементов
  • удалении

Видимость элемента

Item может быть:

  • видимым
  • скрытым

Скрытие элемента:

grid.hide(item);

Показ:

grid.show(item);

Проверка состояния:

item.isVisible();

Muuri использует анимацию изменения прозрачности:

opacity: 1 → 0

После скрытия элемент может:

  • исключаться из layout
  • оставаться в DOM

Состояние перемещения (Drag)

Если включена функция drag, Item получает дополнительные состояния.

Включение drag:

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

Во время перетаскивания Item содержит:

Item
 ├── isDragging
 ├── dragStartPosition
 ├── dragCurrentPosition
 └── dragContainer

Метод проверки:

item.isDragging();

Muuri обновляет позицию элемента в реальном времени.

Индекс элемента

Каждый Item имеет позицию в массиве элементов Grid.

Получение индекса:

item.getIndex();

Пример:

const index = item.getIndex();

Индекс используется для:

  • сортировки
  • перестановки элементов
  • вычисления порядка отображения

Метаданные элемента

Muuri позволяет хранить пользовательские данные в DOM.

Пример:

<div class="item" data-category="fruit">

Доступ к данным:

const element = item.getElement();
const category = element.dataset.category;

Эти данные часто используются при фильтрации:

grid.filter(item => {
  return item.getElement().dataset.category === 'fruit';
});

Жизненный цикл Item

Жизненный цикл элемента включает несколько этапов.

1. Создание

При инициализации Grid:

const grid = new Muuri('.grid');

Каждый DOM-элемент превращается в Item.

2. Измерение

Muuri вычисляет:

  • width
  • height
  • margins

3. Layout

Алгоритм размещает элементы.

Элемент получает координаты.

4. Анимация

Muuri применяет transform и transition.

5. Обновление

При изменениях:

  • сортировка
  • фильтрация
  • drag
  • resize

Muuri пересчитывает layout.

6. Удаление

Удаление элемента:

grid.remove(item);

Item удаляется из:

  • массива элементов
  • DOM

Коллекция элементов Grid

Grid управляет массивом Item.

Получение:

grid.getItems();

Возвращается массив:

[
 Item,
 Item,
 Item
]

Работа с элементами:

const items = grid.getItems();

items.forEach(item => {
  console.log(item.getElement());
});

Взаимодействие Item и Layout Engine

Layout-движок Muuri использует данные Item:

Item
 ├── width
 ├── height
 ├── margin
 ├── position
 └── visibility

Алгоритм размещения:

  1. выбирается следующий элемент
  2. вычисляется свободное место
  3. определяется позиция
  4. применяется transform

Это позволяет создавать плотные и адаптивные сетки.

Item и анимации

Muuri использует встроенную систему анимации.

Каждый Item может анимировать:

  • позицию
  • прозрачность
  • масштаб

Пример анимации layout:

grid.layout({
  duration: 300,
  easing: 'ease'
});

Во время layout каждый Item получает собственную анимацию transform.

Внутренние контейнеры Item

Muuri создаёт вспомогательные контейнеры для drag-операций.

Структура может выглядеть так:

grid
 └── item
      └── item-content

При drag элемент может временно перемещаться в отдельный контейнер.

dragContainer
 └── item

Это предотвращает проблемы с overflow и stacking.

Работа с Item через API Grid

Большинство операций выполняется через Grid.

Получение Item из DOM-элемента

const item = grid.getItem(element);

Добавление элемента

grid.add(element);

Muuri создаст новый Item.

Удаление

grid.remove(item);

Сортировка

grid.sort((a, b) => {
  return a.getWidth() - b.getWidth();
});

Кэширование данных

Muuri кэширует некоторые данные Item:

  • размеры
  • позиции
  • состояние

Это повышает производительность при частых layout-операциях.

Обновление кэша:

grid.refreshItems();

После этого Muuri пересчитает размеры.

Item как абстракция над DOM

Item выполняет роль адаптера между DOM и алгоритмом layout.

DOM Element
     ↓
   Item
     ↓
  Grid Layout

Item изолирует:

  • DOM-операции
  • вычисления размеров
  • состояние элемента

Благодаря этому Muuri может:

  • эффективно управлять сотнями элементов
  • анимировать изменения
  • поддерживать drag-and-drop
  • динамически перестраивать сетку.
Оглавление