@shopify/react-native-skia 0.1.121 → 0.1.122

package/src/renderer/components/shapes/Path.tsx

@@ -24,7 +24,7 @@ export interface PathProps extends CustomPaintProps {
 const onDraw = createDrawing<PathProps>(
   ({ canvas, paint }, { start, end, stroke, ...pathProps }) => {
     const hasStartOffset = start !== 0;
-    const hasEndOffset = start !== 1;
+    const hasEndOffset = end !== 1;
     const hasStrokeOptions = stroke !== undefined;
     const willMutatePath = hasStartOffset || hasEndOffset || hasStrokeOptions;
     const pristinePath = processPath(pathProps.path);

package/src/renderer/nodes/Node.ts

@@ -40,7 +40,9 @@ export abstract class Node<P = unknown> {
   visit(ctx: DrawingContext, children?: Node[]) {
     const returnedValues: Exclude<DeclarationResult, null>[] = [];
     (children ?? this.children).forEach((child) => {
-      if (!child.memoized) {
+      if (child.memoized && child.memoizable) {
+        returnedValues.push(child.memoized);
+      } else {
         const ret = child.draw(ctx);
         if (ret) {
           returnedValues.push(ret);
@@ -48,8 +50,6 @@ export abstract class Node<P = unknown> {
             child.memoized = ret;
           }
         }
-      } else {
-        returnedValues.push(child.memoized);
       }
     });
     return returnedValues;

package/src/skia/Color.ts

@@ -1,8 +1,8 @@
-import { Platform, processColor as processColorRN } from "react-native";
+import { Skia } from "./Skia";
 
 // This is the JSI color. Currently a number. This may change.
 export type SkColor = number;
-
+// Input colors can be string or number
 export type Color = string | number;
 
 export const alphaf = (c: number) => ((c >> 24) & 255) / 255;
@@ -14,25 +14,8 @@ export const rgbaColor = (r: number, g: number, b: number, af: number) => {
   return ((a << 24) | (r << 16) | (g << 8) | b) >>> 0;
 };
 
-export const processColorAsInt = (color?: number | string): SkColor => {
-  let processedColor = processColorRN(color);
-  if (typeof processedColor !== "number") {
-    throw new Error(`Couldn't process color: ${color}`);
-  }
-  // On android we need to move the alpha byte to the start of the structure
-  if (Platform.OS === "android") {
-    processedColor = processedColor >>> 0;
-    const a = (processedColor >> 24) & 0xff;
-    const r = (processedColor >> 16) & 0xff;
-    const g = (processedColor >> 8) & 0xff;
-    const b = processedColor & 0xff;
-    processedColor = ((a << 24) | (r << 16) | (g << 8) | b) >>> 0;
-  }
-  return processedColor;
-};
-
 const processColorAsArray = (cl: Color) => {
-  const icl = typeof cl === "string" ? processColorAsInt(cl) : cl;
+  const icl = typeof cl === "string" ? Skia.Color(cl) : cl;
   const r = red(icl);
   const g = green(icl);
   const b = blue(icl);

package/src/skia/Image/Image.ts

@@ -1,5 +1,5 @@
 import type { TileMode } from "../ImageFilter";
-import type { IShader } from "../Shader";
+import type { SkShader } from "../Shader";
 import type { SkMatrix } from "../Matrix";
 import type { SkJSIInstance } from "../JsiInstance";
 
@@ -46,7 +46,7 @@ export interface SkImage extends SkJSIInstance<"Image"> {
     fm: FilterMode,
     mm: MipmapMode,
     localMatrix?: SkMatrix
-  ): IShader;
+  ): SkShader;
 
   /**
    * 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"> {
     B: number,
     C: number,
     localMatrix?: SkMatrix
-  ): IShader;
+  ): SkShader;
 
   /** Encodes Image pixels, returning result as UInt8Array. Returns existing
      encoded data if present; otherwise, SkImage is encoded with

package/src/skia/ImageFilter/ImageFilterFactory.ts

@@ -1,6 +1,6 @@
 import type { SkColor } from "../Color";
 import type { SkColorFilter } from "../ColorFilter/ColorFilter";
-import type { IShader } from "../Shader/Shader";
+import type { SkShader } from "../Shader/Shader";
 import type { SkRect } from "../Rect";
 import type { BlendMode } from "../Paint/BlendMode";
 
@@ -48,7 +48,7 @@ export interface ImageFilterFactory {
    * @param shader - The Shader to be transformed
    * @param input - if null, it will use the dynamic source image
    */
-  MakeShader(shader: IShader, input: SkImageFilter | null): SkImageFilter;
+  MakeShader(shader: SkShader, input: SkImageFilter | null): SkImageFilter;
   /**
    * Create a filter that blurs its input by the separate X and Y sigmas. The provided tile mode
    * is used when the blur kernel goes outside the input image.

package/src/skia/Paint/Paint.ts

@@ -1,7 +1,7 @@
 import type { SkImageFilter } from "../ImageFilter";
 import type { IMaskFilter } from "../MaskFilter";
 import type { SkColorFilter } from "../ColorFilter";
-import type { IShader } from "../Shader";
+import type { SkShader } from "../Shader";
 import type { SkColor } from "../Color";
 import type { IPathEffect } from "../PathEffect";
 import type { SkJSIInstance } from "../JsiInstance";
@@ -119,7 +119,7 @@ export interface SkPaint extends SkJSIInstance<"Paint"> {
    * Sets the current shader, replacing the existing one if there was one.
    * @param shader
    */
-  setShader(shader: IShader | null): void;
+  setShader(shader: SkShader | null): void;
 
   /**
    * Sets the geometry drawn at the beginning and end of strokes.

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,44 @@ 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") {
+      throw new Error("Skia couldn't parse the following color " + cl);
+      // 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 +74,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 +155,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,