react-native-skia-gesture 0.1.6
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/LICENSE +20 -0
- package/README.md +121 -0
- package/lib/commonjs/canvas/canvas.js +64 -0
- package/lib/commonjs/canvas/canvas.js.map +1 -0
- package/lib/commonjs/canvas/context.js +18 -0
- package/lib/commonjs/canvas/context.js.map +1 -0
- package/lib/commonjs/canvas/index.js +17 -0
- package/lib/commonjs/canvas/index.js.map +1 -0
- package/lib/commonjs/hoc/index.js +17 -0
- package/lib/commonjs/hoc/index.js.map +1 -0
- package/lib/commonjs/hoc/with-touchable-handler.js +94 -0
- package/lib/commonjs/hoc/with-touchable-handler.js.map +1 -0
- package/lib/commonjs/hooks/use-gesture-handler.js +35 -0
- package/lib/commonjs/hooks/use-gesture-handler.js.map +1 -0
- package/lib/commonjs/index.js +39 -0
- package/lib/commonjs/index.js.map +1 -0
- package/lib/commonjs/utils/get-circle-path.js +17 -0
- package/lib/commonjs/utils/get-circle-path.js.map +1 -0
- package/lib/commonjs/utils/get-rect-path.js +48 -0
- package/lib/commonjs/utils/get-rect-path.js.map +1 -0
- package/lib/commonjs/utils/unwrap-animated-value.js +23 -0
- package/lib/commonjs/utils/unwrap-animated-value.js.map +1 -0
- package/lib/module/canvas/canvas.js +56 -0
- package/lib/module/canvas/canvas.js.map +1 -0
- package/lib/module/canvas/context.js +9 -0
- package/lib/module/canvas/context.js.map +1 -0
- package/lib/module/canvas/index.js +2 -0
- package/lib/module/canvas/index.js.map +1 -0
- package/lib/module/hoc/index.js +2 -0
- package/lib/module/hoc/index.js.map +1 -0
- package/lib/module/hoc/with-touchable-handler.js +88 -0
- package/lib/module/hoc/with-touchable-handler.js.map +1 -0
- package/lib/module/hooks/use-gesture-handler.js +29 -0
- package/lib/module/hooks/use-gesture-handler.js.map +1 -0
- package/lib/module/index.js +4 -0
- package/lib/module/index.js.map +1 -0
- package/lib/module/utils/get-circle-path.js +10 -0
- package/lib/module/utils/get-circle-path.js.map +1 -0
- package/lib/module/utils/get-rect-path.js +41 -0
- package/lib/module/utils/get-rect-path.js.map +1 -0
- package/lib/module/utils/unwrap-animated-value.js +16 -0
- package/lib/module/utils/unwrap-animated-value.js.map +1 -0
- package/lib/typescript/canvas/canvas.d.ts +5 -0
- package/lib/typescript/canvas/canvas.d.ts.map +1 -0
- package/lib/typescript/canvas/context.d.ts +14 -0
- package/lib/typescript/canvas/context.d.ts.map +1 -0
- package/lib/typescript/canvas/index.d.ts +2 -0
- package/lib/typescript/canvas/index.d.ts.map +1 -0
- package/lib/typescript/hoc/index.d.ts +2 -0
- package/lib/typescript/hoc/index.d.ts.map +1 -0
- package/lib/typescript/hoc/with-touchable-handler.d.ts +15 -0
- package/lib/typescript/hoc/with-touchable-handler.d.ts.map +1 -0
- package/lib/typescript/hooks/use-gesture-handler.d.ts +14 -0
- package/lib/typescript/hooks/use-gesture-handler.d.ts.map +1 -0
- package/lib/typescript/index.d.ts +4 -0
- package/lib/typescript/index.d.ts.map +1 -0
- package/lib/typescript/utils/get-circle-path.d.ts +8 -0
- package/lib/typescript/utils/get-circle-path.d.ts.map +1 -0
- package/lib/typescript/utils/get-rect-path.d.ts +16 -0
- package/lib/typescript/utils/get-rect-path.d.ts.map +1 -0
- package/lib/typescript/utils/unwrap-animated-value.d.ts +5 -0
- package/lib/typescript/utils/unwrap-animated-value.d.ts.map +1 -0
- package/package.json +160 -0
- package/src/canvas/canvas.tsx +66 -0
- package/src/canvas/context.tsx +27 -0
- package/src/canvas/index.ts +1 -0
- package/src/hoc/index.ts +1 -0
- package/src/hoc/with-touchable-handler.tsx +127 -0
- package/src/hooks/use-gesture-handler.ts +59 -0
- package/src/index.ts +3 -0
- package/src/utils/get-circle-path.ts +7 -0
- package/src/utils/get-rect-path.ts +41 -0
- package/src/utils/unwrap-animated-value.ts +18 -0
package/LICENSE
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
MIT License
|
2
|
+
|
3
|
+
Copyright (c) 2022 Enzo Manuel Mangano
|
4
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
5
|
+
of this software and associated documentation files (the "Software"), to deal
|
6
|
+
in the Software without restriction, including without limitation the rights
|
7
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
8
|
+
copies of the Software, and to permit persons to whom the Software is
|
9
|
+
furnished to do so, subject to the following conditions:
|
10
|
+
|
11
|
+
The above copyright notice and this permission notice shall be included in all
|
12
|
+
copies or substantial portions of the Software.
|
13
|
+
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
15
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
16
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
17
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
18
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
19
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
20
|
+
SOFTWARE.
|
package/README.md
ADDED
@@ -0,0 +1,121 @@
|
|
1
|
+
<h1 align="center">
|
2
|
+
React Native Skia Gesture 🤌🏽
|
3
|
+
</h1>
|
4
|
+
|
5
|
+
_A detection system for React Native Skia components._
|
6
|
+
|
7
|
+
<div align="center">
|
8
|
+
<img src="https://github.com/enzomanuelmangano/react-native-skia-gesture/blob/main/.assets/example.gif" title="react-native-skia-gesture">
|
9
|
+
</div>
|
10
|
+
|
11
|
+
### Motivation
|
12
|
+
|
13
|
+
React Native Skia, provides many declarative APIs for building screens using React Components. However, [Skia components are not real components, but abstract representations of a part of a drawing](https://github.com/Shopify/react-native-skia/issues/513#issuecomment-1290126304). Therefore, they do not contain any information about location.
|
14
|
+
Therefore direct interactions with individual Skia components can only be achieved indirectly from the Canvas (trying to figure out if the point on the screen that was clicked is within the element we want to interact with).
|
15
|
+
|
16
|
+
This package, simply provides a set of APIs to be able to interact directly with individual components.
|
17
|
+
|
18
|
+
## Installation
|
19
|
+
|
20
|
+
**You need to have already installed [@shopify/react-native-skia (>= 0.1.157)](https://shopify.github.io/react-native-skia/docs/getting-started/installation)**
|
21
|
+
|
22
|
+
Open a Terminal in your project's folder and install the library using `yarn`:
|
23
|
+
|
24
|
+
```sh
|
25
|
+
yarn add react-native-skia-gesture
|
26
|
+
```
|
27
|
+
|
28
|
+
or with `npm`:
|
29
|
+
|
30
|
+
```sh
|
31
|
+
npm install react-native-skia-gesture
|
32
|
+
```
|
33
|
+
|
34
|
+
## Usage
|
35
|
+
|
36
|
+
```jsx
|
37
|
+
import {
|
38
|
+
Circle,
|
39
|
+
useValue,
|
40
|
+
} from '@shopify/react-native-skia';
|
41
|
+
|
42
|
+
import {
|
43
|
+
withTouchableHandler,
|
44
|
+
Canvas,
|
45
|
+
useGestureHandler,
|
46
|
+
} from 'react-native-skia-gesture';
|
47
|
+
|
48
|
+
const TouchableCircle = withTouchableHandler(Circle);
|
49
|
+
|
50
|
+
export default function App() {
|
51
|
+
const cx = useValue(100);
|
52
|
+
const cy = useValue(100);
|
53
|
+
|
54
|
+
const circleGesture = useGestureHandler<{ x: number; y: number }>({
|
55
|
+
onStart: (_, context) => {
|
56
|
+
context.x = cx.current;
|
57
|
+
context.y = cy.current;
|
58
|
+
},
|
59
|
+
onActive: ({ translationX, translationY }, context) => {
|
60
|
+
cx.current = context.x + translationX;
|
61
|
+
cy.current = context.y + translationY;
|
62
|
+
},
|
63
|
+
});
|
64
|
+
|
65
|
+
return (
|
66
|
+
<Canvas style={styles.fill}>
|
67
|
+
<TouchableCircle cx={cx} cy={cy} r={50} color="red" {...circleGesture} />
|
68
|
+
</Canvas>
|
69
|
+
);
|
70
|
+
}
|
71
|
+
```
|
72
|
+
|
73
|
+
If the element is a **Circle**, **Rect** or **RoundedRect**, the package will automatically derive its **touchablePath**. Alternatively it will have to be passed as a parameter to the TouchableComponent.
|
74
|
+
|
75
|
+
```jsx
|
76
|
+
...
|
77
|
+
const touchablePath = useComputedValue(() => {
|
78
|
+
const path = new Path();
|
79
|
+
path.addCircle(cx.current, cy.current, 50);
|
80
|
+
return path;
|
81
|
+
}, [cx, cy]);
|
82
|
+
|
83
|
+
return (
|
84
|
+
<Canvas style={styles.fill}>
|
85
|
+
<TouchableCircle cx={cx} cy={cy} r={50} color="red" touchablePath={touchablePath} {...circleGesture} />
|
86
|
+
</Canvas>
|
87
|
+
);
|
88
|
+
...
|
89
|
+
```
|
90
|
+
|
91
|
+
## Ingredients
|
92
|
+
|
93
|
+
### `Canvas`
|
94
|
+
|
95
|
+
It's simply a Wrapper of Skia's Canvas.
|
96
|
+
|
97
|
+
---
|
98
|
+
|
99
|
+
### `withTouchableHandler`
|
100
|
+
|
101
|
+
It's a HOC with which to wrap all Skia components with which you want to interact directly.
|
102
|
+
|
103
|
+
---
|
104
|
+
|
105
|
+
### `useGestureHandler`
|
106
|
+
|
107
|
+
It's a hook from which _onStart_, _onActive_, _onEnd_ interactions can be managed. The hook provides as the second parameter of each callback a context that can be optionally used (strongly inspired by the [useAnimatedGestureHandler](https://docs.swmansion.com/react-native-reanimated/docs/2.3.x/api/hooks/useAnimatedGestureHandler/) hook).
|
108
|
+
|
109
|
+
---
|
110
|
+
|
111
|
+
## Contributing
|
112
|
+
|
113
|
+
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
|
114
|
+
|
115
|
+
## License
|
116
|
+
|
117
|
+
MIT
|
118
|
+
|
119
|
+
---
|
120
|
+
|
121
|
+
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
|
@@ -0,0 +1,64 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.Canvas = void 0;
|
7
|
+
var _reactNativeSkia = require("@shopify/react-native-skia");
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
9
|
+
var _context = require("./context");
|
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
|
+
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
|
+
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 => {
|
14
|
+
let {
|
15
|
+
children,
|
16
|
+
onTouch,
|
17
|
+
...props
|
18
|
+
} = _ref;
|
19
|
+
const touchableRefs = (0, _reactNativeSkia.useValue)({});
|
20
|
+
const activeKey = (0, _reactNativeSkia.useValue)(null);
|
21
|
+
const touchHandler = (0, _reactNativeSkia.useTouchHandler)({
|
22
|
+
onStart: event => {
|
23
|
+
const keys = Object.keys(touchableRefs.current);
|
24
|
+
for (let i = 0; i < keys.length; i++) {
|
25
|
+
const key = keys[i];
|
26
|
+
const touchableItem = touchableRefs.current[key];
|
27
|
+
if (touchableItem !== null && touchableItem !== void 0 && touchableItem.isPointInPath(event)) {
|
28
|
+
var _touchableItem$onStar;
|
29
|
+
activeKey.current = key;
|
30
|
+
(_touchableItem$onStar = touchableItem.onStart) === null || _touchableItem$onStar === void 0 ? void 0 : _touchableItem$onStar.call(touchableItem, event);
|
31
|
+
return;
|
32
|
+
}
|
33
|
+
}
|
34
|
+
},
|
35
|
+
onActive: event => {
|
36
|
+
var _touchableItem$onActi;
|
37
|
+
if (!activeKey.current) return;
|
38
|
+
const touchableItem = touchableRefs.current[activeKey.current];
|
39
|
+
return touchableItem === null || touchableItem === void 0 ? void 0 : (_touchableItem$onActi = touchableItem.onActive) === null || _touchableItem$onActi === void 0 ? void 0 : _touchableItem$onActi.call(touchableItem, event);
|
40
|
+
},
|
41
|
+
onEnd: event => {
|
42
|
+
var _touchableItem$onEnd;
|
43
|
+
if (!activeKey.current) return;
|
44
|
+
const touchableItem = touchableRefs.current[activeKey.current];
|
45
|
+
activeKey.current = null;
|
46
|
+
return touchableItem === null || touchableItem === void 0 ? void 0 : (_touchableItem$onEnd = touchableItem.onEnd) === null || _touchableItem$onEnd === void 0 ? void 0 : _touchableItem$onEnd.call(touchableItem, event);
|
47
|
+
}
|
48
|
+
}, [touchableRefs, activeKey]);
|
49
|
+
(0, _react.useEffect)(() => {
|
50
|
+
return () => {
|
51
|
+
touchableRefs.current = {};
|
52
|
+
};
|
53
|
+
}, [touchableRefs]);
|
54
|
+
return /*#__PURE__*/_react.default.createElement(_reactNativeSkia.Canvas, _extends({}, props, {
|
55
|
+
onTouch: touchInfo => {
|
56
|
+
touchHandler(touchInfo);
|
57
|
+
return onTouch === null || onTouch === void 0 ? void 0 : onTouch(touchInfo);
|
58
|
+
}
|
59
|
+
}), /*#__PURE__*/_react.default.createElement(_context.TouchHandlerContext.Provider, {
|
60
|
+
value: touchableRefs
|
61
|
+
}, children));
|
62
|
+
};
|
63
|
+
exports.Canvas = Canvas;
|
64
|
+
//# sourceMappingURL=canvas.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["Canvas","children","onTouch","props","touchableRefs","useValue","activeKey","touchHandler","useTouchHandler","onStart","event","keys","Object","current","i","length","key","touchableItem","isPointInPath","onActive","onEnd","useEffect","touchInfo"],"sourceRoot":"../../src","sources":["canvas.tsx"],"mappings":";;;;;;AAAA;AAMA;AACA;AAA6E;AAAA;AAAA;AAE7E,MAAMA,MAA6B,GAAG,QAAqC;EAAA,IAApC;IAAEC,QAAQ;IAAEC,OAAO;IAAE,GAAGC;EAAM,CAAC;EACpE,MAAMC,aAAa,GAAG,IAAAC,yBAAQ,EAAyC,CAAC,CAAC,CAAC;EAE1E,MAAMC,SAAS,GAAG,IAAAD,yBAAQ,EAAgB,IAAI,CAAC;EAE/C,MAAME,YAAY,GAAG,IAAAC,gCAAe,EAClC;IACEC,OAAO,EAAGC,KAAK,IAAK;MAClB,MAAMC,IAAI,GAAGC,MAAM,CAACD,IAAI,CAACP,aAAa,CAACS,OAAO,CAAC;MAC/C,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGH,IAAI,CAACI,MAAM,EAAED,CAAC,EAAE,EAAE;QACpC,MAAME,GAAG,GAAGL,IAAI,CAACG,CAAC,CAAW;QAC7B,MAAMG,aAAa,GAAGb,aAAa,CAACS,OAAO,CAACG,GAAG,CAAC;QAEhD,IAAIC,aAAa,aAAbA,aAAa,eAAbA,aAAa,CAAEC,aAAa,CAACR,KAAK,CAAC,EAAE;UAAA;UACvCJ,SAAS,CAACO,OAAO,GAAGG,GAAG;UACvB,yBAAAC,aAAa,CAACR,OAAO,0DAArB,2BAAAQ,aAAa,EAAWP,KAAK,CAAC;UAC9B;QACF;MACF;IACF,CAAC;IACDS,QAAQ,EAAGT,KAAK,IAAK;MAAA;MACnB,IAAI,CAACJ,SAAS,CAACO,OAAO,EAAE;MACxB,MAAMI,aAAa,GAAGb,aAAa,CAACS,OAAO,CAACP,SAAS,CAACO,OAAO,CAAC;MAC9D,OAAOI,aAAa,aAAbA,aAAa,gDAAbA,aAAa,CAAEE,QAAQ,0DAAvB,2BAAAF,aAAa,EAAaP,KAAK,CAAC;IACzC,CAAC;IACDU,KAAK,EAAGV,KAAK,IAAK;MAAA;MAChB,IAAI,CAACJ,SAAS,CAACO,OAAO,EAAE;MACxB,MAAMI,aAAa,GAAGb,aAAa,CAACS,OAAO,CAACP,SAAS,CAACO,OAAO,CAAC;MAC9DP,SAAS,CAACO,OAAO,GAAG,IAAI;MACxB,OAAOI,aAAa,aAAbA,aAAa,+CAAbA,aAAa,CAAEG,KAAK,yDAApB,0BAAAH,aAAa,EAAUP,KAAK,CAAC;IACtC;EACF,CAAC,EACD,CAACN,aAAa,EAAEE,SAAS,CAAC,CAC3B;EAED,IAAAe,gBAAS,EAAC,MAAM;IACd,OAAO,MAAM;MACXjB,aAAa,CAACS,OAAO,GAAG,CAAC,CAAC;IAC5B,CAAC;EACH,CAAC,EAAE,CAACT,aAAa,CAAC,CAAC;EAEnB,oBACE,6BAAC,uBAAU,eACLD,KAAK;IACT,OAAO,EAAGmB,SAAS,IAAK;MACtBf,YAAY,CAACe,SAAS,CAAC;MACvB,OAAOpB,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAGoB,SAAS,CAAC;IAC7B;EAAE,iBAEF,6BAAC,4BAAmB,CAAC,QAAQ;IAAC,KAAK,EAAElB;EAAc,GAChDH,QAAQ,CACoB,CACpB;AAEjB,CAAC;AAAC"}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.useTouchHandlerContext = exports.TouchHandlerContext = void 0;
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
8
|
+
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); }
|
9
|
+
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; }
|
10
|
+
const TouchHandlerContext = /*#__PURE__*/_react.default.createContext({
|
11
|
+
current: {}
|
12
|
+
});
|
13
|
+
exports.TouchHandlerContext = TouchHandlerContext;
|
14
|
+
const useTouchHandlerContext = () => {
|
15
|
+
return (0, _react.useContext)(TouchHandlerContext);
|
16
|
+
};
|
17
|
+
exports.useTouchHandlerContext = useTouchHandlerContext;
|
18
|
+
//# sourceMappingURL=context.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["TouchHandlerContext","React","createContext","current","useTouchHandlerContext","useContext"],"sourceRoot":"../../src","sources":["context.tsx"],"mappings":";;;;;;AAKA;AAA0C;AAAA;AAa1C,MAAMA,mBAAmB,gBAAGC,cAAK,CAACC,aAAa,CAA8B;EAC3EC,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC;AAAC;AAEH,MAAMC,sBAAsB,GAAG,MAAM;EACnC,OAAO,IAAAC,iBAAU,EAACL,mBAAmB,CAAC;AACxC,CAAC;AAAC"}
|
@@ -0,0 +1,17 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
var _canvas = require("./canvas");
|
7
|
+
Object.keys(_canvas).forEach(function (key) {
|
8
|
+
if (key === "default" || key === "__esModule") return;
|
9
|
+
if (key in exports && exports[key] === _canvas[key]) return;
|
10
|
+
Object.defineProperty(exports, key, {
|
11
|
+
enumerable: true,
|
12
|
+
get: function () {
|
13
|
+
return _canvas[key];
|
14
|
+
}
|
15
|
+
});
|
16
|
+
});
|
17
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
|
@@ -0,0 +1,17 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
var _withTouchableHandler = require("./with-touchable-handler");
|
7
|
+
Object.keys(_withTouchableHandler).forEach(function (key) {
|
8
|
+
if (key === "default" || key === "__esModule") return;
|
9
|
+
if (key in exports && exports[key] === _withTouchableHandler[key]) return;
|
10
|
+
Object.defineProperty(exports, key, {
|
11
|
+
enumerable: true,
|
12
|
+
get: function () {
|
13
|
+
return _withTouchableHandler[key];
|
14
|
+
}
|
15
|
+
});
|
16
|
+
});
|
17
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
|
@@ -0,0 +1,94 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.withTouchableHandler = void 0;
|
7
|
+
var _reactNativeSkia = require("@shopify/react-native-skia");
|
8
|
+
var _react = require("react");
|
9
|
+
var _getCirclePath = require("../utils/get-circle-path");
|
10
|
+
var _getRectPath = require("../utils/get-rect-path");
|
11
|
+
var _unwrapAnimatedValue = require("../utils/unwrap-animated-value");
|
12
|
+
var _context = require("../canvas/context");
|
13
|
+
const getSkiaPath = (key, props) => {
|
14
|
+
const unwrappedProps = (0, _unwrapAnimatedValue.unwrapAnimatedValueObject)(props);
|
15
|
+
switch (key) {
|
16
|
+
case 'Circle':
|
17
|
+
return (0, _getCirclePath.getCirclePath)(unwrappedProps);
|
18
|
+
case 'Rect':
|
19
|
+
return (0, _getRectPath.getRectPath)(unwrappedProps);
|
20
|
+
case 'RoundedRect':
|
21
|
+
return (0, _getRectPath.getRoundedRectPath)(unwrappedProps);
|
22
|
+
default:
|
23
|
+
return null;
|
24
|
+
}
|
25
|
+
};
|
26
|
+
const withTouchableHandler = Component => {
|
27
|
+
return _ref => {
|
28
|
+
let {
|
29
|
+
onStart: onStartProp,
|
30
|
+
onActive: onActiveProp,
|
31
|
+
onEnd: onEndProp,
|
32
|
+
touchablePath,
|
33
|
+
...props
|
34
|
+
} = _ref;
|
35
|
+
const id = (0, _react.useId)();
|
36
|
+
const ref = (0, _context.useTouchHandlerContext)();
|
37
|
+
const startingPoint = (0, _reactNativeSkia.useValue)(null);
|
38
|
+
const onStart = (0, _react.useCallback)(event => {
|
39
|
+
startingPoint.current = {
|
40
|
+
x: event.x,
|
41
|
+
y: event.y
|
42
|
+
};
|
43
|
+
return onStartProp === null || onStartProp === void 0 ? void 0 : onStartProp(event);
|
44
|
+
}, [onStartProp, startingPoint]);
|
45
|
+
const onActive = (0, _react.useCallback)(event => {
|
46
|
+
var _startingPoint$curren, _startingPoint$curren2;
|
47
|
+
const translationX = event.x - (((_startingPoint$curren = startingPoint.current) === null || _startingPoint$curren === void 0 ? void 0 : _startingPoint$curren.x) ?? 0);
|
48
|
+
const translationY = event.y - (((_startingPoint$curren2 = startingPoint.current) === null || _startingPoint$curren2 === void 0 ? void 0 : _startingPoint$curren2.y) ?? 0);
|
49
|
+
return onActiveProp === null || onActiveProp === void 0 ? void 0 : onActiveProp({
|
50
|
+
...event,
|
51
|
+
translationX,
|
52
|
+
translationY
|
53
|
+
});
|
54
|
+
}, [onActiveProp, startingPoint]);
|
55
|
+
const onEnd = (0, _react.useCallback)(event => {
|
56
|
+
var _startingPoint$curren3, _startingPoint$curren4;
|
57
|
+
const translationX = event.x - (((_startingPoint$curren3 = startingPoint.current) === null || _startingPoint$curren3 === void 0 ? void 0 : _startingPoint$curren3.x) ?? 0);
|
58
|
+
const translationY = event.y - (((_startingPoint$curren4 = startingPoint.current) === null || _startingPoint$curren4 === void 0 ? void 0 : _startingPoint$curren4.y) ?? 0);
|
59
|
+
return onEndProp === null || onEndProp === void 0 ? void 0 : onEndProp({
|
60
|
+
...event,
|
61
|
+
translationX,
|
62
|
+
translationY
|
63
|
+
});
|
64
|
+
}, [onEndProp, startingPoint]);
|
65
|
+
const isPointInPath = (0, _react.useCallback)(point => {
|
66
|
+
if (touchablePath) {
|
67
|
+
return (0, _unwrapAnimatedValue.unwrapAnimatedValue)(touchablePath).contains(point.x, point.y);
|
68
|
+
}
|
69
|
+
const path = getSkiaPath(Component.name, props);
|
70
|
+
if (!path) {
|
71
|
+
throw Error('No touchablePath provided');
|
72
|
+
}
|
73
|
+
return path.contains(point.x, point.y);
|
74
|
+
}, [props, touchablePath]);
|
75
|
+
(0, _react.useEffect)(() => {
|
76
|
+
ref.current = {
|
77
|
+
[`id:${id}`]: {
|
78
|
+
isPointInPath,
|
79
|
+
onStart,
|
80
|
+
onActive,
|
81
|
+
onEnd
|
82
|
+
},
|
83
|
+
...ref.current
|
84
|
+
};
|
85
|
+
return () => {
|
86
|
+
var _ref$current;
|
87
|
+
(_ref$current = ref.current) === null || _ref$current === void 0 ? true : delete _ref$current[id];
|
88
|
+
};
|
89
|
+
}, [id, isPointInPath, onActive, onEnd, onStart, ref, touchablePath]);
|
90
|
+
return Component(props);
|
91
|
+
};
|
92
|
+
};
|
93
|
+
exports.withTouchableHandler = withTouchableHandler;
|
94
|
+
//# sourceMappingURL=with-touchable-handler.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["getSkiaPath","key","props","unwrappedProps","unwrapAnimatedValueObject","getCirclePath","getRectPath","getRoundedRectPath","withTouchableHandler","Component","onStart","onStartProp","onActive","onActiveProp","onEnd","onEndProp","touchablePath","id","useId","ref","useTouchHandlerContext","startingPoint","useValue","useCallback","event","current","x","y","translationX","translationY","isPointInPath","point","unwrapAnimatedValue","contains","path","name","Error","useEffect"],"sourceRoot":"../../src","sources":["with-touchable-handler.tsx"],"mappings":"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"}
|
@@ -0,0 +1,35 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.useGestureHandler = void 0;
|
7
|
+
var _reactNativeSkia = require("@shopify/react-native-skia");
|
8
|
+
var _react = require("react");
|
9
|
+
const useGestureHandler = gestureHandlers => {
|
10
|
+
const {
|
11
|
+
onStart,
|
12
|
+
onActive,
|
13
|
+
onEnd
|
14
|
+
} = gestureHandlers;
|
15
|
+
const context = (0, _reactNativeSkia.useValue)({});
|
16
|
+
const handleStart = (0, _react.useCallback)(touchInfo => {
|
17
|
+
if (!onStart) return;
|
18
|
+
return onStart(touchInfo, context.current);
|
19
|
+
}, [context, onStart]);
|
20
|
+
const handleActive = (0, _react.useCallback)(extendedTouchInfo => {
|
21
|
+
if (!onActive) return;
|
22
|
+
return onActive(extendedTouchInfo, context.current);
|
23
|
+
}, [context, onActive]);
|
24
|
+
const handleEnd = (0, _react.useCallback)(extendedTouchInfo => {
|
25
|
+
if (!onEnd) return;
|
26
|
+
return onEnd(extendedTouchInfo, context.current);
|
27
|
+
}, [context, onEnd]);
|
28
|
+
return {
|
29
|
+
onStart: handleStart,
|
30
|
+
onActive: handleActive,
|
31
|
+
onEnd: handleEnd
|
32
|
+
};
|
33
|
+
};
|
34
|
+
exports.useGestureHandler = useGestureHandler;
|
35
|
+
//# sourceMappingURL=use-gesture-handler.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["useGestureHandler","gestureHandlers","onStart","onActive","onEnd","context","useValue","handleStart","useCallback","touchInfo","current","handleActive","extendedTouchInfo","handleEnd"],"sourceRoot":"../../src","sources":["use-gesture-handler.ts"],"mappings":";;;;;;AAAA;AAKA;AAeA,MAAMA,iBAAiB,GACrBC,eAAqD,IAClD;EACH,MAAM;IAAEC,OAAO;IAAEC,QAAQ;IAAEC;EAAM,CAAC,GAAGH,eAAe;EAEpD,MAAMI,OAAO,GAAG,IAAAC,yBAAQ,EAAc,CAAC,CAAC,CAAQ;EAEhD,MAAMC,WAAW,GAAG,IAAAC,kBAAW,EAC5BC,SAAoB,IAAK;IACxB,IAAI,CAACP,OAAO,EAAE;IACd,OAAOA,OAAO,CAACO,SAAS,EAAEJ,OAAO,CAACK,OAAO,CAAC;EAC5C,CAAC,EACD,CAACL,OAAO,EAAEH,OAAO,CAAC,CACnB;EAED,MAAMS,YAAY,GAAG,IAAAH,kBAAW,EAC7BI,iBAAsD,IAAK;IAC1D,IAAI,CAACT,QAAQ,EAAE;IACf,OAAOA,QAAQ,CAACS,iBAAiB,EAAEP,OAAO,CAACK,OAAO,CAAC;EACrD,CAAC,EACD,CAACL,OAAO,EAAEF,QAAQ,CAAC,CACpB;EAED,MAAMU,SAAS,GAAG,IAAAL,kBAAW,EAC1BI,iBAAsD,IAAK;IAC1D,IAAI,CAACR,KAAK,EAAE;IACZ,OAAOA,KAAK,CAACQ,iBAAiB,EAAEP,OAAO,CAACK,OAAO,CAAC;EAClD,CAAC,EACD,CAACL,OAAO,EAAED,KAAK,CAAC,CACjB;EAED,OAAO;IACLF,OAAO,EAAEK,WAAW;IACpBJ,QAAQ,EAAEQ,YAAY;IACtBP,KAAK,EAAES;EACT,CAAC;AACH,CAAC;AAAC"}
|
@@ -0,0 +1,39 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
var _canvas = require("./canvas");
|
7
|
+
Object.keys(_canvas).forEach(function (key) {
|
8
|
+
if (key === "default" || key === "__esModule") return;
|
9
|
+
if (key in exports && exports[key] === _canvas[key]) return;
|
10
|
+
Object.defineProperty(exports, key, {
|
11
|
+
enumerable: true,
|
12
|
+
get: function () {
|
13
|
+
return _canvas[key];
|
14
|
+
}
|
15
|
+
});
|
16
|
+
});
|
17
|
+
var _hoc = require("./hoc");
|
18
|
+
Object.keys(_hoc).forEach(function (key) {
|
19
|
+
if (key === "default" || key === "__esModule") return;
|
20
|
+
if (key in exports && exports[key] === _hoc[key]) return;
|
21
|
+
Object.defineProperty(exports, key, {
|
22
|
+
enumerable: true,
|
23
|
+
get: function () {
|
24
|
+
return _hoc[key];
|
25
|
+
}
|
26
|
+
});
|
27
|
+
});
|
28
|
+
var _useGestureHandler = require("./hooks/use-gesture-handler");
|
29
|
+
Object.keys(_useGestureHandler).forEach(function (key) {
|
30
|
+
if (key === "default" || key === "__esModule") return;
|
31
|
+
if (key in exports && exports[key] === _useGestureHandler[key]) return;
|
32
|
+
Object.defineProperty(exports, key, {
|
33
|
+
enumerable: true,
|
34
|
+
get: function () {
|
35
|
+
return _useGestureHandler[key];
|
36
|
+
}
|
37
|
+
});
|
38
|
+
});
|
39
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
|
@@ -0,0 +1,17 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.getCirclePath = void 0;
|
7
|
+
var _reactNativeSkia = require("@shopify/react-native-skia");
|
8
|
+
const getCirclePath = _ref => {
|
9
|
+
let {
|
10
|
+
cx,
|
11
|
+
cy,
|
12
|
+
r
|
13
|
+
} = _ref;
|
14
|
+
return _reactNativeSkia.Skia.Path.Make().addCircle(cx, cy, r);
|
15
|
+
};
|
16
|
+
exports.getCirclePath = getCirclePath;
|
17
|
+
//# sourceMappingURL=get-circle-path.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["getCirclePath","cx","cy","r","Skia","Path","Make","addCircle"],"sourceRoot":"../../src","sources":["get-circle-path.ts"],"mappings":";;;;;;AAAA;AAIO,MAAMA,aAAa,GAAG,QAAwC;EAAA,IAAvC;IAAEC,EAAE;IAAEC,EAAE;IAAEC;EAAuB,CAAC;EAC9D,OAAOC,qBAAI,CAACC,IAAI,CAACC,IAAI,EAAE,CAACC,SAAS,CAACN,EAAE,EAAEC,EAAE,EAAEC,CAAC,CAAC;AAC9C,CAAC;AAAC"}
|
@@ -0,0 +1,48 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.getRoundedRectPath = exports.getRectPath = void 0;
|
7
|
+
var _reactNativeSkia = require("@shopify/react-native-skia");
|
8
|
+
const getRectPath = params => {
|
9
|
+
const skPath = _reactNativeSkia.Skia.Path.Make();
|
10
|
+
if ('rect' in params) {
|
11
|
+
// eslint-disable-next-line @typescript-eslint/no-shadow
|
12
|
+
const {
|
13
|
+
rect
|
14
|
+
} = params;
|
15
|
+
skPath.addRect(rect);
|
16
|
+
return skPath;
|
17
|
+
}
|
18
|
+
const {
|
19
|
+
x,
|
20
|
+
y,
|
21
|
+
width,
|
22
|
+
height
|
23
|
+
} = params;
|
24
|
+
skPath.addRect((0, _reactNativeSkia.rect)(x, y, width, height));
|
25
|
+
return skPath;
|
26
|
+
};
|
27
|
+
exports.getRectPath = getRectPath;
|
28
|
+
const getRoundedRectPath = params => {
|
29
|
+
const {
|
30
|
+
r
|
31
|
+
} = params;
|
32
|
+
if ('rect' in params) {
|
33
|
+
// eslint-disable-next-line @typescript-eslint/no-shadow
|
34
|
+
const {
|
35
|
+
rect
|
36
|
+
} = params;
|
37
|
+
return _reactNativeSkia.Skia.Path.Make().addRRect((0, _reactNativeSkia.rrect)(rect, r, r));
|
38
|
+
}
|
39
|
+
const {
|
40
|
+
x,
|
41
|
+
y,
|
42
|
+
width,
|
43
|
+
height
|
44
|
+
} = params;
|
45
|
+
return _reactNativeSkia.Skia.Path.Make().addRRect((0, _reactNativeSkia.rrect)((0, _reactNativeSkia.rect)(x, y, width, height), r, r));
|
46
|
+
};
|
47
|
+
exports.getRoundedRectPath = getRoundedRectPath;
|
48
|
+
//# sourceMappingURL=get-rect-path.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["getRectPath","params","skPath","Skia","Path","Make","rect","addRect","x","y","width","height","getRoundedRectPath","r","addRRect","rrect"],"sourceRoot":"../../src","sources":["get-rect-path.ts"],"mappings":";;;;;;AAAA;AAWA,MAAMA,WAAW,GAAIC,MAAyB,IAAK;EACjD,MAAMC,MAAM,GAAGC,qBAAI,CAACC,IAAI,CAACC,IAAI,EAAE;EAC/B,IAAI,MAAM,IAAIJ,MAAM,EAAE;IACpB;IACA,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;EACtCC,MAAM,CAACK,OAAO,CAAC,IAAAD,qBAAI,EAACE,CAAC,EAAEC,CAAC,EAAEC,KAAK,EAAEC,MAAM,CAAC,CAAC;EACzC,OAAOT,MAAM;AACf,CAAC;AAAC;AAMF,MAAMU,kBAAkB,GAAIX,MAAgC,IAAK;EAC/D,MAAM;IAAEY;EAAE,CAAC,GAAGZ,MAAM;EACpB,IAAI,MAAM,IAAIA,MAAM,EAAE;IACpB;IACA,MAAM;MAAEK;IAAK,CAAC,GAAGL,MAAM;IACvB,OAAOE,qBAAI,CAACC,IAAI,CAACC,IAAI,EAAE,CAACS,QAAQ,CAAC,IAAAC,sBAAK,EAACT,IAAI,EAAEO,CAAC,EAAEA,CAAC,CAAC,CAAC;EACrD;EACA,MAAM;IAAEL,CAAC;IAAEC,CAAC;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAGV,MAAM;EACtC,OAAOE,qBAAI,CAACC,IAAI,CAACC,IAAI,EAAE,CAACS,QAAQ,CAAC,IAAAC,sBAAK,EAAC,IAAAT,qBAAI,EAACE,CAAC,EAAEC,CAAC,EAAEC,KAAK,EAAEC,MAAM,CAAC,EAAEE,CAAC,EAAEA,CAAC,CAAC,CAAC;AAC1E,CAAC;AAAC"}
|
@@ -0,0 +1,23 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.unwrapAnimatedValueObject = exports.unwrapAnimatedValue = void 0;
|
7
|
+
const unwrapAnimatedValue = value => {
|
8
|
+
if (value.current != null) {
|
9
|
+
return value.current;
|
10
|
+
}
|
11
|
+
return value;
|
12
|
+
};
|
13
|
+
exports.unwrapAnimatedValue = unwrapAnimatedValue;
|
14
|
+
const unwrapAnimatedValueObject = value => {
|
15
|
+
return Object.keys(value).reduce((acc, key) => {
|
16
|
+
return {
|
17
|
+
...acc,
|
18
|
+
[key]: unwrapAnimatedValue(value[key])
|
19
|
+
};
|
20
|
+
}, {});
|
21
|
+
};
|
22
|
+
exports.unwrapAnimatedValueObject = unwrapAnimatedValueObject;
|
23
|
+
//# sourceMappingURL=unwrap-animated-value.js.map
|
@@ -0,0 +1 @@
|
|
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;AAAC;AAEF,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;AAAC"}
|
@@ -0,0 +1,56 @@
|
|
1
|
+
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); }
|
2
|
+
import { Canvas as SkiaCanvas, useTouchHandler, useValue } from '@shopify/react-native-skia';
|
3
|
+
import React, { useEffect } from 'react';
|
4
|
+
import { TouchHandlerContext } from './context';
|
5
|
+
const Canvas = _ref => {
|
6
|
+
let {
|
7
|
+
children,
|
8
|
+
onTouch,
|
9
|
+
...props
|
10
|
+
} = _ref;
|
11
|
+
const touchableRefs = useValue({});
|
12
|
+
const activeKey = useValue(null);
|
13
|
+
const touchHandler = useTouchHandler({
|
14
|
+
onStart: event => {
|
15
|
+
const keys = Object.keys(touchableRefs.current);
|
16
|
+
for (let i = 0; i < keys.length; i++) {
|
17
|
+
const key = keys[i];
|
18
|
+
const touchableItem = touchableRefs.current[key];
|
19
|
+
if (touchableItem !== null && touchableItem !== void 0 && touchableItem.isPointInPath(event)) {
|
20
|
+
var _touchableItem$onStar;
|
21
|
+
activeKey.current = key;
|
22
|
+
(_touchableItem$onStar = touchableItem.onStart) === null || _touchableItem$onStar === void 0 ? void 0 : _touchableItem$onStar.call(touchableItem, event);
|
23
|
+
return;
|
24
|
+
}
|
25
|
+
}
|
26
|
+
},
|
27
|
+
onActive: event => {
|
28
|
+
var _touchableItem$onActi;
|
29
|
+
if (!activeKey.current) return;
|
30
|
+
const touchableItem = touchableRefs.current[activeKey.current];
|
31
|
+
return touchableItem === null || touchableItem === void 0 ? void 0 : (_touchableItem$onActi = touchableItem.onActive) === null || _touchableItem$onActi === void 0 ? void 0 : _touchableItem$onActi.call(touchableItem, event);
|
32
|
+
},
|
33
|
+
onEnd: event => {
|
34
|
+
var _touchableItem$onEnd;
|
35
|
+
if (!activeKey.current) return;
|
36
|
+
const touchableItem = touchableRefs.current[activeKey.current];
|
37
|
+
activeKey.current = null;
|
38
|
+
return touchableItem === null || touchableItem === void 0 ? void 0 : (_touchableItem$onEnd = touchableItem.onEnd) === null || _touchableItem$onEnd === void 0 ? void 0 : _touchableItem$onEnd.call(touchableItem, event);
|
39
|
+
}
|
40
|
+
}, [touchableRefs, activeKey]);
|
41
|
+
useEffect(() => {
|
42
|
+
return () => {
|
43
|
+
touchableRefs.current = {};
|
44
|
+
};
|
45
|
+
}, [touchableRefs]);
|
46
|
+
return /*#__PURE__*/React.createElement(SkiaCanvas, _extends({}, props, {
|
47
|
+
onTouch: touchInfo => {
|
48
|
+
touchHandler(touchInfo);
|
49
|
+
return onTouch === null || onTouch === void 0 ? void 0 : onTouch(touchInfo);
|
50
|
+
}
|
51
|
+
}), /*#__PURE__*/React.createElement(TouchHandlerContext.Provider, {
|
52
|
+
value: touchableRefs
|
53
|
+
}, children));
|
54
|
+
};
|
55
|
+
export { Canvas };
|
56
|
+
//# sourceMappingURL=canvas.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["Canvas","SkiaCanvas","useTouchHandler","useValue","React","useEffect","TouchHandlerContext","children","onTouch","props","touchableRefs","activeKey","touchHandler","onStart","event","keys","Object","current","i","length","key","touchableItem","isPointInPath","onActive","onEnd","touchInfo"],"sourceRoot":"../../src","sources":["canvas.tsx"],"mappings":";AAAA,SACEA,MAAM,IAAIC,UAAU,EAEpBC,eAAe,EACfC,QAAQ,QACH,4BAA4B;AACnC,OAAOC,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,SAASC,mBAAmB,QAAqC,WAAW;AAE5E,MAAMN,MAA6B,GAAG,QAAqC;EAAA,IAApC;IAAEO,QAAQ;IAAEC,OAAO;IAAE,GAAGC;EAAM,CAAC;EACpE,MAAMC,aAAa,GAAGP,QAAQ,CAAyC,CAAC,CAAC,CAAC;EAE1E,MAAMQ,SAAS,GAAGR,QAAQ,CAAgB,IAAI,CAAC;EAE/C,MAAMS,YAAY,GAAGV,eAAe,CAClC;IACEW,OAAO,EAAGC,KAAK,IAAK;MAClB,MAAMC,IAAI,GAAGC,MAAM,CAACD,IAAI,CAACL,aAAa,CAACO,OAAO,CAAC;MAC/C,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGH,IAAI,CAACI,MAAM,EAAED,CAAC,EAAE,EAAE;QACpC,MAAME,GAAG,GAAGL,IAAI,CAACG,CAAC,CAAW;QAC7B,MAAMG,aAAa,GAAGX,aAAa,CAACO,OAAO,CAACG,GAAG,CAAC;QAEhD,IAAIC,aAAa,aAAbA,aAAa,eAAbA,aAAa,CAAEC,aAAa,CAACR,KAAK,CAAC,EAAE;UAAA;UACvCH,SAAS,CAACM,OAAO,GAAGG,GAAG;UACvB,yBAAAC,aAAa,CAACR,OAAO,0DAArB,2BAAAQ,aAAa,EAAWP,KAAK,CAAC;UAC9B;QACF;MACF;IACF,CAAC;IACDS,QAAQ,EAAGT,KAAK,IAAK;MAAA;MACnB,IAAI,CAACH,SAAS,CAACM,OAAO,EAAE;MACxB,MAAMI,aAAa,GAAGX,aAAa,CAACO,OAAO,CAACN,SAAS,CAACM,OAAO,CAAC;MAC9D,OAAOI,aAAa,aAAbA,aAAa,gDAAbA,aAAa,CAAEE,QAAQ,0DAAvB,2BAAAF,aAAa,EAAaP,KAAK,CAAC;IACzC,CAAC;IACDU,KAAK,EAAGV,KAAK,IAAK;MAAA;MAChB,IAAI,CAACH,SAAS,CAACM,OAAO,EAAE;MACxB,MAAMI,aAAa,GAAGX,aAAa,CAACO,OAAO,CAACN,SAAS,CAACM,OAAO,CAAC;MAC9DN,SAAS,CAACM,OAAO,GAAG,IAAI;MACxB,OAAOI,aAAa,aAAbA,aAAa,+CAAbA,aAAa,CAAEG,KAAK,yDAApB,0BAAAH,aAAa,EAAUP,KAAK,CAAC;IACtC;EACF,CAAC,EACD,CAACJ,aAAa,EAAEC,SAAS,CAAC,CAC3B;EAEDN,SAAS,CAAC,MAAM;IACd,OAAO,MAAM;MACXK,aAAa,CAACO,OAAO,GAAG,CAAC,CAAC;IAC5B,CAAC;EACH,CAAC,EAAE,CAACP,aAAa,CAAC,CAAC;EAEnB,oBACE,oBAAC,UAAU,eACLD,KAAK;IACT,OAAO,EAAGgB,SAAS,IAAK;MACtBb,YAAY,CAACa,SAAS,CAAC;MACvB,OAAOjB,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAGiB,SAAS,CAAC;IAC7B;EAAE,iBAEF,oBAAC,mBAAmB,CAAC,QAAQ;IAAC,KAAK,EAAEf;EAAc,GAChDH,QAAQ,CACoB,CACpB;AAEjB,CAAC;AAED,SAASP,MAAM"}
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import React, { useContext } from 'react';
|
2
|
+
const TouchHandlerContext = /*#__PURE__*/React.createContext({
|
3
|
+
current: {}
|
4
|
+
});
|
5
|
+
const useTouchHandlerContext = () => {
|
6
|
+
return useContext(TouchHandlerContext);
|
7
|
+
};
|
8
|
+
export { TouchHandlerContext, useTouchHandlerContext };
|
9
|
+
//# sourceMappingURL=context.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["React","useContext","TouchHandlerContext","createContext","current","useTouchHandlerContext"],"sourceRoot":"../../src","sources":["context.tsx"],"mappings":"AAKA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAazC,MAAMC,mBAAmB,gBAAGF,KAAK,CAACG,aAAa,CAA8B;EAC3EC,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC;AAEF,MAAMC,sBAAsB,GAAG,MAAM;EACnC,OAAOJ,UAAU,CAACC,mBAAmB,CAAC;AACxC,CAAC;AAED,SAASA,mBAAmB,EAAEG,sBAAsB"}
|