@shopify/react-native-skia 0.1.139 → 0.1.142

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 (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.