@shopify/react-native-skia 0.1.139 → 0.1.142

Sign up to get free protection for your applications and to get access to all the features.
Files changed (133) hide show
  1. package/android/CMakeLists.txt +5 -1
  2. package/android/build.gradle +3 -1
  3. package/android/cpp/rnskia-android/RNSkDrawViewImpl.cpp +2 -2
  4. package/android/cpp/rnskia-android/RNSkDrawViewImpl.h +1 -1
  5. package/android/cpp/rnskia-android/SkiaOpenGLRenderer.cpp +15 -16
  6. package/android/cpp/rnskia-android/SkiaOpenGLRenderer.h +2 -2
  7. package/android/src/main/java/com/shopify/reactnative/skia/SkiaDrawView.java +69 -27
  8. package/cpp/rnskia/RNSkDrawView.cpp +66 -66
  9. package/cpp/rnskia/RNSkDrawView.h +22 -6
  10. package/cpp/rnskia/RNSkJsiViewApi.h +2 -2
  11. package/cpp/rnskia/values/RNSkComputedValue.h +10 -7
  12. package/cpp/rnskia/values/RNSkReadonlyValue.h +21 -2
  13. package/cpp/rnskia/values/RNSkValue.h +1 -0
  14. package/ios/RNSkia-iOS/RNSkDrawViewImpl.h +1 -1
  15. package/ios/RNSkia-iOS/RNSkDrawViewImpl.mm +2 -2
  16. package/ios/RNSkia-iOS/SkiaDrawView.mm +4 -0
  17. package/lib/commonjs/mock/index.js +3 -1
  18. package/lib/commonjs/mock/index.js.map +1 -1
  19. package/lib/commonjs/renderer/DependencyManager.js +1 -1
  20. package/lib/commonjs/renderer/DependencyManager.js.map +1 -1
  21. package/lib/commonjs/renderer/processors/Animations/Animations.js +18 -5
  22. package/lib/commonjs/renderer/processors/Animations/Animations.js.map +1 -1
  23. package/lib/commonjs/skia/core/Data.js +10 -22
  24. package/lib/commonjs/skia/core/Data.js.map +1 -1
  25. package/lib/commonjs/skia/core/Font.js +2 -3
  26. package/lib/commonjs/skia/core/Font.js.map +1 -1
  27. package/lib/commonjs/skia/core/Image.js.map +1 -1
  28. package/lib/commonjs/skia/core/SVG.js.map +1 -1
  29. package/lib/commonjs/skia/core/Typeface.js.map +1 -1
  30. package/lib/commonjs/skia/types/Data/Data.js +5 -0
  31. package/lib/commonjs/skia/types/Data/Data.js.map +1 -1
  32. package/lib/commonjs/skia/types/Image/ImageFactory.js +0 -2
  33. package/lib/commonjs/skia/types/Image/ImageFactory.js.map +1 -1
  34. package/lib/commonjs/skia/types/Path/Path.js.map +1 -1
  35. package/lib/commonjs/skia/web/JsiSkCanvas.js +9 -7
  36. package/lib/commonjs/skia/web/JsiSkCanvas.js.map +1 -1
  37. package/lib/commonjs/skia/web/JsiSkPath.js +7 -5
  38. package/lib/commonjs/skia/web/JsiSkPath.js.map +1 -1
  39. package/lib/commonjs/skia/web/JsiSkRRect.js +8 -0
  40. package/lib/commonjs/skia/web/JsiSkRRect.js.map +1 -1
  41. package/lib/commonjs/skia/web/JsiSkRect.js +2 -2
  42. package/lib/commonjs/skia/web/JsiSkRect.js.map +1 -1
  43. package/lib/commonjs/values/hooks/useComputedValue.js +6 -2
  44. package/lib/commonjs/values/hooks/useComputedValue.js.map +1 -1
  45. package/lib/commonjs/values/index.js +13 -0
  46. package/lib/commonjs/values/index.js.map +1 -1
  47. package/lib/commonjs/values/selector.js +24 -0
  48. package/lib/commonjs/values/selector.js.map +1 -0
  49. package/lib/commonjs/values/web/RNSkComputedValue.js +8 -0
  50. package/lib/commonjs/values/web/RNSkComputedValue.js.map +1 -1
  51. package/lib/commonjs/values/web/RNSkReadonlyValue.js +4 -0
  52. package/lib/commonjs/values/web/RNSkReadonlyValue.js.map +1 -1
  53. package/lib/commonjs/views/useTouchHandler.js +13 -15
  54. package/lib/commonjs/views/useTouchHandler.js.map +1 -1
  55. package/lib/module/mock/index.js +2 -1
  56. package/lib/module/mock/index.js.map +1 -1
  57. package/lib/module/renderer/DependencyManager.js +2 -2
  58. package/lib/module/renderer/DependencyManager.js.map +1 -1
  59. package/lib/module/renderer/processors/Animations/Animations.js +13 -4
  60. package/lib/module/renderer/processors/Animations/Animations.js.map +1 -1
  61. package/lib/module/skia/core/Data.js +10 -20
  62. package/lib/module/skia/core/Data.js.map +1 -1
  63. package/lib/module/skia/core/Font.js +2 -3
  64. package/lib/module/skia/core/Font.js.map +1 -1
  65. package/lib/module/skia/core/Image.js.map +1 -1
  66. package/lib/module/skia/core/SVG.js.map +1 -1
  67. package/lib/module/skia/core/Typeface.js.map +1 -1
  68. package/lib/module/skia/types/Data/Data.js +1 -1
  69. package/lib/module/skia/types/Data/Data.js.map +1 -1
  70. package/lib/module/skia/types/Image/ImageFactory.js +0 -1
  71. package/lib/module/skia/types/Image/ImageFactory.js.map +1 -1
  72. package/lib/module/skia/types/Path/Path.js.map +1 -1
  73. package/lib/module/skia/web/JsiSkCanvas.js +8 -7
  74. package/lib/module/skia/web/JsiSkCanvas.js.map +1 -1
  75. package/lib/module/skia/web/JsiSkPath.js +6 -5
  76. package/lib/module/skia/web/JsiSkPath.js.map +1 -1
  77. package/lib/module/skia/web/JsiSkRRect.js +8 -0
  78. package/lib/module/skia/web/JsiSkRRect.js.map +1 -1
  79. package/lib/module/skia/web/JsiSkRect.js +2 -2
  80. package/lib/module/skia/web/JsiSkRect.js.map +1 -1
  81. package/lib/module/values/hooks/useComputedValue.js +7 -3
  82. package/lib/module/values/hooks/useComputedValue.js.map +1 -1
  83. package/lib/module/values/index.js +1 -0
  84. package/lib/module/values/index.js.map +1 -1
  85. package/lib/module/values/selector.js +15 -0
  86. package/lib/module/values/selector.js.map +1 -0
  87. package/lib/module/values/web/RNSkComputedValue.js +8 -0
  88. package/lib/module/values/web/RNSkComputedValue.js.map +1 -1
  89. package/lib/module/values/web/RNSkReadonlyValue.js +4 -0
  90. package/lib/module/values/web/RNSkReadonlyValue.js.map +1 -1
  91. package/lib/module/views/useTouchHandler.js +12 -14
  92. package/lib/module/views/useTouchHandler.js.map +1 -1
  93. package/lib/typescript/src/renderer/processors/Animations/Animations.d.ts +7 -2
  94. package/lib/typescript/src/skia/core/Data.d.ts +3 -5
  95. package/lib/typescript/src/skia/core/Font.d.ts +2 -2
  96. package/lib/typescript/src/skia/core/Image.d.ts +2 -2
  97. package/lib/typescript/src/skia/core/SVG.d.ts +2 -2
  98. package/lib/typescript/src/skia/core/Typeface.d.ts +2 -2
  99. package/lib/typescript/src/skia/types/Data/Data.d.ts +10 -3
  100. package/lib/typescript/src/skia/web/JsiSkRRect.d.ts +1 -0
  101. package/lib/typescript/src/skia/web/JsiSkRect.d.ts +1 -1
  102. package/lib/typescript/src/values/index.d.ts +1 -0
  103. package/lib/typescript/src/values/selector.d.ts +14 -0
  104. package/lib/typescript/src/values/types.d.ts +4 -0
  105. package/lib/typescript/src/values/web/RNSkComputedValue.d.ts +1 -0
  106. package/lib/typescript/src/values/web/RNSkReadonlyValue.d.ts +1 -0
  107. package/package.json +13 -8
  108. package/src/mock/index.ts +2 -1
  109. package/src/renderer/DependencyManager.tsx +5 -2
  110. package/src/renderer/processors/Animations/Animations.ts +27 -5
  111. package/src/skia/core/Data.ts +20 -51
  112. package/src/skia/core/Font.ts +4 -5
  113. package/src/skia/core/Image.ts +2 -2
  114. package/src/skia/core/SVG.ts +2 -2
  115. package/src/skia/core/Typeface.ts +2 -2
  116. package/src/skia/types/Data/Data.ts +11 -1
  117. package/src/skia/types/Image/ImageFactory.ts +0 -1
  118. package/src/skia/types/Path/Path.ts +0 -1
  119. package/src/skia/web/JsiSkCanvas.ts +22 -10
  120. package/src/skia/web/JsiSkPath.ts +14 -5
  121. package/src/skia/web/JsiSkRRect.ts +11 -0
  122. package/src/skia/web/JsiSkRect.ts +2 -5
  123. package/src/values/hooks/useComputedValue.ts +6 -3
  124. package/src/values/index.ts +1 -0
  125. package/src/values/selector.ts +24 -0
  126. package/src/values/types.ts +4 -0
  127. package/src/values/web/RNSkComputedValue.ts +6 -0
  128. package/src/values/web/RNSkReadonlyValue.ts +4 -0
  129. package/src/views/useTouchHandler.ts +15 -19
  130. package/android/README.md +0 -14
  131. package/cpp/skia/include/third_party/skcms/LICENSE +0 -29
  132. package/cpp/skia/include/third_party/vulkan/LICENSE +0 -29
  133. package/cpp/skia/readme.txt +0 -1
@@ -1,14 +1,14 @@
1
- import type { DependencyList } from "react";
2
- import { useRef, useEffect, useState } from "react";
3
- import { Image, Platform } from "react-native";
1
+ import { useEffect, useState } from "react";
2
+ import { Image } from "react-native";
4
3
 
5
4
  import { Skia } from "../Skia";
6
- import type { SkData, DataSource } from "../types";
5
+ import { isRNModule } from "../types";
6
+ import type { SkData, DataModule, DataSourceParam } from "../types";
7
7
 
8
- const resolveAsset = (source: ReturnType<typeof require>) => {
9
- return Platform.OS === "web"
10
- ? source.default
11
- : Image.resolveAssetSource(source).uri;
8
+ const resolveAsset = (source: DataModule) => {
9
+ return isRNModule(source)
10
+ ? Image.resolveAssetSource(source).uri
11
+ : source.default;
12
12
  };
13
13
 
14
14
  const factoryWrapper = <T>(
@@ -25,19 +25,12 @@ const factoryWrapper = <T>(
25
25
  }
26
26
  };
27
27
 
28
- const loadDataCollection = <T>(
29
- sources: DataSource[],
30
- factory: (data: SkData) => T,
31
- onError?: (err: Error) => void
32
- ): Promise<(T | null)[]> =>
33
- Promise.all(sources.map((source) => loadData(source, factory, onError)));
34
-
35
28
  const loadData = <T>(
36
- source: DataSource,
29
+ source: DataSourceParam,
37
30
  factory: (data: SkData) => T,
38
31
  onError?: (err: Error) => void
39
32
  ): Promise<T | null> => {
40
- if (source === null) {
33
+ if (source === null || source === undefined) {
41
34
  return new Promise((resolve) => resolve(null));
42
35
  } else if (source instanceof Uint8Array) {
43
36
  return new Promise((resolve) =>
@@ -50,51 +43,27 @@ const loadData = <T>(
50
43
  );
51
44
  }
52
45
  };
53
-
54
- type Source = DataSource | null | undefined;
55
-
56
46
  const useLoading = <T>(
57
- source: Source,
58
- loader: () => Promise<T | null>,
59
- deps: DependencyList = []
47
+ source: DataSourceParam,
48
+ loader: () => Promise<T | null>
60
49
  ) => {
61
50
  const [data, setData] = useState<T | null>(null);
62
- const prevSourceRef = useRef<Source>();
63
51
  useEffect(() => {
64
- if (prevSourceRef.current !== source) {
65
- prevSourceRef.current = source;
66
- loader().then(setData);
67
- } else {
68
- setData(null);
69
- }
52
+ loader().then(setData);
70
53
  // eslint-disable-next-line react-hooks/exhaustive-deps
71
- }, deps);
54
+ }, [source]);
72
55
  return data;
73
56
  };
74
57
 
75
- export const useDataCollection = <T>(
76
- sources: DataSource[],
77
- factory: (data: SkData) => T,
78
- onError?: (err: Error) => void,
79
- deps?: DependencyList
80
- ) =>
81
- useLoading(
82
- sources,
83
- () => loadDataCollection(sources, factory, onError),
84
- deps
85
- );
86
-
87
58
  export const useRawData = <T>(
88
- source: DataSource | null | undefined,
59
+ source: DataSourceParam,
89
60
  factory: (data: SkData) => T,
90
- onError?: (err: Error) => void,
91
- deps?: DependencyList
92
- ) => useLoading(source, () => loadData(source, factory, onError), deps);
61
+ onError?: (err: Error) => void
62
+ ) => useLoading(source, () => loadData(source, factory, onError));
93
63
 
94
64
  const identity = (data: SkData) => data;
95
65
 
96
66
  export const useData = (
97
- source: DataSource | null | undefined,
98
- onError?: (err: Error) => void,
99
- deps?: DependencyList
100
- ) => useRawData(source, identity, onError, deps);
67
+ source: DataSourceParam,
68
+ onError?: (err: Error) => void
69
+ ) => useRawData(source, identity, onError);
@@ -2,7 +2,7 @@
2
2
  import { useMemo } from "react";
3
3
 
4
4
  import { Skia } from "../Skia";
5
- import type { DataSource, SkFont } from "../types";
5
+ import type { DataSourceParam } from "../types";
6
6
 
7
7
  import { useTypeface } from "./Typeface";
8
8
 
@@ -10,10 +10,10 @@ import { useTypeface } from "./Typeface";
10
10
  * Returns a Skia Font object
11
11
  * */
12
12
  export const useFont = (
13
- font: DataSource | null | undefined,
13
+ font: DataSourceParam,
14
14
  size?: number,
15
15
  onError?: (err: Error) => void
16
- ): SkFont | null => {
16
+ ) => {
17
17
  const typeface = useTypeface(font, onError);
18
18
  return useMemo(() => {
19
19
  if (typeface && size) {
@@ -23,6 +23,5 @@ export const useFont = (
23
23
  } else {
24
24
  return null;
25
25
  }
26
- // eslint-disable-next-line react-hooks/exhaustive-deps
27
- }, [typeface]);
26
+ }, [size, typeface]);
28
27
  };
@@ -1,5 +1,5 @@
1
1
  import { Skia } from "../Skia";
2
- import type { DataSource } from "../types";
2
+ import type { DataSourceParam } from "../types";
3
3
 
4
4
  import { useRawData } from "./Data";
5
5
 
@@ -9,6 +9,6 @@ const imgFactory = Skia.Image.MakeImageFromEncoded.bind(Skia.Image);
9
9
  * Returns a Skia Image object
10
10
  * */
11
11
  export const useImage = (
12
- source: DataSource | null | undefined,
12
+ source: DataSourceParam,
13
13
  onError?: (err: Error) => void
14
14
  ) => useRawData(source, imgFactory, onError);
@@ -1,11 +1,11 @@
1
1
  import { Skia } from "../Skia";
2
- import type { DataSource } from "../types";
2
+ import type { DataSourceParam } from "../types";
3
3
 
4
4
  import { useRawData } from "./Data";
5
5
 
6
6
  const svgFactory = Skia.SVG.MakeFromData.bind(Skia.SVG);
7
7
 
8
8
  export const useSVG = (
9
- source: DataSource | null | undefined,
9
+ source: DataSourceParam,
10
10
  onError?: (err: Error) => void
11
11
  ) => useRawData(source, svgFactory, onError);
@@ -1,5 +1,5 @@
1
1
  import { Skia } from "../Skia";
2
- import type { DataSource } from "../types";
2
+ import type { DataSourceParam } from "../types";
3
3
 
4
4
  import { useRawData } from "./Data";
5
5
 
@@ -9,6 +9,6 @@ const tfFactory = Skia.Typeface.MakeFreeTypeFaceFromData.bind(Skia.Typeface);
9
9
  * Returns a Skia Typeface object
10
10
  * */
11
11
  export const useTypeface = (
12
- source: DataSource | null | undefined,
12
+ source: DataSourceParam,
13
13
  onError?: (err: Error) => void
14
14
  ) => useRawData(source, tfFactory, onError);
@@ -2,4 +2,14 @@ import type { SkJSIInstance } from "../JsiInstance";
2
2
 
3
3
  export type SkData = SkJSIInstance<"Data">;
4
4
 
5
- export type DataSource = ReturnType<typeof require> | string | Uint8Array;
5
+ type RNModule = number;
6
+ type ESModule = {
7
+ __esModule: true;
8
+ default: string;
9
+ };
10
+ export type DataModule = RNModule | ESModule;
11
+ export type DataSource = DataModule | string | Uint8Array;
12
+ export type DataSourceParam = DataSource | null | undefined;
13
+
14
+ export const isRNModule = (mod: DataModule): mod is RNModule =>
15
+ typeof mod === "number";
@@ -1,4 +1,3 @@
1
- /* eslint-disable camelcase */
2
1
  import type { SkData } from "../Data";
3
2
 
4
3
  import type { SkImage } from "./Image";
@@ -11,7 +11,6 @@ import type { SkJSIInstance } from "../JsiInstance";
11
11
  export interface StrokeOpts {
12
12
  /** The width of the stroked lines. */
13
13
  width?: number;
14
- // eslint-disable-next-line camelcase
15
14
  miter_limit?: number;
16
15
  /**
17
16
  * if > 1, increase precision, else if (0 < resScale < 1) reduce precision to
@@ -32,6 +32,7 @@ import {
32
32
  toOptionalValue,
33
33
  } from "./Host";
34
34
  import { JsiSkRect } from "./JsiSkRect";
35
+ import { JsiSkRRect } from "./JsiSkRRect";
35
36
 
36
37
  export class JsiSkCanvas
37
38
  extends HostObject<Canvas, "Canvas">
@@ -43,7 +44,7 @@ export class JsiSkCanvas
43
44
 
44
45
  drawRect(rect: SkRect, paint: SkPaint) {
45
46
  this.ref.drawRect(
46
- JsiSkRect.fromValue(this.CanvasKit, rect).ref,
47
+ JsiSkRect.fromValue(this.CanvasKit, rect),
47
48
  toValue<Paint>(paint)
48
49
  );
49
50
  }
@@ -61,8 +62,8 @@ export class JsiSkCanvas
61
62
  ) {
62
63
  this.ref.drawImageRect(
63
64
  toValue<Image>(img),
64
- JsiSkRect.fromValue(this.CanvasKit, src).ref,
65
- JsiSkRect.fromValue(this.CanvasKit, dest).ref,
65
+ JsiSkRect.fromValue(this.CanvasKit, src),
66
+ JsiSkRect.fromValue(this.CanvasKit, dest),
66
67
  toValue<Paint>(paint),
67
68
  fastSample
68
69
  );
@@ -130,8 +131,8 @@ export class JsiSkCanvas
130
131
  ) {
131
132
  this.ref.drawImageRectCubic(
132
133
  toValue<Image>(img),
133
- JsiSkRect.fromValue(this.CanvasKit, src).ref,
134
- JsiSkRect.fromValue(this.CanvasKit, dest).ref,
134
+ JsiSkRect.fromValue(this.CanvasKit, src),
135
+ JsiSkRect.fromValue(this.CanvasKit, dest),
135
136
  B,
136
137
  C,
137
138
  toOptionalValue(paint)
@@ -148,8 +149,8 @@ export class JsiSkCanvas
148
149
  ) {
149
150
  this.ref.drawImageRectOptions(
150
151
  toValue<Image>(img),
151
- JsiSkRect.fromValue(this.CanvasKit, src).ref,
152
- JsiSkRect.fromValue(this.CanvasKit, dest).ref,
152
+ JsiSkRect.fromValue(this.CanvasKit, src),
153
+ JsiSkRect.fromValue(this.CanvasKit, dest),
153
154
  ckEnum(fm),
154
155
  ckEnum(mm),
155
156
  toOptionalValue(paint)
@@ -217,7 +218,10 @@ export class JsiSkCanvas
217
218
  }
218
219
 
219
220
  drawRRect(rrect: SkRRect, paint: SkPaint) {
220
- this.ref.drawRRect(toValue(rrect), toValue(paint));
221
+ this.ref.drawRRect(
222
+ JsiSkRRect.fromValue(this.CanvasKit, rrect),
223
+ toValue(paint)
224
+ );
221
225
  }
222
226
 
223
227
  drawDRRect(outer: SkRRect, inner: SkRRect, paint: SkPaint) {
@@ -313,11 +317,19 @@ export class JsiSkCanvas
313
317
  }
314
318
 
315
319
  clipRect(rect: SkRect, op: ClipOp, doAntiAlias: boolean) {
316
- this.ref.clipRect(toValue(rect), ckEnum(op), doAntiAlias);
320
+ this.ref.clipRect(
321
+ JsiSkRect.fromValue(this.CanvasKit, rect),
322
+ ckEnum(op),
323
+ doAntiAlias
324
+ );
317
325
  }
318
326
 
319
327
  clipRRect(rrect: SkRRect, op: ClipOp, doAntiAlias: boolean) {
320
- this.ref.clipRRect(toValue(rrect), ckEnum(op), doAntiAlias);
328
+ this.ref.clipRRect(
329
+ JsiSkRRect.fromValue(this.CanvasKit, rrect),
330
+ ckEnum(op),
331
+ doAntiAlias
332
+ );
321
333
  }
322
334
 
323
335
  concat(m: SkMatrix) {
@@ -16,6 +16,7 @@ import type {
16
16
  import { ckEnum, HostObject, optEnum, toValue } from "./Host";
17
17
  import { JsiSkPoint } from "./JsiSkPoint";
18
18
  import { JsiSkRect } from "./JsiSkRect";
19
+ import { JsiSkRRect } from "./JsiSkRRect";
19
20
 
20
21
  const CommandCount = {
21
22
  [PathVerb.Move]: 3,
@@ -50,12 +51,20 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
50
51
  startAngleInDegrees: number,
51
52
  sweepAngleInDegrees: number
52
53
  ) {
53
- this.ref.addArc(toValue(oval), startAngleInDegrees, sweepAngleInDegrees);
54
+ this.ref.addArc(
55
+ JsiSkRect.fromValue(this.CanvasKit, oval),
56
+ startAngleInDegrees,
57
+ sweepAngleInDegrees
58
+ );
54
59
  return this;
55
60
  }
56
61
 
57
62
  addOval(oval: SkRect, isCCW?: boolean, startIndex?: number) {
58
- this.ref.addOval(toValue(oval), isCCW, startIndex);
63
+ this.ref.addOval(
64
+ JsiSkRect.fromValue(this.CanvasKit, oval),
65
+ isCCW,
66
+ startIndex
67
+ );
59
68
  return this;
60
69
  }
61
70
 
@@ -183,7 +192,7 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
183
192
  forceMoveTo: boolean
184
193
  ) {
185
194
  this.ref.arcToOval(
186
- toValue(oval),
195
+ JsiSkRect.fromValue(this.CanvasKit, oval),
187
196
  startAngleInDegrees,
188
197
  sweepAngleInDegrees,
189
198
  forceMoveTo
@@ -263,11 +272,11 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
263
272
  }
264
273
 
265
274
  addRect(rect: SkRect, isCCW?: boolean) {
266
- this.ref.addRect(toValue(rect), isCCW);
275
+ this.ref.addRect(JsiSkRect.fromValue(this.CanvasKit, rect), isCCW);
267
276
  }
268
277
 
269
278
  addRRect(rrect: SkRRect, isCCW?: boolean) {
270
- this.ref.addRRect(toValue(rrect), isCCW);
279
+ this.ref.addRRect(JsiSkRRect.fromValue(this.CanvasKit, rrect), isCCW);
271
280
  return this;
272
281
  }
273
282
 
@@ -6,6 +6,17 @@ import { HostObject } from "./Host";
6
6
  import { JsiSkRect } from "./JsiSkRect";
7
7
 
8
8
  export class JsiSkRRect extends HostObject<RRect, "RRect"> implements SkRRect {
9
+ static fromValue(CanvasKit: CanvasKit, rect: SkRRect) {
10
+ if (rect instanceof JsiSkRect) {
11
+ return rect.ref;
12
+ }
13
+ return CanvasKit.RRectXY(
14
+ JsiSkRect.fromValue(CanvasKit, rect.rect),
15
+ rect.rx,
16
+ rect.ry
17
+ );
18
+ }
19
+
9
20
  constructor(CanvasKit: CanvasKit, ref: RRect) {
10
21
  super(CanvasKit, ref, "RRect");
11
22
  }
@@ -7,12 +7,9 @@ import { HostObject } from "./Host";
7
7
  export class JsiSkRect extends HostObject<Rect, "Rect"> implements SkRect {
8
8
  static fromValue(CanvasKit: CanvasKit, rect: SkRect) {
9
9
  if (rect instanceof JsiSkRect) {
10
- return rect;
10
+ return rect.ref;
11
11
  }
12
- return new JsiSkRect(
13
- CanvasKit,
14
- CanvasKit.XYWHRect(rect.x, rect.y, rect.width, rect.height)
15
- );
12
+ return CanvasKit.XYWHRect(rect.x, rect.y, rect.width, rect.height);
16
13
  }
17
14
 
18
15
  constructor(CanvasKit: CanvasKit, ref: Rect) {
@@ -1,4 +1,4 @@
1
- import { useMemo } from "react";
1
+ import { useEffect, useMemo } from "react";
2
2
 
3
3
  import { ValueApi } from "../api";
4
4
  import { isValue } from "../../renderer/processors/Animations";
@@ -10,9 +10,12 @@ import { isValue } from "../../renderer/processors/Animations";
10
10
  * @param values Dependant values
11
11
  * @returns A readonly value
12
12
  */
13
- export const useComputedValue = <R>(cb: () => R, values: unknown[]) =>
14
- useMemo(
13
+ export const useComputedValue = <R>(cb: () => R, values: unknown[]) => {
14
+ const value = useMemo(
15
15
  () => ValueApi.createComputedValue<R>(cb, values.filter(isValue)),
16
16
  // eslint-disable-next-line react-hooks/exhaustive-deps
17
17
  values
18
18
  );
19
+ useEffect(() => () => value.__invalidate(), [value]);
20
+ return value;
21
+ };
@@ -1,3 +1,4 @@
1
1
  export * from "./types";
2
2
  export * from "./hooks";
3
3
  export * from "./api";
4
+ export * from "./selector";
@@ -0,0 +1,24 @@
1
+ import type { SkiaValue } from "./types";
2
+
3
+ export type SkiaSelector<TReturn, TInput = unknown> = {
4
+ value: SkiaValue<TInput>;
5
+ selector: (v: TInput) => TReturn;
6
+ };
7
+
8
+ /**
9
+ * Wraps a Skia Value with a selector function. The selector function can access the
10
+ * inner values of the Skia Value so that we can dynamically ready array values and
11
+ * object values when doing animations in Skia.
12
+ * @param value Dependant value
13
+ * @param selector Selector function to calculate new value from the Skia Value's value
14
+ * @returns A descriptor that will be used by the reconciler to calculate the value
15
+ */
16
+ export const Selector = <TInput, TReturn>(
17
+ value: SkiaValue<TInput>,
18
+ selector: (v: TInput) => TReturn
19
+ ): SkiaSelector<TReturn, TInput> => {
20
+ return {
21
+ selector,
22
+ value,
23
+ };
24
+ };
@@ -8,6 +8,10 @@ export interface SkiaValue<T = number> {
8
8
  * Returns unsubscribe method.
9
9
  */
10
10
  addListener: (cb: (value: T) => void) => () => void;
11
+ /**
12
+ * Invalidates the value. Has different meaning depending on the type of the value.
13
+ */
14
+ __invalidate: () => void;
11
15
  /**
12
16
  * Field to make typechecking easier
13
17
  */
@@ -34,5 +34,11 @@ export class RNSkComputedValue<T> extends RNSkReadonlyValue<T> {
34
34
 
35
35
  public unsubscribe() {
36
36
  this._unsubscribers.forEach((unsubscribe) => unsubscribe());
37
+ this._unsubscribers = [];
38
+ }
39
+
40
+ public __invalidate(): void {
41
+ this._unsubscribers.forEach((unsubscribe) => unsubscribe());
42
+ this._unsubscribers = [];
37
43
  }
38
44
  }
@@ -29,4 +29,8 @@ export class RNSkReadonlyValue<T> implements SkiaValue<T> {
29
29
  this._listeners.splice(this._listeners.indexOf(cb), 1);
30
30
  };
31
31
  }
32
+
33
+ public __invalidate(): void {
34
+ this._listeners = [];
35
+ }
32
36
  }
@@ -2,6 +2,8 @@ import type { DependencyList } from "react";
2
2
  import { useCallback, useRef } from "react";
3
3
  import { PixelRatio } from "react-native";
4
4
 
5
+ import type { Vector } from "../skia/types";
6
+
5
7
  import type {
6
8
  ExtendedTouchInfo,
7
9
  TouchHandlers,
@@ -15,10 +17,8 @@ const useInternalTouchHandler = (
15
17
  deps: DependencyList = [],
16
18
  multiTouch = false
17
19
  ): TouchHandler => {
18
- const prevTouchInfoRef = useRef<{ [key: number]: TouchInfo }>({});
19
- const prevVelocityRef = useRef<{ [key: number]: { x: number; y: number } }>(
20
- {}
21
- );
20
+ const prevTouchInfoRef = useRef<{ [key: number]: TouchInfo | undefined }>({});
21
+ const prevVelocityRef = useRef<{ [key: number]: Vector | undefined }>({});
22
22
 
23
23
  return useCallback((history: Array<Array<TouchInfo>>) => {
24
24
  // Process all items in the current touch history
@@ -30,34 +30,31 @@ const useInternalTouchHandler = (
30
30
  }
31
31
 
32
32
  const touch = touches[i];
33
-
33
+ const prevTouch = prevTouchInfoRef.current[touch.id];
34
34
  // Calculate the velocity from the previous touch.
35
35
  const timeDiffseconds =
36
36
  touch.timestamp -
37
37
  (prevTouchInfoRef.current[touch.id]?.timestamp ?? touch.timestamp);
38
38
 
39
- const distX =
40
- touch.x - (prevTouchInfoRef.current[touch.id]?.x ?? touch.x);
41
- const distY =
42
- touch.y - (prevTouchInfoRef.current[touch.id]?.y ?? touch.y);
39
+ const distX = touch.x - (prevTouch?.x ?? touch.x);
40
+ const distY = touch.y - (prevTouch?.y ?? touch.y);
43
41
 
44
42
  if (
45
43
  touch.type !== TouchType.Start &&
46
44
  touch.type !== TouchType.End &&
47
- touch.type !== TouchType.Cancelled
45
+ touch.type !== TouchType.Cancelled &&
46
+ timeDiffseconds > 0
48
47
  ) {
49
- if (timeDiffseconds > 0) {
50
- prevVelocityRef.current[touch.id] = {
51
- x: distX / timeDiffseconds / PixelRatio.get(),
52
- y: distY / timeDiffseconds / PixelRatio.get(),
53
- };
54
- }
48
+ prevVelocityRef.current[touch.id] = {
49
+ x: distX / timeDiffseconds / PixelRatio.get(),
50
+ y: distY / timeDiffseconds / PixelRatio.get(),
51
+ };
55
52
  }
56
53
 
57
54
  const extendedTouchInfo: ExtendedTouchInfo = {
58
55
  ...touch,
59
- velocityX: prevVelocityRef.current[touch.id]?.x,
60
- velocityY: prevVelocityRef.current[touch.id]?.y,
56
+ velocityX: prevVelocityRef.current[touch.id]?.x ?? 0,
57
+ velocityY: prevVelocityRef.current[touch.id]?.y ?? 0,
61
58
  };
62
59
 
63
60
  // Save previous touch
@@ -69,7 +66,6 @@ const useInternalTouchHandler = (
69
66
  } else if (touch.type === TouchType.Active) {
70
67
  handlers.onActive && handlers.onActive(extendedTouchInfo);
71
68
  } else {
72
- handlers.onActive && handlers.onActive(extendedTouchInfo);
73
69
  handlers.onEnd && handlers.onEnd(extendedTouchInfo);
74
70
  }
75
71
  }
package/android/README.md DELETED
@@ -1,14 +0,0 @@
1
- README
2
- ======
3
-
4
- If you want to publish the lib as a maven dependency, follow these steps before publishing a new version to npm:
5
-
6
- 1. Be sure to have the Android [SDK](https://developer.android.com/studio/index.html) and [NDK](https://developer.android.com/ndk/guides/index.html) installed
7
- 2. Be sure to have a `local.properties` file in this folder that points to the Android SDK and NDK
8
- ```
9
- ndk.dir=/Users/{username}/Library/Android/sdk/ndk-bundle
10
- sdk.dir=/Users/{username}/Library/Android/sdk
11
- ```
12
- 3. Delete the `maven` folder
13
- 4. Run `./gradlew installArchives`
14
- 5. Verify that latest set of generated files is in the maven folder with the correct version number
@@ -1,29 +0,0 @@
1
- // Copyright (c) 2018 Google Inc. All rights reserved.
2
- //
3
- // Redistribution and use in source and binary forms, with or without
4
- // modification, are permitted provided that the following conditions are
5
- // met:
6
- //
7
- // * Redistributions of source code must retain the above copyright
8
- // notice, this list of conditions and the following disclaimer.
9
- // * Redistributions in binary form must reproduce the above
10
- // copyright notice, this list of conditions and the following disclaimer
11
- // in the documentation and/or other materials provided with the
12
- // distribution.
13
- // * Neither the name of Google Inc. nor the names of its
14
- // contributors may be used to endorse or promote products derived from
15
- // this software without specific prior written permission.
16
- //
17
- // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
18
- // "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
19
- // LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
20
- // A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
21
- // OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
22
- // SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
23
- // LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
24
- // DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
25
- // THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
26
- // (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
27
- // OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
28
-
29
- --------------------------------------------------------------------------------
@@ -1,29 +0,0 @@
1
- // Copyright (c) 2018 Google Inc. All rights reserved.
2
- //
3
- // Redistribution and use in source and binary forms, with or without
4
- // modification, are permitted provided that the following conditions are
5
- // met:
6
- //
7
- // * Redistributions of source code must retain the above copyright
8
- // notice, this list of conditions and the following disclaimer.
9
- // * Redistributions in binary form must reproduce the above
10
- // copyright notice, this list of conditions and the following disclaimer
11
- // in the documentation and/or other materials provided with the
12
- // distribution.
13
- // * Neither the name of Google Inc. nor the names of its
14
- // contributors may be used to endorse or promote products derived from
15
- // this software without specific prior written permission.
16
- //
17
- // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
18
- // "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
19
- // LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
20
- // A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
21
- // OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
22
- // SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
23
- // LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
24
- // DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
25
- // THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
26
- // (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
27
- // OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
28
-
29
- --------------------------------------------------------------------------------
@@ -1 +0,0 @@
1
- Placeholder for the Skia include files.