@shopify/react-native-skia 0.1.120 → 0.1.123

package/src/skia/Path/Path.ts

@@ -38,6 +38,17 @@ export enum PathOp {
   ReverseDifference,
 }
 
+export enum PathVerb {
+  Move,
+  Line,
+  Quad,
+  Conic,
+  Cubic,
+  Close,
+}
+
+export type PathCommand = number[];
+
 export const isPath = (obj: SkJSIInstance<string> | null): obj is SkPath =>
   obj !== null && obj.__typename__ === "Path";
 
@@ -535,4 +546,9 @@ export interface SkPath extends SkJSIInstance<"Path"> {
    *
    * */
   isInterpolatable(compare: SkPath): boolean;
+
+  /**
+   * Serializes the contents of this path as a series of commands.
+   */
+  toCmds(): PathCommand[];
 }

package/src/skia/Path/PathFactory.ts

@@ -1,4 +1,4 @@
-import type { SkPath, PathOp } from "./Path";
+import type { SkPath, PathOp, PathCommand } from "./Path";
 
 export interface PathFactory {
   Make(): SkPath;
@@ -17,4 +17,11 @@ export interface PathFactory {
    * @param op
    */
   MakeFromOp(one: SkPath, two: SkPath, op: PathOp): SkPath | null;
+
+  /**
+   * Creates a new path from the given list of path commands. If this fails, null will be
+   * returned instead.
+   * @param cmds
+   */
+  MakeFromCmds(cmds: PathCommand[]): SkPath | null;
 }

package/src/skia/Picture/Picture.ts

@@ -2,7 +2,7 @@ import type { InputColorMatrix } from "../ColorFilter";
 import type { FilterMode } from "../Image";
 import type { TileMode } from "../ImageFilter";
 import type { SkRect } from "../Rect";
-import type { IShader } from "../Shader";
+import type { SkShader } from "../Shader";
 
 export interface SkPicture {
   /**
@@ -24,7 +24,7 @@ export interface SkPicture {
     mode: FilterMode,
     localMatrix?: InputColorMatrix,
     tileRect?: SkRect
-  ): IShader;
+  ): SkShader;
 
   /**
    * Returns the serialized format of this SkPicture. The format may change at anytime and

package/src/skia/RuntimeEffect/RuntimeEffect.ts

@@ -1,4 +1,4 @@
-import type { IShader } from "../Shader";
+import type { SkShader } from "../Shader";
 import type { SkJSIInstance } from "../JsiInstance";
 import type { SkMatrix } from "../Matrix";
 
@@ -21,7 +21,7 @@ export interface IRuntimeEffect extends SkJSIInstance<"RuntimeEffect"> {
     uniforms: number[],
     isOpaque?: boolean,
     localMatrix?: SkMatrix
-  ): IShader;
+  ): SkShader;
 
   /**
    * Returns a shader executed using the given uniform data and the children as inputs.
@@ -33,9 +33,9 @@ export interface IRuntimeEffect extends SkJSIInstance<"RuntimeEffect"> {
   makeShaderWithChildren(
     uniforms: number[],
     isOpaque?: boolean,
-    children?: IShader[],
+    children?: SkShader[],
     localMatrix?: SkMatrix
-  ): IShader;
+  ): SkShader;
 
   /**
    * Returns the nth uniform from the effect.

package/src/skia/Shader/Shader.ts

@@ -1,6 +1,6 @@
 import type { SkJSIInstance } from "../JsiInstance";
 
-export const isShader = (obj: SkJSIInstance<string> | null): obj is IShader =>
+export const isShader = (obj: SkJSIInstance<string> | null): obj is SkShader =>
   obj !== null && obj.__typename__ === "Shader";
 
-export type IShader = SkJSIInstance<"Shader">;
+export type SkShader = SkJSIInstance<"Shader">;

package/src/skia/Shader/ShaderFactory.ts

@@ -4,7 +4,7 @@ import type { SkMatrix } from "../Matrix";
 import type { SkColor } from "../Color";
 import type { BlendMode } from "../Paint/BlendMode";
 
-import type { IShader } from "./Shader";
+import type { SkShader } from "./Shader";
 
 export interface ShaderFactory {
   /**
@@ -31,7 +31,7 @@ export interface ShaderFactory {
     localMatrix?: SkMatrix,
     flags?: number
     // colorSpace: ColorSpace
-  ): IShader;
+  ): SkShader;
 
   /**
    * Returns a shader that generates a radial gradient given the center and radius.
@@ -54,7 +54,7 @@ export interface ShaderFactory {
     localMatrix?: SkMatrix,
     flags?: number
     // colorSpace?: ColorSpace
-  ): IShader;
+  ): SkShader;
 
   /**
    * Returns a shader that generates a conical gradient given two circles.
@@ -80,7 +80,7 @@ export interface ShaderFactory {
     localMatrix?: SkMatrix,
     flags?: number
     //  colorSpace?: ColorSpace
-  ): IShader;
+  ): SkShader;
 
   /**
    * Returns a shader that generates a sweep gradient given a center.
@@ -107,7 +107,7 @@ export interface ShaderFactory {
     startAngleInDegrees?: number,
     endAngleInDegrees?: number
     //  colorSpace?: ColorSpace
-  ): IShader;
+  ): SkShader;
 
   /**
    * Returns a shader with Perlin Turbulence.
@@ -128,7 +128,7 @@ export interface ShaderFactory {
     seed: number,
     tileW: number,
     tileH: number
-  ): IShader;
+  ): SkShader;
 
   /**
    * Returns a shader with Perlin Fractal Noise.
@@ -149,7 +149,7 @@ export interface ShaderFactory {
     seed: number,
     tileW: number,
     tileH: number
-  ): IShader;
+  ): SkShader;
 
   /**
    * Returns a shader that combines the given shaders with a BlendMode.
@@ -157,7 +157,7 @@ export interface ShaderFactory {
    * @param one
    * @param two
    */
-  MakeBlend(mode: BlendMode, one: IShader, two: IShader): IShader;
+  MakeBlend(mode: BlendMode, one: SkShader, two: SkShader): SkShader;
 
   /**
    * Returns a shader with a given color and colorspace.
@@ -165,5 +165,5 @@ export interface ShaderFactory {
    */
   MakeColor(
     color: SkColor //,space: ColorSpace
-  ): IShader;
+  ): SkShader;
 }

package/src/skia/Skia.ts

@@ -1,3 +1,5 @@
+import { Platform, processColor } from "react-native";
+
 /*global SkiaApi*/
 import type { ImageFilterFactory } from "./ImageFilter";
 import type { PathFactory } from "./Path";
@@ -11,8 +13,6 @@ import type { SkRect } from "./Rect";
 import type { SkRRect } from "./RRect";
 import type { RuntimeEffectFactory } from "./RuntimeEffect";
 import type { ShaderFactory } from "./Shader";
-import type { SkColor } from "./Color";
-import { processColor } from "./Color";
 import type { SkMatrix } from "./Matrix";
 import type { PathEffectFactory } from "./PathEffect";
 import type { SkPoint } from "./Point";
@@ -27,6 +27,45 @@ import type { SkRSXform } from "./RSXform";
 import type { SkPath } from "./Path/Path";
 import type { SkContourMeasureIter } from "./ContourMeasure";
 import type { PictureFactory, SkPictureRecorder } from "./Picture";
+import type { Color, SkColor } from "./Color";
+
+/*
+ * Parse CSS colors
+ */
+const SkiaColor = (cl: Color) => {
+  if (typeof cl === "number") {
+    return cl;
+  }
+  const color = Skia.parseColorString(cl);
+  if (color !== undefined) {
+    return color;
+  } else {
+    // If the color is not recognized, we fallback to React Native
+    let rnColor = processColor(cl);
+    // 1. Neither Skia or RN could parse the color
+    if (typeof rnColor !== "number") {
+      console.warn("Skia couldn't parse the following color " + cl);
+      return BLACK;
+      // 2. The color is recognized by RN but not by Skia
+    } else {
+      console.warn(
+        "Skia couldn't parse the following color " +
+          cl +
+          ". The color parsing was delegated to React Native. Please file on issue with that color."
+      );
+      // On android we need to move the alpha byte to the start of the structure
+      if (Platform.OS === "android") {
+        rnColor = rnColor >>> 0;
+        const a = (rnColor >> 24) & 0xff;
+        const r = (rnColor >> 16) & 0xff;
+        const g = (rnColor >> 8) & 0xff;
+        const b = rnColor & 0xff;
+        rnColor = ((a << 24) | (r << 16) | (g << 8) | b) >>> 0;
+      }
+      return rnColor;
+    }
+  }
+};
 
 /**
  * Declares the interface for the native Skia API
@@ -36,6 +75,8 @@ export interface Skia {
   XYWHRect: (x: number, y: number, width: number, height: number) => SkRect;
   RRectXY: (rect: SkRect, rx: number, ry: number) => SkRRect;
   RSXform: (scos: number, ssin: number, tx: number, ty: number) => SkRSXform;
+  Color: (color: Color) => SkColor;
+  parseColorString: (color: string) => SkColor | undefined;
   ContourMeasureIter: (
     path: SkPath,
     forceClosed: boolean,
@@ -115,7 +156,8 @@ export const Skia = {
   ColorFilter: SkiaApi.ColorFilter,
   ContourMeasureIter: SkiaApi.ContourMeasureIter,
   // Here are constructors for data types which are represented as typed arrays in CanvasKit
-  Color: (color: Parameters<typeof processColor>[0]) => processColor(color, 1),
+  Color: SkiaColor,
+  parseColorString: SkiaApi.parseColorString,
   RSXform: SkiaApi.RSXform,
   // For the following methods the factory symmetry is broken to be comptatible with CanvasKit
   MakeSurface: SkiaApi.Surface.Make,
@@ -123,3 +165,5 @@ export const Skia = {
   MakeImage: SkiaApi.Image.MakeImage,
   MakeVertices: SkiaApi.MakeVertices,
 };
+
+const BLACK = Skia.parseColorString("black")!;