@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 = (handlers, deps = [], multiTouch = 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, _prevTouchInfoRef$cur2, _prevTouch$x, _prevTouch$y, _prevVelocityRef$curr, _prevVelocityRef$curr2, _prevVelocityRef$curr3, _prevVelocityRef$curr4;
        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$cur2 = prevTouchInfoRef.current[touch.id]) === null || _prevTouchInfoRef$cur2 === void 0 ? void 0 : _prevTouchInfoRef$cur2.timestamp) !== null && _prevTouchInfoRef$cur !== void 0 ? _prevTouchInfoRef$cur : touch.timestamp);
        const distX = touch.x - ((_prevTouch$x = prevTouch === null || prevTouch === void 0 ? void 0 : prevTouch.x) !== null && _prevTouch$x !== void 0 ? _prevTouch$x : touch.x);
        const distY = touch.y - ((_prevTouch$y = prevTouch === null || prevTouch === void 0 ? void 0 : prevTouch.y) !== null && _prevTouch$y !== 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$curr2 = prevVelocityRef.current[touch.id]) === null || _prevVelocityRef$curr2 === void 0 ? void 0 : _prevVelocityRef$curr2.x) !== null && _prevVelocityRef$curr !== void 0 ? _prevVelocityRef$curr : 0,
          velocityY: (_prevVelocityRef$curr3 = (_prevVelocityRef$curr4 = prevVelocityRef.current[touch.id]) === null || _prevVelocityRef$curr4 === void 0 ? void 0 : _prevVelocityRef$curr4.y) !== null && _prevVelocityRef$curr3 !== void 0 ? _prevVelocityRef$curr3 : 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 = (handlers, deps = []) => {
  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 = (handlers, deps = []) => {
  return useInternalTouchHandler(handlers, deps, true);
};
exports.useMultiTouchHandler = useMultiTouchHandler;
//# sourceMappingURL=useTouchHandler.js.map