Контекст взаимодействия

Библиотека Interact.js предназначена для управления интерактивными событиями на элементах DOM: перемещением, масштабированием, поворотом и перетаскиванием. Центральным понятием является контекст взаимодействия, который обеспечивает отслеживание состояния конкретного взаимодействия пользователя с элементом, включая позицию, движение, касания и ограничения.

Объект Interaction

Объект Interaction представляет единичное взаимодействие с элементом. Он создаётся автоматически при начале события (например, dragstart) и содержит всю информацию о текущем процессе. Основные свойства:

  • element — DOM-узел, с которым осуществляется взаимодействие.

  • interactionType — тип текущего взаимодействия (drag, resize, gesture).

  • pointerType — тип указателя (mouse, touch, pen).

  • startCoords, currentCoords, deltaCoords — координаты взаимодействия:

    • startCoords — координаты точки начала взаимодействия.
    • currentCoords — текущие координаты.
    • deltaCoords — разница между предыдущим и текущим положением.

  • edges — объект, определяющий активные края при ресайзе (top, left, bottom, right).

Пример инициализации взаимодействия:

interact('.draggable')
  .draggable({
    listeners: {
      start(event) {
        console.log(event.interaction.startCoords); 
      },
      move(event) {
        console.log(event.interaction.deltaCoords);
      },
      end(event) {
        console.log('Interaction ended');
      }
    }
  });

Этапы взаимодействия

Interact.js структурирует процесс взаимодействия в последовательность этапов:

  1. start — фиксируется инициирование взаимодействия, создается объект Interaction.
  2. move — отслеживается движение указателя, изменения координат, границ и ограничений.
  3. end — завершение взаимодействия, освобождение ресурсов.
  4. inertia (необязательно) — обработка инерции при отпускании указателя.

Каждый этап получает объект события (event), содержащий interaction и все сопутствующие параметры: координаты, целевой элемент, смещение и метаданные.

Ограничения и контроль

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

  • restrict — ограничивает движение элемента в пределах контейнера или заданной области.
interact('.draggable')
  .draggable({
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: '.container',
        endOnly: true
      })
    ]
  });
  • snap — привязка к сетке или точкам.
interact('.draggable')
  .draggable({
    modifiers: [
      interact.modifiers.snap({
        targets: [interact.createSnapGrid({ x: 50, y: 50 })],
        range: Infinity,
        relativePoints: [{ x: 0, y: 0 }]
      })
    ]
  });
  • inertia — плавное завершение движения после отпускания указателя.
interact('.draggable')
  .draggable({
    inertia: true
  });

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

Множественные взаимодействия

Interact.js поддерживает многопользовательские и многоточечные взаимодействия. Каждый Interaction отслеживает отдельный указатель (мышь или палец). Для работы с мультитач событиями используются:

  • event.pointers — массив всех активных указателей.
  • interaction.pointerIsDown(pointer) — проверка, активен ли конкретный указатель.
  • interaction.updatePointer(pointer) — обновление данных о движении.

Пример обработки мультитач жестов:

interact('.gesture-target')
  .gesturable({
    listeners: {
      start(event) {
        console.log('Gesture started', event.pointers.length);
      },
      move(event) {
        console.log('Scale:', event.scale, 'Angle:', event.angle);
      }
    }
  });

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

Внутренние состояния Interaction

Объект Interaction хранит следующие ключевые внутренние состояния:

  • interacting — булевое значение, указывающее на активность взаимодействия.
  • prepared — подготовка взаимодействия, проверка условий (например, начальное касание).
  • preEnd — состояние перед завершением, используется для расчёта инерции и ограничения движения.
  • rect — прямоугольник элемента, включая текущее смещение и размеры.

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

Расширение и кастомизация

Interact.js позволяет расширять контекст взаимодействия через пользовательские modifiers и actions:

  • Custom Modifiers — функции, которые получают interaction и текущие координаты и возвращают откорректированные значения.
  • Custom Actions — создание новых типов взаимодействий поверх существующих API (drag, resize, gesture).

Пример кастомного модификатора:

function limitVertical(interaction, coords) {
  coords.y = Math.max(0, Math.min(coords.y, 300));
  return coords;
}

interact('.draggable')
  .draggable({
    modifiers: [
      { enabled: true, methods: { set: limitVertical } }
    ]
  });

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

Взаимодействие с DOM и событиями

Контекст взаимодействия тесно связан с DOM:

  • event.target — элемент, инициировавший событие.
  • event.currentTarget — элемент, к которому прикреплён слушатель.
  • interaction.element — DOM-узел, на котором происходит активное взаимодействие.
  • interaction.rect и interaction.coords — динамически обновляются при изменении позиции и размеров элемента.

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

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

Оглавление