@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.
- package/android/CMakeLists.txt +5 -1
- package/android/build.gradle +3 -1
- package/android/cpp/rnskia-android/RNSkDrawViewImpl.cpp +2 -2
- package/android/cpp/rnskia-android/RNSkDrawViewImpl.h +1 -1
- package/android/cpp/rnskia-android/SkiaOpenGLRenderer.cpp +15 -16
- package/android/cpp/rnskia-android/SkiaOpenGLRenderer.h +2 -2
- package/android/src/main/java/com/shopify/reactnative/skia/SkiaDrawView.java +69 -27
- package/cpp/rnskia/RNSkDrawView.cpp +66 -66
- package/cpp/rnskia/RNSkDrawView.h +22 -6
- package/cpp/rnskia/RNSkJsiViewApi.h +2 -2
- package/cpp/rnskia/values/RNSkComputedValue.h +10 -7
- package/cpp/rnskia/values/RNSkReadonlyValue.h +21 -2
- package/cpp/rnskia/values/RNSkValue.h +1 -0
- package/ios/RNSkia-iOS/RNSkDrawViewImpl.h +1 -1
- package/ios/RNSkia-iOS/RNSkDrawViewImpl.mm +2 -2
- package/ios/RNSkia-iOS/SkiaDrawView.mm +4 -0
- package/lib/commonjs/mock/index.js +3 -1
- package/lib/commonjs/mock/index.js.map +1 -1
- package/lib/commonjs/renderer/DependencyManager.js +1 -1
- package/lib/commonjs/renderer/DependencyManager.js.map +1 -1
- package/lib/commonjs/renderer/processors/Animations/Animations.js +18 -5
- package/lib/commonjs/renderer/processors/Animations/Animations.js.map +1 -1
- package/lib/commonjs/skia/core/Data.js +10 -22
- package/lib/commonjs/skia/core/Data.js.map +1 -1
- package/lib/commonjs/skia/core/Font.js +2 -3
- package/lib/commonjs/skia/core/Font.js.map +1 -1
- package/lib/commonjs/skia/core/Image.js.map +1 -1
- package/lib/commonjs/skia/core/SVG.js.map +1 -1
- package/lib/commonjs/skia/core/Typeface.js.map +1 -1
- package/lib/commonjs/skia/types/Data/Data.js +5 -0
- package/lib/commonjs/skia/types/Data/Data.js.map +1 -1
- package/lib/commonjs/skia/types/Image/ImageFactory.js +0 -2
- package/lib/commonjs/skia/types/Image/ImageFactory.js.map +1 -1
- package/lib/commonjs/skia/types/Path/Path.js.map +1 -1
- package/lib/commonjs/skia/web/JsiSkCanvas.js +9 -7
- package/lib/commonjs/skia/web/JsiSkCanvas.js.map +1 -1
- package/lib/commonjs/skia/web/JsiSkPath.js +7 -5
- package/lib/commonjs/skia/web/JsiSkPath.js.map +1 -1
- package/lib/commonjs/skia/web/JsiSkRRect.js +8 -0
- package/lib/commonjs/skia/web/JsiSkRRect.js.map +1 -1
- package/lib/commonjs/skia/web/JsiSkRect.js +2 -2
- package/lib/commonjs/skia/web/JsiSkRect.js.map +1 -1
- package/lib/commonjs/values/hooks/useComputedValue.js +6 -2
- package/lib/commonjs/values/hooks/useComputedValue.js.map +1 -1
- package/lib/commonjs/values/index.js +13 -0
- package/lib/commonjs/values/index.js.map +1 -1
- package/lib/commonjs/values/selector.js +24 -0
- package/lib/commonjs/values/selector.js.map +1 -0
- package/lib/commonjs/values/web/RNSkComputedValue.js +8 -0
- package/lib/commonjs/values/web/RNSkComputedValue.js.map +1 -1
- package/lib/commonjs/values/web/RNSkReadonlyValue.js +4 -0
- package/lib/commonjs/values/web/RNSkReadonlyValue.js.map +1 -1
- package/lib/commonjs/views/useTouchHandler.js +13 -15
- package/lib/commonjs/views/useTouchHandler.js.map +1 -1
- package/lib/module/mock/index.js +2 -1
- package/lib/module/mock/index.js.map +1 -1
- package/lib/module/renderer/DependencyManager.js +2 -2
- package/lib/module/renderer/DependencyManager.js.map +1 -1
- package/lib/module/renderer/processors/Animations/Animations.js +13 -4
- package/lib/module/renderer/processors/Animations/Animations.js.map +1 -1
- package/lib/module/skia/core/Data.js +10 -20
- package/lib/module/skia/core/Data.js.map +1 -1
- package/lib/module/skia/core/Font.js +2 -3
- package/lib/module/skia/core/Font.js.map +1 -1
- package/lib/module/skia/core/Image.js.map +1 -1
- package/lib/module/skia/core/SVG.js.map +1 -1
- package/lib/module/skia/core/Typeface.js.map +1 -1
- package/lib/module/skia/types/Data/Data.js +1 -1
- package/lib/module/skia/types/Data/Data.js.map +1 -1
- package/lib/module/skia/types/Image/ImageFactory.js +0 -1
- package/lib/module/skia/types/Image/ImageFactory.js.map +1 -1
- package/lib/module/skia/types/Path/Path.js.map +1 -1
- package/lib/module/skia/web/JsiSkCanvas.js +8 -7
- package/lib/module/skia/web/JsiSkCanvas.js.map +1 -1
- package/lib/module/skia/web/JsiSkPath.js +6 -5
- package/lib/module/skia/web/JsiSkPath.js.map +1 -1
- package/lib/module/skia/web/JsiSkRRect.js +8 -0
- package/lib/module/skia/web/JsiSkRRect.js.map +1 -1
- package/lib/module/skia/web/JsiSkRect.js +2 -2
- package/lib/module/skia/web/JsiSkRect.js.map +1 -1
- package/lib/module/values/hooks/useComputedValue.js +7 -3
- package/lib/module/values/hooks/useComputedValue.js.map +1 -1
- package/lib/module/values/index.js +1 -0
- package/lib/module/values/index.js.map +1 -1
- package/lib/module/values/selector.js +15 -0
- package/lib/module/values/selector.js.map +1 -0
- package/lib/module/values/web/RNSkComputedValue.js +8 -0
- package/lib/module/values/web/RNSkComputedValue.js.map +1 -1
- package/lib/module/values/web/RNSkReadonlyValue.js +4 -0
- package/lib/module/values/web/RNSkReadonlyValue.js.map +1 -1
- package/lib/module/views/useTouchHandler.js +12 -14
- package/lib/module/views/useTouchHandler.js.map +1 -1
- package/lib/typescript/src/renderer/processors/Animations/Animations.d.ts +7 -2
- package/lib/typescript/src/skia/core/Data.d.ts +3 -5
- package/lib/typescript/src/skia/core/Font.d.ts +2 -2
- package/lib/typescript/src/skia/core/Image.d.ts +2 -2
- package/lib/typescript/src/skia/core/SVG.d.ts +2 -2
- package/lib/typescript/src/skia/core/Typeface.d.ts +2 -2
- package/lib/typescript/src/skia/types/Data/Data.d.ts +10 -3
- package/lib/typescript/src/skia/web/JsiSkRRect.d.ts +1 -0
- package/lib/typescript/src/skia/web/JsiSkRect.d.ts +1 -1
- package/lib/typescript/src/values/index.d.ts +1 -0
- package/lib/typescript/src/values/selector.d.ts +14 -0
- package/lib/typescript/src/values/types.d.ts +4 -0
- package/lib/typescript/src/values/web/RNSkComputedValue.d.ts +1 -0
- package/lib/typescript/src/values/web/RNSkReadonlyValue.d.ts +1 -0
- package/package.json +13 -8
- package/src/mock/index.ts +2 -1
- package/src/renderer/DependencyManager.tsx +5 -2
- package/src/renderer/processors/Animations/Animations.ts +27 -5
- package/src/skia/core/Data.ts +20 -51
- package/src/skia/core/Font.ts +4 -5
- package/src/skia/core/Image.ts +2 -2
- package/src/skia/core/SVG.ts +2 -2
- package/src/skia/core/Typeface.ts +2 -2
- package/src/skia/types/Data/Data.ts +11 -1
- package/src/skia/types/Image/ImageFactory.ts +0 -1
- package/src/skia/types/Path/Path.ts +0 -1
- package/src/skia/web/JsiSkCanvas.ts +22 -10
- package/src/skia/web/JsiSkPath.ts +14 -5
- package/src/skia/web/JsiSkRRect.ts +11 -0
- package/src/skia/web/JsiSkRect.ts +2 -5
- package/src/values/hooks/useComputedValue.ts +6 -3
- package/src/values/index.ts +1 -0
- package/src/values/selector.ts +24 -0
- package/src/values/types.ts +4 -0
- package/src/values/web/RNSkComputedValue.ts +6 -0
- package/src/values/web/RNSkReadonlyValue.ts +4 -0
- package/src/views/useTouchHandler.ts +15 -19
- package/android/README.md +0 -14
- package/cpp/skia/include/third_party/skcms/LICENSE +0 -29
- package/cpp/skia/include/third_party/vulkan/LICENSE +0 -29
- package/cpp/skia/readme.txt +0 -1
package/src/skia/core/Data.ts
CHANGED
@@ -1,14 +1,14 @@
|
|
1
|
-
import
|
2
|
-
import {
|
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
|
5
|
+
import { isRNModule } from "../types";
|
6
|
+
import type { SkData, DataModule, DataSourceParam } from "../types";
|
7
7
|
|
8
|
-
const resolveAsset = (source:
|
9
|
-
return
|
10
|
-
? source.
|
11
|
-
:
|
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:
|
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:
|
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
|
-
|
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
|
-
},
|
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:
|
59
|
+
source: DataSourceParam,
|
89
60
|
factory: (data: SkData) => T,
|
90
|
-
onError?: (err: Error) => void
|
91
|
-
|
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:
|
98
|
-
onError?: (err: Error) => void
|
99
|
-
|
100
|
-
) => useRawData(source, identity, onError, deps);
|
67
|
+
source: DataSourceParam,
|
68
|
+
onError?: (err: Error) => void
|
69
|
+
) => useRawData(source, identity, onError);
|
package/src/skia/core/Font.ts
CHANGED
@@ -2,7 +2,7 @@
|
|
2
2
|
import { useMemo } from "react";
|
3
3
|
|
4
4
|
import { Skia } from "../Skia";
|
5
|
-
import type {
|
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:
|
13
|
+
font: DataSourceParam,
|
14
14
|
size?: number,
|
15
15
|
onError?: (err: Error) => void
|
16
|
-
)
|
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
|
-
|
27
|
-
}, [typeface]);
|
26
|
+
}, [size, typeface]);
|
28
27
|
};
|
package/src/skia/core/Image.ts
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
import { Skia } from "../Skia";
|
2
|
-
import type {
|
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:
|
12
|
+
source: DataSourceParam,
|
13
13
|
onError?: (err: Error) => void
|
14
14
|
) => useRawData(source, imgFactory, onError);
|
package/src/skia/core/SVG.ts
CHANGED
@@ -1,11 +1,11 @@
|
|
1
1
|
import { Skia } from "../Skia";
|
2
|
-
import type {
|
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:
|
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 {
|
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:
|
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
|
-
|
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";
|
@@ -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)
|
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)
|
65
|
-
JsiSkRect.fromValue(this.CanvasKit, dest)
|
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)
|
134
|
-
JsiSkRect.fromValue(this.CanvasKit, dest)
|
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)
|
152
|
-
JsiSkRect.fromValue(this.CanvasKit, dest)
|
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(
|
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(
|
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(
|
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(
|
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(
|
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
|
-
|
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(
|
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(
|
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
|
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
|
+
};
|
package/src/values/index.ts
CHANGED
@@ -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
|
+
};
|
package/src/values/types.ts
CHANGED
@@ -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
|
}
|
@@ -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]:
|
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
|
-
|
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
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
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
|
-
--------------------------------------------------------------------------------
|
package/cpp/skia/readme.txt
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
Placeholder for the Skia include files.
|