@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.
Files changed (69) hide show
  1. package/android/CMakeLists.txt +30 -16
  2. package/android/build.gradle +81 -34
  3. package/android/src/main/java/com/shopify/reactnative/skia/PlatformContext.java +1 -1
  4. package/cpp/api/JsiSkApi.h +2 -0
  5. package/cpp/api/JsiSkColor.h +49 -0
  6. package/cpp/api/JsiSkPath.h +31 -2
  7. package/cpp/api/JsiSkPathFactory.h +96 -1
  8. package/cpp/api/third_party/CSSColorParser.h +324 -0
  9. package/cpp/rnskia/RNSkAnimation.h +4 -7
  10. package/cpp/rnskia/values/RNSkClockValue.h +4 -4
  11. package/cpp/rnskia/values/RNSkDerivedValue.h +1 -1
  12. package/cpp/rnskia/values/RNSkReadonlyValue.h +9 -15
  13. package/ios/RNSkia-iOS/RNSkDrawViewImpl.h +3 -6
  14. package/ios/RNSkia-iOS/RNSkDrawViewImpl.mm +2 -4
  15. package/ios/RNSkia-iOS/SkiaDrawView.mm +3 -2
  16. package/lib/commonjs/renderer/components/shapes/Path.js +1 -1
  17. package/lib/commonjs/renderer/components/shapes/Path.js.map +1 -1
  18. package/lib/commonjs/renderer/nodes/Node.js +3 -3
  19. package/lib/commonjs/renderer/nodes/Node.js.map +1 -1
  20. package/lib/commonjs/skia/Color.js +3 -25
  21. package/lib/commonjs/skia/Color.js.map +1 -1
  22. package/lib/commonjs/skia/Image/Image.js.map +1 -1
  23. package/lib/commonjs/skia/ImageFilter/ImageFilterFactory.js.map +1 -1
  24. package/lib/commonjs/skia/Paint/Paint.js.map +1 -1
  25. package/lib/commonjs/skia/Path/Path.js +13 -1
  26. package/lib/commonjs/skia/Path/Path.js.map +1 -1
  27. package/lib/commonjs/skia/Shader/Shader.js.map +1 -1
  28. package/lib/commonjs/skia/Skia.js +41 -3
  29. package/lib/commonjs/skia/Skia.js.map +1 -1
  30. package/lib/module/renderer/components/shapes/Path.js +1 -1
  31. package/lib/module/renderer/components/shapes/Path.js.map +1 -1
  32. package/lib/module/renderer/nodes/Node.js +3 -3
  33. package/lib/module/renderer/nodes/Node.js.map +1 -1
  34. package/lib/module/skia/Color.js +2 -21
  35. package/lib/module/skia/Color.js.map +1 -1
  36. package/lib/module/skia/Image/Image.js.map +1 -1
  37. package/lib/module/skia/ImageFilter/ImageFilterFactory.js.map +1 -1
  38. package/lib/module/skia/Paint/Paint.js.map +1 -1
  39. package/lib/module/skia/Path/Path.js +11 -0
  40. package/lib/module/skia/Path/Path.js.map +1 -1
  41. package/lib/module/skia/Shader/Shader.js.map +1 -1
  42. package/lib/module/skia/Skia.js +43 -2
  43. package/lib/module/skia/Skia.js.map +1 -1
  44. package/lib/typescript/src/skia/Color.d.ts +0 -1
  45. package/lib/typescript/src/skia/Image/Image.d.ts +3 -3
  46. package/lib/typescript/src/skia/ImageFilter/ImageFilterFactory.d.ts +2 -2
  47. package/lib/typescript/src/skia/Paint/Paint.d.ts +2 -2
  48. package/lib/typescript/src/skia/Path/Path.d.ts +13 -0
  49. package/lib/typescript/src/skia/Path/PathFactory.d.ts +7 -1
  50. package/lib/typescript/src/skia/Picture/Picture.d.ts +2 -2
  51. package/lib/typescript/src/skia/RuntimeEffect/RuntimeEffect.d.ts +3 -3
  52. package/lib/typescript/src/skia/Shader/Shader.d.ts +2 -2
  53. package/lib/typescript/src/skia/Shader/ShaderFactory.d.ts +9 -9
  54. package/lib/typescript/src/skia/Skia.d.ts +5 -3
  55. package/package.json +1 -1
  56. package/scripts/install-npm.js +1 -1
  57. package/src/renderer/components/shapes/Path.tsx +1 -1
  58. package/src/renderer/nodes/Node.ts +3 -3
  59. package/src/skia/Color.ts +3 -20
  60. package/src/skia/Image/Image.ts +3 -3
  61. package/src/skia/ImageFilter/ImageFilterFactory.ts +2 -2
  62. package/src/skia/Paint/Paint.ts +2 -2
  63. package/src/skia/Path/Path.ts +16 -0
  64. package/src/skia/Path/PathFactory.ts +8 -1
  65. package/src/skia/Picture/Picture.ts +2 -2
  66. package/src/skia/RuntimeEffect/RuntimeEffect.ts +4 -4
  67. package/src/skia/Shader/Shader.ts +2 -2
  68. package/src/skia/Shader/ShaderFactory.ts +9 -9
  69. package/src/skia/Skia.ts +44 -3
@@ -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 { IShader } from "../Shader";
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
- ): IShader;
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 { IShader } from "../Shader";
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
- ): IShader;
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?: IShader[],
36
+ children?: SkShader[],
37
37
  localMatrix?: SkMatrix
38
- ): IShader;
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 IShader =>
3
+ export const isShader = (obj: SkJSIInstance<string> | null): obj is SkShader =>
4
4
  obj !== null && obj.__typename__ === "Shader";
5
5
 
6
- export type IShader = SkJSIInstance<"Shader">;
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 { IShader } from "./Shader";
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
- ): IShader;
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
- ): IShader;
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
- ): IShader;
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
- ): IShader;
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
- ): IShader;
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
- ): IShader;
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: IShader, two: IShader): IShader;
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
- ): IShader;
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: (color: Parameters<typeof processColor>[0]) => processColor(color, 1),
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,