react-native-skia-gesture 0.1.6

package/src/hoc/with-touchable-handler.tsx

@@ -0,0 +1,127 @@
+import {
+  ExtendedTouchInfo,
+  SkiaProps,
+  SkiaValue,
+  SkPath,
+  TouchInfo,
+  useValue,
+  Vector,
+} from '@shopify/react-native-skia';
+import { useCallback, useEffect, useId } from 'react';
+import { getCirclePath } from '../utils/get-circle-path';
+import { getRectPath, getRoundedRectPath } from '../utils/get-rect-path';
+import {
+  unwrapAnimatedValue,
+  unwrapAnimatedValueObject,
+} from '../utils/unwrap-animated-value';
+import { useTouchHandlerContext } from '../canvas/context';
+
+export type TranslationInfo = {
+  translationX: number;
+  translationY: number;
+};
+
+export type TouchableHandlerProps = {
+  onStart: (touchInfo: TouchInfo) => void;
+  onActive: (touchInfo: ExtendedTouchInfo & TranslationInfo) => void;
+  onEnd: (touchInfo: ExtendedTouchInfo & TranslationInfo) => void;
+  touchablePath: SkPath | SkiaValue<SkPath>;
+};
+
+type WithTouchableHandlerProps<T> = SkiaProps<T> &
+  Partial<TouchableHandlerProps>;
+
+const getSkiaPath = (key: string, props: any) => {
+  const unwrappedProps = unwrapAnimatedValueObject(props) as any;
+
+  switch (key) {
+    case 'Circle':
+      return getCirclePath(unwrappedProps);
+    case 'Rect':
+      return getRectPath(unwrappedProps);
+    case 'RoundedRect':
+      return getRoundedRectPath(unwrappedProps);
+    default:
+      return null;
+  }
+};
+
+const withTouchableHandler = <T,>(
+  Component: (props: WithTouchableHandlerProps<T>) => JSX.Element
+) => {
+  return ({
+    onStart: onStartProp,
+    onActive: onActiveProp,
+    onEnd: onEndProp,
+    touchablePath,
+    ...props
+  }: WithTouchableHandlerProps<T>) => {
+    const id = useId();
+    const ref = useTouchHandlerContext();
+
+    const startingPoint = useValue<Vector | null>(null);
+
+    const onStart: TouchableHandlerProps['onStart'] = useCallback(
+      (event) => {
+        startingPoint.current = { x: event.x, y: event.y };
+        return onStartProp?.(event);
+      },
+      [onStartProp, startingPoint]
+    );
+    const onActive: TouchableHandlerProps['onActive'] = useCallback(
+      (event) => {
+        const translationX = event.x - (startingPoint.current?.x ?? 0);
+        const translationY = event.y - (startingPoint.current?.y ?? 0);
+        return onActiveProp?.({
+          ...event,
+          translationX,
+          translationY,
+        });
+      },
+      [onActiveProp, startingPoint]
+    );
+    const onEnd: TouchableHandlerProps['onEnd'] = useCallback(
+      (event) => {
+        const translationX = event.x - (startingPoint.current?.x ?? 0);
+        const translationY = event.y - (startingPoint.current?.y ?? 0);
+        return onEndProp?.({ ...event, translationX, translationY });
+      },
+      [onEndProp, startingPoint]
+    );
+
+    const isPointInPath = useCallback(
+      (point: Vector) => {
+        if (touchablePath) {
+          return unwrapAnimatedValue(touchablePath).contains(point.x, point.y);
+        }
+
+        const path = getSkiaPath(Component.name, props);
+        if (!path) {
+          throw Error('No touchablePath provided');
+        }
+        return path.contains(point.x, point.y);
+      },
+      [props, touchablePath]
+    );
+
+    useEffect(() => {
+      ref.current = {
+        [`id:${id}`]: {
+          isPointInPath,
+          onStart,
+          onActive,
+          onEnd,
+        },
+        ...ref.current,
+      } as any;
+
+      return () => {
+        delete ref.current?.[id];
+      };
+    }, [id, isPointInPath, onActive, onEnd, onStart, ref, touchablePath]);
+
+    return Component(props as any);
+  };
+};
+
+export { withTouchableHandler };

package/src/hooks/use-gesture-handler.ts

@@ -0,0 +1,59 @@
+import {
+  ExtendedTouchInfo,
+  TouchInfo,
+  useValue,
+} from '@shopify/react-native-skia';
+import { useCallback } from 'react';
+import type { TranslationInfo } from '../hoc';
+
+type UseGestureHandlerParams<ContextType> = {
+  onStart?: (touchInfo: TouchInfo, context: ContextType) => void;
+  onActive?: (
+    extendedTouchInfo: ExtendedTouchInfo & TranslationInfo,
+    context: ContextType
+  ) => void;
+  onEnd?: (
+    extendedTouchInfo: ExtendedTouchInfo & TranslationInfo,
+    context: ContextType
+  ) => void;
+};
+
+const useGestureHandler = <ContextType>(
+  gestureHandlers: UseGestureHandlerParams<ContextType>
+) => {
+  const { onStart, onActive, onEnd } = gestureHandlers;
+
+  const context = useValue<ContextType>({} as any);
+
+  const handleStart = useCallback(
+    (touchInfo: TouchInfo) => {
+      if (!onStart) return;
+      return onStart(touchInfo, context.current);
+    },
+    [context, onStart]
+  );
+
+  const handleActive = useCallback(
+    (extendedTouchInfo: ExtendedTouchInfo & TranslationInfo) => {
+      if (!onActive) return;
+      return onActive(extendedTouchInfo, context.current);
+    },
+    [context, onActive]
+  );
+
+  const handleEnd = useCallback(
+    (extendedTouchInfo: ExtendedTouchInfo & TranslationInfo) => {
+      if (!onEnd) return;
+      return onEnd(extendedTouchInfo, context.current);
+    },
+    [context, onEnd]
+  );
+
+  return {
+    onStart: handleStart,
+    onActive: handleActive,
+    onEnd: handleEnd,
+  };
+};
+
+export { useGestureHandler };

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './canvas';
+export * from './hoc';
+export * from './hooks/use-gesture-handler';

package/src/utils/get-circle-path.ts

@@ -0,0 +1,7 @@
+import { Skia } from '@shopify/react-native-skia';
+
+type GetCirclePathParams = { cx: number; cy: number; r: number };
+
+export const getCirclePath = ({ cx, cy, r }: GetCirclePathParams) => {
+  return Skia.Path.Make().addCircle(cx, cy, r);
+};

package/src/utils/get-rect-path.ts

@@ -0,0 +1,41 @@
+import { rect, rrect, Skia, SkRect } from '@shopify/react-native-skia';
+
+type GetRectPathParams =
+  | {
+      x: number;
+      y: number;
+      width: number;
+      height: number;
+    }
+  | { rect: SkRect };
+
+const getRectPath = (params: GetRectPathParams) => {
+  const skPath = Skia.Path.Make();
+  if ('rect' in params) {
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    const { rect } = params;
+
+    skPath.addRect(rect);
+    return skPath;
+  }
+  const { x, y, width, height } = params;
+  skPath.addRect(rect(x, y, width, height));
+  return skPath;
+};
+
+type GetRoundedRectPathParams = GetRectPathParams & {
+  r: number;
+};
+
+const getRoundedRectPath = (params: GetRoundedRectPathParams) => {
+  const { r } = params;
+  if ('rect' in params) {
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    const { rect } = params;
+    return Skia.Path.Make().addRRect(rrect(rect, r, r));
+  }
+  const { x, y, width, height } = params;
+  return Skia.Path.Make().addRRect(rrect(rect(x, y, width, height), r, r));
+};
+
+export { getRectPath, getRoundedRectPath };

package/src/utils/unwrap-animated-value.ts

@@ -0,0 +1,18 @@
+import type { SkiaValue } from '@shopify/react-native-skia';
+
+const unwrapAnimatedValue = <T>(value: SkiaValue<T> | T): T => {
+  if ((value as SkiaValue<T>).current != null) {
+    return (value as SkiaValue<T>).current;
+  }
+  return value as T;
+};
+
+const unwrapAnimatedValueObject = <T>(
+  value: Record<any, SkiaValue<T> | T>
+): Record<any, T> => {
+  return Object.keys(value).reduce((acc, key) => {
+    return { ...acc, [key]: unwrapAnimatedValue(value[key]) };
+  }, {});
+};
+
+export { unwrapAnimatedValue, unwrapAnimatedValueObject };