@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.
Files changed (96) hide show
  1. package/android/CMakeLists.txt +38 -6
  2. package/android/build.gradle +1 -0
  3. package/android/cpp/jni/include/JniSkiaBaseView.h +0 -3
  4. package/android/cpp/jni/include/JniSkiaDomView.h +0 -6
  5. package/android/cpp/jni/include/JniSkiaPictureView.h +0 -5
  6. package/android/cpp/rnskia-android/RNSkAndroidView.h +0 -20
  7. package/android/src/main/java/com/shopify/reactnative/skia/SkiaBaseView.java +0 -72
  8. package/cpp/rnskia/RNSkDomView.cpp +0 -79
  9. package/cpp/rnskia/RNSkDomView.h +1 -39
  10. package/cpp/rnskia/RNSkPictureView.h +0 -1
  11. package/cpp/rnskia/RNSkView.h +0 -17
  12. package/ios/RNSkia-iOS/SkiaUIView.mm +0 -51
  13. package/lib/commonjs/mock/index.js +0 -1
  14. package/lib/commonjs/mock/index.js.map +1 -1
  15. package/lib/commonjs/renderer/Canvas.d.ts +1 -2
  16. package/lib/commonjs/renderer/Canvas.js +0 -3
  17. package/lib/commonjs/renderer/Canvas.js.map +1 -1
  18. package/lib/commonjs/skia/web/JsiSkia.js.map +1 -1
  19. package/lib/commonjs/views/SkiaBaseWebView.d.ts +2 -11
  20. package/lib/commonjs/views/SkiaBaseWebView.js +3 -31
  21. package/lib/commonjs/views/SkiaBaseWebView.js.map +1 -1
  22. package/lib/commonjs/views/SkiaDomView.js +0 -12
  23. package/lib/commonjs/views/SkiaDomView.js.map +1 -1
  24. package/lib/commonjs/views/SkiaDomView.web.d.ts +2 -2
  25. package/lib/commonjs/views/SkiaDomView.web.js +1 -6
  26. package/lib/commonjs/views/SkiaDomView.web.js.map +1 -1
  27. package/lib/commonjs/views/SkiaJSDomView.js +0 -12
  28. package/lib/commonjs/views/SkiaJSDomView.js.map +1 -1
  29. package/lib/commonjs/views/index.d.ts +0 -1
  30. package/lib/commonjs/views/index.js +0 -11
  31. package/lib/commonjs/views/index.js.map +1 -1
  32. package/lib/commonjs/views/types.d.ts +0 -26
  33. package/lib/commonjs/views/types.js +0 -8
  34. package/lib/commonjs/views/types.js.map +1 -1
  35. package/lib/module/mock/index.js +0 -1
  36. package/lib/module/mock/index.js.map +1 -1
  37. package/lib/module/renderer/Canvas.d.ts +1 -2
  38. package/lib/module/renderer/Canvas.js +0 -3
  39. package/lib/module/renderer/Canvas.js.map +1 -1
  40. package/lib/module/skia/web/JsiSkia.js.map +1 -1
  41. package/lib/module/views/SkiaBaseWebView.d.ts +2 -11
  42. package/lib/module/views/SkiaBaseWebView.js +3 -31
  43. package/lib/module/views/SkiaBaseWebView.js.map +1 -1
  44. package/lib/module/views/SkiaDomView.js +0 -12
  45. package/lib/module/views/SkiaDomView.js.map +1 -1
  46. package/lib/module/views/SkiaDomView.web.d.ts +2 -2
  47. package/lib/module/views/SkiaDomView.web.js +1 -6
  48. package/lib/module/views/SkiaDomView.web.js.map +1 -1
  49. package/lib/module/views/SkiaJSDomView.js +0 -12
  50. package/lib/module/views/SkiaJSDomView.js.map +1 -1
  51. package/lib/module/views/index.d.ts +0 -1
  52. package/lib/module/views/index.js +0 -1
  53. package/lib/module/views/index.js.map +1 -1
  54. package/lib/module/views/types.d.ts +0 -26
  55. package/lib/module/views/types.js +1 -7
  56. package/lib/module/views/types.js.map +1 -1
  57. package/lib/typescript/lib/commonjs/mock/index.d.ts +0 -1
  58. package/lib/typescript/lib/commonjs/views/SkiaBaseWebView.d.ts +0 -3
  59. package/lib/typescript/lib/commonjs/views/SkiaDomView.web.d.ts +1 -1
  60. package/lib/typescript/lib/commonjs/views/types.d.ts +0 -1
  61. package/lib/typescript/lib/module/mock/index.d.ts +0 -1
  62. package/lib/typescript/lib/module/views/SkiaBaseWebView.d.ts +0 -3
  63. package/lib/typescript/lib/module/views/SkiaDomView.web.d.ts +1 -1
  64. package/lib/typescript/lib/module/views/index.d.ts +0 -1
  65. package/lib/typescript/lib/module/views/types.d.ts +1 -1
  66. package/lib/typescript/src/renderer/Canvas.d.ts +1 -2
  67. package/lib/typescript/src/views/SkiaBaseWebView.d.ts +2 -11
  68. package/lib/typescript/src/views/SkiaDomView.web.d.ts +2 -2
  69. package/lib/typescript/src/views/index.d.ts +0 -1
  70. package/lib/typescript/src/views/types.d.ts +0 -26
  71. package/package.json +1 -1
  72. package/src/mock/index.ts +0 -1
  73. package/src/renderer/Canvas.tsx +1 -5
  74. package/src/renderer/__tests__/setup.tsx +0 -2
  75. package/src/skia/web/JsiSkia.ts +1 -1
  76. package/src/views/SkiaBaseWebView.tsx +5 -42
  77. package/src/views/SkiaDomView.tsx +2 -14
  78. package/src/views/SkiaDomView.web.tsx +2 -9
  79. package/src/views/SkiaJSDomView.tsx +2 -14
  80. package/src/views/index.ts +0 -1
  81. package/src/views/types.ts +0 -32
  82. package/cpp/rnskia/RNSkInfoParameter.h +0 -92
  83. package/lib/commonjs/renderer/__tests__/TouchHandler.spec.d.ts +0 -1
  84. package/lib/commonjs/views/useTouchHandler.d.ts +0 -22
  85. package/lib/commonjs/views/useTouchHandler.js +0 -83
  86. package/lib/commonjs/views/useTouchHandler.js.map +0 -1
  87. package/lib/module/renderer/__tests__/TouchHandler.spec.d.ts +0 -1
  88. package/lib/module/views/useTouchHandler.d.ts +0 -22
  89. package/lib/module/views/useTouchHandler.js +0 -75
  90. package/lib/module/views/useTouchHandler.js.map +0 -1
  91. package/lib/typescript/lib/commonjs/views/useTouchHandler.d.ts +0 -12
  92. package/lib/typescript/lib/module/views/useTouchHandler.d.ts +0 -2
  93. package/lib/typescript/src/renderer/__tests__/TouchHandler.spec.d.ts +0 -1
  94. package/lib/typescript/src/views/useTouchHandler.d.ts +0 -22
  95. package/src/renderer/__tests__/TouchHandler.spec.tsx +0 -113
  96. package/src/views/useTouchHandler.ts +0 -107
@@ -1,5 +1,5 @@
1
1
  export const __esModule: boolean;
2
2
  export class SkiaDomView extends _SkiaBaseWebView.SkiaBaseWebView {
3
- renderInCanvas(canvas: any, touches: any): void;
3
+ renderInCanvas(canvas: any): void;
4
4
  }
5
5
  import _SkiaBaseWebView = require("./SkiaBaseWebView");
@@ -1,2 +1 @@
1
1
  export const __esModule: boolean;
2
- export const TouchType: {};
@@ -6,7 +6,6 @@ export function Mock(CanvasKit: any): {
6
6
  useComputedValue: () => {
7
7
  current: number;
8
8
  };
9
- useTouchHandler: () => undefined;
10
9
  useTiming: () => {
11
10
  current: number;
12
11
  };
@@ -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,4 +1,4 @@
1
1
  export class SkiaDomView extends SkiaBaseWebView {
2
- renderInCanvas(canvas: any, touches: any): void;
2
+ renderInCanvas(canvas: any): void;
3
3
  }
4
4
  import { SkiaBaseWebView } from "./SkiaBaseWebView";
@@ -1,4 +1,3 @@
1
1
  export * from "./SkiaPictureView";
2
2
  export * from "./SkiaDomView";
3
3
  export * from "./types";
4
- export * from "./useTouchHandler";
@@ -1 +1 @@
1
- export let TouchType: {};
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 { TouchHandler, SkiaBaseViewProps } from "../views";
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, TouchInfo } from "./types";
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, touches: TouchInfo[]): void;
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, TouchInfo } from "./types";
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, touches: TouchInfo[]): void;
6
+ protected renderInCanvas(canvas: SkCanvas): void;
7
7
  }
@@ -1,4 +1,3 @@
1
1
  export * from "./SkiaPictureView";
2
2
  export * from "./SkiaDomView";
3
3
  export * from "./types";
4
- export * from "./useTouchHandler";
@@ -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.4.2",
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
@@ -26,7 +26,6 @@ export const Mock = (CanvasKit: CanvasKit) => {
26
26
  // Skia Animations
27
27
  useValue: NoopValue,
28
28
  useComputedValue: NoopValue,
29
- useTouchHandler: Noop,
30
29
  useTiming: NoopValue,
31
30
  useLoop: NoopValue,
32
31
  useSpring: NoopValue,
@@ -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 { TouchHandler, SkiaBaseViewProps } from "../views";
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
 
@@ -131,5 +131,5 @@ export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
131
131
  Video: createVideo.bind(null, CanvasKit),
132
132
  Context: (_surface: bigint, _width: number, _height: number) => {
133
133
  throw new Error("Not implemented on React Native Web");
134
- }
134
+ },
135
135
  });
@@ -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, TouchInfo } from "./types";
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, touches);
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, onTouch, onSize } = props;
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, onTouch, onSize } = this.props;
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, TouchInfo } from "./types";
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, touches: TouchInfo[]): void {
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, onTouch, onSize } = props;
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, onTouch, onSize } = this.props;
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);
@@ -1,4 +1,3 @@
1
1
  export * from "./SkiaPictureView";
2
2
  export * from "./SkiaDomView";
3
3
  export * from "./types";
4
- export * from "./useTouchHandler";
@@ -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,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;