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