addBindings(bindings, handler, this.onClick);
}(CoordinatesRecognizer);
* Inlined from https://github.com/alexreardon/memoize-one
function memoizeOne(resultFn, isEqual) {
for (var _len = arguments.length, newArgs = new Array(_len), _key = 0; _key < _len; _key++) {
newArgs[_key] = arguments[_key];
if (calledOnce && lastThis === this && isEqual(newArgs, lastArgs)) {
lastResult = resultFn.apply(this, newArgs);
* Taken from https://github.com/FormidableLabs/react-fast-compare
* Dropped comments and ArrayBuffer handling
if (a === b) return true;
if (a && b && typeof a == 'object' && typeof b == 'object') {
if (a.constructor !== b.constructor) return false;
if (length !== b.length) return false;
for (i = length; i-- !== 0;) {
if (!equal(a[i], b[i])) return false;
if (typeof Map === 'function' && a instanceof Map && b instanceof Map) {
if (a.size !== b.size) return false;
while (!(i = it.next()).done) {
if (!b.has(i.value[0])) return false;
while (!(i = it.next()).done) {
if (!equal(i.value[1], b.get(i.value[0]))) return false;
if (typeof Set === 'function' && a instanceof Set && b instanceof Set) {
if (a.size !== b.size) return false;
while (!(i = it.next()).done) {
if (!b.has(i.value[0])) return false;
if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
if (length !== Object.keys(b).length) return false;
for (i = length; i-- !== 0;) {
if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
if (typeof Element !== 'undefined' && a instanceof Element) return false;
for (i = length; i-- !== 0;) {
if (keys[i] === '_owner' && a.$$typeof) continue;
if (!equal(a[keys[i]], b[keys[i]])) return false;
} // true if both NaN, false otherwise — NaN !== NaN → true
// eslint-disable-next-line no-self-compare
return a !== a && b !== b;
if ((error.message || '').match(/stack|recursion/i)) {
// eslint-disable-next-line no-console
console.warn('react-fast-compare cannot handle circular refs');
* @param handler - the function fired every time the drag gesture updates
* @param [config={}] - the config object including generic options and drag options
function useDrag(handler, config) {
RecognizersMap.set('drag', DragRecognizer);
var buildDragConfig = Object(external_React_["useRef"])();
if (!buildDragConfig.current) {
buildDragConfig.current = memoizeOne(_buildDragConfig, isEqual);
}, buildDragConfig.current(config));
* Abstract class for distance/angle-based gesture recongizers
var DistanceAngleRecognizer = /*#__PURE__*/function (_Recognizer) {
_inheritsLoose(DistanceAngleRecognizer, _Recognizer);
function DistanceAngleRecognizer() {
return _Recognizer.apply(this, arguments) || this;
var _proto = DistanceAngleRecognizer.prototype;
_proto.getInternalMovement = function getInternalMovement(values, state) {
var prev_a = state.values[1]; // not be defined if ctrl+wheel is used for zoom only
a = _values$ === void 0 ? prev_a : _values$;
var delta_a = a - prev_a;
var next_turns = state.turns;
if (Math.abs(delta_a) > 270) next_turns += sign(delta_a);
return subV([d, a - 360 * next_turns], state.initial);
_proto.getKinematics = function getKinematics(values, event) {
var state = this.getMovement(values);
var turns = (values[1] - state._movement[1] - this.state.initial[1]) / 360;
var dt = event.timeStamp - this.state.timeStamp;
var _calculateAllKinemati = calculateAllKinematics(state.movement, state.delta, dt),
kinematics = _objectWithoutPropertiesLoose(_calculateAllKinemati, ["distance", "velocity"]);
_proto.mapStateValues = function mapStateValues(state) {
return DistanceAngleRecognizer;
var WEBKIT_DISTANCE_SCALE_FACTOR = 260;
var PinchRecognizer = /*#__PURE__*/function (_DistanceAngleRecogni) {
_inheritsLoose(PinchRecognizer, _DistanceAngleRecogni);
function PinchRecognizer() {
_this = _DistanceAngleRecogni.apply(this, arguments) || this;
_this.ingKey = 'pinching';
_this.stateKey = 'pinch';
_this.onPinchStart = function (event) {
addEventIds(_this.controller, event);
var touchIds = _this.controller.touchIds;
if (!_this.enabled) return;
if (_this.state._active) {
// check that the pointerIds that initiated the gesture
// are still enabled. This is useful for when the page
// loses track of the pointers (minifying gesture on iPad).
if (_this.state._pointerIds.every(function (id) {
})) return; // something was wrong with the pointers but we let it go.
} // until we reach two fingers on the target don't react
if (touchIds.size < 2) return;
var _pointerIds = Array.from(touchIds).slice(0, 2);
var _getTwoTouchesEventVa = getTwoTouchesEventValues(event, _pointerIds, _this.transform),
values = _getTwoTouchesEventVa.values,
origin = _getTwoTouchesEventVa.origin;
_this.updateSharedState(getGenericEventData(event));
_this.updateGestureState(_extends({}, getStartGestureState(_assertThisInitialized(_this), values, event), getGenericPayload(_assertThisInitialized(_this), event, true), {
_pointerIds: _pointerIds,
_this.updateGestureState(_this.getMovement(values));
_this.fireGestureHandler();
_this.onPinchChange = function (event) {
var _this$state = _this.state,
canceled = _this$state.canceled,
_active = _this$state._active;
if (canceled || !_active || // if the event has the same timestamp as the previous event
event.timeStamp === _this.state.timeStamp) return;
var genericEventData = getGenericEventData(event);
_this.updateSharedState(genericEventData);
var _getTwoTouchesEventVa2 = getTwoTouchesEventValues(event, _this.state._pointerIds, _this.transform),
values = _getTwoTouchesEventVa2.values,
origin = _getTwoTouchesEventVa2.origin;
var kinematics = _this.getKinematics(values, event);
_this.updateGestureState(_extends({}, getGenericPayload(_assertThisInitialized(_this), event), kinematics, {
_this.fireGestureHandler();
_this.onPinchEnd = function (event) {
removeEventIds(_this.controller, event);
var pointerIds = getTouchIds(event); // if none of the lifted pointerIds is in the state pointerIds don't do anything
if (_this.state._pointerIds.every(function (id) {
return !pointerIds.includes(id);
if (!_this.state._active) return;
_this.updateGestureState(_extends({}, getGenericPayload(_assertThisInitialized(_this), event), _this.getMovement(_this.state.values), {
_this.fireGestureHandler();
_this.onCancel = function () {
if (_this.state.canceled) return;
_this.updateGestureState({
return _this.fireGestureHandler();
* PINCH WITH WEBKIT GESTURES
_this.onGestureStart = function (event) {
if (!_this.enabled) return;
var values = getWebkitGestureEventValues(event, _this.transform);
_this.updateSharedState(getGenericEventData(event));
_this.updateGestureState(_extends({}, getStartGestureState(_assertThisInitialized(_this), values, event), getGenericPayload(_assertThisInitialized(_this), event, true), {
origin: [event.clientX, event.clientY],
_this.updateGestureState(_this.getMovement(values));
_this.fireGestureHandler();
_this.onGestureChange = function (event) {
var _this$state2 = _this.state,
canceled = _this$state2.canceled,
_active = _this$state2._active;
if (canceled || !_active) return;
var genericEventData = getGenericEventData(event);
_this.updateSharedState(genericEventData); // this normalizes the values of the Safari's WebKitEvent by calculating
// the delta and then multiplying it by a constant.
var values = getWebkitGestureEventValues(event, _this.transform);
values[0] = (values[0] - _this.state.event.scale) * WEBKIT_DISTANCE_SCALE_FACTOR + _this.state.values[0];
var kinematics = _this.getKinematics(values, event);
_this.updateGestureState(_extends({}, getGenericPayload(_assertThisInitialized(_this), event), kinematics, {
origin: [event.clientX, event.clientY]
_this.fireGestureHandler();
_this.onGestureEnd = function (event) {
if (!_this.state._active) return;
_this.updateGestureState(_extends({}, getGenericPayload(_assertThisInitialized(_this), event), _this.getMovement(_this.state.values), {
origin: [event.clientX, event.clientY]
_this.fireGestureHandler();
_this.wheelShouldRun = function (event) {
return _this.enabled && event.ctrlKey;
_this.getWheelValuesFromEvent = function (event) {
var _getWheelEventValues = getWheelEventValues(event, _this.transform),
delta_d = _getWheelEventValues[1];
var _this$state$values = _this.state.values,
prev_d = _this$state$values[0],
prev_a = _this$state$values[1]; // ZOOM_CONSTANT is based on Safari trackpad natural zooming
var _delta_d = -delta_d * ZOOM_CONSTANT; // new distance is the previous state distance added to the delta
var d = prev_d + _delta_d;
var a = prev_a !== void 0 ? prev_a : 0;
origin: [event.clientX, event.clientY],
_this.onWheel = function (event) {
if (!_this.wheelShouldRun(event)) return;
_this.setTimeout(_this.onWheelEnd);
if (!_this.state._active) _this.onWheelStart(event);else _this.onWheelChange(event);
_this.onWheelStart = function (event) {
var _this$getWheelValuesF = _this.getWheelValuesFromEvent(event),
values = _this$getWheelValuesF.values,
delta = _this$getWheelValuesF.delta,
origin = _this$getWheelValuesF.origin;
if (event.cancelable) event.preventDefault();else if (false) {}
_this.updateSharedState(getGenericEventData(event));
_this.updateGestureState(_extends({}, getStartGestureState(_assertThisInitialized(_this), values, event, _this.state.values), getGenericPayload(_assertThisInitialized(_this), event, true), {
_this.updateGestureState(_this.getMovement(values));
_this.fireGestureHandler();
_this.onWheelChange = function (event) {
if (event.cancelable) event.preventDefault();
_this.updateSharedState(getGenericEventData(event));
var _this$getWheelValuesF2 = _this.getWheelValuesFromEvent(event),
values = _this$getWheelValuesF2.values,
origin = _this$getWheelValuesF2.origin,
delta = _this$getWheelValuesF2.delta;
_this.updateGestureState(_extends({}, getGenericPayload(_assertThisInitialized(_this), event), _this.getKinematics(values, event), {
_this.fireGestureHandler();
_this.onWheelEnd = function () {
if (!_this.state._active) return;
_this.state._active = false;
_this.updateGestureState(_this.getMovement(_this.state.values));
_this.fireGestureHandler();
var _proto = PinchRecognizer.prototype;
_proto.addBindings = function addBindings$1(bindings) {
// Only try to use gesture events when they are supported and domTarget is set
// as React doesn't support gesture handlers.
if (this.controller.config.domTarget && !this.controller.supportsTouchEvents && this.controller.supportsGestureEvents) {
addBindings(bindings, 'onGestureStart', this.onGestureStart);
addBindings(bindings, 'onGestureChange', this.onGestureChange);
addBindings(bindings, 'onGestureEnd', this.onGestureEnd);
addBindings(bindings, 'onTouchStart', this.onPinchStart);
addBindings(bindings, 'onTouchMove', this.onPinchChange);
addBindings(bindings, 'onTouchEnd', this.onPinchEnd);
addBindings(bindings, 'onTouchCancel', this.onPinchEnd);
addBindings(bindings, 'onWheel', this.onWheel);
}(DistanceAngleRecognizer);
* @param handler - the function fired every time the pinch gesture updates
* @param [config={}] - the config object including generic options and pinch options
function usePinch(handler, config) {
RecognizersMap.set('pinch', PinchRecognizer);
var buildPinchConfig = Object(external_React_["useRef"])();
if (!buildPinchConfig.current) {
buildPinchConfig.current = memoizeOne(_buildPinchConfig, isEqual);