ForceTouchSensor

ForceTouchSensor — это один из сенсоров в библиотеке Shopify Draggable, предназначенный для обнаружения жестов с усилием на устройствах, поддерживающих технологию Force Touch (например, трекпады Apple). Его основная задача — расширение возможностей перетаскивания за счет распознавания степени нажатия на элемент.

ForceTouchSensor работает как дополнительный слой к базовым сенсорам Drag, Detect и Touch. Он позволяет реагировать на интенсивность нажатия, что открывает новые возможности для интерактивных интерфейсов, таких как активация специальных функций при сильном нажатии.

Подключение и инициализация

Для использования ForceTouchSensor необходимо импортировать соответствующий модуль из пакета @shopify/draggable:

import { ForceTouchSensor } from '@shopify/draggable';

Создание экземпляра сенсора обычно производится внутри конфигурации Draggable:

const draggable = new Draggable(document.querySelectorAll('.draggable-item'), {
  sensors: [ForceTouchSensor],
  draggable: '.draggable-item'
});

Здесь ключевой момент: ForceTouchSensor должен использоваться только на устройствах с поддержкой Force Touch. На устройствах без такой поддержки сенсор не активируется и не вызовет ошибок.

Настройка ForceTouchSensor

ForceTouchSensor имеет несколько важных параметров, которые можно настраивать при инициализации:

  • threshold — минимальная величина давления, при которой сенсор начинает реагировать.
  • interval — интервал опроса датчика силы нажатия, в миллисекундах.

Пример конфигурации:

const draggable = new Draggable(document.querySelectorAll('.draggable-item'), {
  sensors: [
    [ForceTouchSensor, {
      threshold: 0.2,
      interval: 50
    }]
  ],
  draggable: '.draggable-item'
});

threshold задается в диапазоне от 0 до 1, где 1 — максимальное давление, а 0 — минимальное.

События ForceTouchSensor

ForceTouchSensor поддерживает несколько событий, которые можно слушать через стандартный механизм событий Draggable:

  1. forceStart — возникает при достижении давления выше порогового значения (threshold).
  2. forceChange — вызывается при изменении величины давления, даже если оно не выходит за порог.
  3. forceEnd — происходит, когда давление снижается ниже порога или элемент перестает быть активным.

Пример подписки на события:

draggable.on('forceStart', (event) => {
  console.log('Началось сильное нажатие:', event);
});

draggable.on('forceChange', (event) => {
  console.log('Сила нажатия изменилась:', event.force);
});

draggable.on('forceEnd', (event) => {
  console.log('Сильное нажатие завершилось');
});

События передают объект event, который содержит следующие полезные свойства:

  • event.force — текущая величина силы нажатия от 0 до 1.
  • event.sensorEvent — оригинальное событие браузера (PointerEvent или TouchEvent).
  • event.source — DOM-элемент, на котором произошло действие.

Интеграция с другими сенсорами

ForceTouchSensor может работать совместно с MouseSensor, TouchSensor и SortableSensor. Это позволяет сочетать обычное перетаскивание с возможностью реагирования на силу нажатия. Важно учитывать порядок подключения сенсоров, так как ForceTouchSensor должен быть подключен после основных сенсоров для корректного перехвата событий давления.

Пример комбинированной конфигурации:

import { Draggable, ForceTouchSensor, MouseSensor, TouchSensor } from '@shopify/draggable';

const draggable = new Draggable('.draggable-item', {
  sensors: [
    MouseSensor,
    TouchSensor,
    [ForceTouchSensor, { threshold: 0.3, interval: 40 }]
  ],
  draggable: '.draggable-item'
});

В такой конфигурации перетаскивание будет работать как обычное, а ForceTouchSensor активируется только при нажатии с определенной силой.

Практические сценарии использования

  1. Активация контекстного меню при сильном нажатии Можно показывать дополнительные опции или действия только при превышении порога давления, создавая эффект «3D Touch».

  2. Изменение визуальных эффектов С помощью события forceChange можно динамически изменять размеры или прозрачность элемента в зависимости от силы нажатия.

  3. Ускорение или замедление перетаскивания Применение event.force для изменения скорости перемещения элементов: чем сильнее нажатие, тем быстрее перемещение.

Ограничения и совместимость

  • Работает только на устройствах с поддержкой Force Touch или 3D Touch.
  • Не поддерживается на стандартных мышах или трекпадах без сенсорной поддержки.
  • Интервалы и порог давления нужно настраивать индивидуально для каждой платформы для обеспечения корректной работы.

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

Для снижения нагрузки на рендеринг рекомендуется:

  • Использовать минимальный необходимый interval опроса.
  • Ограничивать обработку событий forceChange только для элементов, которые реально изменяются визуально.
  • Комбинировать ForceTouchSensor с виртуальными DOM-оптимизациями (например, requestAnimationFrame), чтобы избежать лишних перерисовок.

ForceTouchSensor расширяет возможности Shopify Draggable, позволяя создавать интерфейсы с интерактивной чувствительностью к силе нажатия, что делает пользовательский опыт более динамичным и богатым.

Оглавление