react-native-skia-gesture 0.2.0 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +71 -20
- package/lib/commonjs/canvas/canvas.js +57 -56
- package/lib/commonjs/canvas/canvas.js.map +1 -1
- package/lib/commonjs/canvas/context.js +1 -1
- package/lib/commonjs/canvas/context.js.map +1 -1
- package/lib/commonjs/components/index.js +4 -4
- package/lib/commonjs/components/index.js.map +1 -1
- package/lib/commonjs/hoc/with-touchable-handler.js +29 -34
- package/lib/commonjs/hoc/with-touchable-handler.js.map +1 -1
- package/lib/commonjs/hooks/use-gesture-handler.js +11 -5
- package/lib/commonjs/hooks/use-gesture-handler.js.map +1 -1
- package/lib/commonjs/index.js +1 -1
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/utils/get-circle-path.js +2 -0
- package/lib/commonjs/utils/get-circle-path.js.map +1 -1
- package/lib/commonjs/utils/get-rect-path.js +8 -5
- package/lib/commonjs/utils/get-rect-path.js.map +1 -1
- package/lib/commonjs/utils/unwrap-animated-value.js +7 -0
- package/lib/commonjs/utils/unwrap-animated-value.js.map +1 -1
- package/lib/module/canvas/canvas.js +59 -58
- package/lib/module/canvas/canvas.js.map +1 -1
- package/lib/module/canvas/context.js +1 -1
- package/lib/module/canvas/context.js.map +1 -1
- package/lib/module/components/index.js +4 -4
- package/lib/module/components/index.js.map +1 -1
- package/lib/module/hoc/with-touchable-handler.js +28 -34
- package/lib/module/hoc/with-touchable-handler.js.map +1 -1
- package/lib/module/hooks/use-gesture-handler.js +11 -5
- package/lib/module/hooks/use-gesture-handler.js.map +1 -1
- package/lib/module/index.js +1 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/utils/get-circle-path.js +2 -0
- package/lib/module/utils/get-circle-path.js.map +1 -1
- package/lib/module/utils/get-rect-path.js +9 -6
- package/lib/module/utils/get-rect-path.js.map +1 -1
- package/lib/module/utils/unwrap-animated-value.js +7 -0
- package/lib/module/utils/unwrap-animated-value.js.map +1 -1
- package/lib/typescript/canvas/canvas.d.ts +6 -2
- package/lib/typescript/canvas/canvas.d.ts.map +1 -1
- package/lib/typescript/canvas/context.d.ts +6 -5
- package/lib/typescript/canvas/context.d.ts.map +1 -1
- package/lib/typescript/components/index.d.ts.map +1 -1
- package/lib/typescript/hoc/with-touchable-handler.d.ts +7 -9
- package/lib/typescript/hoc/with-touchable-handler.d.ts.map +1 -1
- package/lib/typescript/hooks/use-gesture-handler.d.ts +7 -8
- package/lib/typescript/hooks/use-gesture-handler.d.ts.map +1 -1
- package/lib/typescript/index.d.ts +1 -1
- package/lib/typescript/index.d.ts.map +1 -1
- package/lib/typescript/utils/get-circle-path.d.ts.map +1 -1
- package/lib/typescript/utils/get-rect-path.d.ts.map +1 -1
- package/lib/typescript/utils/unwrap-animated-value.d.ts +2 -1
- package/lib/typescript/utils/unwrap-animated-value.d.ts.map +1 -1
- package/package.json +6 -4
- package/src/canvas/canvas.tsx +96 -80
- package/src/canvas/context.tsx +19 -10
- package/src/components/index.ts +5 -4
- package/src/hoc/with-touchable-handler.tsx +40 -35
- package/src/hooks/use-gesture-handler.ts +25 -16
- package/src/index.ts +1 -1
- package/src/utils/get-circle-path.ts +1 -0
- package/src/utils/get-rect-path.ts +11 -6
- package/src/utils/unwrap-animated-value.ts +9 -1
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["getRectPath","params","skPath","Skia","Path","Make","rect","addRect","x","y","width","height","getRoundedRectPath","r","addRRect","
|
1
|
+
{"version":3,"names":["getRectPath","params","skPath","Skia","Path","Make","rect","addRect","x","y","width","height","XYWHRect","getRoundedRectPath","r","addRRect","RRectXY","roundedRect"],"sourceRoot":"../../src","sources":["get-rect-path.ts"],"mappings":";;;;;;AAAA;AAWA,MAAMA,WAAW,GAAIC,MAAyB,IAAK;EACjD,SAAS;;EAET,MAAMC,MAAM,GAAGC,qBAAI,CAACC,IAAI,CAACC,IAAI,EAAE;EAC/B,IAAI,MAAM,IAAIJ,MAAM,EAAE;IACpB,MAAM;MAAEK;IAAK,CAAC,GAAGL,MAAM;IAEvBC,MAAM,CAACK,OAAO,CAACD,IAAI,CAAC;IACpB,OAAOJ,MAAM;EACf;EACA,MAAM;IAAEM,CAAC;IAAEC,CAAC;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAGV,MAAM;EAEtCC,MAAM,CAACK,OAAO,CAACJ,qBAAI,CAACS,QAAQ,CAACJ,CAAC,EAAEC,CAAC,EAAEC,KAAK,EAAEC,MAAM,CAAC,CAAC;EAClD,OAAOT,MAAM;AACf,CAAC;AAAC;AAMF,MAAMW,kBAAkB,GAAIZ,MAAgC,IAAK;EAC/D,SAAS;;EAET,MAAM;IAAEa;EAAE,CAAC,GAAGb,MAAM;EACpB,MAAMC,MAAM,GAAGC,qBAAI,CAACC,IAAI,CAACC,IAAI,EAAE;EAC/B,IAAI,MAAM,IAAIJ,MAAM,EAAE;IACpB,MAAM;MAAEK;IAAK,CAAC,GAAGL,MAAM;IAEvBC,MAAM,CAACa,QAAQ,CAACZ,qBAAI,CAACa,OAAO,CAACV,IAAI,EAAEQ,CAAC,EAAEA,CAAC,CAAC,CAAC;IACzC,OAAOZ,MAAM;EACf;EACA,MAAM;IAAEM,CAAC;IAAEC,CAAC;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAGV,MAAM;EAEtC,MAAMgB,WAAW,GAAGd,qBAAI,CAACa,OAAO,CAACb,qBAAI,CAACS,QAAQ,CAACJ,CAAC,EAAEC,CAAC,EAAEC,KAAK,EAAEC,MAAM,CAAC,EAAEG,CAAC,EAAEA,CAAC,CAAC;EAC1EZ,MAAM,CAACa,QAAQ,CAACE,WAAW,CAAC;EAC5B,OAAOf,MAAM;AACf,CAAC;AAAC"}
|
@@ -5,6 +5,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.unwrapAnimatedValueObject = exports.unwrapAnimatedValue = void 0;
|
7
7
|
const unwrapAnimatedValue = value => {
|
8
|
+
'worklet';
|
9
|
+
|
10
|
+
if (value.value != null) {
|
11
|
+
return value.value;
|
12
|
+
}
|
8
13
|
if (value.current != null) {
|
9
14
|
return value.current;
|
10
15
|
}
|
@@ -16,6 +21,8 @@ const unwrapAnimatedValue = value => {
|
|
16
21
|
};
|
17
22
|
exports.unwrapAnimatedValue = unwrapAnimatedValue;
|
18
23
|
const unwrapAnimatedValueObject = value => {
|
24
|
+
'worklet';
|
25
|
+
|
19
26
|
return Object.keys(value).reduce((acc, key) => {
|
20
27
|
return {
|
21
28
|
...acc,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["unwrapAnimatedValue","value","current","selector","skiaValueWithSelector","unwrapAnimatedValueObject","Object","keys","reduce","acc","key"],"sourceRoot":"../../src","sources":["unwrap-animated-value.ts"],"mappings":";;;;;;
|
1
|
+
{"version":3,"names":["unwrapAnimatedValue","value","current","selector","skiaValueWithSelector","unwrapAnimatedValueObject","Object","keys","reduce","acc","key"],"sourceRoot":"../../src","sources":["unwrap-animated-value.ts"],"mappings":";;;;;;AAOA,MAAMA,mBAAmB,GACvBC,KAA4E,IACtE;EACN,SAAS;;EAET,IAAKA,KAAK,CAA6BA,KAAK,IAAI,IAAI,EAAE;IACpD,OAAQA,KAAK,CAA6BA,KAAK;EACjD;EAEA,IAAKA,KAAK,CAAkBC,OAAO,IAAI,IAAI,EAAE;IAC3C,OAAQD,KAAK,CAAkBC,OAAO;EACxC;EAEA,IAAKD,KAAK,CAA8BE,QAAQ,IAAI,IAAI,EAAE;IACxD,MAAMC,qBAAqB,GAAGH,KAAiC;IAC/D,OAAOG,qBAAqB,CAACD,QAAQ,CAACC,qBAAqB,CAACH,KAAK,CAACC,OAAO,CAAC;EAC5E;EAEA,OAAOD,KAAK;AACd,CAAC;AAAC;AAEF,MAAMI,yBAAyB,GAC7BJ,KAAoC,IACjB;EACnB,SAAS;;EACT,OAAOK,MAAM,CAACC,IAAI,CAACN,KAAK,CAAC,CAACO,MAAM,CAAC,CAACC,GAAG,EAAEC,GAAG,KAAK;IAC7C,OAAO;MAAE,GAAGD,GAAG;MAAE,CAACC,GAAG,GAAGV,mBAAmB,CAACC,KAAK,CAACS,GAAG,CAAC;IAAE,CAAC;EAC3D,CAAC,EAAE,CAAC,CAAC,CAAC;AACR,CAAC;AAAC"}
|
@@ -1,72 +1,73 @@
|
|
1
|
-
|
2
|
-
import {
|
3
|
-
import
|
1
|
+
import { Canvas as SkiaCanvas } from '@shopify/react-native-skia';
|
2
|
+
import React, { useEffect, useMemo, useState } from 'react';
|
3
|
+
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
|
4
|
+
import Animated, { useSharedValue } from 'react-native-reanimated';
|
4
5
|
import { TouchHandlerContext } from './context';
|
5
|
-
const Canvas =
|
6
|
+
const Canvas = _ref => {
|
6
7
|
let {
|
7
8
|
children,
|
8
|
-
|
9
|
+
panGesture = Gesture.Pan(),
|
9
10
|
...props
|
10
11
|
} = _ref;
|
11
|
-
|
12
|
-
const
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
}
|
33
|
-
const indexedKey = (_activatedKey$split = activatedKey.split('__')) === null || _activatedKey$split === void 0 ? void 0 : _activatedKey$split[0];
|
34
|
-
if (!indexedKey) {
|
35
|
-
return;
|
36
|
-
}
|
37
|
-
const touchableItem = touchableRefs.current[indexedKey];
|
38
|
-
return touchableItem === null || touchableItem === void 0 ? void 0 : (_touchableItem$onActi = touchableItem.onActive) === null || _touchableItem$onActi === void 0 ? void 0 : _touchableItem$onActi.call(touchableItem, event);
|
39
|
-
},
|
40
|
-
onEnd: event => {
|
41
|
-
var _activatedKey$split2, _touchableItem$onEnd;
|
42
|
-
const activatedKey = activeKey.current.find(key => key.includes(event.id.toString()));
|
43
|
-
if (!activatedKey) {
|
44
|
-
return;
|
45
|
-
}
|
46
|
-
const indexedKey = (_activatedKey$split2 = activatedKey.split('__')) === null || _activatedKey$split2 === void 0 ? void 0 : _activatedKey$split2[0];
|
47
|
-
if (!indexedKey) {
|
48
|
-
return;
|
12
|
+
// Instead of value, provide a subscribe method and reload the refs
|
13
|
+
const touchableRefs = useMemo(() => {
|
14
|
+
return {
|
15
|
+
value: {}
|
16
|
+
};
|
17
|
+
}, []);
|
18
|
+
const activeKey = useSharedValue([]);
|
19
|
+
const [loadedRefs, prepareLoadedRefs] = useState({});
|
20
|
+
setTimeout(() => {
|
21
|
+
prepareLoadedRefs(touchableRefs.value);
|
22
|
+
}, 1000);
|
23
|
+
const mainGesture = panGesture.onBegin(event => {
|
24
|
+
const keys = Object.keys(loadedRefs);
|
25
|
+
for (let i = 0; i < keys.length; i++) {
|
26
|
+
const key = keys[i];
|
27
|
+
const touchableItem = loadedRefs[key];
|
28
|
+
const isPointInPath = touchableItem === null || touchableItem === void 0 ? void 0 : touchableItem.isPointInPath(event);
|
29
|
+
if (isPointInPath && touchableItem !== null && touchableItem !== void 0 && touchableItem.onStart) {
|
30
|
+
var _touchableItem$onStar;
|
31
|
+
activeKey.value.push(`${key}__${event.handlerTag}`);
|
32
|
+
(_touchableItem$onStar = touchableItem.onStart) === null || _touchableItem$onStar === void 0 ? void 0 : _touchableItem$onStar.call(touchableItem, event);
|
49
33
|
}
|
50
|
-
const touchableItem = touchableRefs.current[indexedKey];
|
51
|
-
activeKey.current = activeKey.current.filter(key => !key.includes(event.id.toString()));
|
52
|
-
return touchableItem === null || touchableItem === void 0 ? void 0 : (_touchableItem$onEnd = touchableItem.onEnd) === null || _touchableItem$onEnd === void 0 ? void 0 : _touchableItem$onEnd.call(touchableItem, event);
|
53
34
|
}
|
54
|
-
}
|
35
|
+
}).onUpdate(event => {
|
36
|
+
var _activatedKey$split, _touchableItem$onActi;
|
37
|
+
const activatedKey = activeKey.value.find(key => key.includes(event.handlerTag.toString()));
|
38
|
+
if (!activatedKey) {
|
39
|
+
return;
|
40
|
+
}
|
41
|
+
const indexedKey = (_activatedKey$split = activatedKey.split('__')) === null || _activatedKey$split === void 0 ? void 0 : _activatedKey$split[0];
|
42
|
+
if (!indexedKey) {
|
43
|
+
return;
|
44
|
+
}
|
45
|
+
const touchableItem = loadedRefs[indexedKey];
|
46
|
+
return touchableItem === null || touchableItem === void 0 ? void 0 : (_touchableItem$onActi = touchableItem.onActive) === null || _touchableItem$onActi === void 0 ? void 0 : _touchableItem$onActi.call(touchableItem, event);
|
47
|
+
}).onFinalize(event => {
|
48
|
+
var _activatedKey$split2, _touchableItem$onEnd;
|
49
|
+
const activatedKey = activeKey.value.find(key => key.includes(event.handlerTag.toString()));
|
50
|
+
if (!activatedKey) {
|
51
|
+
return;
|
52
|
+
}
|
53
|
+
const indexedKey = (_activatedKey$split2 = activatedKey.split('__')) === null || _activatedKey$split2 === void 0 ? void 0 : _activatedKey$split2[0];
|
54
|
+
if (!indexedKey) {
|
55
|
+
return;
|
56
|
+
}
|
57
|
+
const touchableItem = loadedRefs[indexedKey];
|
58
|
+
activeKey.value = activeKey.value.filter(key => !key.includes(event.handlerTag.toString()));
|
59
|
+
return touchableItem === null || touchableItem === void 0 ? void 0 : (_touchableItem$onEnd = touchableItem.onEnd) === null || _touchableItem$onEnd === void 0 ? void 0 : _touchableItem$onEnd.call(touchableItem, event);
|
60
|
+
});
|
55
61
|
useEffect(() => {
|
56
62
|
return () => {
|
57
|
-
touchableRefs.
|
63
|
+
touchableRefs.value = {};
|
58
64
|
};
|
59
65
|
}, [touchableRefs]);
|
60
|
-
return /*#__PURE__*/React.createElement(
|
61
|
-
|
62
|
-
}, props, {
|
63
|
-
onTouch: touchInfo => {
|
64
|
-
touchHandler(touchInfo);
|
65
|
-
return onTouch === null || onTouch === void 0 ? void 0 : onTouch(touchInfo);
|
66
|
-
}
|
67
|
-
}), /*#__PURE__*/React.createElement(TouchHandlerContext.Provider, {
|
66
|
+
return /*#__PURE__*/React.createElement(GestureDetector, {
|
67
|
+
gesture: mainGesture
|
68
|
+
}, /*#__PURE__*/React.createElement(Animated.View, null, /*#__PURE__*/React.createElement(SkiaCanvas, props, /*#__PURE__*/React.createElement(TouchHandlerContext.Provider, {
|
68
69
|
value: touchableRefs
|
69
|
-
}, children));
|
70
|
-
}
|
70
|
+
}, children))));
|
71
|
+
};
|
71
72
|
export { Canvas };
|
72
73
|
//# sourceMappingURL=canvas.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["Canvas","SkiaCanvas","
|
1
|
+
{"version":3,"names":["Canvas","SkiaCanvas","React","useEffect","useMemo","useState","Gesture","GestureDetector","Animated","useSharedValue","TouchHandlerContext","children","panGesture","Pan","props","touchableRefs","value","activeKey","loadedRefs","prepareLoadedRefs","setTimeout","mainGesture","onBegin","event","keys","Object","i","length","key","touchableItem","isPointInPath","onStart","push","handlerTag","onUpdate","activatedKey","find","includes","toString","indexedKey","split","onActive","onFinalize","filter","onEnd"],"sourceRoot":"../../src","sources":["canvas.tsx"],"mappings":"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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["React","useContext","TouchHandlerContext","createContext","
|
1
|
+
{"version":3,"names":["React","useContext","TouchHandlerContext","createContext","value","useTouchHandlerContext"],"sourceRoot":"../../src","sources":["context.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AA2BzC,MAAMC,mBAAmB,gBAAGF,KAAK,CAACG,aAAa,CAA8B;EAC3EC,KAAK,EAAE,CAAC;AACV,CAAC,CAAC;AAEF,MAAMC,sBAAsB,GAAG,MAAM;EACnC,OAAOJ,UAAU,CAACC,mBAAmB,CAAC;AACxC,CAAC;AAED,SAASA,mBAAmB,EAAEG,sBAAsB"}
|
@@ -1,8 +1,8 @@
|
|
1
1
|
import { Circle as SkiaCircle, RoundedRect as SkiaRoundedRect, Rect as SkiaRect, Path as SkiaPath } from '@shopify/react-native-skia';
|
2
2
|
import { withTouchableHandler } from '../hoc';
|
3
3
|
export { Canvas } from '../canvas';
|
4
|
-
export const Circle = withTouchableHandler(SkiaCircle);
|
5
|
-
export const RoundedRect = withTouchableHandler(SkiaRoundedRect);
|
6
|
-
export const Rect = withTouchableHandler(SkiaRect);
|
7
|
-
export const Path = withTouchableHandler(SkiaPath);
|
4
|
+
export const Circle = withTouchableHandler(SkiaCircle, 'Circle');
|
5
|
+
export const RoundedRect = withTouchableHandler(SkiaRoundedRect, 'RoundedRect');
|
6
|
+
export const Rect = withTouchableHandler(SkiaRect, 'Rect');
|
7
|
+
export const Path = withTouchableHandler(SkiaPath, 'Path');
|
8
8
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["Circle","SkiaCircle","RoundedRect","SkiaRoundedRect","Rect","SkiaRect","Path","SkiaPath","withTouchableHandler","Canvas"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"AAAA,SACEA,MAAM,IAAIC,UAAU,EACpBC,WAAW,IAAIC,eAAe,EAC9BC,IAAI,IAAIC,QAAQ,EAChBC,IAAI,IAAIC,QAAQ,QACX,4BAA4B;
|
1
|
+
{"version":3,"names":["Circle","SkiaCircle","RoundedRect","SkiaRoundedRect","Rect","SkiaRect","Path","SkiaPath","withTouchableHandler","Canvas"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"AAAA,SACEA,MAAM,IAAIC,UAAU,EACpBC,WAAW,IAAIC,eAAe,EAC9BC,IAAI,IAAIC,QAAQ,EAChBC,IAAI,IAAIC,QAAQ,QACX,4BAA4B;AAEnC,SAASC,oBAAoB,QAAQ,QAAQ;AAE7C,SAASC,MAAM,QAAQ,WAAW;AAElC,OAAO,MAAMT,MAAM,GAAGQ,oBAAoB,CAACP,UAAU,EAAE,QAAQ,CAAC;AAChE,OAAO,MAAMC,WAAW,GAAGM,oBAAoB,CAACL,eAAe,EAAE,aAAa,CAAC;AAC/E,OAAO,MAAMC,IAAI,GAAGI,oBAAoB,CAACH,QAAQ,EAAE,MAAM,CAAC;AAC1D,OAAO,MAAMC,IAAI,GAAGE,oBAAoB,CAACD,QAAQ,EAAE,MAAM,CAAC"}
|
@@ -1,10 +1,11 @@
|
|
1
|
-
import { useValue } from '@shopify/react-native-skia';
|
2
1
|
import { useCallback, useEffect, useId } from 'react';
|
2
|
+
import { useTouchHandlerContext } from '../canvas/context';
|
3
3
|
import { getCirclePath } from '../utils/get-circle-path';
|
4
4
|
import { getRectPath, getRoundedRectPath } from '../utils/get-rect-path';
|
5
5
|
import { unwrapAnimatedValue, unwrapAnimatedValueObject } from '../utils/unwrap-animated-value';
|
6
|
-
|
7
|
-
|
6
|
+
export const getSkiaPath = (key, props) => {
|
7
|
+
'worklet';
|
8
|
+
|
8
9
|
const unwrappedProps = unwrapAnimatedValueObject(props);
|
9
10
|
switch (key) {
|
10
11
|
case 'Circle':
|
@@ -19,7 +20,7 @@ const getSkiaPath = (key, props) => {
|
|
19
20
|
return null;
|
20
21
|
}
|
21
22
|
};
|
22
|
-
const withTouchableHandler = Component => {
|
23
|
+
const withTouchableHandler = (Component, componentName) => {
|
23
24
|
return _ref => {
|
24
25
|
let {
|
25
26
|
onStart: onStartProp,
|
@@ -30,59 +31,52 @@ const withTouchableHandler = Component => {
|
|
30
31
|
} = _ref;
|
31
32
|
const id = useId();
|
32
33
|
const ref = useTouchHandlerContext();
|
33
|
-
const startingPoint = useValue(null);
|
34
34
|
const onStart = useCallback(event => {
|
35
|
-
|
36
|
-
|
37
|
-
y: event.y
|
38
|
-
};
|
35
|
+
'worklet';
|
36
|
+
|
39
37
|
return onStartProp === null || onStartProp === void 0 ? void 0 : onStartProp(event);
|
40
|
-
}, [onStartProp
|
38
|
+
}, [onStartProp]);
|
41
39
|
const onActive = useCallback(event => {
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
...event,
|
47
|
-
translationX,
|
48
|
-
translationY
|
49
|
-
});
|
50
|
-
}, [onActiveProp, startingPoint]);
|
40
|
+
'worklet';
|
41
|
+
|
42
|
+
return onActiveProp === null || onActiveProp === void 0 ? void 0 : onActiveProp(event);
|
43
|
+
}, [onActiveProp]);
|
51
44
|
const onEnd = useCallback(event => {
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
...event,
|
57
|
-
translationX,
|
58
|
-
translationY
|
59
|
-
});
|
60
|
-
}, [onEndProp, startingPoint]);
|
45
|
+
'worklet';
|
46
|
+
|
47
|
+
return onEndProp === null || onEndProp === void 0 ? void 0 : onEndProp(event);
|
48
|
+
}, [onEndProp]);
|
61
49
|
const isPointInPath = useCallback(point => {
|
50
|
+
'worklet';
|
51
|
+
|
62
52
|
if (touchablePath) {
|
63
53
|
return unwrapAnimatedValue(touchablePath).contains(point.x, point.y);
|
64
54
|
}
|
65
|
-
|
55
|
+
if (!componentName) return false;
|
56
|
+
const path = getSkiaPath(componentName, props);
|
66
57
|
if (!path) {
|
67
58
|
throw Error('No touchablePath provided');
|
68
59
|
}
|
69
60
|
return path.contains(point.x, point.y);
|
70
61
|
}, [props, touchablePath]);
|
71
62
|
useEffect(() => {
|
72
|
-
ref.
|
63
|
+
ref.value = {
|
73
64
|
[`id:${id}`]: {
|
74
65
|
isPointInPath,
|
75
66
|
onStart,
|
76
67
|
onActive,
|
77
68
|
onEnd
|
78
69
|
},
|
79
|
-
...ref.
|
70
|
+
...ref.value
|
80
71
|
};
|
72
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
73
|
+
}, [id, isPointInPath, onActive, onEnd, onStart]);
|
74
|
+
useEffect(() => {
|
81
75
|
return () => {
|
82
|
-
var _ref$
|
83
|
-
(_ref$
|
76
|
+
var _ref$value;
|
77
|
+
(_ref$value = ref.value) === null || _ref$value === void 0 ? true : delete _ref$value[`id:${id}`];
|
84
78
|
};
|
85
|
-
}, [id,
|
79
|
+
}, [id, props, ref, touchablePath]);
|
86
80
|
return Component(props);
|
87
81
|
};
|
88
82
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["
|
1
|
+
{"version":3,"names":["useCallback","useEffect","useId","useTouchHandlerContext","getCirclePath","getRectPath","getRoundedRectPath","unwrapAnimatedValue","unwrapAnimatedValueObject","getSkiaPath","key","props","unwrappedProps","path","withTouchableHandler","Component","componentName","onStart","onStartProp","onActive","onActiveProp","onEnd","onEndProp","touchablePath","id","ref","event","isPointInPath","point","contains","x","y","Error","value"],"sourceRoot":"../../src","sources":["with-touchable-handler.tsx"],"mappings":"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"}
|
@@ -1,23 +1,29 @@
|
|
1
|
-
import { useValue } from '@shopify/react-native-skia';
|
2
1
|
import { useCallback } from 'react';
|
2
|
+
import { useSharedValue } from 'react-native-reanimated';
|
3
3
|
const useGestureHandler = gestureHandlers => {
|
4
4
|
const {
|
5
5
|
onStart,
|
6
6
|
onActive,
|
7
7
|
onEnd
|
8
8
|
} = gestureHandlers;
|
9
|
-
const context =
|
9
|
+
const context = useSharedValue({});
|
10
10
|
const handleStart = useCallback(touchInfo => {
|
11
|
+
'worklet';
|
12
|
+
|
11
13
|
if (!onStart) return;
|
12
|
-
return onStart(touchInfo, context.
|
14
|
+
return onStart(touchInfo, context.value);
|
13
15
|
}, [context, onStart]);
|
14
16
|
const handleActive = useCallback(extendedTouchInfo => {
|
17
|
+
'worklet';
|
18
|
+
|
15
19
|
if (!onActive) return;
|
16
|
-
return onActive(extendedTouchInfo, context.
|
20
|
+
return onActive(extendedTouchInfo, context.value);
|
17
21
|
}, [context, onActive]);
|
18
22
|
const handleEnd = useCallback(extendedTouchInfo => {
|
23
|
+
'worklet';
|
24
|
+
|
19
25
|
if (!onEnd) return;
|
20
|
-
return onEnd(extendedTouchInfo, context.
|
26
|
+
return onEnd(extendedTouchInfo, context.value);
|
21
27
|
}, [context, onEnd]);
|
22
28
|
return {
|
23
29
|
onStart: handleStart,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["
|
1
|
+
{"version":3,"names":["useCallback","useSharedValue","useGestureHandler","gestureHandlers","onStart","onActive","onEnd","context","handleStart","touchInfo","value","handleActive","extendedTouchInfo","handleEnd"],"sourceRoot":"../../src","sources":["use-gesture-handler.ts"],"mappings":"AAAA,SAASA,WAAW,QAAQ,OAAO;AACnC,SAASC,cAAc,QAAQ,yBAAyB;AAuBxD,MAAMC,iBAAiB,GACrBC,eAAqD,IAClD;EACH,MAAM;IAAEC,OAAO;IAAEC,QAAQ;IAAEC;EAAM,CAAC,GAAGH,eAAe;EAEpD,MAAMI,OAAO,GAAGN,cAAc,CAAc,CAAC,CAAC,CAAQ;EAEtD,MAAMO,WAAW,GAAGR,WAAW,CAC5BS,SAAiE,IAAK;IACrE,SAAS;;IACT,IAAI,CAACL,OAAO,EAAE;IACd,OAAOA,OAAO,CAACK,SAAS,EAAEF,OAAO,CAACG,KAAK,CAAC;EAC1C,CAAC,EACD,CAACH,OAAO,EAAEH,OAAO,CAAC,CACnB;EAED,MAAMO,YAAY,GAAGX,WAAW,CAC7BY,iBAAoE,IAAK;IACxE,SAAS;;IACT,IAAI,CAACP,QAAQ,EAAE;IACf,OAAOA,QAAQ,CAACO,iBAAiB,EAAEL,OAAO,CAACG,KAAK,CAAC;EACnD,CAAC,EACD,CAACH,OAAO,EAAEF,QAAQ,CAAC,CACpB;EAED,MAAMQ,SAAS,GAAGb,WAAW,CAEzBY,iBAAyE,IACtE;IACH,SAAS;;IACT,IAAI,CAACN,KAAK,EAAE;IACZ,OAAOA,KAAK,CAACM,iBAAiB,EAAEL,OAAO,CAACG,KAAK,CAAC;EAChD,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
CHANGED
package/lib/module/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["Touchable"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"AAAA,cAAc,OAAO;AACrB,cAAc,6BAA6B;
|
1
|
+
{"version":3,"names":["Touchable"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"AAAA,OAAO,KAAKA,SAAS,MAAM,cAAc;AACzC,cAAc,OAAO;AACrB,cAAc,6BAA6B;AAE3C,eAAeA,SAAS"}
|
@@ -1 +1 @@
|
|
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;
|
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;EACnE,SAAS;;EAAC,IADkB;IAAEC,EAAE;IAAEC,EAAE;IAAEC;EAAuB,CAAC;EAE9D,OAAOJ,IAAI,CAACK,IAAI,CAACC,IAAI,EAAE,CAACC,SAAS,CAACL,EAAE,EAAEC,EAAE,EAAEC,CAAC,CAAC;AAC9C,CAAC"}
|
@@ -1,8 +1,9 @@
|
|
1
|
-
import {
|
1
|
+
import { Skia } from '@shopify/react-native-skia';
|
2
2
|
const getRectPath = params => {
|
3
|
+
'worklet';
|
4
|
+
|
3
5
|
const skPath = Skia.Path.Make();
|
4
6
|
if ('rect' in params) {
|
5
|
-
// eslint-disable-next-line @typescript-eslint/no-shadow
|
6
7
|
const {
|
7
8
|
rect
|
8
9
|
} = params;
|
@@ -15,20 +16,21 @@ const getRectPath = params => {
|
|
15
16
|
width,
|
16
17
|
height
|
17
18
|
} = params;
|
18
|
-
skPath.addRect(
|
19
|
+
skPath.addRect(Skia.XYWHRect(x, y, width, height));
|
19
20
|
return skPath;
|
20
21
|
};
|
21
22
|
const getRoundedRectPath = params => {
|
23
|
+
'worklet';
|
24
|
+
|
22
25
|
const {
|
23
26
|
r
|
24
27
|
} = params;
|
25
28
|
const skPath = Skia.Path.Make();
|
26
29
|
if ('rect' in params) {
|
27
|
-
// eslint-disable-next-line @typescript-eslint/no-shadow
|
28
30
|
const {
|
29
31
|
rect
|
30
32
|
} = params;
|
31
|
-
skPath.addRRect(
|
33
|
+
skPath.addRRect(Skia.RRectXY(rect, r, r));
|
32
34
|
return skPath;
|
33
35
|
}
|
34
36
|
const {
|
@@ -37,7 +39,8 @@ const getRoundedRectPath = params => {
|
|
37
39
|
width,
|
38
40
|
height
|
39
41
|
} = params;
|
40
|
-
|
42
|
+
const roundedRect = Skia.RRectXY(Skia.XYWHRect(x, y, width, height), r, r);
|
43
|
+
skPath.addRRect(roundedRect);
|
41
44
|
return skPath;
|
42
45
|
};
|
43
46
|
export { getRectPath, getRoundedRectPath };
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["
|
1
|
+
{"version":3,"names":["Skia","getRectPath","params","skPath","Path","Make","rect","addRect","x","y","width","height","XYWHRect","getRoundedRectPath","r","addRRect","RRectXY","roundedRect"],"sourceRoot":"../../src","sources":["get-rect-path.ts"],"mappings":"AAAA,SAASA,IAAI,QAAqB,4BAA4B;AAW9D,MAAMC,WAAW,GAAIC,MAAyB,IAAK;EACjD,SAAS;;EAET,MAAMC,MAAM,GAAGH,IAAI,CAACI,IAAI,CAACC,IAAI,EAAE;EAC/B,IAAI,MAAM,IAAIH,MAAM,EAAE;IACpB,MAAM;MAAEI;IAAK,CAAC,GAAGJ,MAAM;IAEvBC,MAAM,CAACI,OAAO,CAACD,IAAI,CAAC;IACpB,OAAOH,MAAM;EACf;EACA,MAAM;IAAEK,CAAC;IAAEC,CAAC;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAGT,MAAM;EAEtCC,MAAM,CAACI,OAAO,CAACP,IAAI,CAACY,QAAQ,CAACJ,CAAC,EAAEC,CAAC,EAAEC,KAAK,EAAEC,MAAM,CAAC,CAAC;EAClD,OAAOR,MAAM;AACf,CAAC;AAMD,MAAMU,kBAAkB,GAAIX,MAAgC,IAAK;EAC/D,SAAS;;EAET,MAAM;IAAEY;EAAE,CAAC,GAAGZ,MAAM;EACpB,MAAMC,MAAM,GAAGH,IAAI,CAACI,IAAI,CAACC,IAAI,EAAE;EAC/B,IAAI,MAAM,IAAIH,MAAM,EAAE;IACpB,MAAM;MAAEI;IAAK,CAAC,GAAGJ,MAAM;IAEvBC,MAAM,CAACY,QAAQ,CAACf,IAAI,CAACgB,OAAO,CAACV,IAAI,EAAEQ,CAAC,EAAEA,CAAC,CAAC,CAAC;IACzC,OAAOX,MAAM;EACf;EACA,MAAM;IAAEK,CAAC;IAAEC,CAAC;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAGT,MAAM;EAEtC,MAAMe,WAAW,GAAGjB,IAAI,CAACgB,OAAO,CAAChB,IAAI,CAACY,QAAQ,CAACJ,CAAC,EAAEC,CAAC,EAAEC,KAAK,EAAEC,MAAM,CAAC,EAAEG,CAAC,EAAEA,CAAC,CAAC;EAC1EX,MAAM,CAACY,QAAQ,CAACE,WAAW,CAAC;EAC5B,OAAOd,MAAM;AACf,CAAC;AAED,SAASF,WAAW,EAAEY,kBAAkB"}
|
@@ -1,4 +1,9 @@
|
|
1
1
|
const unwrapAnimatedValue = value => {
|
2
|
+
'worklet';
|
3
|
+
|
4
|
+
if (value.value != null) {
|
5
|
+
return value.value;
|
6
|
+
}
|
2
7
|
if (value.current != null) {
|
3
8
|
return value.current;
|
4
9
|
}
|
@@ -9,6 +14,8 @@ const unwrapAnimatedValue = value => {
|
|
9
14
|
return value;
|
10
15
|
};
|
11
16
|
const unwrapAnimatedValueObject = value => {
|
17
|
+
'worklet';
|
18
|
+
|
12
19
|
return Object.keys(value).reduce((acc, key) => {
|
13
20
|
return {
|
14
21
|
...acc,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["unwrapAnimatedValue","value","current","selector","skiaValueWithSelector","unwrapAnimatedValueObject","Object","keys","reduce","acc","key"],"sourceRoot":"../../src","sources":["unwrap-animated-value.ts"],"mappings":"
|
1
|
+
{"version":3,"names":["unwrapAnimatedValue","value","current","selector","skiaValueWithSelector","unwrapAnimatedValueObject","Object","keys","reduce","acc","key"],"sourceRoot":"../../src","sources":["unwrap-animated-value.ts"],"mappings":"AAOA,MAAMA,mBAAmB,GACvBC,KAA4E,IACtE;EACN,SAAS;;EAET,IAAKA,KAAK,CAA6BA,KAAK,IAAI,IAAI,EAAE;IACpD,OAAQA,KAAK,CAA6BA,KAAK;EACjD;EAEA,IAAKA,KAAK,CAAkBC,OAAO,IAAI,IAAI,EAAE;IAC3C,OAAQD,KAAK,CAAkBC,OAAO;EACxC;EAEA,IAAKD,KAAK,CAA8BE,QAAQ,IAAI,IAAI,EAAE;IACxD,MAAMC,qBAAqB,GAAGH,KAAiC;IAC/D,OAAOG,qBAAqB,CAACD,QAAQ,CAACC,qBAAqB,CAACH,KAAK,CAACC,OAAO,CAAC;EAC5E;EAEA,OAAOD,KAAK;AACd,CAAC;AAED,MAAMI,yBAAyB,GAC7BJ,KAAoC,IACjB;EACnB,SAAS;;EACT,OAAOK,MAAM,CAACC,IAAI,CAACN,KAAK,CAAC,CAACO,MAAM,CAAC,CAACC,GAAG,EAAEC,GAAG,KAAK;IAC7C,OAAO;MAAE,GAAGD,GAAG;MAAE,CAACC,GAAG,GAAGV,mBAAmB,CAACC,KAAK,CAACS,GAAG,CAAC;IAAE,CAAC;EAC3D,CAAC,EAAE,CAAC,CAAC,CAAC;AACR,CAAC;AAED,SAASV,mBAAmB,EAAEK,yBAAyB"}
|
@@ -1,5 +1,9 @@
|
|
1
|
-
import { type CanvasProps, SkiaDomView } from '@shopify/react-native-skia';
|
2
1
|
import React from 'react';
|
3
|
-
|
2
|
+
import { PanGesture } from 'react-native-gesture-handler';
|
3
|
+
import type { CanvasProps } from '@shopify/react-native-skia';
|
4
|
+
type TouchableCanvasProps = CanvasProps & {
|
5
|
+
panGesture?: PanGesture;
|
6
|
+
};
|
7
|
+
declare const Canvas: React.FC<TouchableCanvasProps>;
|
4
8
|
export { Canvas };
|
5
9
|
//# sourceMappingURL=canvas.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"canvas.d.ts","sourceRoot":"","sources":["../../../src/canvas/canvas.tsx"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"canvas.d.ts","sourceRoot":"","sources":["../../../src/canvas/canvas.tsx"],"names":[],"mappings":"AACA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAGL,UAAU,EACX,MAAM,8BAA8B,CAAC;AAQtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE9D,KAAK,oBAAoB,GAAG,WAAW,GAAG;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAEF,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAqF1C,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
|
@@ -1,10 +1,11 @@
|
|
1
|
-
import type { ExtendedTouchInfo, TouchInfo, Vector } from '@shopify/react-native-skia';
|
2
1
|
import React from 'react';
|
2
|
+
import type { Vector } from '@shopify/react-native-skia';
|
3
|
+
import type { GestureStateChangeEvent, GestureUpdateEvent, PanGestureHandlerEventPayload } from 'react-native-gesture-handler';
|
3
4
|
export type TouchableHandlerContextType = {
|
4
|
-
|
5
|
-
onStart: (touchInfo:
|
6
|
-
onActive: (touchInfo:
|
7
|
-
onEnd: (touchInfo:
|
5
|
+
value: Record<string, {
|
6
|
+
onStart: (touchInfo: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => void;
|
7
|
+
onActive: (touchInfo: GestureUpdateEvent<PanGestureHandlerEventPayload>) => void;
|
8
|
+
onEnd: (touchInfo: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => void;
|
8
9
|
isPointInPath: (point: Vector) => boolean;
|
9
10
|
}>;
|
10
11
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/canvas/context.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
1
|
+
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/canvas/context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,KAAK,EACV,uBAAuB,EACvB,kBAAkB,EAClB,6BAA6B,EAC9B,MAAM,8BAA8B,CAAC;AAEtC,MAAM,MAAM,2BAA2B,GAAG;IACxC,KAAK,EAAE,MAAM,CACX,MAAM,EACN;QACE,OAAO,EAAE,CACP,SAAS,EAAE,uBAAuB,CAAC,6BAA6B,CAAC,KAC9D,IAAI,CAAC;QACV,QAAQ,EAAE,CACR,SAAS,EAAE,kBAAkB,CAAC,6BAA6B,CAAC,KACzD,IAAI,CAAC;QACV,KAAK,EAAE,CACL,SAAS,EAAE,uBAAuB,CAAC,6BAA6B,CAAC,KAC9D,IAAI,CAAC;QACV,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;KAC3C,CACF,CAAC;CACH,CAAC;AAEF,QAAA,MAAM,mBAAmB,4CAEvB,CAAC;AAEH,QAAA,MAAM,sBAAsB,mCAE3B,CAAC;AAEF,OAAO,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,eAAO,MAAM,MAAM,6QAA6C,CAAC;AACjE,eAAO,MAAM,WAAW,kRAAuD,CAAC;AAChF,eAAO,MAAM,IAAI,2QAAyC,CAAC;AAC3D,eAAO,MAAM,IAAI;;;mEAAyC,CAAC"}
|
@@ -1,15 +1,13 @@
|
|
1
|
-
import { type
|
2
|
-
|
3
|
-
translationX: number;
|
4
|
-
translationY: number;
|
5
|
-
};
|
1
|
+
import { type SkiaValue, type SkPath } from '@shopify/react-native-skia';
|
2
|
+
import type { GestureStateChangeEvent, GestureUpdateEvent, PanGestureHandlerEventPayload } from 'react-native-gesture-handler';
|
6
3
|
export type TouchableHandlerProps = {
|
7
|
-
onStart: (touchInfo:
|
8
|
-
onActive: (touchInfo:
|
9
|
-
onEnd: (touchInfo:
|
4
|
+
onStart: (touchInfo: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => void;
|
5
|
+
onActive: (touchInfo: GestureUpdateEvent<PanGestureHandlerEventPayload>) => void;
|
6
|
+
onEnd: (touchInfo: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => void;
|
10
7
|
touchablePath: SkPath | SkiaValue<SkPath>;
|
11
8
|
};
|
12
9
|
type WithTouchableHandlerProps<T> = T & Partial<TouchableHandlerProps>;
|
13
|
-
declare const
|
10
|
+
export declare const getSkiaPath: (key: string, props: any) => any;
|
11
|
+
declare const withTouchableHandler: <T>(Component: (props: WithTouchableHandlerProps<T>) => JSX.Element, componentName?: string) => ({ onStart: onStartProp, onActive: onActiveProp, onEnd: onEndProp, touchablePath, ...props }: WithTouchableHandlerProps<T>) => JSX.Element;
|
14
12
|
export { withTouchableHandler };
|
15
13
|
//# sourceMappingURL=with-touchable-handler.d.ts.map
|