react-native-skia-gesture 0.1.172 → 0.2.0
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/lib/commonjs/canvas/canvas.js +5 -3
- package/lib/commonjs/canvas/canvas.js.map +1 -1
- package/lib/module/canvas/canvas.js +5 -3
- package/lib/module/canvas/canvas.js.map +1 -1
- package/lib/typescript/canvas/canvas.d.ts +2 -2
- package/lib/typescript/canvas/canvas.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/canvas/canvas.tsx +71 -67
|
@@ -10,7 +10,7 @@ var _context = require("./context");
|
|
|
10
10
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
11
11
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
12
12
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
13
|
-
const Canvas = _ref => {
|
|
13
|
+
const Canvas = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
|
|
14
14
|
let {
|
|
15
15
|
children,
|
|
16
16
|
onTouch,
|
|
@@ -65,7 +65,9 @@ const Canvas = _ref => {
|
|
|
65
65
|
touchableRefs.current = {};
|
|
66
66
|
};
|
|
67
67
|
}, [touchableRefs]);
|
|
68
|
-
return /*#__PURE__*/_react.default.createElement(_reactNativeSkia.Canvas, _extends({
|
|
68
|
+
return /*#__PURE__*/_react.default.createElement(_reactNativeSkia.Canvas, _extends({
|
|
69
|
+
ref: ref
|
|
70
|
+
}, props, {
|
|
69
71
|
onTouch: touchInfo => {
|
|
70
72
|
touchHandler(touchInfo);
|
|
71
73
|
return onTouch === null || onTouch === void 0 ? void 0 : onTouch(touchInfo);
|
|
@@ -73,6 +75,6 @@ const Canvas = _ref => {
|
|
|
73
75
|
}), /*#__PURE__*/_react.default.createElement(_context.TouchHandlerContext.Provider, {
|
|
74
76
|
value: touchableRefs
|
|
75
77
|
}, children));
|
|
76
|
-
};
|
|
78
|
+
});
|
|
77
79
|
exports.Canvas = Canvas;
|
|
78
80
|
//# sourceMappingURL=canvas.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Canvas","children","onTouch","props","touchableRefs","useValue","activeKey","touchHandler","useMultiTouchHandler","onStart","event","keys","Object","current","i","length","key","touchableItem","isPointInPath","push","id","onActive","activatedKey","find","includes","toString","indexedKey","split","onEnd","filter","useEffect","touchInfo"],"sourceRoot":"../../src","sources":["canvas.tsx"],"mappings":";;;;;;AAAA;
|
|
1
|
+
{"version":3,"names":["Canvas","React","forwardRef","ref","children","onTouch","props","touchableRefs","useValue","activeKey","touchHandler","useMultiTouchHandler","onStart","event","keys","Object","current","i","length","key","touchableItem","isPointInPath","push","id","onActive","activatedKey","find","includes","toString","indexedKey","split","onEnd","filter","useEffect","touchInfo"],"sourceRoot":"../../src","sources":["canvas.tsx"],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
|
|
|
2
2
|
import { Canvas as SkiaCanvas, useMultiTouchHandler, useValue } from '@shopify/react-native-skia';
|
|
3
3
|
import React, { useEffect } from 'react';
|
|
4
4
|
import { TouchHandlerContext } from './context';
|
|
5
|
-
const Canvas = _ref => {
|
|
5
|
+
const Canvas = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
6
6
|
let {
|
|
7
7
|
children,
|
|
8
8
|
onTouch,
|
|
@@ -57,7 +57,9 @@ const Canvas = _ref => {
|
|
|
57
57
|
touchableRefs.current = {};
|
|
58
58
|
};
|
|
59
59
|
}, [touchableRefs]);
|
|
60
|
-
return /*#__PURE__*/React.createElement(SkiaCanvas, _extends({
|
|
60
|
+
return /*#__PURE__*/React.createElement(SkiaCanvas, _extends({
|
|
61
|
+
ref: ref
|
|
62
|
+
}, props, {
|
|
61
63
|
onTouch: touchInfo => {
|
|
62
64
|
touchHandler(touchInfo);
|
|
63
65
|
return onTouch === null || onTouch === void 0 ? void 0 : onTouch(touchInfo);
|
|
@@ -65,6 +67,6 @@ const Canvas = _ref => {
|
|
|
65
67
|
}), /*#__PURE__*/React.createElement(TouchHandlerContext.Provider, {
|
|
66
68
|
value: touchableRefs
|
|
67
69
|
}, children));
|
|
68
|
-
};
|
|
70
|
+
});
|
|
69
71
|
export { Canvas };
|
|
70
72
|
//# sourceMappingURL=canvas.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Canvas","SkiaCanvas","useMultiTouchHandler","useValue","React","useEffect","TouchHandlerContext","children","onTouch","props","touchableRefs","activeKey","touchHandler","onStart","event","keys","Object","current","i","length","key","touchableItem","isPointInPath","push","id","onActive","activatedKey","find","includes","toString","indexedKey","split","onEnd","filter","touchInfo"],"sourceRoot":"../../src","sources":["canvas.tsx"],"mappings":";AAAA,SACEA,MAAM,IAAIC,UAAU,EAEpBC,oBAAoB,EACpBC,QAAQ,
|
|
1
|
+
{"version":3,"names":["Canvas","SkiaCanvas","useMultiTouchHandler","useValue","React","useEffect","TouchHandlerContext","forwardRef","ref","children","onTouch","props","touchableRefs","activeKey","touchHandler","onStart","event","keys","Object","current","i","length","key","touchableItem","isPointInPath","push","id","onActive","activatedKey","find","includes","toString","indexedKey","split","onEnd","filter","touchInfo"],"sourceRoot":"../../src","sources":["canvas.tsx"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { type CanvasProps } from '@shopify/react-native-skia';
|
|
1
|
+
import { type CanvasProps, SkiaDomView } from '@shopify/react-native-skia';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
declare const Canvas: React.
|
|
3
|
+
declare const Canvas: React.ForwardRefExoticComponent<Pick<CanvasProps, "children" | "onTouch" | "mode" | "debug" | "onSize" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "style" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors"> & React.RefAttributes<SkiaDomView>>;
|
|
4
4
|
export { Canvas };
|
|
5
5
|
//# sourceMappingURL=canvas.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"canvas.d.ts","sourceRoot":"","sources":["../../../src/canvas/canvas.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,WAAW,
|
|
1
|
+
{"version":3,"file":"canvas.d.ts","sourceRoot":"","sources":["../../../src/canvas/canvas.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,WAAW,EAGhB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAoB,MAAM,OAAO,CAAC;AAMzC,QAAA,MAAM,MAAM,2kDA4EX,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
|
package/package.json
CHANGED
package/src/canvas/canvas.tsx
CHANGED
|
@@ -3,6 +3,7 @@ import {
|
|
|
3
3
|
type CanvasProps,
|
|
4
4
|
useMultiTouchHandler,
|
|
5
5
|
useValue,
|
|
6
|
+
SkiaDomView,
|
|
6
7
|
} from '@shopify/react-native-skia';
|
|
7
8
|
import React, { useEffect } from 'react';
|
|
8
9
|
import {
|
|
@@ -10,79 +11,82 @@ import {
|
|
|
10
11
|
type TouchableHandlerContextType,
|
|
11
12
|
} from './context';
|
|
12
13
|
|
|
13
|
-
const Canvas
|
|
14
|
-
|
|
14
|
+
const Canvas = React.forwardRef<SkiaDomView, CanvasProps>(
|
|
15
|
+
({ children, onTouch, ...props }, ref) => {
|
|
16
|
+
const touchableRefs = useValue<TouchableHandlerContextType['current']>({});
|
|
15
17
|
|
|
16
|
-
|
|
18
|
+
const activeKey = useValue<string[]>([]);
|
|
17
19
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
20
|
+
const touchHandler = useMultiTouchHandler(
|
|
21
|
+
{
|
|
22
|
+
onStart: (event) => {
|
|
23
|
+
const keys = Object.keys(touchableRefs.current);
|
|
24
|
+
for (let i = 0; i < keys.length; i++) {
|
|
25
|
+
const key = keys[i] as string;
|
|
26
|
+
const touchableItem = touchableRefs.current[key];
|
|
27
|
+
if (touchableItem?.isPointInPath(event)) {
|
|
28
|
+
activeKey.current.push(`${key}__${event.id}`);
|
|
29
|
+
touchableItem.onStart?.(event);
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
onActive: (event) => {
|
|
35
|
+
const activatedKey = activeKey.current.find((key) =>
|
|
36
|
+
key.includes(event.id.toString())
|
|
37
|
+
);
|
|
38
|
+
if (!activatedKey) {
|
|
28
39
|
return;
|
|
29
40
|
}
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
if (!indexedKey) {
|
|
55
|
-
return;
|
|
56
|
-
}
|
|
57
|
-
const touchableItem = touchableRefs.current[indexedKey];
|
|
58
|
-
activeKey.current = activeKey.current.filter(
|
|
59
|
-
(key) => !key.includes(event.id.toString())
|
|
60
|
-
);
|
|
61
|
-
return touchableItem?.onEnd?.(event);
|
|
41
|
+
const indexedKey = activatedKey.split('__')?.[0];
|
|
42
|
+
if (!indexedKey) {
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
const touchableItem = touchableRefs.current[indexedKey];
|
|
46
|
+
return touchableItem?.onActive?.(event);
|
|
47
|
+
},
|
|
48
|
+
onEnd: (event) => {
|
|
49
|
+
const activatedKey = activeKey.current.find((key) =>
|
|
50
|
+
key.includes(event.id.toString())
|
|
51
|
+
);
|
|
52
|
+
if (!activatedKey) {
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
const indexedKey = activatedKey.split('__')?.[0];
|
|
56
|
+
if (!indexedKey) {
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
const touchableItem = touchableRefs.current[indexedKey];
|
|
60
|
+
activeKey.current = activeKey.current.filter(
|
|
61
|
+
(key) => !key.includes(event.id.toString())
|
|
62
|
+
);
|
|
63
|
+
return touchableItem?.onEnd?.(event);
|
|
64
|
+
},
|
|
62
65
|
},
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
);
|
|
66
|
+
[touchableRefs, activeKey]
|
|
67
|
+
);
|
|
66
68
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
69
|
+
useEffect(() => {
|
|
70
|
+
return () => {
|
|
71
|
+
touchableRefs.current = {};
|
|
72
|
+
};
|
|
73
|
+
}, [touchableRefs]);
|
|
72
74
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
{
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
75
|
+
return (
|
|
76
|
+
<SkiaCanvas
|
|
77
|
+
ref={ref as React.RefObject<SkiaDomView> & React.Ref<SkiaDomView>}
|
|
78
|
+
{...props}
|
|
79
|
+
onTouch={(touchInfo) => {
|
|
80
|
+
touchHandler(touchInfo);
|
|
81
|
+
return onTouch?.(touchInfo);
|
|
82
|
+
}}
|
|
83
|
+
>
|
|
84
|
+
<TouchHandlerContext.Provider value={touchableRefs}>
|
|
85
|
+
{children}
|
|
86
|
+
</TouchHandlerContext.Provider>
|
|
87
|
+
</SkiaCanvas>
|
|
88
|
+
);
|
|
89
|
+
}
|
|
90
|
+
);
|
|
87
91
|
|
|
88
92
|
export { Canvas };
|