TouchDriver

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

Base TouchDriver

Base

Parameters

На TouchDriver можно навесить 3 обработчика событий moveStart, moveXY, moveEnd. События moveStart и moveEnd, как понятно из названия, срабатывают один раз в начале и в конце действия, moveXY срабатывает при каждом движении после moveStart и перестает после moveEnd. Все эти методы возвращают объект события вида:

Name	Type	description
startTime	integer	Время начала взаимодействия в unix-time
startItXorY	string	По какой оси X или Y было начальное движение
itXorY	string	По какой оси X или Yбыло последнее движение
startDirection	string	Начальное направление top, bottom, left, right
direction	string	Последнее направление top, bottom, left, right
startX	integer	Начальное положение на координатной плоскости по оси X
startY	integer	Начальное положение на координатной плоскости по оси Y
nowX	integer	Текущее положение на координатной плоскости по оси X
nowY	integer	Текущее положение на координатной плоскости по оси Y
shiftX	integer	Пройденное расстояние от начала движения по оси X
shiftY	integer	Пройденное расстояние от начала движения по оси Y
deltaX	integer	Пройденное расстояние от последнего события moveXY по оси X
deltaY	integer	Пройденное расстояние от предыдущего события moveXY по оси Y
inertia	boolean	Факт наличия инерции в конце жеста

Params

Direction

Параметры startItXorY и itXorY можно получить только в методах moveXY и moveEnd. Человеку свойственно совершать микродвижения, которые он не осознает. Так, например, желая свайпнуть строго вверх, он может начать двигать пальцем немного влево или вправо, а только потом вверх. Чтобы убрать этот человеческий фактор, вычисление параметров стартового направления startItXorY и itXorY попадают в объект события не сразу, а через несколько тактов.

Direction

Inertia

Давайте рассмотрим свойство inertia (в объекте события moveEnd) отдельно, для лучшего понимания. При перемещении объекта в сторону на ходу отпуская его, человек интуитивно ожидает, что он продолжит движение самостоятельно, по инерции (при условии что у объекта скорость не была уменьшена до 0 в конце жеста). Что делать при окончании движения в событии moveEnd, вы можете решить сами, т.е. хотите ли вы использовать инерцию или нет. В данном примере вы можете испытать два состояния - с инерцией и без неё.

Без инерции: когда мы свайпаем круг вправо пересекая среднюю границу - круг переходит на противоположную сторону. Но если мы её не пересечём, круг вернётся в первоначальную позицию.

С инерцией: если при свайпе скорости достаточно, то благодаря инерции, круг сам пересечёт границу.

Inertia

API

Name	Type	Default	Description
children	node		Это контент между открывающим и закрывающим тегом компонента.
classes	object		Объект содержит jss стили компонента.
className	string		Чтобы указать CSS классы, используйте этот атрибут.
component	elementType	'div'	Корневой узел. Это HTML элемент или компонент.
innerRef	object		ref ссылка компонента.
autoMove	bool	false	Если true, компонент перемещается сам.
scrollable	bool	false	Если true, не останавливает нативный скролл при движении на поверхности TouchDriver.
touchpad	bool	false	Если true, учитывается движение по touchpad.
moveStart	func		Вызывается при касании к области внутри компонента.
moveXY	func		Вызывается при движении курсора или пальца по области и за ее пределами. Если до этого сработал moveStart.
moveEnd	func		Вызывается при окончании движения.