Хуки и middleware

Muuri — это мощная библиотека для организации сеток и управления элементами в интерфейсе с поддержкой drag-and-drop, фильтрации, сортировки и анимации. Одним из ключевых инструментов расширения функционала Muuri являются хуки (hooks) и middleware, которые позволяют вмешиваться в жизненный цикл сетки и элементов, модифицировать поведение по своему усмотрению и интегрировать кастомную логику.

Хуки Muuri

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

  • Отслеживать действия пользователя;
  • Модифицировать стандартное поведение Muuri;
  • Добавлять дополнительную логику на этапе анимаций или перестановок элементов.

Основные события, доступные через хуки

  1. dragStart — срабатывает в момент начала перетаскивания элемента. Пример:
grid.on('dragStart', (item) => {
  console.log('Начато перетаскивание:', item.getElement());
  item.getElement().style.border = '2px solid blue';
});
  1. dragReleaseEnd — вызывается после завершения перетаскивания, когда элемент уже возвращён на сетку или переставлен.
  2. layoutStart и layoutEnd — хуки, позволяющие отслеживать начало и конец перестановки элементов сетки. Полезны для синхронизации с анимацией или логикой обновления данных.

Регистрация хуков

Хуки регистрируются через метод on экземпляра сетки:

grid.on('eventName', callback);

Где eventName — имя события, а callback — функция, которая принимает объект item или items в зависимости от события. В Muuri доступно более 30 различных событий, включая add, remove, show, hide, filter.

Middleware в Muuri

Middleware представляет собой промежуточный слой обработки, который может перехватывать действия сетки и элементов, модифицировать их или отменять. Это особенно полезно для реализации кастомной логики, например:

  • Ограничение перемещения элемента по сетке;
  • Добавление пользовательских эффектов при перестановке;
  • Валидация перед добавлением или удалением элементов.

Структура middleware

Middleware в Muuri создаются как функции, принимающие объект state и объект next, который вызывает следующий middleware в цепочке.

function customMiddleware(state, next) {
  if (state.action === 'drag') {
    const item = state.item;
    // Ограничение движения по оси X
    const pos = state.position;
    if (pos.x < 0) pos.x = 0;
  }
  next(state);
}

grid.use(customMiddleware);
  • state — объект с текущим состоянием действия, например, item, position, action.
  • next — функция, вызывающая следующий middleware, что позволяет строить цепочку обработки.

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

  1. Ограничение перемещения
grid.use((state, next) => {
  if (state.action === 'drag') {
    const maxY = 500;
    if (state.position.y > maxY) state.position.y = maxY;
  }
  next(state);
});
  1. Логирование действий
grid.use((state, next) => {
  console.log('Middleware срабатывает на действие:', state.action);
  next(state);
});
  1. Анимация на основе позиции
grid.use((state, next) => {
  if (state.action === 'layout') {
    state.items.forEach(item => {
      const el = item.getElement();
      el.style.transition = 'transform 0.3s ease';
    });
  }
  next(state);
});

Различия хуков и middleware

Хуки Middleware
Срабатывают на событие Перехватывают действие
Не могут блокировать действия Могут модифицировать или отменять действия
Прямо привязаны к событию сетки Работают в цепочке обработки
Используются для реакции на события Используются для изменения поведения и логики сетки

Советы по использованию

  • Для сложной логики комбинируют хуки и middleware. Middleware изменяет поведение, хуки фиксируют события.
  • Middleware удобно использовать для ограничения и модификации движений элементов.
  • Хуки лучше применять для логирования, анимаций и интеграции с другими библиотеками.
  • Всегда вызывать next(state) в middleware, чтобы цепочка действий продолжалась.

Заключение по практике

Muuri предоставляет гибкую систему событий и middleware, которая позволяет полностью контролировать сетку. В реальных проектах это используется для:

  • Реализации драг-н-дроп интерфейсов с ограничениями;
  • Настройки фильтрации и сортировки с анимацией;
  • Интеграции сетки с внешними системами (например, серверная синхронизация).

Эффективная работа с хуками и middleware превращает стандартную сетку Muuri в мощный инструмент для построения интерактивных и отзывчивых интерфейсов.

Оглавление