@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.
Files changed (63) hide show
  1. package/cpp/api/JsiSkApi.h +2 -0
  2. package/cpp/api/JsiSkColor.h +49 -0
  3. package/cpp/api/JsiSkPath.h +31 -2
  4. package/cpp/api/JsiSkPathFactory.h +96 -1
  5. package/cpp/api/third_party/CSSColorParser.h +324 -0
  6. package/cpp/rnskia/RNSkAnimation.h +4 -7
  7. package/cpp/rnskia/values/RNSkClockValue.h +4 -4
  8. package/cpp/rnskia/values/RNSkDerivedValue.h +1 -1
  9. package/cpp/rnskia/values/RNSkReadonlyValue.h +9 -15
  10. package/lib/commonjs/renderer/components/shapes/Path.js +1 -1
  11. package/lib/commonjs/renderer/components/shapes/Path.js.map +1 -1
  12. package/lib/commonjs/renderer/nodes/Node.js +3 -3
  13. package/lib/commonjs/renderer/nodes/Node.js.map +1 -1
  14. package/lib/commonjs/skia/Color.js +3 -25
  15. package/lib/commonjs/skia/Color.js.map +1 -1
  16. package/lib/commonjs/skia/Image/Image.js.map +1 -1
  17. package/lib/commonjs/skia/ImageFilter/ImageFilterFactory.js.map +1 -1
  18. package/lib/commonjs/skia/Paint/Paint.js.map +1 -1
  19. package/lib/commonjs/skia/Path/Path.js +13 -1
  20. package/lib/commonjs/skia/Path/Path.js.map +1 -1
  21. package/lib/commonjs/skia/Shader/Shader.js.map +1 -1
  22. package/lib/commonjs/skia/Skia.js +41 -3
  23. package/lib/commonjs/skia/Skia.js.map +1 -1
  24. package/lib/module/renderer/components/shapes/Path.js +1 -1
  25. package/lib/module/renderer/components/shapes/Path.js.map +1 -1
  26. package/lib/module/renderer/nodes/Node.js +3 -3
  27. package/lib/module/renderer/nodes/Node.js.map +1 -1
  28. package/lib/module/skia/Color.js +2 -21
  29. package/lib/module/skia/Color.js.map +1 -1
  30. package/lib/module/skia/Image/Image.js.map +1 -1
  31. package/lib/module/skia/ImageFilter/ImageFilterFactory.js.map +1 -1
  32. package/lib/module/skia/Paint/Paint.js.map +1 -1
  33. package/lib/module/skia/Path/Path.js +11 -0
  34. package/lib/module/skia/Path/Path.js.map +1 -1
  35. package/lib/module/skia/Shader/Shader.js.map +1 -1
  36. package/lib/module/skia/Skia.js +43 -2
  37. package/lib/module/skia/Skia.js.map +1 -1
  38. package/lib/typescript/src/skia/Color.d.ts +0 -1
  39. package/lib/typescript/src/skia/Image/Image.d.ts +3 -3
  40. package/lib/typescript/src/skia/ImageFilter/ImageFilterFactory.d.ts +2 -2
  41. package/lib/typescript/src/skia/Paint/Paint.d.ts +2 -2
  42. package/lib/typescript/src/skia/Path/Path.d.ts +13 -0
  43. package/lib/typescript/src/skia/Path/PathFactory.d.ts +7 -1
  44. package/lib/typescript/src/skia/Picture/Picture.d.ts +2 -2
  45. package/lib/typescript/src/skia/RuntimeEffect/RuntimeEffect.d.ts +3 -3
  46. package/lib/typescript/src/skia/Shader/Shader.d.ts +2 -2
  47. package/lib/typescript/src/skia/Shader/ShaderFactory.d.ts +9 -9
  48. package/lib/typescript/src/skia/Skia.d.ts +5 -3
  49. package/package.json +1 -1
  50. package/scripts/install-npm.js +1 -1
  51. package/src/renderer/components/shapes/Path.tsx +1 -1
  52. package/src/renderer/nodes/Node.ts +3 -3
  53. package/src/skia/Color.ts +3 -20
  54. package/src/skia/Image/Image.ts +3 -3
  55. package/src/skia/ImageFilter/ImageFilterFactory.ts +2 -2
  56. package/src/skia/Paint/Paint.ts +2 -2
  57. package/src/skia/Path/Path.ts +16 -0
  58. package/src/skia/Path/PathFactory.ts +8 -1
  59. package/src/skia/Picture/Picture.ts +2 -2
  60. package/src/skia/RuntimeEffect/RuntimeEffect.ts +4 -4
  61. package/src/skia/Shader/Shader.ts +2 -2
  62. package/src/skia/Shader/ShaderFactory.ts +9 -9
  63. 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 = start !== 1;
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 (!child.memoized) {
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 { Platform, processColor as processColorRN } from "react-native";
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" ? processColorAsInt(cl) : cl;
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);
@@ -1,5 +1,5 @@
1
1
  import type { TileMode } from "../ImageFilter";
2
- import type { IShader } from "../Shader";
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
- ): IShader;
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
- ): IShader;
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 { IShader } from "../Shader/Shader";
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: IShader, input: SkImageFilter | null): SkImageFilter;
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.
@@ -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 { IShader } from "../Shader";
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: IShader | null): void;
122
+ setShader(shader: SkShader | null): void;
123
123
 
124
124
  /**
125
125
  * Sets the geometry drawn at the beginning and end of strokes.
@@ -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,