react-native-skia-gesture 0.1.6

package/lib/module/canvas/index.js

@@ -0,0 +1,2 @@
+export * from './canvas';
+//# sourceMappingURL=index.js.map

package/lib/module/canvas/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"AAAA,cAAc,UAAU"}

package/lib/module/hoc/index.js

@@ -0,0 +1,2 @@
+export * from './with-touchable-handler';
+//# sourceMappingURL=index.js.map

package/lib/module/hoc/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"AAAA,cAAc,0BAA0B"}

package/lib/module/hoc/with-touchable-handler.js

@@ -0,0 +1,88 @@
+import { useValue } 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';
+const getSkiaPath = (key, props) => {
+  const unwrappedProps = unwrapAnimatedValueObject(props);
+  switch (key) {
+    case 'Circle':
+      return getCirclePath(unwrappedProps);
+    case 'Rect':
+      return getRectPath(unwrappedProps);
+    case 'RoundedRect':
+      return getRoundedRectPath(unwrappedProps);
+    default:
+      return null;
+  }
+};
+const withTouchableHandler = Component => {
+  return _ref => {
+    let {
+      onStart: onStartProp,
+      onActive: onActiveProp,
+      onEnd: onEndProp,
+      touchablePath,
+      ...props
+    } = _ref;
+    const id = useId();
+    const ref = useTouchHandlerContext();
+    const startingPoint = useValue(null);
+    const onStart = useCallback(event => {
+      startingPoint.current = {
+        x: event.x,
+        y: event.y
+      };
+      return onStartProp === null || onStartProp === void 0 ? void 0 : onStartProp(event);
+    }, [onStartProp, startingPoint]);
+    const onActive = useCallback(event => {
+      var _startingPoint$curren, _startingPoint$curren2;
+      const translationX = event.x - (((_startingPoint$curren = startingPoint.current) === null || _startingPoint$curren === void 0 ? void 0 : _startingPoint$curren.x) ?? 0);
+      const translationY = event.y - (((_startingPoint$curren2 = startingPoint.current) === null || _startingPoint$curren2 === void 0 ? void 0 : _startingPoint$curren2.y) ?? 0);
+      return onActiveProp === null || onActiveProp === void 0 ? void 0 : onActiveProp({
+        ...event,
+        translationX,
+        translationY
+      });
+    }, [onActiveProp, startingPoint]);
+    const onEnd = useCallback(event => {
+      var _startingPoint$curren3, _startingPoint$curren4;
+      const translationX = event.x - (((_startingPoint$curren3 = startingPoint.current) === null || _startingPoint$curren3 === void 0 ? void 0 : _startingPoint$curren3.x) ?? 0);
+      const translationY = event.y - (((_startingPoint$curren4 = startingPoint.current) === null || _startingPoint$curren4 === void 0 ? void 0 : _startingPoint$curren4.y) ?? 0);
+      return onEndProp === null || onEndProp === void 0 ? void 0 : onEndProp({
+        ...event,
+        translationX,
+        translationY
+      });
+    }, [onEndProp, startingPoint]);
+    const isPointInPath = useCallback(point => {
+      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
+      };
+      return () => {
+        var _ref$current;
+        (_ref$current = ref.current) === null || _ref$current === void 0 ? true : delete _ref$current[id];
+      };
+    }, [id, isPointInPath, onActive, onEnd, onStart, ref, touchablePath]);
+    return Component(props);
+  };
+};
+export { withTouchableHandler };
+//# sourceMappingURL=with-touchable-handler.js.map

package/lib/module/hoc/with-touchable-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useValue","useCallback","useEffect","useId","getCirclePath","getRectPath","getRoundedRectPath","unwrapAnimatedValue","unwrapAnimatedValueObject","useTouchHandlerContext","getSkiaPath","key","props","unwrappedProps","withTouchableHandler","Component","onStart","onStartProp","onActive","onActiveProp","onEnd","onEndProp","touchablePath","id","ref","startingPoint","event","current","x","y","translationX","translationY","isPointInPath","point","contains","path","name","Error"],"sourceRoot":"../../src","sources":["with-touchable-handler.tsx"],"mappings":"AAAA,SAMEA,QAAQ,QAEH,4BAA4B;AACnC,SAASC,WAAW,EAAEC,SAAS,EAAEC,KAAK,QAAQ,OAAO;AACrD,SAASC,aAAa,QAAQ,0BAA0B;AACxD,SAASC,WAAW,EAAEC,kBAAkB,QAAQ,wBAAwB;AACxE,SACEC,mBAAmB,EACnBC,yBAAyB,QACpB,gCAAgC;AACvC,SAASC,sBAAsB,QAAQ,mBAAmB;AAiB1D,MAAMC,WAAW,GAAG,CAACC,GAAW,EAAEC,KAAU,KAAK;EAC/C,MAAMC,cAAc,GAAGL,yBAAyB,CAACI,KAAK,CAAQ;EAE9D,QAAQD,GAAG;IACT,KAAK,QAAQ;MACX,OAAOP,aAAa,CAACS,cAAc,CAAC;IACtC,KAAK,MAAM;MACT,OAAOR,WAAW,CAACQ,cAAc,CAAC;IACpC,KAAK,aAAa;MAChB,OAAOP,kBAAkB,CAACO,cAAc,CAAC;IAC3C;MACE,OAAO,IAAI;EAAC;AAElB,CAAC;AAED,MAAMC,oBAAoB,GACxBC,SAA+D,IAC5D;EACH,OAAO,QAM6B;IAAA,IAN5B;MACNC,OAAO,EAAEC,WAAW;MACpBC,QAAQ,EAAEC,YAAY;MACtBC,KAAK,EAAEC,SAAS;MAChBC,aAAa;MACb,GAAGV;IACyB,CAAC;IAC7B,MAAMW,EAAE,GAAGpB,KAAK,EAAE;IAClB,MAAMqB,GAAG,GAAGf,sBAAsB,EAAE;IAEpC,MAAMgB,aAAa,GAAGzB,QAAQ,CAAgB,IAAI,CAAC;IAEnD,MAAMgB,OAAyC,GAAGf,WAAW,CAC1DyB,KAAK,IAAK;MACTD,aAAa,CAACE,OAAO,GAAG;QAAEC,CAAC,EAAEF,KAAK,CAACE,CAAC;QAAEC,CAAC,EAAEH,KAAK,CAACG;MAAE,CAAC;MAClD,OAAOZ,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAGS,KAAK,CAAC;IAC7B,CAAC,EACD,CAACT,WAAW,EAAEQ,aAAa,CAAC,CAC7B;IACD,MAAMP,QAA2C,GAAGjB,WAAW,CAC5DyB,KAAK,IAAK;MAAA;MACT,MAAMI,YAAY,GAAGJ,KAAK,CAACE,CAAC,IAAI,0BAAAH,aAAa,CAACE,OAAO,0DAArB,sBAAuBC,CAAC,KAAI,CAAC,CAAC;MAC9D,MAAMG,YAAY,GAAGL,KAAK,CAACG,CAAC,IAAI,2BAAAJ,aAAa,CAACE,OAAO,2DAArB,uBAAuBE,CAAC,KAAI,CAAC,CAAC;MAC9D,OAAOV,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAG;QACpB,GAAGO,KAAK;QACRI,YAAY;QACZC;MACF,CAAC,CAAC;IACJ,CAAC,EACD,CAACZ,YAAY,EAAEM,aAAa,CAAC,CAC9B;IACD,MAAML,KAAqC,GAAGnB,WAAW,CACtDyB,KAAK,IAAK;MAAA;MACT,MAAMI,YAAY,GAAGJ,KAAK,CAACE,CAAC,IAAI,2BAAAH,aAAa,CAACE,OAAO,2DAArB,uBAAuBC,CAAC,KAAI,CAAC,CAAC;MAC9D,MAAMG,YAAY,GAAGL,KAAK,CAACG,CAAC,IAAI,2BAAAJ,aAAa,CAACE,OAAO,2DAArB,uBAAuBE,CAAC,KAAI,CAAC,CAAC;MAC9D,OAAOR,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAG;QAAE,GAAGK,KAAK;QAAEI,YAAY;QAAEC;MAAa,CAAC,CAAC;IAC9D,CAAC,EACD,CAACV,SAAS,EAAEI,aAAa,CAAC,CAC3B;IAED,MAAMO,aAAa,GAAG/B,WAAW,CAC9BgC,KAAa,IAAK;MACjB,IAAIX,aAAa,EAAE;QACjB,OAAOf,mBAAmB,CAACe,aAAa,CAAC,CAACY,QAAQ,CAACD,KAAK,CAACL,CAAC,EAAEK,KAAK,CAACJ,CAAC,CAAC;MACtE;MAEA,MAAMM,IAAI,GAAGzB,WAAW,CAACK,SAAS,CAACqB,IAAI,EAAExB,KAAK,CAAC;MAC/C,IAAI,CAACuB,IAAI,EAAE;QACT,MAAME,KAAK,CAAC,2BAA2B,CAAC;MAC1C;MACA,OAAOF,IAAI,CAACD,QAAQ,CAACD,KAAK,CAACL,CAAC,EAAEK,KAAK,CAACJ,CAAC,CAAC;IACxC,CAAC,EACD,CAACjB,KAAK,EAAEU,aAAa,CAAC,CACvB;IAEDpB,SAAS,CAAC,MAAM;MACdsB,GAAG,CAACG,OAAO,GAAG;QACZ,CAAE,MAAKJ,EAAG,EAAC,GAAG;UACZS,aAAa;UACbhB,OAAO;UACPE,QAAQ;UACRE;QACF,CAAC;QACD,GAAGI,GAAG,CAACG;MACT,CAAQ;MAER,OAAO,MAAM;QAAA;QACX,gBAAOH,GAAG,CAACG,OAAO,+CAAlB,OAAO,aAAcJ,EAAE,CAAC;MAC1B,CAAC;IACH,CAAC,EAAE,CAACA,EAAE,EAAES,aAAa,EAAEd,QAAQ,EAAEE,KAAK,EAAEJ,OAAO,EAAEQ,GAAG,EAAEF,aAAa,CAAC,CAAC;IAErE,OAAOP,SAAS,CAACH,KAAK,CAAQ;EAChC,CAAC;AACH,CAAC;AAED,SAASE,oBAAoB"}

package/lib/module/hooks/use-gesture-handler.js

@@ -0,0 +1,29 @@
+import { useValue } from '@shopify/react-native-skia';
+import { useCallback } from 'react';
+const useGestureHandler = gestureHandlers => {
+  const {
+    onStart,
+    onActive,
+    onEnd
+  } = gestureHandlers;
+  const context = useValue({});
+  const handleStart = useCallback(touchInfo => {
+    if (!onStart) return;
+    return onStart(touchInfo, context.current);
+  }, [context, onStart]);
+  const handleActive = useCallback(extendedTouchInfo => {
+    if (!onActive) return;
+    return onActive(extendedTouchInfo, context.current);
+  }, [context, onActive]);
+  const handleEnd = useCallback(extendedTouchInfo => {
+    if (!onEnd) return;
+    return onEnd(extendedTouchInfo, context.current);
+  }, [context, onEnd]);
+  return {
+    onStart: handleStart,
+    onActive: handleActive,
+    onEnd: handleEnd
+  };
+};
+export { useGestureHandler };
+//# sourceMappingURL=use-gesture-handler.js.map

package/lib/module/hooks/use-gesture-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useValue","useCallback","useGestureHandler","gestureHandlers","onStart","onActive","onEnd","context","handleStart","touchInfo","current","handleActive","extendedTouchInfo","handleEnd"],"sourceRoot":"../../src","sources":["use-gesture-handler.ts"],"mappings":"AAAA,SAGEA,QAAQ,QACH,4BAA4B;AACnC,SAASC,WAAW,QAAQ,OAAO;AAenC,MAAMC,iBAAiB,GACrBC,eAAqD,IAClD;EACH,MAAM;IAAEC,OAAO;IAAEC,QAAQ;IAAEC;EAAM,CAAC,GAAGH,eAAe;EAEpD,MAAMI,OAAO,GAAGP,QAAQ,CAAc,CAAC,CAAC,CAAQ;EAEhD,MAAMQ,WAAW,GAAGP,WAAW,CAC5BQ,SAAoB,IAAK;IACxB,IAAI,CAACL,OAAO,EAAE;IACd,OAAOA,OAAO,CAACK,SAAS,EAAEF,OAAO,CAACG,OAAO,CAAC;EAC5C,CAAC,EACD,CAACH,OAAO,EAAEH,OAAO,CAAC,CACnB;EAED,MAAMO,YAAY,GAAGV,WAAW,CAC7BW,iBAAsD,IAAK;IAC1D,IAAI,CAACP,QAAQ,EAAE;IACf,OAAOA,QAAQ,CAACO,iBAAiB,EAAEL,OAAO,CAACG,OAAO,CAAC;EACrD,CAAC,EACD,CAACH,OAAO,EAAEF,QAAQ,CAAC,CACpB;EAED,MAAMQ,SAAS,GAAGZ,WAAW,CAC1BW,iBAAsD,IAAK;IAC1D,IAAI,CAACN,KAAK,EAAE;IACZ,OAAOA,KAAK,CAACM,iBAAiB,EAAEL,OAAO,CAACG,OAAO,CAAC;EAClD,CAAC,EACD,CAACH,OAAO,EAAED,KAAK,CAAC,CACjB;EAED,OAAO;IACLF,OAAO,EAAEI,WAAW;IACpBH,QAAQ,EAAEM,YAAY;IACtBL,KAAK,EAAEO;EACT,CAAC;AACH,CAAC;AAED,SAASX,iBAAiB"}

package/lib/module/index.js

@@ -0,0 +1,4 @@
+export * from './canvas';
+export * from './hoc';
+export * from './hooks/use-gesture-handler';
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,OAAO;AACrB,cAAc,6BAA6B"}

package/lib/module/utils/get-circle-path.js

@@ -0,0 +1,10 @@
+import { Skia } from '@shopify/react-native-skia';
+export const getCirclePath = _ref => {
+  let {
+    cx,
+    cy,
+    r
+  } = _ref;
+  return Skia.Path.Make().addCircle(cx, cy, r);
+};
+//# sourceMappingURL=get-circle-path.js.map

package/lib/module/utils/get-circle-path.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Skia","getCirclePath","cx","cy","r","Path","Make","addCircle"],"sourceRoot":"../../src","sources":["get-circle-path.ts"],"mappings":"AAAA,SAASA,IAAI,QAAQ,4BAA4B;AAIjD,OAAO,MAAMC,aAAa,GAAG,QAAwC;EAAA,IAAvC;IAAEC,EAAE;IAAEC,EAAE;IAAEC;EAAuB,CAAC;EAC9D,OAAOJ,IAAI,CAACK,IAAI,CAACC,IAAI,EAAE,CAACC,SAAS,CAACL,EAAE,EAAEC,EAAE,EAAEC,CAAC,CAAC;AAC9C,CAAC"}

package/lib/module/utils/get-rect-path.js

@@ -0,0 +1,41 @@
+import { rect, rrect, Skia } from '@shopify/react-native-skia';
+const getRectPath = params => {
+  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;
+};
+const getRoundedRectPath = params => {
+  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 };
+//# sourceMappingURL=get-rect-path.js.map

package/lib/module/utils/get-rect-path.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["rect","rrect","Skia","getRectPath","params","skPath","Path","Make","addRect","x","y","width","height","getRoundedRectPath","r","addRRect"],"sourceRoot":"../../src","sources":["get-rect-path.ts"],"mappings":"AAAA,SAASA,IAAI,EAAEC,KAAK,EAAEC,IAAI,QAAgB,4BAA4B;AAWtE,MAAMC,WAAW,GAAIC,MAAyB,IAAK;EACjD,MAAMC,MAAM,GAAGH,IAAI,CAACI,IAAI,CAACC,IAAI,EAAE;EAC/B,IAAI,MAAM,IAAIH,MAAM,EAAE;IACpB;IACA,MAAM;MAAEJ;IAAK,CAAC,GAAGI,MAAM;IAEvBC,MAAM,CAACG,OAAO,CAACR,IAAI,CAAC;IACpB,OAAOK,MAAM;EACf;EACA,MAAM;IAAEI,CAAC;IAAEC,CAAC;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAGR,MAAM;EACtCC,MAAM,CAACG,OAAO,CAACR,IAAI,CAACS,CAAC,EAAEC,CAAC,EAAEC,KAAK,EAAEC,MAAM,CAAC,CAAC;EACzC,OAAOP,MAAM;AACf,CAAC;AAMD,MAAMQ,kBAAkB,GAAIT,MAAgC,IAAK;EAC/D,MAAM;IAAEU;EAAE,CAAC,GAAGV,MAAM;EACpB,IAAI,MAAM,IAAIA,MAAM,EAAE;IACpB;IACA,MAAM;MAAEJ;IAAK,CAAC,GAAGI,MAAM;IACvB,OAAOF,IAAI,CAACI,IAAI,CAACC,IAAI,EAAE,CAACQ,QAAQ,CAACd,KAAK,CAACD,IAAI,EAAEc,CAAC,EAAEA,CAAC,CAAC,CAAC;EACrD;EACA,MAAM;IAAEL,CAAC;IAAEC,CAAC;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAGR,MAAM;EACtC,OAAOF,IAAI,CAACI,IAAI,CAACC,IAAI,EAAE,CAACQ,QAAQ,CAACd,KAAK,CAACD,IAAI,CAACS,CAAC,EAAEC,CAAC,EAAEC,KAAK,EAAEC,MAAM,CAAC,EAAEE,CAAC,EAAEA,CAAC,CAAC,CAAC;AAC1E,CAAC;AAED,SAASX,WAAW,EAAEU,kBAAkB"}

package/lib/module/utils/unwrap-animated-value.js

@@ -0,0 +1,16 @@
+const unwrapAnimatedValue = value => {
+  if (value.current != null) {
+    return value.current;
+  }
+  return value;
+};
+const unwrapAnimatedValueObject = value => {
+  return Object.keys(value).reduce((acc, key) => {
+    return {
+      ...acc,
+      [key]: unwrapAnimatedValue(value[key])
+    };
+  }, {});
+};
+export { unwrapAnimatedValue, unwrapAnimatedValueObject };
+//# sourceMappingURL=unwrap-animated-value.js.map

package/lib/module/utils/unwrap-animated-value.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["unwrapAnimatedValue","value","current","unwrapAnimatedValueObject","Object","keys","reduce","acc","key"],"sourceRoot":"../../src","sources":["unwrap-animated-value.ts"],"mappings":"AAEA,MAAMA,mBAAmB,GAAOC,KAAuB,IAAQ;EAC7D,IAAKA,KAAK,CAAkBC,OAAO,IAAI,IAAI,EAAE;IAC3C,OAAQD,KAAK,CAAkBC,OAAO;EACxC;EACA,OAAOD,KAAK;AACd,CAAC;AAED,MAAME,yBAAyB,GAC7BF,KAAoC,IACjB;EACnB,OAAOG,MAAM,CAACC,IAAI,CAACJ,KAAK,CAAC,CAACK,MAAM,CAAC,CAACC,GAAG,EAAEC,GAAG,KAAK;IAC7C,OAAO;MAAE,GAAGD,GAAG;MAAE,CAACC,GAAG,GAAGR,mBAAmB,CAACC,KAAK,CAACO,GAAG,CAAC;IAAE,CAAC;EAC3D,CAAC,EAAE,CAAC,CAAC,CAAC;AACR,CAAC;AAED,SAASR,mBAAmB,EAAEG,yBAAyB"}

package/lib/typescript/canvas/canvas.d.ts

@@ -0,0 +1,5 @@
+import { CanvasProps } from '@shopify/react-native-skia';
+import React from 'react';
+declare const Canvas: React.FC<CanvasProps>;
+export { Canvas };
+//# sourceMappingURL=canvas.d.ts.map

package/lib/typescript/canvas/canvas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas.d.ts","sourceRoot":"","sources":["../../../src/canvas/canvas.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EAGZ,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAoB,MAAM,OAAO,CAAC;AAGzC,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAsDjC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/lib/typescript/canvas/context.d.ts

@@ -0,0 +1,14 @@
+import type { ExtendedTouchInfo, TouchInfo, Vector } from '@shopify/react-native-skia';
+import React from 'react';
+export type TouchableHandlerContextType = {
+    current: Record<string, {
+        onStart: (touchInfo: TouchInfo) => void;
+        onActive: (touchInfo: ExtendedTouchInfo) => void;
+        onEnd: (touchInfo: ExtendedTouchInfo) => void;
+        isPointInPath: (point: Vector) => boolean;
+    }>;
+};
+declare const TouchHandlerContext: React.Context<TouchableHandlerContextType>;
+declare const useTouchHandlerContext: () => TouchableHandlerContextType;
+export { TouchHandlerContext, useTouchHandlerContext };
+//# sourceMappingURL=context.d.ts.map

package/lib/typescript/canvas/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/canvas/context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,SAAS,EACT,MAAM,EACP,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,MAAM,MAAM,2BAA2B,GAAG;IACxC,OAAO,EAAE,MAAM,CACb,MAAM,EACN;QACE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;QACxC,QAAQ,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAC;QACjD,KAAK,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAC;QAC9C,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;KAC3C,CACF,CAAC;CACH,CAAC;AACF,QAAA,MAAM,mBAAmB,4CAEvB,CAAC;AAEH,QAAA,MAAM,sBAAsB,mCAE3B,CAAC;AAEF,OAAO,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,CAAC"}

package/lib/typescript/canvas/index.d.ts

@@ -0,0 +1,2 @@
+export * from './canvas';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/canvas/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/canvas/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/lib/typescript/hoc/index.d.ts

@@ -0,0 +1,2 @@
+export * from './with-touchable-handler';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/hoc/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hoc/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}

package/lib/typescript/hoc/with-touchable-handler.d.ts

@@ -0,0 +1,15 @@
+import { ExtendedTouchInfo, SkiaProps, SkiaValue, SkPath, TouchInfo } from '@shopify/react-native-skia';
+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>;
+declare const withTouchableHandler: <T>(Component: (props: WithTouchableHandlerProps<T>) => JSX.Element) => ({ onStart: onStartProp, onActive: onActiveProp, onEnd: onEndProp, touchablePath, ...props }: WithTouchableHandlerProps<T>) => JSX.Element;
+export { withTouchableHandler };
+//# sourceMappingURL=with-touchable-handler.d.ts.map

package/lib/typescript/hoc/with-touchable-handler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-touchable-handler.d.ts","sourceRoot":"","sources":["../../../src/hoc/with-touchable-handler.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,SAAS,EACT,MAAM,EACN,SAAS,EAGV,MAAM,4BAA4B,CAAC;AAUpC,MAAM,MAAM,eAAe,GAAG;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,CAAC,SAAS,EAAE,iBAAiB,GAAG,eAAe,KAAK,IAAI,CAAC;IACnE,KAAK,EAAE,CAAC,SAAS,EAAE,iBAAiB,GAAG,eAAe,KAAK,IAAI,CAAC;IAChE,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;CAC3C,CAAC;AAEF,KAAK,yBAAyB,CAAC,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,GAC9C,OAAO,CAAC,qBAAqB,CAAC,CAAC;AAiBjC,QAAA,MAAM,oBAAoB,0DAC4B,WAAW,+IA2EhE,CAAC;AAEF,OAAO,EAAE,oBAAoB,EAAE,CAAC"}

package/lib/typescript/hooks/use-gesture-handler.d.ts

@@ -0,0 +1,14 @@
+import { ExtendedTouchInfo, TouchInfo } from '@shopify/react-native-skia';
+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;
+};
+declare const useGestureHandler: <ContextType>(gestureHandlers: UseGestureHandlerParams<ContextType>) => {
+    onStart: (touchInfo: TouchInfo) => void;
+    onActive: (extendedTouchInfo: ExtendedTouchInfo & TranslationInfo) => void;
+    onEnd: (extendedTouchInfo: ExtendedTouchInfo & TranslationInfo) => void;
+};
+export { useGestureHandler };
+//# sourceMappingURL=use-gesture-handler.d.ts.map

package/lib/typescript/hooks/use-gesture-handler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-gesture-handler.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-gesture-handler.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,SAAS,EAEV,MAAM,4BAA4B,CAAC;AAEpC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAE9C,KAAK,uBAAuB,CAAC,WAAW,IAAI;IAC1C,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAC/D,QAAQ,CAAC,EAAE,CACT,iBAAiB,EAAE,iBAAiB,GAAG,eAAe,EACtD,OAAO,EAAE,WAAW,KACjB,IAAI,CAAC;IACV,KAAK,CAAC,EAAE,CACN,iBAAiB,EAAE,iBAAiB,GAAG,eAAe,EACtD,OAAO,EAAE,WAAW,KACjB,IAAI,CAAC;CACX,CAAC;AAEF,QAAA,MAAM,iBAAiB;yBAQP,SAAS;kCAQD,iBAAiB,GAAG,eAAe;+BAQnC,iBAAiB,GAAG,eAAe;CAY1D,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/lib/typescript/index.d.ts

@@ -0,0 +1,4 @@
+export * from './canvas';
+export * from './hoc';
+export * from './hooks/use-gesture-handler';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,6BAA6B,CAAC"}

package/lib/typescript/utils/get-circle-path.d.ts

@@ -0,0 +1,8 @@
+type GetCirclePathParams = {
+    cx: number;
+    cy: number;
+    r: number;
+};
+export declare const getCirclePath: ({ cx, cy, r }: GetCirclePathParams) => import("@shopify/react-native-skia").SkPath;
+export {};
+//# sourceMappingURL=get-circle-path.d.ts.map

package/lib/typescript/utils/get-circle-path.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-circle-path.d.ts","sourceRoot":"","sources":["../../../src/utils/get-circle-path.ts"],"names":[],"mappings":"AAEA,KAAK,mBAAmB,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEjE,eAAO,MAAM,aAAa,kBAAmB,mBAAmB,gDAE/D,CAAC"}

package/lib/typescript/utils/get-rect-path.d.ts

@@ -0,0 +1,16 @@
+import { SkRect } from '@shopify/react-native-skia';
+type GetRectPathParams = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+} | {
+    rect: SkRect;
+};
+declare const getRectPath: (params: GetRectPathParams) => import("@shopify/react-native-skia").SkPath;
+type GetRoundedRectPathParams = GetRectPathParams & {
+    r: number;
+};
+declare const getRoundedRectPath: (params: GetRoundedRectPathParams) => import("@shopify/react-native-skia").SkPath;
+export { getRectPath, getRoundedRectPath };
+//# sourceMappingURL=get-rect-path.d.ts.map

package/lib/typescript/utils/get-rect-path.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-rect-path.d.ts","sourceRoot":"","sources":["../../../src/utils/get-rect-path.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEvE,KAAK,iBAAiB,GAClB;IACE,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,GACD;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAErB,QAAA,MAAM,WAAW,WAAY,iBAAiB,gDAY7C,CAAC;AAEF,KAAK,wBAAwB,GAAG,iBAAiB,GAAG;IAClD,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,QAAA,MAAM,kBAAkB,WAAY,wBAAwB,gDAS3D,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,CAAC"}

package/lib/typescript/utils/unwrap-animated-value.d.ts

@@ -0,0 +1,5 @@
+import type { SkiaValue } from '@shopify/react-native-skia';
+declare const unwrapAnimatedValue: <T>(value: T | SkiaValue<T>) => T;
+declare const unwrapAnimatedValueObject: <T>(value: Record<any, T | SkiaValue<T>>) => Record<any, T>;
+export { unwrapAnimatedValue, unwrapAnimatedValueObject };
+//# sourceMappingURL=unwrap-animated-value.d.ts.map

package/lib/typescript/utils/unwrap-animated-value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"unwrap-animated-value.d.ts","sourceRoot":"","sources":["../../../src/utils/unwrap-animated-value.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAE5D,QAAA,MAAM,mBAAmB,mCAKxB,CAAC;AAEF,QAAA,MAAM,yBAAyB,6DAM9B,CAAC;AAEF,OAAO,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,CAAC"}

package/package.json

@@ -0,0 +1,160 @@
+{
+  "name": "react-native-skia-gesture",
+  "version": "0.1.6",
+  "description": "A detection system for React Native Skia components",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "!lib/typescript/example",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "test": "jest",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "prepack": "bob build",
+    "release": "release-it",
+    "example": "yarn --cwd example",
+    "bootstrap": "yarn example && yarn install"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": "https://github.com/enzomanuelmangano/react-native-skia-gesture",
+  "author": "Enzo Manuel Mangano <enzomanuelmangano@gmail.com> (https://github.com/enzomanuelmangano)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/enzomanuelmangano/react-native-skia-gesture/issues"
+  },
+  "homepage": "https://github.com/enzomanuelmangano/react-native-skia-gesture#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^17.0.2",
+    "@evilmartians/lefthook": "^1.2.2",
+    "@react-native-community/eslint-config": "^3.0.2",
+    "@release-it/conventional-changelog": "^5.0.0",
+    "@shopify/react-native-skia": "0.1.157",
+    "@types/jest": "^28.1.2",
+    "@types/react": "18.0.26",
+    "@types/react-native": "0.70.0",
+    "commitlint": "^17.0.2",
+    "del-cli": "^5.0.0",
+    "eslint": "^8.4.1",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "jest": "^28.1.1",
+    "pod-install": "^0.1.0",
+    "prettier": "^2.0.5",
+    "react": "18.1.0",
+    "react-native": "0.70.5",
+    "react-native-builder-bob": "^0.20.0",
+    "release-it": "^15.0.0",
+    "typescript": "^4.5.2"
+  },
+  "resolutions": {
+    "@types/react": "17.0.21"
+  },
+  "peerDependencies": {
+    "react": ">= 18.0.0",
+    "react-native": "*"
+  },
+  "engines": {
+    "node": ">= 16.0.0"
+  },
+  "packageManager": "^yarn@1.22.15",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "angular"
+      }
+    }
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@react-native-community",
+      "prettier"
+    ],
+    "rules": {
+      "prettier/prettier": [
+        "error",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "es5",
+          "useTabs": false
+        }
+      ]
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  }
+}

package/src/canvas/canvas.tsx

@@ -0,0 +1,66 @@
+import {
+  Canvas as SkiaCanvas,
+  CanvasProps,
+  useTouchHandler,
+  useValue,
+} from '@shopify/react-native-skia';
+import React, { useEffect } from 'react';
+import { TouchHandlerContext, TouchableHandlerContextType } from './context';
+
+const Canvas: React.FC<CanvasProps> = ({ children, onTouch, ...props }) => {
+  const touchableRefs = useValue<TouchableHandlerContextType['current']>({});
+
+  const activeKey = useValue<string | null>(null);
+
+  const touchHandler = useTouchHandler(
+    {
+      onStart: (event) => {
+        const keys = Object.keys(touchableRefs.current);
+        for (let i = 0; i < keys.length; i++) {
+          const key = keys[i] as string;
+          const touchableItem = touchableRefs.current[key];
+
+          if (touchableItem?.isPointInPath(event)) {
+            activeKey.current = key;
+            touchableItem.onStart?.(event);
+            return;
+          }
+        }
+      },
+      onActive: (event) => {
+        if (!activeKey.current) return;
+        const touchableItem = touchableRefs.current[activeKey.current];
+        return touchableItem?.onActive?.(event);
+      },
+      onEnd: (event) => {
+        if (!activeKey.current) return;
+        const touchableItem = touchableRefs.current[activeKey.current];
+        activeKey.current = null;
+        return touchableItem?.onEnd?.(event);
+      },
+    },
+    [touchableRefs, activeKey]
+  );
+
+  useEffect(() => {
+    return () => {
+      touchableRefs.current = {};
+    };
+  }, [touchableRefs]);
+
+  return (
+    <SkiaCanvas
+      {...props}
+      onTouch={(touchInfo) => {
+        touchHandler(touchInfo);
+        return onTouch?.(touchInfo);
+      }}
+    >
+      <TouchHandlerContext.Provider value={touchableRefs}>
+        {children}
+      </TouchHandlerContext.Provider>
+    </SkiaCanvas>
+  );
+};
+
+export { Canvas };

package/src/canvas/context.tsx

@@ -0,0 +1,27 @@
+import type {
+  ExtendedTouchInfo,
+  TouchInfo,
+  Vector,
+} from '@shopify/react-native-skia';
+import React, { useContext } from 'react';
+
+export type TouchableHandlerContextType = {
+  current: Record<
+    string,
+    {
+      onStart: (touchInfo: TouchInfo) => void;
+      onActive: (touchInfo: ExtendedTouchInfo) => void;
+      onEnd: (touchInfo: ExtendedTouchInfo) => void;
+      isPointInPath: (point: Vector) => boolean;
+    }
+  >;
+};
+const TouchHandlerContext = React.createContext<TouchableHandlerContextType>({
+  current: {},
+});
+
+const useTouchHandlerContext = () => {
+  return useContext(TouchHandlerContext);
+};
+
+export { TouchHandlerContext, useTouchHandlerContext };

package/src/canvas/index.ts

@@ -0,0 +1 @@
+export * from './canvas';

package/src/hoc/index.ts

@@ -0,0 +1 @@
+export * from './with-touchable-handler';