Жесты и мультитач

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

Подключение и настройка

Подключение Mind.js к проекту осуществляется через стандартный <script> или через пакетный менеджер:

import { GestureManager } from 'mind.js';

Инициализация GestureManager:

const manager = new GestureManager({
    element: document.getElementById('touch-area'),
    enableMultiTouch: true,
    gestures: ['tap', 'swipe', 'pinch', 'rotate']
});

element — DOM-элемент, на котором будут отслеживаться события.
enableMultiTouch — включение поддержки нескольких касаний одновременно.
gestures — массив активируемых жестов.

Обработка базовых жестов

Mind.js поддерживает следующие основные жесты: tap, double tap, swipe, pinch, rotate, press.

Tap и Double Tap

manager.on('tap', (event) => {
    console.log('Tap выполнен на координатах:', event.x, event.y);
});

manager.on('doubletap', (event) => {
    console.log('Двойное нажатие зафиксировано');
});

event.x и event.y возвращают координаты касания относительно элемента.
Разница между tap и doubletap настраивается через опцию doubleTapInterval.

Swipe

manager.on('swipe', (event) => {
    console.log('Направление свайпа:', event.direction, 'Длина:', event.distance);
});

event.direction принимает значения 'up', 'down', 'left', 'right'.
event.distance — пройденное расстояние в пикселях.
Важная настройка: minDistance — минимальная дистанция для распознавания свайпа.

Мультитач: Pinch и Rotate

Pinch (масштабирование)

manager.on('pinch', (event) => {
    console.log('Масштаб:', event.scale);
});

event.scale > 1 — увеличение, < 1 — уменьшение.
Для тонкой настройки можно использовать threshold, минимальное изменение масштаба для срабатывания события.

Rotate (вращение)

manager.on('rotate', (event) => {
    console.log('Угол поворота:', event.rotation);
});

event.rotation — угол поворота в градусах.
Можно комбинировать с pinch, чтобы отслеживать одновременное масштабирование и вращение.

Объединение нескольких жестов

Mind.js позволяет связывать несколько событий с одним элементом и обрабатывать их параллельно:

manager.on('swipe pinch', (event) => {
    if(event.type === 'swipe') {
        console.log('Свайп:', event.direction);
    } else if(event.type === 'pinch') {
        console.log('Масштабирование:', event.scale);
    }
});

События можно фильтровать по типу event.type.
Позволяет строить сложные интерфейсы с множеством интерактивных элементов на одной странице.

Настройки чувствительности и порогов

Для точной работы жестов в Mind.js применяются следующие параметры:

tapMaxDistance — максимальное смещение пальца для фиксации тап.
tapMaxTime — максимальная длительность касания.
swipeMinDistance — минимальная дистанция свайпа.
pinchThreshold — минимальное изменение масштаба для распознавания пинча.
rotateThreshold — минимальный угол для фиксации поворота.

Пример кастомной настройки:

const manager = new GestureManager({
    element: document.getElementById('touch-area'),
    enableMultiTouch: true,
    gestures: ['tap', 'swipe', 'pinch', 'rotate'],
    swipeMinDistance: 50,
    pinchThreshold: 0.05,
    rotateThreshold: 5
});

Работа с событиями на уровне касаний

Mind.js предоставляет доступ к низкоуровневым событиям касаний:

manager.on('touchstart touchmove touchend', (event) => {
    console.log(event.type, 'координаты:', event.touches);
});

event.touches — массив объектов { x, y, id } для каждого пальца.
Используется для кастомных жестов или комбинированных движений.

Создание пользовательских жестов

Mind.js позволяет определять новые жесты через метод addGesture:

manager.addGesture('customSwipe', {
    type: 'swipe',
    direction: 'diagonal',
    minDistance: 100
});

manager.on('customSwipe', (event) => {
    console.log('Пользовательский диагональный свайп выполнен');
});

type задаёт базовый тип жеста.
Дополнительные свойства (direction, minDistance) позволяют уточнять условия срабатывания.
Новые жесты интегрируются в общую систему событий.