Архитектура библиотеки

Interact.js — это мощная JavaScript-библиотека для работы с интерактивными элементами на веб-странице, включающая поддержку drag-and-drop, resizable и gesturable элементов. Основная архитектура библиотеки построена вокруг событийной модели и модульного подхода, что позволяет создавать сложные интерфейсы с высокой гибкостью.

Основные компоненты

1. Interact Object

Главный объект библиотеки создается через функцию interact(target). Этот объект служит точкой входа для всех операций с конкретным элементом или группой элементов. Через него реализуются методы для настройки поведения элемента:

  • draggable() — делает элемент перетаскиваемым.
  • resizable() — позволяет изменять размеры элемента.
  • gesturable() — обеспечивает обработку мультитач-жестов.
  • on(event, listener) — подписка на события.

Пример создания базового draggable элемента:

interact('.draggable')
  .draggable({
    inertia: true,
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: 'parent',
        endOnly: true
      })
    ],
    listeners: {
      move(event) {
        const target = event.target;
        target.style.transform = `translate(${event.pageX}px, ${event.pageY}px)`;
      }
    }
  });

Здесь interact.modifiers.restrictRect — это модуль, который ограничивает движение элемента в пределах родительского контейнера.

2. Событийная модель

Interact.js использует собственную событийную систему, отделенную от стандартных DOM-событий. Это позволяет:

  • Обрабатывать drag, resize, gesture события отдельно от других событий страницы.
  • Получать расширенные данные о взаимодействии, включая deltaX, deltaY, velocity, angle жеста.
  • Управлять несколькими взаимодействиями одновременно через interaction context.

Ключевые события:

  • dragstart, dragmove, dragend
  • resizestart, resizemove, resizeend
  • gesturestart, gesturemove, gestureend

Каждое событие сопровождается объектом event, содержащим:

  • target — элемент, с которым взаимодействуют
  • interaction — внутренний объект, управляющий состоянием текущего взаимодействия
  • pageX, pageY — координаты курсора
  • deltaX, deltaY — изменение координат с момента последнего события

3. Interaction

Interaction — это внутренний объект состояния, отвечающий за одно текущее взаимодействие пользователя с элементом. Он хранит:

  • Ссылку на целевой элемент (target).
  • Состояние перетаскивания, изменения размера или жеста.
  • Данные о предыдущих позициях, скорости, направлении движения.
  • Активные модификаторы и их влияние на итоговое поведение элемента.

Interaction создается автоматически при инициализации события через interact(target) и управляется библиотекой.

4. Модификаторы (Modifiers)

Модификаторы позволяют добавлять ограничения и правила к взаимодействиям:

  • restrictRect — ограничение движения в пределах заданного прямоугольника.
  • snap — привязка элемента к сетке или определенным координатам.
  • aspectRatio — сохранение пропорций при изменении размеров.
  • restrictEdges — ограничение движения по границам контейнера с учетом размеров элемента.

Модификаторы применяются через массив modifiers при настройке draggable или resizable:

modifiers: [
  interact.modifiers.snap({
    targets: [interact.snappers.grid({ x: 50, y: 50 })],
    range: Infinity
  })
]

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

5. Плагины и расширяемость

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

  • Подключать пользовательские модификаторы через interact.modifiers.
  • Расширять события с помощью on() и off().
  • Встраивать новые типы взаимодействий, например, кастомные жесты.

Такой модульный подход делает библиотеку легко адаптируемой для сложных веб-интерфейсов, где нужно сочетание drag, resize и multitouch.

6. Координатная система и трансформации

Interact.js работает с локальными и глобальными координатами:

  • pageX и pageY — абсолютные координаты относительно страницы.
  • clientX и clientY — координаты относительно окна просмотра.
  • deltaX и deltaY — относительное смещение между событиями.

Все трансформации элементов (translate, scale, rotate) можно применять через CSS transform, что обеспечивает высокую производительность и плавные анимации.

7. Поддержка многопоточности взаимодействий

Библиотека может обрабатывать несколько взаимодействий одновременно (например, несколько пальцев на сенсорном экране). Для этого:

  • Каждое взаимодействие имеет собственный объект Interaction.
  • Взаимодействия не конфликтуют друг с другом благодаря независимым состояниям и модификаторам.
  • Поддерживается управление событиями жестов, где каждый палец может влиять на масштаб и вращение одновременно.

8. Архитектура обработки событий

Последовательность обработки событий в Interact.js выглядит так:

  1. Событие DOM (pointerdown, touchstart, mousedown) инициирует создание Interaction.
  2. Interaction фиксирует цель, тип взаимодействия и начальные координаты.
  3. Каждое движение (pointermove) проходит через модификаторы.
  4. Итоговое смещение применяется к элементу через CSS transform.
  5. Завершение взаимодействия (pointerup) вызывает событие dragend, resizeend или gestureend.

Благодаря этой цепочке, разработчик получает точный контроль над поведением элемента, не вмешиваясь в низкоуровневые события DOM.

Interact.js сочетает событийную модель, модульность модификаторов и объект Interaction, обеспечивая гибкость и расширяемость. Архитектура библиотеки позволяет строить интерактивные интерфейсы любого уровня сложности с минимальными усилиями и высокой производительностью.

Оглавление