@shopify/react-native-skia 0.1.121 → 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/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/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
@@ -24,7 +24,7 @@ export interface PathProps extends CustomPaintProps {
|
|
24
24
|
const onDraw = createDrawing<PathProps>(
|
25
25
|
({ canvas, paint }, { start, end, stroke, ...pathProps }) => {
|
26
26
|
const hasStartOffset = start !== 0;
|
27
|
-
const hasEndOffset =
|
27
|
+
const hasEndOffset = end !== 1;
|
28
28
|
const hasStrokeOptions = stroke !== undefined;
|
29
29
|
const willMutatePath = hasStartOffset || hasEndOffset || hasStrokeOptions;
|
30
30
|
const pristinePath = processPath(pathProps.path);
|
@@ -40,7 +40,9 @@ export abstract class Node<P = unknown> {
|
|
40
40
|
visit(ctx: DrawingContext, children?: Node[]) {
|
41
41
|
const returnedValues: Exclude<DeclarationResult, null>[] = [];
|
42
42
|
(children ?? this.children).forEach((child) => {
|
43
|
-
if (
|
43
|
+
if (child.memoized && child.memoizable) {
|
44
|
+
returnedValues.push(child.memoized);
|
45
|
+
} else {
|
44
46
|
const ret = child.draw(ctx);
|
45
47
|
if (ret) {
|
46
48
|
returnedValues.push(ret);
|
@@ -48,8 +50,6 @@ export abstract class Node<P = unknown> {
|
|
48
50
|
child.memoized = ret;
|
49
51
|
}
|
50
52
|
}
|
51
|
-
} else {
|
52
|
-
returnedValues.push(child.memoized);
|
53
53
|
}
|
54
54
|
});
|
55
55
|
return returnedValues;
|
package/src/skia/Color.ts
CHANGED
@@ -1,8 +1,8 @@
|
|
1
|
-
import {
|
1
|
+
import { Skia } from "./Skia";
|
2
2
|
|
3
3
|
// This is the JSI color. Currently a number. This may change.
|
4
4
|
export type SkColor = number;
|
5
|
-
|
5
|
+
// Input colors can be string or number
|
6
6
|
export type Color = string | number;
|
7
7
|
|
8
8
|
export const alphaf = (c: number) => ((c >> 24) & 255) / 255;
|
@@ -14,25 +14,8 @@ export const rgbaColor = (r: number, g: number, b: number, af: number) => {
|
|
14
14
|
return ((a << 24) | (r << 16) | (g << 8) | b) >>> 0;
|
15
15
|
};
|
16
16
|
|
17
|
-
export const processColorAsInt = (color?: number | string): SkColor => {
|
18
|
-
let processedColor = processColorRN(color);
|
19
|
-
if (typeof processedColor !== "number") {
|
20
|
-
throw new Error(`Couldn't process color: ${color}`);
|
21
|
-
}
|
22
|
-
// On android we need to move the alpha byte to the start of the structure
|
23
|
-
if (Platform.OS === "android") {
|
24
|
-
processedColor = processedColor >>> 0;
|
25
|
-
const a = (processedColor >> 24) & 0xff;
|
26
|
-
const r = (processedColor >> 16) & 0xff;
|
27
|
-
const g = (processedColor >> 8) & 0xff;
|
28
|
-
const b = processedColor & 0xff;
|
29
|
-
processedColor = ((a << 24) | (r << 16) | (g << 8) | b) >>> 0;
|
30
|
-
}
|
31
|
-
return processedColor;
|
32
|
-
};
|
33
|
-
|
34
17
|
const processColorAsArray = (cl: Color) => {
|
35
|
-
const icl = typeof cl === "string" ?
|
18
|
+
const icl = typeof cl === "string" ? Skia.Color(cl) : cl;
|
36
19
|
const r = red(icl);
|
37
20
|
const g = green(icl);
|
38
21
|
const b = blue(icl);
|
package/src/skia/Image/Image.ts
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
import type { TileMode } from "../ImageFilter";
|
2
|
-
import type {
|
2
|
+
import type { SkShader } from "../Shader";
|
3
3
|
import type { SkMatrix } from "../Matrix";
|
4
4
|
import type { SkJSIInstance } from "../JsiInstance";
|
5
5
|
|
@@ -46,7 +46,7 @@ export interface SkImage extends SkJSIInstance<"Image"> {
|
|
46
46
|
fm: FilterMode,
|
47
47
|
mm: MipmapMode,
|
48
48
|
localMatrix?: SkMatrix
|
49
|
-
):
|
49
|
+
): SkShader;
|
50
50
|
|
51
51
|
/**
|
52
52
|
* Returns this image as a shader with the specified tiling. It will use cubic sampling.
|
@@ -62,7 +62,7 @@ export interface SkImage extends SkJSIInstance<"Image"> {
|
|
62
62
|
B: number,
|
63
63
|
C: number,
|
64
64
|
localMatrix?: SkMatrix
|
65
|
-
):
|
65
|
+
): SkShader;
|
66
66
|
|
67
67
|
/** Encodes Image pixels, returning result as UInt8Array. Returns existing
|
68
68
|
encoded data if present; otherwise, SkImage is encoded with
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import type { SkColor } from "../Color";
|
2
2
|
import type { SkColorFilter } from "../ColorFilter/ColorFilter";
|
3
|
-
import type {
|
3
|
+
import type { SkShader } from "../Shader/Shader";
|
4
4
|
import type { SkRect } from "../Rect";
|
5
5
|
import type { BlendMode } from "../Paint/BlendMode";
|
6
6
|
|
@@ -48,7 +48,7 @@ export interface ImageFilterFactory {
|
|
48
48
|
* @param shader - The Shader to be transformed
|
49
49
|
* @param input - if null, it will use the dynamic source image
|
50
50
|
*/
|
51
|
-
MakeShader(shader:
|
51
|
+
MakeShader(shader: SkShader, input: SkImageFilter | null): SkImageFilter;
|
52
52
|
/**
|
53
53
|
* Create a filter that blurs its input by the separate X and Y sigmas. The provided tile mode
|
54
54
|
* is used when the blur kernel goes outside the input image.
|
package/src/skia/Paint/Paint.ts
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
import type { SkImageFilter } from "../ImageFilter";
|
2
2
|
import type { IMaskFilter } from "../MaskFilter";
|
3
3
|
import type { SkColorFilter } from "../ColorFilter";
|
4
|
-
import type {
|
4
|
+
import type { SkShader } from "../Shader";
|
5
5
|
import type { SkColor } from "../Color";
|
6
6
|
import type { IPathEffect } from "../PathEffect";
|
7
7
|
import type { SkJSIInstance } from "../JsiInstance";
|
@@ -119,7 +119,7 @@ export interface SkPaint extends SkJSIInstance<"Paint"> {
|
|
119
119
|
* Sets the current shader, replacing the existing one if there was one.
|
120
120
|
* @param shader
|
121
121
|
*/
|
122
|
-
setShader(shader:
|
122
|
+
setShader(shader: SkShader | null): void;
|
123
123
|
|
124
124
|
/**
|
125
125
|
* Sets the geometry drawn at the beginning and end of strokes.
|
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,
|