@shopify/react-native-skia 1.4.2 → 1.5.0
Sign up to get free protection for your applications and to get access to all the features.
- package/android/CMakeLists.txt +38 -6
- package/android/build.gradle +1 -0
- package/android/cpp/jni/include/JniSkiaBaseView.h +0 -3
- package/android/cpp/jni/include/JniSkiaDomView.h +0 -6
- package/android/cpp/jni/include/JniSkiaPictureView.h +0 -5
- package/android/cpp/rnskia-android/RNSkAndroidView.h +0 -20
- package/android/src/main/java/com/shopify/reactnative/skia/SkiaBaseView.java +0 -72
- package/cpp/rnskia/RNSkDomView.cpp +0 -79
- package/cpp/rnskia/RNSkDomView.h +1 -39
- package/cpp/rnskia/RNSkPictureView.h +0 -1
- package/cpp/rnskia/RNSkView.h +0 -17
- package/ios/RNSkia-iOS/SkiaUIView.mm +0 -51
- package/lib/commonjs/mock/index.js +0 -1
- package/lib/commonjs/mock/index.js.map +1 -1
- package/lib/commonjs/renderer/Canvas.d.ts +1 -2
- package/lib/commonjs/renderer/Canvas.js +0 -3
- package/lib/commonjs/renderer/Canvas.js.map +1 -1
- package/lib/commonjs/skia/web/JsiSkia.js.map +1 -1
- package/lib/commonjs/views/SkiaBaseWebView.d.ts +2 -11
- package/lib/commonjs/views/SkiaBaseWebView.js +3 -31
- package/lib/commonjs/views/SkiaBaseWebView.js.map +1 -1
- package/lib/commonjs/views/SkiaDomView.js +0 -12
- package/lib/commonjs/views/SkiaDomView.js.map +1 -1
- package/lib/commonjs/views/SkiaDomView.web.d.ts +2 -2
- package/lib/commonjs/views/SkiaDomView.web.js +1 -6
- package/lib/commonjs/views/SkiaDomView.web.js.map +1 -1
- package/lib/commonjs/views/SkiaJSDomView.js +0 -12
- package/lib/commonjs/views/SkiaJSDomView.js.map +1 -1
- package/lib/commonjs/views/index.d.ts +0 -1
- package/lib/commonjs/views/index.js +0 -11
- package/lib/commonjs/views/index.js.map +1 -1
- package/lib/commonjs/views/types.d.ts +0 -26
- package/lib/commonjs/views/types.js +0 -8
- package/lib/commonjs/views/types.js.map +1 -1
- package/lib/module/mock/index.js +0 -1
- package/lib/module/mock/index.js.map +1 -1
- package/lib/module/renderer/Canvas.d.ts +1 -2
- package/lib/module/renderer/Canvas.js +0 -3
- package/lib/module/renderer/Canvas.js.map +1 -1
- package/lib/module/skia/web/JsiSkia.js.map +1 -1
- package/lib/module/views/SkiaBaseWebView.d.ts +2 -11
- package/lib/module/views/SkiaBaseWebView.js +3 -31
- package/lib/module/views/SkiaBaseWebView.js.map +1 -1
- package/lib/module/views/SkiaDomView.js +0 -12
- package/lib/module/views/SkiaDomView.js.map +1 -1
- package/lib/module/views/SkiaDomView.web.d.ts +2 -2
- package/lib/module/views/SkiaDomView.web.js +1 -6
- package/lib/module/views/SkiaDomView.web.js.map +1 -1
- package/lib/module/views/SkiaJSDomView.js +0 -12
- package/lib/module/views/SkiaJSDomView.js.map +1 -1
- package/lib/module/views/index.d.ts +0 -1
- package/lib/module/views/index.js +0 -1
- package/lib/module/views/index.js.map +1 -1
- package/lib/module/views/types.d.ts +0 -26
- package/lib/module/views/types.js +1 -7
- package/lib/module/views/types.js.map +1 -1
- package/lib/typescript/lib/commonjs/mock/index.d.ts +0 -1
- package/lib/typescript/lib/commonjs/views/SkiaBaseWebView.d.ts +0 -3
- package/lib/typescript/lib/commonjs/views/SkiaDomView.web.d.ts +1 -1
- package/lib/typescript/lib/commonjs/views/types.d.ts +0 -1
- package/lib/typescript/lib/module/mock/index.d.ts +0 -1
- package/lib/typescript/lib/module/views/SkiaBaseWebView.d.ts +0 -3
- package/lib/typescript/lib/module/views/SkiaDomView.web.d.ts +1 -1
- package/lib/typescript/lib/module/views/index.d.ts +0 -1
- package/lib/typescript/lib/module/views/types.d.ts +1 -1
- package/lib/typescript/src/renderer/Canvas.d.ts +1 -2
- package/lib/typescript/src/views/SkiaBaseWebView.d.ts +2 -11
- package/lib/typescript/src/views/SkiaDomView.web.d.ts +2 -2
- package/lib/typescript/src/views/index.d.ts +0 -1
- package/lib/typescript/src/views/types.d.ts +0 -26
- package/package.json +1 -1
- package/src/mock/index.ts +0 -1
- package/src/renderer/Canvas.tsx +1 -5
- package/src/renderer/__tests__/setup.tsx +0 -2
- package/src/skia/web/JsiSkia.ts +1 -1
- package/src/views/SkiaBaseWebView.tsx +5 -42
- package/src/views/SkiaDomView.tsx +2 -14
- package/src/views/SkiaDomView.web.tsx +2 -9
- package/src/views/SkiaJSDomView.tsx +2 -14
- package/src/views/index.ts +0 -1
- package/src/views/types.ts +0 -32
- package/cpp/rnskia/RNSkInfoParameter.h +0 -92
- package/lib/commonjs/renderer/__tests__/TouchHandler.spec.d.ts +0 -1
- package/lib/commonjs/views/useTouchHandler.d.ts +0 -22
- package/lib/commonjs/views/useTouchHandler.js +0 -83
- package/lib/commonjs/views/useTouchHandler.js.map +0 -1
- package/lib/module/renderer/__tests__/TouchHandler.spec.d.ts +0 -1
- package/lib/module/views/useTouchHandler.d.ts +0 -22
- package/lib/module/views/useTouchHandler.js +0 -75
- package/lib/module/views/useTouchHandler.js.map +0 -1
- package/lib/typescript/lib/commonjs/views/useTouchHandler.d.ts +0 -12
- package/lib/typescript/lib/module/views/useTouchHandler.d.ts +0 -2
- package/lib/typescript/src/renderer/__tests__/TouchHandler.spec.d.ts +0 -1
- package/lib/typescript/src/views/useTouchHandler.d.ts +0 -22
- package/src/renderer/__tests__/TouchHandler.spec.tsx +0 -113
- package/src/views/useTouchHandler.ts +0 -107
@@ -29,7 +29,6 @@ export class SkiaBaseWebView extends React.Component<any, any, any> {
|
|
29
29
|
*/
|
30
30
|
tick(): void;
|
31
31
|
_redrawRequests: number | undefined;
|
32
|
-
_touches: any[] | undefined;
|
33
32
|
requestId: number | undefined;
|
34
33
|
redraw(): void;
|
35
34
|
/**
|
@@ -42,8 +41,6 @@ export class SkiaBaseWebView extends React.Component<any, any, any> {
|
|
42
41
|
* @param mode Drawing mode to use.
|
43
42
|
*/
|
44
43
|
setDrawMode(mode: any): void;
|
45
|
-
handleTouchEvent(evt: any, touchType: any): void;
|
46
|
-
createTouchHandler(touchType: any): (evt: any) => void;
|
47
44
|
render(): React.CElement<import("react-native").ViewProps, import("react-native").View>;
|
48
45
|
}
|
49
46
|
import React from "react";
|
@@ -1 +1 @@
|
|
1
|
-
export
|
1
|
+
export {};
|
@@ -1,11 +1,10 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import type { RefObject, ReactNode, FunctionComponent } from "react";
|
3
3
|
import { SkiaDomView } from "../views";
|
4
|
-
import type {
|
4
|
+
import type { SkiaBaseViewProps } from "../views";
|
5
5
|
export declare const useCanvasRef: () => React.RefObject<SkiaDomView>;
|
6
6
|
export interface CanvasProps extends SkiaBaseViewProps {
|
7
7
|
ref?: RefObject<SkiaDomView>;
|
8
8
|
children: ReactNode;
|
9
|
-
onTouch?: TouchHandler;
|
10
9
|
}
|
11
10
|
export declare const Canvas: FunctionComponent<CanvasProps & React.RefAttributes<SkiaDomView>>;
|
@@ -1,13 +1,10 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import type { PointerEvent } from "react";
|
3
2
|
import type { SkRect, SkCanvas } from "../skia/types";
|
4
|
-
import type { DrawMode, SkiaBaseViewProps
|
5
|
-
import { TouchType } from "./types";
|
3
|
+
import type { DrawMode, SkiaBaseViewProps } from "./types";
|
6
4
|
export declare abstract class SkiaBaseWebView<TProps extends SkiaBaseViewProps> extends React.Component<TProps> {
|
7
5
|
constructor(props: TProps);
|
8
6
|
private _surface;
|
9
7
|
private _unsubscriptions;
|
10
|
-
private _touches;
|
11
8
|
private _canvas;
|
12
9
|
private _canvasRef;
|
13
10
|
private _mode;
|
@@ -33,7 +30,7 @@ export declare abstract class SkiaBaseWebView<TProps extends SkiaBaseViewProps>
|
|
33
30
|
/**
|
34
31
|
* Override to render
|
35
32
|
*/
|
36
|
-
protected abstract renderInCanvas(canvas: SkCanvas
|
33
|
+
protected abstract renderInCanvas(canvas: SkCanvas): void;
|
37
34
|
/**
|
38
35
|
* Sends a redraw request to the native SkiaView.
|
39
36
|
*/
|
@@ -49,12 +46,6 @@ export declare abstract class SkiaBaseWebView<TProps extends SkiaBaseViewProps>
|
|
49
46
|
* @param mode Drawing mode to use.
|
50
47
|
*/
|
51
48
|
setDrawMode(mode: DrawMode): void;
|
52
|
-
private handleTouchEvent;
|
53
|
-
createTouchHandler(touchType: TouchType): (evt: PointerEvent) => void;
|
54
|
-
private onStart;
|
55
|
-
private onActive;
|
56
|
-
private onCancel;
|
57
|
-
private onEnd;
|
58
49
|
private onLayout;
|
59
50
|
render(): React.JSX.Element;
|
60
51
|
}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import type { SkCanvas } from "../skia/types";
|
2
2
|
import { SkiaBaseWebView } from "./SkiaBaseWebView";
|
3
|
-
import type { SkiaDomViewProps
|
3
|
+
import type { SkiaDomViewProps } from "./types";
|
4
4
|
export declare class SkiaDomView extends SkiaBaseWebView<SkiaDomViewProps> {
|
5
5
|
constructor(props: SkiaDomViewProps);
|
6
|
-
protected renderInCanvas(canvas: SkCanvas
|
6
|
+
protected renderInCanvas(canvas: SkCanvas): void;
|
7
7
|
}
|
@@ -7,36 +7,11 @@ export type NativeSkiaViewProps = ViewProps & {
|
|
7
7
|
mode?: DrawMode;
|
8
8
|
debug?: boolean;
|
9
9
|
};
|
10
|
-
export declare enum TouchType {
|
11
|
-
Start = 0,
|
12
|
-
Active = 1,
|
13
|
-
End = 2,
|
14
|
-
Cancelled = 3
|
15
|
-
}
|
16
|
-
export interface TouchInfo {
|
17
|
-
x: number;
|
18
|
-
y: number;
|
19
|
-
force: number;
|
20
|
-
type: TouchType;
|
21
|
-
id: number;
|
22
|
-
timestamp: number;
|
23
|
-
}
|
24
10
|
export interface DrawingInfo {
|
25
11
|
width: number;
|
26
12
|
height: number;
|
27
13
|
timestamp: number;
|
28
|
-
touches: Array<Array<TouchInfo>>;
|
29
14
|
}
|
30
|
-
export type ExtendedTouchInfo = TouchInfo & {
|
31
|
-
velocityX: number;
|
32
|
-
velocityY: number;
|
33
|
-
};
|
34
|
-
export type TouchHandlers = {
|
35
|
-
onStart?: (touchInfo: TouchInfo) => void;
|
36
|
-
onActive?: (touchInfo: ExtendedTouchInfo) => void;
|
37
|
-
onEnd?: (touchInfo: ExtendedTouchInfo) => void;
|
38
|
-
};
|
39
|
-
export type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;
|
40
15
|
export interface ISkiaViewApi {
|
41
16
|
setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;
|
42
17
|
requestRedraw: (nativeId: number) => void;
|
@@ -68,5 +43,4 @@ export interface SkiaPictureViewProps extends SkiaBaseViewProps {
|
|
68
43
|
}
|
69
44
|
export interface SkiaDomViewProps extends SkiaBaseViewProps {
|
70
45
|
root?: RenderNode<GroupProps>;
|
71
|
-
onTouch?: TouchHandler;
|
72
46
|
}
|
package/package.json
CHANGED
@@ -7,7 +7,7 @@
|
|
7
7
|
"setup-skia-web": "./scripts/setup-canvaskit.js"
|
8
8
|
},
|
9
9
|
"title": "React Native Skia",
|
10
|
-
"version": "1.
|
10
|
+
"version": "1.5.0",
|
11
11
|
"description": "High-performance React Native Graphics using Skia",
|
12
12
|
"main": "lib/module/index.js",
|
13
13
|
"react-native": "src/index.ts",
|
package/src/mock/index.ts
CHANGED
package/src/renderer/Canvas.tsx
CHANGED
@@ -16,7 +16,7 @@ import type { LayoutChangeEvent } from "react-native";
|
|
16
16
|
|
17
17
|
import { SkiaDomView } from "../views";
|
18
18
|
import { Skia } from "../skia/Skia";
|
19
|
-
import type {
|
19
|
+
import type { SkiaBaseViewProps } from "../views";
|
20
20
|
import { SkiaJSDomView } from "../views/SkiaJSDomView";
|
21
21
|
|
22
22
|
import { SkiaRoot } from "./Reconciler";
|
@@ -27,7 +27,6 @@ export const useCanvasRef = () => useRef<SkiaDomView>(null);
|
|
27
27
|
export interface CanvasProps extends SkiaBaseViewProps {
|
28
28
|
ref?: RefObject<SkiaDomView>;
|
29
29
|
children: ReactNode;
|
30
|
-
onTouch?: TouchHandler;
|
31
30
|
}
|
32
31
|
|
33
32
|
const useOnSizeEvent = (
|
@@ -56,7 +55,6 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
|
|
56
55
|
style,
|
57
56
|
debug,
|
58
57
|
mode,
|
59
|
-
onTouch,
|
60
58
|
onSize: _onSize,
|
61
59
|
onLayout: _onLayout,
|
62
60
|
...props
|
@@ -96,7 +94,6 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
|
|
96
94
|
ref={ref}
|
97
95
|
style={style}
|
98
96
|
root={root.dom}
|
99
|
-
onTouch={onTouch}
|
100
97
|
onLayout={onLayout}
|
101
98
|
mode={mode}
|
102
99
|
debug={debug}
|
@@ -111,7 +108,6 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
|
|
111
108
|
ref={ref as any}
|
112
109
|
style={style}
|
113
110
|
root={root.dom}
|
114
|
-
onTouch={onTouch}
|
115
111
|
onLayout={onLayout}
|
116
112
|
mode={mode}
|
117
113
|
debug={debug}
|
@@ -164,13 +164,11 @@ export const importSkia = (): typeof SkiaExports => {
|
|
164
164
|
const offscreen = require("../Offscreen");
|
165
165
|
// TODO: to remove
|
166
166
|
const animation = require("../../animation");
|
167
|
-
const useTouchHandler = require("../../views/useTouchHandler");
|
168
167
|
return {
|
169
168
|
...skia,
|
170
169
|
...renderer,
|
171
170
|
...animation,
|
172
171
|
...offscreen,
|
173
|
-
...useTouchHandler,
|
174
172
|
};
|
175
173
|
};
|
176
174
|
|
package/src/skia/web/JsiSkia.ts
CHANGED
@@ -1,14 +1,12 @@
|
|
1
1
|
/* global HTMLCanvasElement */
|
2
2
|
import React from "react";
|
3
|
-
import type { PointerEvent } from "react";
|
4
3
|
import type { LayoutChangeEvent } from "react-native";
|
5
4
|
|
6
5
|
import type { SkRect, SkCanvas } from "../skia/types";
|
7
6
|
import { JsiSkSurface } from "../skia/web/JsiSkSurface";
|
8
7
|
import { Platform } from "../Platform";
|
9
8
|
|
10
|
-
import type { DrawMode, SkiaBaseViewProps
|
11
|
-
import { TouchType } from "./types";
|
9
|
+
import type { DrawMode, SkiaBaseViewProps } from "./types";
|
12
10
|
|
13
11
|
const pd = Platform.PixelRatio;
|
14
12
|
|
@@ -22,7 +20,6 @@ export abstract class SkiaBaseWebView<
|
|
22
20
|
|
23
21
|
private _surface: JsiSkSurface | null = null;
|
24
22
|
private _unsubscriptions: Array<() => void> = [];
|
25
|
-
private _touches: Array<TouchInfo> = [];
|
26
23
|
private _canvas: SkCanvas | null = null;
|
27
24
|
private _canvasRef = React.createRef<HTMLCanvasElement>();
|
28
25
|
private _mode: DrawMode;
|
@@ -95,7 +92,7 @@ export abstract class SkiaBaseWebView<
|
|
95
92
|
*/
|
96
93
|
public makeImageSnapshot(rect?: SkRect) {
|
97
94
|
this._canvas!.clear(CanvasKit.TRANSPARENT);
|
98
|
-
this.renderInCanvas(this._canvas
|
95
|
+
this.renderInCanvas(this._canvas!);
|
99
96
|
this._surface?.ref.flush();
|
100
97
|
return this._surface?.makeImageSnapshot(rect);
|
101
98
|
}
|
@@ -103,10 +100,7 @@ export abstract class SkiaBaseWebView<
|
|
103
100
|
/**
|
104
101
|
* Override to render
|
105
102
|
*/
|
106
|
-
protected abstract renderInCanvas(
|
107
|
-
canvas: SkCanvas,
|
108
|
-
touches: TouchInfo[]
|
109
|
-
): void;
|
103
|
+
protected abstract renderInCanvas(canvas: SkCanvas): void;
|
110
104
|
|
111
105
|
/**
|
112
106
|
* Sends a redraw request to the native SkiaView.
|
@@ -115,13 +109,11 @@ export abstract class SkiaBaseWebView<
|
|
115
109
|
if (this._mode === "continuous" || this._redrawRequests > 0) {
|
116
110
|
this._redrawRequests = 0;
|
117
111
|
if (this._canvas) {
|
118
|
-
const touches = [...this._touches];
|
119
|
-
this._touches = [];
|
120
112
|
const canvas = this._canvas!;
|
121
113
|
canvas.clear(Float32Array.of(0, 0, 0, 0));
|
122
114
|
canvas.save();
|
123
115
|
canvas.scale(pd, pd);
|
124
|
-
this.renderInCanvas(canvas
|
116
|
+
this.renderInCanvas(canvas);
|
125
117
|
canvas.restore();
|
126
118
|
this._surface?.ref.flush();
|
127
119
|
}
|
@@ -147,42 +139,13 @@ export abstract class SkiaBaseWebView<
|
|
147
139
|
this.tick();
|
148
140
|
}
|
149
141
|
|
150
|
-
private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {
|
151
|
-
this._touches.push({
|
152
|
-
id: evt.pointerId,
|
153
|
-
x: evt.clientX - evt.currentTarget.getClientRects()[0].left,
|
154
|
-
y: evt.clientY - evt.currentTarget.getClientRects()[0].top,
|
155
|
-
force: evt.pressure,
|
156
|
-
type: touchType,
|
157
|
-
timestamp: Date.now(),
|
158
|
-
});
|
159
|
-
this.redraw();
|
160
|
-
}
|
161
|
-
|
162
|
-
createTouchHandler(touchType: TouchType) {
|
163
|
-
return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);
|
164
|
-
}
|
165
|
-
|
166
|
-
private onStart = this.createTouchHandler(TouchType.Start);
|
167
|
-
private onActive = this.createTouchHandler(TouchType.Active);
|
168
|
-
private onCancel = this.createTouchHandler(TouchType.Cancelled);
|
169
|
-
private onEnd = this.createTouchHandler(TouchType.End);
|
170
142
|
private onLayout = this.onLayoutEvent.bind(this);
|
171
143
|
|
172
144
|
render() {
|
173
145
|
const { mode, debug = false, ...viewProps } = this.props;
|
174
146
|
return (
|
175
147
|
<Platform.View {...viewProps} onLayout={this.onLayout}>
|
176
|
-
<canvas
|
177
|
-
ref={this._canvasRef}
|
178
|
-
style={{ display: "flex", flex: 1 }}
|
179
|
-
onPointerDown={this.onStart}
|
180
|
-
onPointerMove={this.onActive}
|
181
|
-
onPointerUp={this.onEnd}
|
182
|
-
onPointerCancel={this.onCancel}
|
183
|
-
onPointerLeave={this.onEnd}
|
184
|
-
onPointerOut={this.onEnd}
|
185
|
-
/>
|
148
|
+
<canvas ref={this._canvasRef} style={{ display: "flex", flex: 1 }} />
|
186
149
|
</Platform.View>
|
187
150
|
);
|
188
151
|
}
|
@@ -19,19 +19,11 @@ export class SkiaDomView extends React.Component<SkiaDomViewProps> {
|
|
19
19
|
constructor(props: SkiaDomViewProps) {
|
20
20
|
super(props);
|
21
21
|
this._nativeId = SkiaViewNativeId.current++;
|
22
|
-
const { root,
|
22
|
+
const { root, onSize } = props;
|
23
23
|
if (root) {
|
24
24
|
assertSkiaViewApi();
|
25
25
|
SkiaViewApi.setJsiProperty(this._nativeId, "root", root);
|
26
26
|
}
|
27
|
-
if (onTouch) {
|
28
|
-
assertSkiaViewApi();
|
29
|
-
console.warn(
|
30
|
-
`The onTouch property is deprecated and will be removed in the next Skia release.
|
31
|
-
See: https://shopify.github.io/react-native-skia/docs/animations/gestures`
|
32
|
-
);
|
33
|
-
SkiaViewApi.setJsiProperty(this._nativeId, "onTouch", onTouch);
|
34
|
-
}
|
35
27
|
if (onSize) {
|
36
28
|
assertSkiaViewApi();
|
37
29
|
SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
|
@@ -45,15 +37,11 @@ See: https://shopify.github.io/react-native-skia/docs/animations/gestures`
|
|
45
37
|
}
|
46
38
|
|
47
39
|
componentDidUpdate(prevProps: SkiaDomViewProps) {
|
48
|
-
const { root,
|
40
|
+
const { root, onSize } = this.props;
|
49
41
|
if (root !== prevProps.root) {
|
50
42
|
assertSkiaViewApi();
|
51
43
|
SkiaViewApi.setJsiProperty(this._nativeId, "root", root);
|
52
44
|
}
|
53
|
-
if (onTouch !== prevProps.onTouch) {
|
54
|
-
assertSkiaViewApi();
|
55
|
-
SkiaViewApi.setJsiProperty(this._nativeId, "onTouch", onTouch);
|
56
|
-
}
|
57
45
|
if (onSize !== prevProps.onSize) {
|
58
46
|
assertSkiaViewApi();
|
59
47
|
SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
|
@@ -3,21 +3,14 @@ import type { SkCanvas } from "../skia/types";
|
|
3
3
|
import { JsiDrawingContext } from "../dom/types/DrawingContext";
|
4
4
|
|
5
5
|
import { SkiaBaseWebView } from "./SkiaBaseWebView";
|
6
|
-
import type { SkiaDomViewProps
|
6
|
+
import type { SkiaDomViewProps } from "./types";
|
7
7
|
|
8
8
|
export class SkiaDomView extends SkiaBaseWebView<SkiaDomViewProps> {
|
9
9
|
constructor(props: SkiaDomViewProps) {
|
10
10
|
super(props);
|
11
11
|
}
|
12
12
|
|
13
|
-
protected renderInCanvas(canvas: SkCanvas
|
14
|
-
if (this.props.onTouch) {
|
15
|
-
console.warn(
|
16
|
-
`The onTouch property is deprecated and will be removed in the next Skia release.
|
17
|
-
See: https://shopify.github.io/react-native-skia/docs/animations/gestures`
|
18
|
-
);
|
19
|
-
this.props.onTouch([touches]);
|
20
|
-
}
|
13
|
+
protected renderInCanvas(canvas: SkCanvas): void {
|
21
14
|
if (this.props.onSize) {
|
22
15
|
const { width, height } = this.getSize();
|
23
16
|
this.props.onSize.value = { width, height };
|
@@ -22,19 +22,11 @@ export class SkiaJSDomView extends React.Component<
|
|
22
22
|
constructor(props: SkiaDomViewProps & { Skia: Skia }) {
|
23
23
|
super(props);
|
24
24
|
this._nativeId = SkiaViewNativeId.current++;
|
25
|
-
const { root,
|
25
|
+
const { root, onSize } = props;
|
26
26
|
if (root) {
|
27
27
|
assertSkiaViewApi();
|
28
28
|
SkiaViewApi.setJsiProperty(this._nativeId, "root", root);
|
29
29
|
}
|
30
|
-
if (onTouch) {
|
31
|
-
assertSkiaViewApi();
|
32
|
-
console.warn(
|
33
|
-
`The onTouch property is deprecated and will be removed in the next Skia release.
|
34
|
-
See: https://shopify.github.io/react-native-skia/docs/animations/gestures`
|
35
|
-
);
|
36
|
-
SkiaViewApi.setJsiProperty(this._nativeId, "onTouch", onTouch);
|
37
|
-
}
|
38
30
|
if (onSize) {
|
39
31
|
assertSkiaViewApi();
|
40
32
|
SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
|
@@ -48,15 +40,11 @@ See: https://shopify.github.io/react-native-skia/docs/animations/gestures`
|
|
48
40
|
}
|
49
41
|
|
50
42
|
componentDidUpdate(prevProps: SkiaDomViewProps & { Skia: Skia }) {
|
51
|
-
const { root,
|
43
|
+
const { root, onSize } = this.props;
|
52
44
|
if (root !== prevProps.root && root !== undefined) {
|
53
45
|
assertSkiaViewApi();
|
54
46
|
this.draw();
|
55
47
|
}
|
56
|
-
if (onTouch !== prevProps.onTouch) {
|
57
|
-
assertSkiaViewApi();
|
58
|
-
SkiaViewApi.setJsiProperty(this._nativeId, "onTouch", onTouch);
|
59
|
-
}
|
60
48
|
if (onSize !== prevProps.onSize) {
|
61
49
|
assertSkiaViewApi();
|
62
50
|
SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
|
package/src/views/index.ts
CHANGED
package/src/views/types.ts
CHANGED
@@ -11,43 +11,12 @@ export type NativeSkiaViewProps = ViewProps & {
|
|
11
11
|
debug?: boolean;
|
12
12
|
};
|
13
13
|
|
14
|
-
export enum TouchType {
|
15
|
-
Start,
|
16
|
-
Active,
|
17
|
-
End,
|
18
|
-
Cancelled,
|
19
|
-
}
|
20
|
-
|
21
|
-
export interface TouchInfo {
|
22
|
-
x: number;
|
23
|
-
y: number;
|
24
|
-
force: number;
|
25
|
-
type: TouchType;
|
26
|
-
id: number;
|
27
|
-
timestamp: number;
|
28
|
-
}
|
29
|
-
|
30
14
|
export interface DrawingInfo {
|
31
15
|
width: number;
|
32
16
|
height: number;
|
33
17
|
timestamp: number;
|
34
|
-
touches: Array<Array<TouchInfo>>;
|
35
18
|
}
|
36
19
|
|
37
|
-
export type ExtendedTouchInfo = TouchInfo & {
|
38
|
-
// points per second
|
39
|
-
velocityX: number;
|
40
|
-
velocityY: number;
|
41
|
-
};
|
42
|
-
|
43
|
-
export type TouchHandlers = {
|
44
|
-
onStart?: (touchInfo: TouchInfo) => void;
|
45
|
-
onActive?: (touchInfo: ExtendedTouchInfo) => void;
|
46
|
-
onEnd?: (touchInfo: ExtendedTouchInfo) => void;
|
47
|
-
};
|
48
|
-
|
49
|
-
export type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;
|
50
|
-
|
51
20
|
export interface ISkiaViewApi {
|
52
21
|
setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;
|
53
22
|
requestRedraw: (nativeId: number) => void;
|
@@ -82,5 +51,4 @@ export interface SkiaPictureViewProps extends SkiaBaseViewProps {
|
|
82
51
|
|
83
52
|
export interface SkiaDomViewProps extends SkiaBaseViewProps {
|
84
53
|
root?: RenderNode<GroupProps>;
|
85
|
-
onTouch?: TouchHandler;
|
86
54
|
}
|
@@ -1,92 +0,0 @@
|
|
1
|
-
#pragma once
|
2
|
-
|
3
|
-
#include <chrono>
|
4
|
-
#include <memory>
|
5
|
-
#include <mutex>
|
6
|
-
#include <utility>
|
7
|
-
#include <vector>
|
8
|
-
|
9
|
-
#include <jsi/jsi.h>
|
10
|
-
|
11
|
-
#include "JsiHostObject.h"
|
12
|
-
#include "RNSkView.h"
|
13
|
-
|
14
|
-
namespace RNSkia {
|
15
|
-
|
16
|
-
namespace jsi = facebook::jsi;
|
17
|
-
|
18
|
-
class RNSkInfoObject : public RNJsi::JsiHostObject {
|
19
|
-
public:
|
20
|
-
JSI_PROPERTY_GET(width) { return _width; }
|
21
|
-
JSI_PROPERTY_GET(height) { return _height; }
|
22
|
-
JSI_PROPERTY_GET(timestamp) { return _timestamp; }
|
23
|
-
|
24
|
-
JSI_PROPERTY_GET(touches) {
|
25
|
-
auto ops = jsi::Array(runtime, _touchesCache.size());
|
26
|
-
for (size_t i = 0; i < _touchesCache.size(); i++) {
|
27
|
-
auto cur = _touchesCache.at(i);
|
28
|
-
auto touches = jsi::Array(runtime, cur.size());
|
29
|
-
for (size_t n = 0; n < cur.size(); n++) {
|
30
|
-
auto touchObj = jsi::Object(runtime);
|
31
|
-
auto t = cur.at(n);
|
32
|
-
touchObj.setProperty(runtime, "x", t.x);
|
33
|
-
touchObj.setProperty(runtime, "y", t.y);
|
34
|
-
touchObj.setProperty(runtime, "force", t.force);
|
35
|
-
touchObj.setProperty(runtime, "type", static_cast<double>(t.type));
|
36
|
-
touchObj.setProperty(runtime, "timestamp",
|
37
|
-
static_cast<double>(t.timestamp / 1000.0));
|
38
|
-
touchObj.setProperty(runtime, "id", static_cast<double>(t.id));
|
39
|
-
touches.setValueAtIndex(runtime, n, touchObj);
|
40
|
-
}
|
41
|
-
ops.setValueAtIndex(runtime, i, touches);
|
42
|
-
}
|
43
|
-
return ops;
|
44
|
-
}
|
45
|
-
|
46
|
-
JSI_EXPORT_PROPERTY_GETTERS(JSI_EXPORT_PROP_GET(RNSkInfoObject, width),
|
47
|
-
JSI_EXPORT_PROP_GET(RNSkInfoObject, height),
|
48
|
-
JSI_EXPORT_PROP_GET(RNSkInfoObject, timestamp),
|
49
|
-
JSI_EXPORT_PROP_GET(RNSkInfoObject, touches))
|
50
|
-
|
51
|
-
void beginDrawOperation(int width, int height, double timestamp) {
|
52
|
-
_width = width;
|
53
|
-
_height = height;
|
54
|
-
_timestamp = timestamp;
|
55
|
-
|
56
|
-
// Copy touches so that we can continue to add/receive touch points while
|
57
|
-
// in the drawing callback.
|
58
|
-
std::lock_guard<std::mutex> lock(_mutex);
|
59
|
-
_touchesCache.clear();
|
60
|
-
_touchesCache.reserve(_currentTouches.size());
|
61
|
-
for (size_t i = 0; i < _currentTouches.size(); ++i) {
|
62
|
-
_touchesCache.push_back(_currentTouches.at(i));
|
63
|
-
}
|
64
|
-
_currentTouches.clear();
|
65
|
-
}
|
66
|
-
|
67
|
-
void endDrawOperation() { _touchesCache.clear(); }
|
68
|
-
|
69
|
-
void updateTouches(std::vector<RNSkTouchInfo> &touches) {
|
70
|
-
std::lock_guard<std::mutex> lock(_mutex);
|
71
|
-
// Add timestamp
|
72
|
-
auto ms = std::chrono::duration_cast<std::chrono::milliseconds>(
|
73
|
-
std::chrono::system_clock::now().time_since_epoch())
|
74
|
-
.count();
|
75
|
-
|
76
|
-
for (size_t i = 0; i < touches.size(); i++) {
|
77
|
-
touches.at(i).timestamp = ms;
|
78
|
-
}
|
79
|
-
_currentTouches.push_back(std::move(touches));
|
80
|
-
}
|
81
|
-
|
82
|
-
RNSkInfoObject() : JsiHostObject() {}
|
83
|
-
|
84
|
-
private:
|
85
|
-
int _width;
|
86
|
-
int _height;
|
87
|
-
double _timestamp;
|
88
|
-
std::vector<std::vector<RNSkTouchInfo>> _currentTouches;
|
89
|
-
std::vector<std::vector<RNSkTouchInfo>> _touchesCache;
|
90
|
-
std::mutex _mutex;
|
91
|
-
};
|
92
|
-
} // namespace RNSkia
|
@@ -1 +0,0 @@
|
|
1
|
-
export {};
|
@@ -1,22 +0,0 @@
|
|
1
|
-
import type { DependencyList } from "react";
|
2
|
-
import type { TouchHandlers, TouchHandler } from "./types";
|
3
|
-
/**
|
4
|
-
* Provides a callback for handling touch events in the Skia View.
|
5
|
-
* This touch handler only handles single touches.
|
6
|
-
* @param handlers Callbacks for the different touch states
|
7
|
-
* @param deps optional Dependency array to update the handlers
|
8
|
-
* @returns A function that can be used from within the onDraw callback to
|
9
|
-
* update and handle touch events. Call it with the touches property from
|
10
|
-
* the info object.
|
11
|
-
*/
|
12
|
-
export declare const useTouchHandler: (handlers: TouchHandlers, deps?: DependencyList) => TouchHandler;
|
13
|
-
/**
|
14
|
-
* Provides a callback for handling touch events in the Skia View.
|
15
|
-
* This touch handler handles multiple touches.
|
16
|
-
* @param handlers Callbacks for the different touch states
|
17
|
-
* @param deps optional Dependency array to update the handlers
|
18
|
-
* @returns A function that can be used from within the onDraw callback to
|
19
|
-
* update and handle touch events. Call it with the touches property from
|
20
|
-
* the info object.
|
21
|
-
*/
|
22
|
-
export declare const useMultiTouchHandler: (handlers: TouchHandlers, deps?: DependencyList) => TouchHandler;
|