@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.
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;