@shopify/react-native-skia/lib/commonjs/views/useTouchHandler.js

High-performance React Native Graphics using Skia

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useTouchHandler = exports.useMultiTouchHandler = void 0;

var _react = require("react");

var _Platform = require("../Platform");

var _types = require("./types");

const useInternalTouchHandler = function (handlers) {
  let deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
  let multiTouch = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
  const prevTouchInfoRef = (0, _react.useRef)({});
  const prevVelocityRef = (0, _react.useRef)({});
  return (0, _react.useCallback)(history => {
    // Process all items in the current touch history
    history.forEach(touches => {
      // Enumerate touches
      for (let i = 0; i < touches.length; i++) {
        var _prevTouchInfoRef$cur, _prevVelocityRef$curr, _prevVelocityRef$curr2;

        if (!multiTouch && i > 0) {
          break;
        }

        const touch = touches[i];
        const prevTouch = prevTouchInfoRef.current[touch.id]; // Calculate the velocity from the previous touch.

        const timeDiffseconds = touch.timestamp - (((_prevTouchInfoRef$cur = prevTouchInfoRef.current[touch.id]) === null || _prevTouchInfoRef$cur === void 0 ? void 0 : _prevTouchInfoRef$cur.timestamp) ?? touch.timestamp);
        const distX = touch.x - ((prevTouch === null || prevTouch === void 0 ? void 0 : prevTouch.x) ?? touch.x);
        const distY = touch.y - ((prevTouch === null || prevTouch === void 0 ? void 0 : prevTouch.y) ?? touch.y);

        if (touch.type !== _types.TouchType.Start && touch.type !== _types.TouchType.End && touch.type !== _types.TouchType.Cancelled && timeDiffseconds > 0) {
          prevVelocityRef.current[touch.id] = {
            x: distX / timeDiffseconds / _Platform.Platform.PixelRatio,
            y: distY / timeDiffseconds / _Platform.Platform.PixelRatio
          };
        }

        const extendedTouchInfo = { ...touch,
          velocityX: ((_prevVelocityRef$curr = prevVelocityRef.current[touch.id]) === null || _prevVelocityRef$curr === void 0 ? void 0 : _prevVelocityRef$curr.x) ?? 0,
          velocityY: ((_prevVelocityRef$curr2 = prevVelocityRef.current[touch.id]) === null || _prevVelocityRef$curr2 === void 0 ? void 0 : _prevVelocityRef$curr2.y) ?? 0
        }; // Save previous touch

        prevTouchInfoRef.current[touch.id] = touch;

        if (touch.type === _types.TouchType.Start) {
          delete prevVelocityRef.current[touch.id];
          handlers.onStart && handlers.onStart(touch);
        } else if (touch.type === _types.TouchType.Active) {
          handlers.onActive && handlers.onActive(extendedTouchInfo);
        } else {
          handlers.onEnd && handlers.onEnd(extendedTouchInfo);
        }
      }
    }); // eslint-disable-next-line react-hooks/exhaustive-deps
  }, deps);
};
/**
 * Provides a callback for handling touch events in the Skia View.
 * This touch handler only handles single touches.
 * @param handlers Callbacks for the different touch states
 * @param deps optional Dependency array to update the handlers
 * @returns A function that can be used from within the onDraw callback to
 * update and handle touch events. Call it with the touches property from
 * the info object.
 */


const useTouchHandler = function (handlers) {
  let deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
  return useInternalTouchHandler(handlers, deps, false);
};
/**
 * Provides a callback for handling touch events in the Skia View.
 * This touch handler handles multiple touches.
 * @param handlers Callbacks for the different touch states
 * @param deps optional Dependency array to update the handlers
 * @returns A function that can be used from within the onDraw callback to
 * update and handle touch events. Call it with the touches property from
 * the info object.
 */


exports.useTouchHandler = useTouchHandler;

const useMultiTouchHandler = function (handlers) {
  let deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
  return useInternalTouchHandler(handlers, deps, true);
};

exports.useMultiTouchHandler = useMultiTouchHandler;
//# sourceMappingURL=useTouchHandler.js.map