Объект action

Объект action в библиотеке Interact.js отвечает за управление поведением интерактивных элементов при выполнении таких действий, как drag, resize и gesture. Он является ключевым компонентом, определяющим, как именно элемент будет реагировать на пользовательские события.

В Interact.js каждый интерактивный объект (interactable) может быть настроен на выполнение определённых действий через методы .draggable(), .resizable() и .gesturable(). За обработку этих действий отвечает внутренний объект action, который хранит текущее состояние взаимодействия и параметры поведения.

Структура объекта action

Основные свойства объекта action:

  • name – строка, указывающая тип действия ('drag', 'resize' или 'gesture').

  • axis – ограничение движения по осям ('x', 'y' или 'xy').

  • edges – объект, содержащий информацию о границах для ресайза. Например:

    edges: { top: true, left: false, bottom: false, right: true }

  • rect – текущий прямоугольник элемента (getBoundingClientRect()), используемый для расчёта перемещений и ограничений.

  • prepared – внутренний флаг, указывающий, что действие готово к исполнению.

  • starting – данные о начальной позиции действия, включая координаты и размеры элемента.

  • delta – объект, содержащий изменения по осям x и y за текущий шаг взаимодействия.

  • pointer – координаты указателя (мышь, тач), связанные с действием.

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

Методы объекта action

Хотя большинство взаимодействий с action осуществляется через события Interact.js (onmove, onstart, onend), объект предоставляет внутренние методы для управления состоянием действия:

  1. start – инициализация действия на элементе. Заполняет starting, rect и другие ключевые свойства.
  2. update – пересчёт текущих координат и изменения положения элемента на основе движения указателя.
  3. stop – завершение действия, очистка временных данных и возврат объекта в состояние ожидания.
  4. clone – создание копии текущего состояния действия, используется для сложных сценариев с анимацией или отменой.

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

Взаимодействие с interactable

Каждое действие привязано к интерактивному элементу через объект interactable. Взаимодействие выглядит следующим образом:

interact('.draggable')
  .draggable({
    onstart(event) {
      const action = event.interaction.action;
      console.log(action.name); // 'drag'
      console.log(action.starting); // начальные координаты
    },
    onmove(event) {
      const action = event.interaction.action;
      action.delta.x += event.dx;
      action.delta.y += event.dy;
    },
    onend(event) {
      const action = event.interaction.action;
      console.log('Действие завершено', action.delta);
    }
  });

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

Ограничение действия через action

Объект action тесно связан с ограничениями (modifiers) в Interact.js. Например, при ресайзе элемента можно задать модификаторы, которые будут учитывать action.edges и action.rect:

interact('.resizable')
  .resizable({
    edges: { left: true, right: true, bottom: true, top: true },
    modifiers: [
      interact.modifiers.restrictSize({
        min: { width: 100, height: 50 },
        max: { width: 500, height: 300 }
      })
    ],
    onmove(event) {
      const action = event.interaction.action;
      // Применение изменений по координатам
      event.target.style.width = `${action.rect.width + action.delta.x}px`;
      event.target.style.height = `${action.rect.height + action.delta.y}px`;
    }
  });

Здесь action.rect и action.delta используются для вычисления новых размеров элемента с учётом ограничений, заданных модификатором.

Использование кастомных действий

Interact.js позволяет создавать кастомные действия через объект actions. Каждый новый тип действия регистрируется с помощью:

interact.actions.register({
  name: 'custom',
  defaults: { axis: 'xy' },
  // методы для start, move, end
});

Внутри этих методов можно полностью управлять объектом action, задавать уникальные свойства и обновлять состояние элемента при движении указателя. Это открывает возможность реализации нестандартных интерактивных сценариев, которые не покрываются стандартными drag, resize и gesture.

Основные рекомендации при работе с action

  • Следить за начальной позицией: action.starting используется для корректного расчёта всех изменений.
  • Использовать delta для перемещений: все сдвиги и изменения размеров должны применяться относительно delta, чтобы не нарушать плавность анимации.
  • Проверять name действия: для элементов, поддерживающих несколько действий одновременно, важно различать тип текущего действия.
  • Применять ограничения через modifiers: объект action предоставляет актуальные данные для работы с ограничениями по сетке, границам контейнера или минимальным/максимальным размерам.

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

Оглавление