Константы и перечисления

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

Типы событий

Interact.js использует несколько категорий событий, которые можно отследить через методы .on() и .off(). Основные константы событий:

  • dragstart – начало перетаскивания элемента.
  • dragmove – движение элемента во время перетаскивания.
  • dragend – завершение перетаскивания.
  • resizestart, resizemove, resizeend – аналогично для изменения размеров.
  • gesturestart, gesturemove, gestureend – события мультитач-жестов.

Использование этих констант снижает риск опечаток и облегчает поиск обработчиков в коде.

interact('.draggable')
  .on('dragstart', event => { console.log('Начало перетаскивания'); })
  .on('dragmove', event => { console.log('Двигается'); })
  .on('dragend', event => { console.log('Перетаскивание завершено'); });

Курсоры и ограничения движения

Interact.js содержит константы, описывающие ограничения по оси и направления движения:

  • axis:

    • 'x' – движение только по горизонтали.
    • 'y' – движение только по вертикали.
    • undefined – движение по обеим осям.

  • edges для resize:

    • 'top', 'bottom', 'left', 'right' – определяют активные стороны для изменения размера.

Пример использования:

interact('.resizable')
  .resizable({
    edges: { left: true, bottom: true },
    modifiers: [
      interact.modifiers.restrictEdges({
        outer: 'parent'
      })
    ]
  });

Ограничения и модификаторы

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

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

Каждый модификатор имеет собственные константы для конфигурации, например, relativePoints в snap:

interact('.draggable').draggable({
  modifiers: [
    interact.modifiers.snap({
      targets: [
        interact.snappers.grid({ x: 30, y: 30 })
      ],
      relativePoints: [{ x: 0.5, y: 0.5 }]
    })
  ]
});

Коды кнопок мыши

Interact.js использует константы для определения кнопок мыши:

  • 0 – левая кнопка
  • 1 – средняя кнопка (колесо)
  • 2 – правая кнопка

Можно комбинировать с проверкой события:

interact('.draggable')
  .on('dragstart', event => {
    if (event.button === 0) {
      console.log('Перетаскивание левой кнопкой мыши');
    }
  });

Статусы и состояния

Interact.js поддерживает константы для обозначения текущего состояния интерактивного элемента:

  • interactable.draggable, interactable.resizable, interactable.gesturable – включены ли соответствующие взаимодействия.

  • event.interaction – объект текущего взаимодействия, содержащий свойства:

    • pointerIsDown – проверка, удерживается ли кнопка мыши/тач.
    • interacting() – возвращает true, если элемент сейчас перетаскивается или изменяется.

Пример проверки состояния:

interact('.draggable').on('dragmove', event => {
  if (event.interaction.pointerIsDown) {
    console.log('Элемент активно перетаскивается');
  }
});

Константы для жестов (multitouch)

Для работы с мультитач-жестами используются константы направления вращения и масштабирования:

  • angle – угол поворота в градусах.
  • distance – расстояние между двумя касаниями для масштабирования.
  • scale – коэффициент масштабирования.

Эти значения автоматически передаются в обработчики gesture:

interact('.gesturable')
  .gesturable({
    onmove: event => {
      console.log(`Масштаб: ${event.scale}, угол: ${event.angle}`);
    }
  });

Резюме по константам

Основные категории констант Interact.js можно классифицировать следующим образом:

  1. События – drag, resize, gesture.
  2. Оси и границы – axis, edges.
  3. Модификаторы – snap, restrictRect, restrictEdges, restrictSize.
  4. Кнопки мыши – 0, 1, 2.
  5. Состояния и взаимодействия – interacting(), pointerIsDown.
  6. Жесты – scale, angle, distance.

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

Оглавление