Вспомогательные утилиты

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

Работа с координатами и размерами

Получение и нормализация координат

Методы interact.getPointer и interact.getElementRect позволяют получать координаты указателя и размеры элементов с учётом любых трансформаций CSS, таких как scale, rotate или translate.

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

interact(document).on('move', function(event) {
    const pointer = interact.getPointer(event);
    console.log('X:', pointer.x, 'Y:', pointer.y);
});

Метод interact.getElementRect(element) возвращает объект с координатами верхнего левого угла (top, left) и размерами (width, height) элемента.

Преобразование координат

Взаимодействие с элементами часто требует преобразования координат из одной системы в другую (например, из локальной в глобальную). Interact.js предоставляет утилиту interact.relativeCoords для работы с относительными координатами:

const relative = interact.relativeCoords({ x: 150, y: 100 }, element);
console.log('Относительные координаты:', relative);

Объединение и фильтрация событий

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

const delta1 = { x: 10, y: 5 };
const delta2 = { x: -3, y: 7 };

const merged = interact.merge(delta1, delta2);
console.log(merged); // { x: 7, y: 12 }

Для фильтрации событий используется метод interact.filter, который позволяет пропускать только события, удовлетворяющие заданным условиям:

interact(document).on('dragmove', function(event) {
    if (interact.filter(event, el => el.tagName === 'DIV')) {
        console.log('Драг по DIV:', event.target);
    }
});

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

Interact.js предлагает набор функций для упрощённого управления CSS-трансформациями, включая смещения, вращение и масштабирование.

Применение трансформаций

Функция interact.setTransform позволяет устанавливать комбинации трансформаций на элемент:

interact.setTransform(element, {
    translate: { x: 50, y: 100 },
    scale: { x: 1.2, y: 1.2 },
    rotate: 45
});

Извлечение текущей трансформации

Метод interact.getTransform возвращает объект с текущими значениями всех трансформаций для элемента:

const transform = interact.getTransform(element);
console.log(transform.translate.x, transform.scale.x, transform.rotate);

Утилиты для ограничений и сеток

Для реализации интерфейсов с ограничениями движения используются функции interact.snap и interact.restrict. Они позволяют привязать элемент к сетке или ограничить его передвижение в пределах контейнера.

Пример привязки к сетке с шагом 50px:

interact(element).draggable({
    modifiers: [
        interact.snap({
            targets: [interact.createSnapGrid({ x: 50, y: 50 })],
            range: Infinity,
            relativePoints: [{ x: 0, y: 0 }]
        })
    ]
});

Ограничение перемещения внутри родительского контейнера:

interact(element).draggable({
    modifiers: [
        interact.restrict({
            restriction: 'parent',
            endOnly: true
        })
    ]
});

Вспомогательные функции для математики

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

  • interact.vectorLength({ x, y }) — вычисляет длину вектора.
  • interact.angleBetween({ x1, y1 }, { x2, y2 }) — вычисляет угол между двумя точками.
  • interact.snapToGrid(value, gridSize) — округляет значение до ближайшего значения сетки.

Пример:

const length = interact.vectorLength({ x: 3, y: 4 });
console.log(length); // 5

const angle = interact.angleBetween({ x1: 0, y1: 0 }, { x2: 1, y2: 1 });
console.log(angle); // 45 градусов

Полезные функции для событий

Проверка типа события

Утилита interact.isPointerEvent помогает определить, является ли объект событием указателя (мышь, сенсор, стилус):

document.addEventListener('pointerdown', function(e) {
    if (interact.isPointerEvent(e)) {
        console.log('Это событие указателя');
    }
});

Клонирование и объединение событий

Методы interact.cloneEvent и interact.mergeEvents позволяют безопасно копировать или объединять данные нескольких событий, что важно при сложных взаимодействиях:

const clone = interact.cloneEvent(event);
const mergedEvent = interact.mergeEvents(event1, event2);

Итоговый набор возможностей

Вспомогательные утилиты Interact.js дают полный контроль над:

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

Эти функции делают работу с интерактивными элементами более предсказуемой, безопасной и менее трудозатратной, особенно при реализации сложных drag-and-drop интерфейсов и мультитач-взаимодействий.

Оглавление