@shopify/react-native-skia 1.4.2 → 1.5.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/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;
|