Симуляция событий

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

Симуляция используется для:

  • автоматизированного тестирования интерфейсов;
  • программного управления интерфейсными элементами;
  • воспроизведения действий пользователя;
  • синхронизации взаимодействий между несколькими элементами;
  • создания сложных сценариев анимации.

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

Архитектура событий в Interact.js

В основе библиотеки лежит модель взаимодействия, включающая несколько ключевых компонентов.

Основные сущности

Interactable Объект, представляющий DOM-элемент, с которым можно взаимодействовать.

interact('.box')

Interaction Активный процесс взаимодействия: перетаскивание, изменение размера, жест.

Action Тип взаимодействия:

  • drag
  • resize
  • gesture

Event Событие, передаваемое обработчикам (dragmove, resizemove и т.д.).

Поток формирования события

Система обработки событий проходит следующие этапы:

  1. Получение исходного события (pointer / mouse / touch)
  2. Создание или обновление Interaction
  3. Определение типа действия
  4. Вычисление координат
  5. Генерация события InteractEvent
  6. Передача события обработчикам

При симуляции этот поток запускается программно.

Программное создание Interaction

Основной механизм симуляции — создание объекта Interaction через API библиотеки.

const interaction = interact.interactions.new({
  pointerType: 'mouse'
});

Параметры:

Параметр Назначение
pointerType тип указателя
eventTarget целевой DOM-элемент
coords координаты указателя

После создания Interaction можно инициировать действия.

Симуляция начала взаимодействия

Начало взаимодействия соответствует событию:

  • dragstart
  • resizestart
  • gesturestart

Для запуска используется метод start().

Пример симуляции начала перетаскивания

const element = document.querySelector('.box');

const interaction = interact.interactions.new({
  pointerType: 'mouse'
});

interaction.start(
  { name: 'drag' },
  interact(element),
  element
);

Параметры метода:

Параметр Описание
action тип действия
interactable объект interactable
element DOM-элемент

После вызова start() генерируется событие:

dragstart

Симуляция движения (move)

Следующий этап взаимодействия — перемещение указателя. В обычных условиях оно вызывается pointermove.

При симуляции используется метод:

interaction.move()

Пример

interaction.move({
  pageX: 200,
  pageY: 300,
  clientX: 200,
  clientY: 300
});

Передаваемый объект имитирует реальное pointer-событие.

Минимально необходимые свойства:

Свойство Назначение
pageX координата по X
pageY координата по Y
clientX координата внутри viewport
clientY координата внутри viewport

После вызова генерируется событие:

dragmove

Симуляция завершения взаимодействия

Окончание взаимодействия соответствует событию:

dragend

Для завершения используется:

interaction.end();

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

interaction.start(...)
interaction.move(...)
interaction.move(...)
interaction.end()

Полная симуляция drag-события

Пример полного сценария программного перетаскивания элемента.

const element = document.querySelector('.box');

interact(element).draggable({
  listeners: {
    start(event) {
      console.log('dragstart');
    },
    move(event) {
      console.log('dragmove', event.dx, event.dy);
    },
    end(event) {
      console.log('dragend');
    }
  }
});

const interaction = interact.interactions.new({
  pointerType: 'mouse'
});

interaction.start(
  { name: 'drag' },
  interact(element),
  element
);

interaction.move({
  pageX: 100,
  pageY: 100,
  clientX: 100,
  clientY: 100
});

interaction.move({
  pageX: 200,
  pageY: 200,
  clientX: 200,
  clientY: 200
});

interaction.end();

В результате обработчики выполнятся так же, как при реальном перетаскивании.

Симуляция resize

Механизм аналогичен drag, но используется действие resize.

Запуск resize

interaction.start(
  {
    name: 'resize',
    edges: { right: true, bottom: true }
  },
  interact(element),
  element
);

Параметр edges указывает стороны изменения размера.

Движение

interaction.move({
  pageX: 300,
  pageY: 250
});

Сгенерируется событие:

resizemove

Симуляция gesture

Gesture используется для сенсорных жестов (масштабирование, вращение).

Запуск:

interaction.start(
  { name: 'gesture' },
  interact(element),
  element
);

Для симуляции необходимо передавать данные о нескольких указателях.

Пример структуры:

interaction.move({
  touches: [
    { pageX: 100, pageY: 100 },
    { pageX: 200, pageY: 200 }
  ]
});

События:

  • gesturestart
  • gesturemove
  • gestureend

Симуляция pointer-событий

Иногда требуется симулировать базовые pointer-события, на основе которых Interact.js генерирует свои события.

Основные типы:

Событие Назначение
pointerdown начало взаимодействия
pointermove перемещение
pointerup завершение

Пример создания:

const event = new PointerEvent('pointermove', {
  clientX: 150,
  clientY: 200,
  bubbles: true
});

element.dispatchEvent(event);

Interact.js обработает событие и запустит соответствующие действия.

Использование симуляции для тестирования

Симуляция событий часто применяется в автоматизированных тестах интерфейсов.

Типовой сценарий:

  1. создать элемент
  2. активировать Interact.js
  3. симулировать взаимодействие
  4. проверить состояние элемента

Пример:

interaction.start({ name: 'drag' }, interact(element), element);

interaction.move({
  pageX: 400,
  pageY: 300
});

interaction.end();

После выполнения можно проверить позицию:

expect(element.style.transform).toContain('translate');

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

Симуляция может использоваться для создания управляемых анимаций.

Пример: плавное программное перетаскивание.

let x = 0;
let y = 0;

function animate() {
  x += 5;
  y += 3;

  interaction.move({
    pageX: x,
    pageY: y
  });

  if (x < 300) {
    requestAnimationFrame(animate);
  } else {
    interaction.end();
  }
}

Запуск:

interaction.start({ name: 'drag' }, interact(element), element);
animate();

Синхронизация нескольких элементов

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

Пример синхронного перемещения:

function moveAll(x, y) {
  interaction1.move({ pageX: x, pageY: y });
  interaction2.move({ pageX: x, pageY: y });
}

Такая техника применяется в:

  • редакторах интерфейсов
  • графических редакторах
  • системах компоновки

Генерация пользовательских событий InteractEvent

Иногда требуется вручную создать событие InteractEvent.

Минимальная структура:

const event = {
  type: 'dragmove',
  target: element,
  dx: 10,
  dy: 15
};

Передача в обработчики:

interactable.fire(event);

Этот механизм используется для:

  • расширения логики библиотеки
  • создания плагинов
  • интеграции с другими системами событий.

Ограничения симуляции

Несмотря на гибкость, существуют ограничения.

1. Отсутствие настоящего pointerId

Симулируемые события могут не иметь уникального идентификатора указателя.

2. Ограничения браузеров

Некоторые браузеры ограничивают:

  • синтетические pointer-события
  • touch-события

3. Различия в координатах

При симуляции необходимо корректно задавать:

  • pageX
  • pageY
  • clientX
  • clientY

Некорректные значения могут привести к неправильному вычислению смещений.

Отладка симулируемых взаимодействий

Для диагностики используются:

Логирование

interact(element).on('dragmove', event => {
  console.log(event);
});

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

console.log(interaction.interacting());

Просмотр координат

console.log(interaction.coords);

Практические сценарии применения

Интерфейсные редакторы

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

  • drag симуляция
  • resize симуляция

Автоматические демо

Показ возможностей интерфейса без действий пользователя.

Запись и воспроизведение действий

Сценарий:

  1. запись координат
  2. сохранение
  3. воспроизведение через interaction.move().

Ключевые методы API симуляции

Метод Назначение
interactions.new() создание Interaction
interaction.start() запуск действия
interaction.move() генерация движения
interaction.end() завершение действия
interactable.fire() ручная генерация события

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

Оглавление