@shopify/react-native-skia 0.1.119 → 0.1.122
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 +30 -16
- package/android/build.gradle +81 -34
- package/android/src/main/java/com/shopify/reactnative/skia/PlatformContext.java +1 -1
- package/cpp/api/JsiSkApi.h +2 -0
- package/cpp/api/JsiSkColor.h +49 -0
- package/cpp/api/JsiSkPath.h +31 -2
- package/cpp/api/JsiSkPathFactory.h +96 -1
- package/cpp/api/third_party/CSSColorParser.h +324 -0
- package/cpp/rnskia/RNSkAnimation.h +4 -7
- package/cpp/rnskia/values/RNSkClockValue.h +4 -4
- package/cpp/rnskia/values/RNSkDerivedValue.h +1 -1
- package/cpp/rnskia/values/RNSkReadonlyValue.h +9 -15
- package/ios/RNSkia-iOS/RNSkDrawViewImpl.h +3 -6
- package/ios/RNSkia-iOS/RNSkDrawViewImpl.mm +2 -4
- package/ios/RNSkia-iOS/SkiaDrawView.mm +3 -2
- package/lib/commonjs/renderer/components/shapes/Path.js +1 -1
- package/lib/commonjs/renderer/components/shapes/Path.js.map +1 -1
- package/lib/commonjs/renderer/nodes/Node.js +3 -3
- package/lib/commonjs/renderer/nodes/Node.js.map +1 -1
- package/lib/commonjs/skia/Color.js +3 -25
- package/lib/commonjs/skia/Color.js.map +1 -1
- package/lib/commonjs/skia/Image/Image.js.map +1 -1
- package/lib/commonjs/skia/ImageFilter/ImageFilterFactory.js.map +1 -1
- package/lib/commonjs/skia/Paint/Paint.js.map +1 -1
- package/lib/commonjs/skia/Path/Path.js +13 -1
- package/lib/commonjs/skia/Path/Path.js.map +1 -1
- package/lib/commonjs/skia/Shader/Shader.js.map +1 -1
- package/lib/commonjs/skia/Skia.js +41 -3
- package/lib/commonjs/skia/Skia.js.map +1 -1
- package/lib/module/renderer/components/shapes/Path.js +1 -1
- package/lib/module/renderer/components/shapes/Path.js.map +1 -1
- package/lib/module/renderer/nodes/Node.js +3 -3
- package/lib/module/renderer/nodes/Node.js.map +1 -1
- package/lib/module/skia/Color.js +2 -21
- package/lib/module/skia/Color.js.map +1 -1
- package/lib/module/skia/Image/Image.js.map +1 -1
- package/lib/module/skia/ImageFilter/ImageFilterFactory.js.map +1 -1
- package/lib/module/skia/Paint/Paint.js.map +1 -1
- package/lib/module/skia/Path/Path.js +11 -0
- package/lib/module/skia/Path/Path.js.map +1 -1
- package/lib/module/skia/Shader/Shader.js.map +1 -1
- package/lib/module/skia/Skia.js +43 -2
- package/lib/module/skia/Skia.js.map +1 -1
- package/lib/typescript/src/skia/Color.d.ts +0 -1
- package/lib/typescript/src/skia/Image/Image.d.ts +3 -3
- package/lib/typescript/src/skia/ImageFilter/ImageFilterFactory.d.ts +2 -2
- package/lib/typescript/src/skia/Paint/Paint.d.ts +2 -2
- package/lib/typescript/src/skia/Path/Path.d.ts +13 -0
- package/lib/typescript/src/skia/Path/PathFactory.d.ts +7 -1
- package/lib/typescript/src/skia/Picture/Picture.d.ts +2 -2
- package/lib/typescript/src/skia/RuntimeEffect/RuntimeEffect.d.ts +3 -3
- package/lib/typescript/src/skia/Shader/Shader.d.ts +2 -2
- package/lib/typescript/src/skia/Shader/ShaderFactory.d.ts +9 -9
- package/lib/typescript/src/skia/Skia.d.ts +5 -3
- package/package.json +1 -1
- package/scripts/install-npm.js +1 -1
- package/src/renderer/components/shapes/Path.tsx +1 -1
- package/src/renderer/nodes/Node.ts +3 -3
- package/src/skia/Color.ts +3 -20
- package/src/skia/Image/Image.ts +3 -3
- package/src/skia/ImageFilter/ImageFilterFactory.ts +2 -2
- package/src/skia/Paint/Paint.ts +2 -2
- package/src/skia/Path/Path.ts +16 -0
- package/src/skia/Path/PathFactory.ts +8 -1
- package/src/skia/Picture/Picture.ts +2 -2
- package/src/skia/RuntimeEffect/RuntimeEffect.ts +4 -4
- package/src/skia/Shader/Shader.ts +2 -2
- package/src/skia/Shader/ShaderFactory.ts +9 -9
- package/src/skia/Skia.ts +44 -3
package/src/skia/Path/Path.ts
CHANGED
@@ -38,6 +38,17 @@ export enum PathOp {
|
|
38
38
|
ReverseDifference,
|
39
39
|
}
|
40
40
|
|
41
|
+
export enum PathVerb {
|
42
|
+
Move,
|
43
|
+
Line,
|
44
|
+
Quad,
|
45
|
+
Conic,
|
46
|
+
Cubic,
|
47
|
+
Close,
|
48
|
+
}
|
49
|
+
|
50
|
+
export type PathCommand = number[];
|
51
|
+
|
41
52
|
export const isPath = (obj: SkJSIInstance<string> | null): obj is SkPath =>
|
42
53
|
obj !== null && obj.__typename__ === "Path";
|
43
54
|
|
@@ -535,4 +546,9 @@ export interface SkPath extends SkJSIInstance<"Path"> {
|
|
535
546
|
*
|
536
547
|
* */
|
537
548
|
isInterpolatable(compare: SkPath): boolean;
|
549
|
+
|
550
|
+
/**
|
551
|
+
* Serializes the contents of this path as a series of commands.
|
552
|
+
*/
|
553
|
+
toCmds(): PathCommand[];
|
538
554
|
}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import type { SkPath, PathOp } from "./Path";
|
1
|
+
import type { SkPath, PathOp, PathCommand } from "./Path";
|
2
2
|
|
3
3
|
export interface PathFactory {
|
4
4
|
Make(): SkPath;
|
@@ -17,4 +17,11 @@ export interface PathFactory {
|
|
17
17
|
* @param op
|
18
18
|
*/
|
19
19
|
MakeFromOp(one: SkPath, two: SkPath, op: PathOp): SkPath | null;
|
20
|
+
|
21
|
+
/**
|
22
|
+
* Creates a new path from the given list of path commands. If this fails, null will be
|
23
|
+
* returned instead.
|
24
|
+
* @param cmds
|
25
|
+
*/
|
26
|
+
MakeFromCmds(cmds: PathCommand[]): SkPath | null;
|
20
27
|
}
|
@@ -2,7 +2,7 @@ import type { InputColorMatrix } from "../ColorFilter";
|
|
2
2
|
import type { FilterMode } from "../Image";
|
3
3
|
import type { TileMode } from "../ImageFilter";
|
4
4
|
import type { SkRect } from "../Rect";
|
5
|
-
import type {
|
5
|
+
import type { SkShader } from "../Shader";
|
6
6
|
|
7
7
|
export interface SkPicture {
|
8
8
|
/**
|
@@ -24,7 +24,7 @@ export interface SkPicture {
|
|
24
24
|
mode: FilterMode,
|
25
25
|
localMatrix?: InputColorMatrix,
|
26
26
|
tileRect?: SkRect
|
27
|
-
):
|
27
|
+
): SkShader;
|
28
28
|
|
29
29
|
/**
|
30
30
|
* Returns the serialized format of this SkPicture. The format may change at anytime and
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import type {
|
1
|
+
import type { SkShader } from "../Shader";
|
2
2
|
import type { SkJSIInstance } from "../JsiInstance";
|
3
3
|
import type { SkMatrix } from "../Matrix";
|
4
4
|
|
@@ -21,7 +21,7 @@ export interface IRuntimeEffect extends SkJSIInstance<"RuntimeEffect"> {
|
|
21
21
|
uniforms: number[],
|
22
22
|
isOpaque?: boolean,
|
23
23
|
localMatrix?: SkMatrix
|
24
|
-
):
|
24
|
+
): SkShader;
|
25
25
|
|
26
26
|
/**
|
27
27
|
* Returns a shader executed using the given uniform data and the children as inputs.
|
@@ -33,9 +33,9 @@ export interface IRuntimeEffect extends SkJSIInstance<"RuntimeEffect"> {
|
|
33
33
|
makeShaderWithChildren(
|
34
34
|
uniforms: number[],
|
35
35
|
isOpaque?: boolean,
|
36
|
-
children?:
|
36
|
+
children?: SkShader[],
|
37
37
|
localMatrix?: SkMatrix
|
38
|
-
):
|
38
|
+
): SkShader;
|
39
39
|
|
40
40
|
/**
|
41
41
|
* Returns the nth uniform from the effect.
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import type { SkJSIInstance } from "../JsiInstance";
|
2
2
|
|
3
|
-
export const isShader = (obj: SkJSIInstance<string> | null): obj is
|
3
|
+
export const isShader = (obj: SkJSIInstance<string> | null): obj is SkShader =>
|
4
4
|
obj !== null && obj.__typename__ === "Shader";
|
5
5
|
|
6
|
-
export type
|
6
|
+
export type SkShader = SkJSIInstance<"Shader">;
|
@@ -4,7 +4,7 @@ import type { SkMatrix } from "../Matrix";
|
|
4
4
|
import type { SkColor } from "../Color";
|
5
5
|
import type { BlendMode } from "../Paint/BlendMode";
|
6
6
|
|
7
|
-
import type {
|
7
|
+
import type { SkShader } from "./Shader";
|
8
8
|
|
9
9
|
export interface ShaderFactory {
|
10
10
|
/**
|
@@ -31,7 +31,7 @@ export interface ShaderFactory {
|
|
31
31
|
localMatrix?: SkMatrix,
|
32
32
|
flags?: number
|
33
33
|
// colorSpace: ColorSpace
|
34
|
-
):
|
34
|
+
): SkShader;
|
35
35
|
|
36
36
|
/**
|
37
37
|
* Returns a shader that generates a radial gradient given the center and radius.
|
@@ -54,7 +54,7 @@ export interface ShaderFactory {
|
|
54
54
|
localMatrix?: SkMatrix,
|
55
55
|
flags?: number
|
56
56
|
// colorSpace?: ColorSpace
|
57
|
-
):
|
57
|
+
): SkShader;
|
58
58
|
|
59
59
|
/**
|
60
60
|
* Returns a shader that generates a conical gradient given two circles.
|
@@ -80,7 +80,7 @@ export interface ShaderFactory {
|
|
80
80
|
localMatrix?: SkMatrix,
|
81
81
|
flags?: number
|
82
82
|
// colorSpace?: ColorSpace
|
83
|
-
):
|
83
|
+
): SkShader;
|
84
84
|
|
85
85
|
/**
|
86
86
|
* Returns a shader that generates a sweep gradient given a center.
|
@@ -107,7 +107,7 @@ export interface ShaderFactory {
|
|
107
107
|
startAngleInDegrees?: number,
|
108
108
|
endAngleInDegrees?: number
|
109
109
|
// colorSpace?: ColorSpace
|
110
|
-
):
|
110
|
+
): SkShader;
|
111
111
|
|
112
112
|
/**
|
113
113
|
* Returns a shader with Perlin Turbulence.
|
@@ -128,7 +128,7 @@ export interface ShaderFactory {
|
|
128
128
|
seed: number,
|
129
129
|
tileW: number,
|
130
130
|
tileH: number
|
131
|
-
):
|
131
|
+
): SkShader;
|
132
132
|
|
133
133
|
/**
|
134
134
|
* Returns a shader with Perlin Fractal Noise.
|
@@ -149,7 +149,7 @@ export interface ShaderFactory {
|
|
149
149
|
seed: number,
|
150
150
|
tileW: number,
|
151
151
|
tileH: number
|
152
|
-
):
|
152
|
+
): SkShader;
|
153
153
|
|
154
154
|
/**
|
155
155
|
* Returns a shader that combines the given shaders with a BlendMode.
|
@@ -157,7 +157,7 @@ export interface ShaderFactory {
|
|
157
157
|
* @param one
|
158
158
|
* @param two
|
159
159
|
*/
|
160
|
-
MakeBlend(mode: BlendMode, one:
|
160
|
+
MakeBlend(mode: BlendMode, one: SkShader, two: SkShader): SkShader;
|
161
161
|
|
162
162
|
/**
|
163
163
|
* Returns a shader with a given color and colorspace.
|
@@ -165,5 +165,5 @@ export interface ShaderFactory {
|
|
165
165
|
*/
|
166
166
|
MakeColor(
|
167
167
|
color: SkColor //,space: ColorSpace
|
168
|
-
):
|
168
|
+
): SkShader;
|
169
169
|
}
|
package/src/skia/Skia.ts
CHANGED
@@ -1,3 +1,5 @@
|
|
1
|
+
import { Platform, processColor } from "react-native";
|
2
|
+
|
1
3
|
/*global SkiaApi*/
|
2
4
|
import type { ImageFilterFactory } from "./ImageFilter";
|
3
5
|
import type { PathFactory } from "./Path";
|
@@ -11,8 +13,6 @@ import type { SkRect } from "./Rect";
|
|
11
13
|
import type { SkRRect } from "./RRect";
|
12
14
|
import type { RuntimeEffectFactory } from "./RuntimeEffect";
|
13
15
|
import type { ShaderFactory } from "./Shader";
|
14
|
-
import type { SkColor } from "./Color";
|
15
|
-
import { processColor } from "./Color";
|
16
16
|
import type { SkMatrix } from "./Matrix";
|
17
17
|
import type { PathEffectFactory } from "./PathEffect";
|
18
18
|
import type { SkPoint } from "./Point";
|
@@ -27,6 +27,44 @@ import type { SkRSXform } from "./RSXform";
|
|
27
27
|
import type { SkPath } from "./Path/Path";
|
28
28
|
import type { SkContourMeasureIter } from "./ContourMeasure";
|
29
29
|
import type { PictureFactory, SkPictureRecorder } from "./Picture";
|
30
|
+
import type { Color, SkColor } from "./Color";
|
31
|
+
|
32
|
+
/*
|
33
|
+
* Parse CSS colors
|
34
|
+
*/
|
35
|
+
const SkiaColor = (cl: Color) => {
|
36
|
+
if (typeof cl === "number") {
|
37
|
+
return cl;
|
38
|
+
}
|
39
|
+
const color = Skia.parseColorString(cl);
|
40
|
+
if (color !== undefined) {
|
41
|
+
return color;
|
42
|
+
} else {
|
43
|
+
// If the color is not recognized, we fallback to React Native
|
44
|
+
let rnColor = processColor(cl);
|
45
|
+
// 1. Neither Skia or RN could parse the color
|
46
|
+
if (typeof rnColor !== "number") {
|
47
|
+
throw new Error("Skia couldn't parse the following color " + cl);
|
48
|
+
// 2. The color is recognized by RN but not by Skia
|
49
|
+
} else {
|
50
|
+
console.warn(
|
51
|
+
"Skia couldn't parse the following color " +
|
52
|
+
cl +
|
53
|
+
". The color parsing was delegated to React Native. Please file on issue with that color."
|
54
|
+
);
|
55
|
+
// On android we need to move the alpha byte to the start of the structure
|
56
|
+
if (Platform.OS === "android") {
|
57
|
+
rnColor = rnColor >>> 0;
|
58
|
+
const a = (rnColor >> 24) & 0xff;
|
59
|
+
const r = (rnColor >> 16) & 0xff;
|
60
|
+
const g = (rnColor >> 8) & 0xff;
|
61
|
+
const b = rnColor & 0xff;
|
62
|
+
rnColor = ((a << 24) | (r << 16) | (g << 8) | b) >>> 0;
|
63
|
+
}
|
64
|
+
return rnColor;
|
65
|
+
}
|
66
|
+
}
|
67
|
+
};
|
30
68
|
|
31
69
|
/**
|
32
70
|
* Declares the interface for the native Skia API
|
@@ -36,6 +74,8 @@ export interface Skia {
|
|
36
74
|
XYWHRect: (x: number, y: number, width: number, height: number) => SkRect;
|
37
75
|
RRectXY: (rect: SkRect, rx: number, ry: number) => SkRRect;
|
38
76
|
RSXform: (scos: number, ssin: number, tx: number, ty: number) => SkRSXform;
|
77
|
+
Color: (color: Color) => SkColor;
|
78
|
+
parseColorString: (color: string) => SkColor | undefined;
|
39
79
|
ContourMeasureIter: (
|
40
80
|
path: SkPath,
|
41
81
|
forceClosed: boolean,
|
@@ -115,7 +155,8 @@ export const Skia = {
|
|
115
155
|
ColorFilter: SkiaApi.ColorFilter,
|
116
156
|
ContourMeasureIter: SkiaApi.ContourMeasureIter,
|
117
157
|
// Here are constructors for data types which are represented as typed arrays in CanvasKit
|
118
|
-
Color:
|
158
|
+
Color: SkiaColor,
|
159
|
+
parseColorString: SkiaApi.parseColorString,
|
119
160
|
RSXform: SkiaApi.RSXform,
|
120
161
|
// For the following methods the factory symmetry is broken to be comptatible with CanvasKit
|
121
162
|
MakeSurface: SkiaApi.Surface.Make,
|