Унифицированная модель событий

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

Основные компоненты модели событий

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

    • target — DOM-элемент, на котором выполняется действие;
    • pointerType — тип указателя (mouse, touch, pen);
    • currentAction — текущее действие (drag, resize, gesture);
    • interacting — флаг, указывающий, происходит ли взаимодействие в данный момент.

  2. Event События Interact.js наследуются от InteractEvent и содержат следующие ключевые свойства:

    • type — тип события (dragstart, dragmove, dragend, resizestart и т.д.);
    • target — элемент, с которым связано событие;
    • currentTarget — элемент, на который слушатель установлен;
    • dx, dy — смещения указателя относительно предыдущего события;
    • pageX, pageY — координаты указателя относительно документа;
    • rect — текущие размеры и положение элемента;
    • deltaTime — время между событиями;
    • pointerType — тип устройства ввода.

  3. Action Действие описывает тип манипуляции, которую пользователь выполняет с элементом:

    • drag — перетаскивание;
    • resize — изменение размера;
    • gesture — мультитач-жесты (например, масштабирование двумя пальцами).

Каждое действие генерирует собственный набор событий, но все они имеют одинаковую структуру, что упрощает обработку в коде.

События и их жизненный цикл

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

  1. start Событие *start инициируется в момент, когда пользователь начинает взаимодействие. Примеры: dragstart, resizestart. Ключевые свойства на этом этапе:

    • pageX, pageY — начальная позиция указателя;
    • rect — начальные размеры элемента;
    • interaction — объект текущего взаимодействия.

  2. move Событие *move срабатывает при каждом изменении позиции указателя во время действия (dragmove, resizemove). Важные параметры:

    • dx, dy — относительные смещения;
    • deltaTime — время между событиями;
    • velocityX, velocityY — скорость перемещения указателя.

  3. end Событие *end фиксирует завершение действия (dragend, resizeend). На этом этапе можно получить:

    • итоговое положение элемента;
    • общую дистанцию перемещения;
    • продолжительность взаимодействия.

Унификация устройств ввода

Interact.js автоматически привязывает события к типу указателя. Вне зависимости от устройства (mouse, touch, pen) события имеют одинаковый интерфейс. Это достигается через:

  • Pointer events — стандартные события браузера (pointerdown, pointermove, pointerup);
  • Touch и Mouse fallback — при отсутствии поддержки Pointer API используются старые события mousedown, mousemove, mouseup и touchstart, touchmove, touchend.

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

Интеграция с drag, resize и gesture

Все действия в Interact.js используют единый обработчик событий, который можно настраивать через цепочку методов:

interact('.draggable')
  .draggable({
    inertia: true,
    modifiers: [interact.modifiers.restrictRect({
      restriction: 'parent'
    })],
    listeners: {
      start(event) { console.log('dragstart', event); },
      move(event) { console.log('dragmove', event.dx, event.dy); },
      end(event) { console.log('dragend', event); }
    }
  });

Преимущество модели: независимо от того, перетаскивается элемент мышью или пальцем, структура объекта event остается одинаковой.

Аналогично реализованы resize и gesture:

interact('.resizable')
  .resizable({
    edges: { left: true, right: true, bottom: true, top: true },
    listeners: {
      start(event) { console.log('resizestart', event.rect); },
      move(event) { console.log('resizemove', event.deltaRect); },
      end(event) { console.log('resizeend'); }
    }
  });

interact('.gesturable')
  .gesturable({
    listeners: {
      start(event) { console.log('gesture start'); },
      move(event) { console.log('scale', event.scale, 'rotation', event.rotation); },
      end(event) { console.log('gesture end'); }
    }
  });

Обработка нескольких указателей

Унифицированная модель позволяет легко работать с мульти-тач событиями. Для каждого указателя создается отдельный объект pointer, а взаимодействие объединяет их в один interaction.

Ключевые свойства для мульти-тач:

  • event.pointers — массив всех активных указателей;
  • event.touches — идентификаторы пальцев;
  • event.scale — масштабирование между пальцами;
  • event.rotation — угол поворота жеста.

События модифицируются через плагины и модификаторы

Interact.js поддерживает модификаторы, которые могут автоматически корректировать события:

  • restrict — ограничение перемещения внутри контейнера;
  • snap — привязка к сетке;
  • invert — зеркальное отражение движения;
  • restrictEdges — ограничение изменения размера.

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

Особенности работы с динамическими элементами

При динамическом создании или удалении элементов Interact.js сохраняет унифицированную модель событий через делегирование:

  • Слушатели можно устанавливать на родительский контейнер;
  • Все события передаются к реальному целевому элементу через event.target;
  • Сохраняются все свойства dx, dy, pointerType, interaction, обеспечивая консистентность.

Преимущества унифицированной модели

  • Консистентность интерфейса для разных устройств ввода;
  • Простая обработка сложных взаимодействий (перетаскивание + масштабирование + вращение);
  • Поддержка мульти-тач и жестов без дополнительных библиотек;
  • Легкость интеграции с модификаторами и плагинами;
  • Возможность работы с динамически изменяемым DOM.

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

Оглавление