@shopify/react-native-skia 1.4.2 → 1.5.1

package/src/renderer/__tests__/TouchHandler.spec.tsx

@@ -1,113 +0,0 @@
-import React from "react";
-
-import { TouchType } from "../../views/types";
-
-import type { EmptyProps } from "./setup";
-import { mountCanvas, importSkia } from "./setup";
-
-const SimpleActiveTouch = ({}: EmptyProps) => {
-  const { useTouchHandler } = importSkia();
-  const touchHandler = useTouchHandler({
-    onStart: ({ x, y }) => {
-      expect(x).toBe(10);
-      expect(y).toBe(10);
-    },
-    onActive: ({ x, y, velocityX, velocityY }) => {
-      expect(x).toBe(20);
-      expect(y).toBe(20);
-      expect(velocityX).toBe(10);
-      expect(velocityY).toBe(10);
-    },
-  });
-  const history = [
-    [
-      {
-        x: 10,
-        y: 10,
-        force: 0,
-        type: TouchType.Start,
-        id: 2,
-        timestamp: 0,
-      },
-    ],
-    [
-      {
-        x: 20,
-        y: 20,
-        force: 0,
-        type: TouchType.Active,
-        id: 2,
-        timestamp: 1,
-      },
-    ],
-  ];
-  touchHandler(history);
-  return null;
-};
-
-const SimpleEndTouch = ({}: EmptyProps) => {
-  const { useTouchHandler } = importSkia();
-  const touchHandler = useTouchHandler({
-    onStart: ({ x, y }) => {
-      expect(x).toBe(10);
-      expect(y).toBe(10);
-    },
-    onActive: ({ x, y, velocityX, velocityY }) => {
-      expect(x).toBe(20);
-      expect(y).toBe(20);
-      expect(velocityX).toBe(10);
-      expect(velocityY).toBe(10);
-    },
-    onEnd: ({ x, y, velocityX, velocityY }) => {
-      expect(x).toBe(30);
-      expect(y).toBe(30);
-      expect(velocityX).toBe(10);
-      expect(velocityY).toBe(10);
-    },
-  });
-  const history = [
-    [
-      {
-        x: 10,
-        y: 10,
-        force: 0,
-        type: TouchType.Start,
-        id: 2,
-        timestamp: 0,
-      },
-    ],
-    [
-      {
-        x: 20,
-        y: 20,
-        force: 0,
-        type: TouchType.Active,
-        id: 2,
-        timestamp: 1,
-      },
-    ],
-    [
-      {
-        x: 30,
-        y: 30,
-        force: 0,
-        type: TouchType.End,
-        id: 2,
-        timestamp: 2,
-      },
-    ],
-  ];
-  touchHandler(history);
-  return null;
-};
-
-describe("Test handling of touch information", () => {
-  it("Should check that the received values are correct", () => {
-    const { draw } = mountCanvas(<SimpleActiveTouch />);
-    draw();
-  });
-  it("Calculates the velocity properly onEnd event", () => {
-    const { draw } = mountCanvas(<SimpleEndTouch />);
-    draw();
-  });
-});

package/src/views/useTouchHandler.ts

@@ -1,107 +0,0 @@
-import type { DependencyList } from "react";
-import { useCallback, useRef } from "react";
-
-import type { Vector } from "../skia/types";
-import { Platform } from "../Platform";
-
-import type {
-  ExtendedTouchInfo,
-  TouchHandlers,
-  TouchHandler,
-  TouchInfo,
-} from "./types";
-import { TouchType } from "./types";
-
-const useInternalTouchHandler = (
-  handlers: TouchHandlers,
-  deps: DependencyList = [],
-  multiTouch = false
-): TouchHandler => {
-  const prevTouchInfoRef = useRef<{ [key: number]: TouchInfo | undefined }>({});
-  const prevVelocityRef = useRef<{ [key: number]: Vector | undefined }>({});
-
-  return useCallback((history: Array<Array<TouchInfo>>) => {
-    // Process all items in the current touch history
-    history.forEach((touches) => {
-      // Enumerate touches
-      for (let i = 0; i < touches.length; i++) {
-        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.current[touch.id]?.timestamp ?? touch.timestamp);
-
-        const distX = touch.x - (prevTouch?.x ?? touch.x);
-        const distY = touch.y - (prevTouch?.y ?? touch.y);
-
-        if (
-          touch.type !== TouchType.Start &&
-          touch.type !== TouchType.End &&
-          touch.type !== TouchType.Cancelled &&
-          timeDiffseconds > 0
-        ) {
-          prevVelocityRef.current[touch.id] = {
-            x: distX / timeDiffseconds / Platform.PixelRatio,
-            y: distY / timeDiffseconds / Platform.PixelRatio,
-          };
-        }
-
-        const extendedTouchInfo: ExtendedTouchInfo = {
-          ...touch,
-          velocityX: prevVelocityRef.current[touch.id]?.x ?? 0,
-          velocityY: prevVelocityRef.current[touch.id]?.y ?? 0,
-        };
-
-        // Save previous touch
-        prevTouchInfoRef.current[touch.id] = touch;
-
-        if (touch.type === TouchType.Start) {
-          delete prevVelocityRef.current[touch.id];
-          handlers.onStart && handlers.onStart(touch);
-        } else if (touch.type === 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.
- */
-export const useTouchHandler = (
-  handlers: TouchHandlers,
-  deps: DependencyList = []
-): TouchHandler => {
-  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.
- */
-export const useMultiTouchHandler = (
-  handlers: TouchHandlers,
-  deps: DependencyList = []
-): TouchHandler => {
-  return useInternalTouchHandler(handlers, deps, true);
-};