@shopify/react-native-skia 0.1.130 → 0.1.133

package/src/skia/types/Data/Data.ts

@@ -1,5 +1,5 @@
 import type { SkJSIInstance } from "../JsiInstance";
 
-export type Data = SkJSIInstance<"Data">;
+export type SkData = SkJSIInstance<"Data">;
 
 export type DataSource = ReturnType<typeof require> | string | Uint8Array;

package/src/skia/types/Data/DataFactory.ts

@@ -1,19 +1,19 @@
-import type { Data } from "./Data";
+import type { SkData } from "./Data";
 
 export interface DataFactory {
   /**
    * Creates a new Data object from an Uri, either locally or remotely.
    * @param uri Uri to a valid resource
    */
-  fromURI(uri: string): Promise<Data>;
+  fromURI(uri: string): Promise<SkData>;
   /**
    * Creates a new Data object from a byte array.
    * @param bytes An array of bytes representing the data
    */
-  fromBytes(bytes: Uint8Array): Data;
+  fromBytes(bytes: Uint8Array): SkData;
   /**
    * Creates a new Data object from a base64 encoded string.
    * @param base64 A Base64 encoded string representing the data
    */
-  fromBase64(base64: string): Data;
+  fromBase64(base64: string): SkData;
 }

package/src/skia/types/Font/Font.ts

@@ -12,6 +12,15 @@ export interface FontMetrics {
 }
 
 export interface SkFont extends SkJSIInstance<"Font"> {
+  /**
+   * Retrieves the advanceX measurements for each glyph.
+   * If paint is not null, its stroking, PathEffect, and MaskFilter fields are respected.
+   * One width per glyph is returned in the returned array.
+   * @param glyphs
+   * @param paint
+   */
+  getGlyphWidths(glyphs: number[], paint?: SkPaint): number[];
+
   /** Returns the advance width of text.
       The advance is the normal distance to move before drawing additional text.
       Returns the bounding box of text if bounds is not nullptr. The paint
@@ -39,20 +48,6 @@ export interface SkFont extends SkJSIInstance<"Font"> {
    */
   getGlyphIDs(str: string, numCodePoints?: number): number[];
 
-  /**
-   * Retrieves the advanceX measurements for each glyph.
-   * If paint is not null, its stroking, PathEffect, and MaskFilter fields are respected.
-   * One width per glyph is returned in the returned array.
-   * @param glyphs
-   * @param paint
-   * @param output - if provided, the results will be copied into this array.
-   */
-  getGlyphWidths(
-    glyphs: number[],
-    paint?: SkPaint | null,
-    output?: Float32Array
-  ): Float32Array;
-
   /**
    * Computes any intersections of a thick "line" and a run of positionsed glyphs.
    * The thick line is represented as a top and bottom coordinate (positive for

package/src/skia/types/FontMgr/FontMgr.ts

@@ -2,7 +2,7 @@ import type { SkJSIInstance } from "../JsiInstance";
 import type { FontStyle } from "../Font/Font";
 import type { SkTypeface } from "../Typeface";
 
-export interface FontMgr extends SkJSIInstance<"FontMgr"> {
+export interface SkFontMgr extends SkJSIInstance<"FontMgr"> {
   /**
    * Return the number of font families loaded in this manager. Useful for debugging.
    */

package/src/skia/types/FontMgr/FontMgrFactory.ts

@@ -1,9 +1,9 @@
-import type { FontMgr } from "./FontMgr";
+import type { SkFontMgr } from "./FontMgr";
 
 // Commented code below is the CanvasKit reference
 export interface FontMgrFactory {
   // FromData: (...data: Data[]) => FontMgr | null;
-  RefDefault: () => FontMgr;
+  RefDefault: () => SkFontMgr;
 }
 
 //const fontMgrFactory = (data: Data[]) => Skia.FontMgr.FromData(...data);

package/src/skia/types/Image/Image.ts

@@ -4,8 +4,8 @@ import type { TileMode } from "../ImageFilter";
 import type { SkShader } from "../Shader";
 
 export enum FilterMode {
-  Linear,
   Nearest,
+  Linear,
 }
 
 export enum MipmapMode {
@@ -15,9 +15,9 @@ export enum MipmapMode {
 }
 
 export enum ImageFormat {
-  PNG,
-  JPEG,
-  WEBP,
+  JPEG = 3,
+  PNG = 4,
+  WEBP = 6,
 }
 
 export interface SkImage extends SkJSIInstance<"Image"> {

package/src/skia/types/Image/ImageFactory.ts

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import type { Data } from "../Data";
+import type { SkData } from "../Data";
 
 import type { SkImage } from "./Image";
 
@@ -62,7 +62,7 @@ export interface ImageFactory {
    * @returns If the encoded format is not supported, or subset is outside of the bounds of the decoded
    *  image, nullptr is returned.
    */
-  MakeImageFromEncoded: (encoded: Data) => SkImage | null;
+  MakeImageFromEncoded: (encoded: SkData) => SkImage | null;
 
   /**
    * Returns an image with the given pixel data and format.
@@ -74,5 +74,5 @@ export interface ImageFactory {
    * @param data - bytes representing the pixel data.
    * @param bytesPerRow
    */
-  MakeImage(info: ImageInfo, data: Data, bytesPerRow: number): SkImage | null;
+  MakeImage(info: ImageInfo, data: SkData, bytesPerRow: number): SkImage | null;
 }

package/src/skia/types/Matrix.ts

@@ -12,19 +12,84 @@ export enum MatrixIndex {
 }
 
 export interface SkMatrix extends SkJSIInstance<"Matrix"> {
-  0: number;
-  1: number;
-  2: number;
-  3: number;
-  4: number;
-  5: number;
-  6: number;
-  7: number;
-  8: number;
+  concat: (matrix: SkMatrix) => void;
+  translate: (x: number, y: number) => void;
+  scale: (x: number, y?: number) => void;
+  skew: (x: number, y: number) => void;
+  rotate: (theta: number) => void;
+}
+
+type Transform2dName =
+  | "translateX"
+  | "translateY"
+  | "scale"
+  | "skewX"
+  | "skewY"
+  | "scaleX"
+  | "scaleY"
+  | "rotateZ"
+  | "rotate";
+
+type Transformations = {
+  readonly [Name in Transform2dName]: number;
+};
 
-  preConcat: (matrix: SkMatrix) => void;
-  preTranslate: (x: number, y: number) => void;
-  preScale: (x: number, y: number) => void;
-  preSkew: (x: number, y: number) => void;
-  preRotate: (theta: number) => void;
+export type Transforms2d = readonly (
+  | Pick<Transformations, "translateX">
+  | Pick<Transformations, "translateY">
+  | Pick<Transformations, "scale">
+  | Pick<Transformations, "scaleX">
+  | Pick<Transformations, "scaleY">
+  | Pick<Transformations, "skewX">
+  | Pick<Transformations, "skewY">
+  | Pick<Transformations, "rotate">
+)[];
+
+export interface TransformProp {
+  transform?: Transforms2d;
 }
+
+export const processTransform = (m: SkMatrix, transforms: Transforms2d) => {
+  for (const transform of transforms) {
+    const key = Object.keys(transform)[0] as Transform2dName;
+    const value = (transform as Pick<Transformations, typeof key>)[key];
+    if (key === "translateX") {
+      m.translate(value, 0);
+      continue;
+    }
+    if (key === "translateY") {
+      m.translate(0, value);
+      continue;
+    }
+    if (key === "scale") {
+      m.scale(value, value);
+      continue;
+    }
+    if (key === "scaleX") {
+      m.scale(value, 1);
+      continue;
+    }
+    if (key === "scaleY") {
+      m.scale(1, value);
+      continue;
+    }
+    if (key === "skewX") {
+      m.skew(value, 0);
+      continue;
+    }
+    if (key === "skewY") {
+      m.skew(0, value);
+      continue;
+    }
+    if (key === "rotate" || key === "rotateZ") {
+      m.rotate(value);
+      continue;
+    }
+    exhaustiveCheck(key);
+  }
+  return m;
+};
+
+const exhaustiveCheck = (a: never): never => {
+  throw new Error(`Unknown transformation: ${a}`);
+};

package/src/skia/types/Paint/Paint.ts

@@ -20,9 +20,9 @@ export enum StrokeCap {
 }
 
 export enum StrokeJoin {
-  Bevel,
   Miter,
   Round,
+  Bevel,
 }
 
 export const isPaint = (obj: SkJSIInstance<string> | null): obj is SkPaint =>

package/src/skia/types/Path/Path.ts

@@ -1,4 +1,3 @@
-import type { SkFont } from "../Font";
 import type { SkRect } from "../Rect";
 import type { SkPoint } from "../Point";
 import type { SkRRect } from "../RRect";
@@ -78,7 +77,7 @@ export interface SkPath extends SkJSIInstance<"Path"> {
    * @param isCCW - if the path should be drawn counter-clockwise or not
    * @param startIndex - index of initial point of ellipse
    */
-  addOval(oval: SkRect, isCCW?: boolean, startIndex?: number): void;
+  addOval(oval: SkRect, isCCW?: boolean, startIndex?: number): SkPath;
 
   /**
    * Returns the number of points in this path. Initially zero.
@@ -94,7 +93,7 @@ export interface SkPath extends SkJSIInstance<"Path"> {
    * @param points
    * @param close - if true, will add a line connecting last point to the first point.
    */
-  addPoly(points: SkPoint[], close: boolean): void;
+  addPoly(points: SkPoint[], close: boolean): SkPath;
 
   /** Adds beginning of contour at SkPoint (x, y).
 
@@ -104,7 +103,7 @@ export interface SkPath extends SkJSIInstance<"Path"> {
 
         example: https://fiddle.skia.org/c/@Path_moveTo
     */
-  moveTo(x: number, y: number): void;
+  moveTo(x: number, y: number): SkPath;
   /** Adds line from last point to (x, y). If SkPath is empty, or last SkPath::Verb is
         kClose_Verb, last point is set to (0, 0) before adding line.
 
@@ -117,7 +116,7 @@ export interface SkPath extends SkJSIInstance<"Path"> {
 
         example: https://fiddle.skia.org/c/@Path_lineTo
     */
-  lineTo(x: number, y: number): void;
+  lineTo(x: number, y: number): SkPath;
 
   /**
    * Returns a new path that covers the same area as the original path, but with the
@@ -132,7 +131,7 @@ export interface SkPath extends SkJSIInstance<"Path"> {
    * @param dx
    * @param dy
    */
-  offset(dx: number, dy: number): void;
+  offset(dx: number, dy: number): SkPath;
 
   /**
    * Relative version of arcToRotated.
@@ -152,7 +151,7 @@ export interface SkPath extends SkJSIInstance<"Path"> {
     isCCW: boolean,
     dx: number,
     dy: number
-  ): void;
+  ): SkPath;
 
   /**
    * Relative version of conicTo.
@@ -162,7 +161,13 @@ export interface SkPath extends SkJSIInstance<"Path"> {
    * @param dy2
    * @param w
    */
-  rConicTo(dx1: number, dy1: number, dx2: number, dy2: number, w: number): void;
+  rConicTo(
+    dx1: number,
+    dy1: number,
+    dx2: number,
+    dy2: number,
+    w: number
+  ): SkPath;
 
   /**
    * Relative version of cubicTo.
@@ -180,7 +185,7 @@ export interface SkPath extends SkJSIInstance<"Path"> {
     cpy2: number,
     x: number,
     y: number
-  ): void;
+  ): SkPath;
 
   /**
    * Relative version of moveTo.
@@ -225,8 +230,9 @@ export interface SkPath extends SkJSIInstance<"Path"> {
    * Turns this path into the filled equivalent of the stroked path. Returns false if the operation
    * fails (e.g. the path is a hairline).
    * @param opts - describe how stroked path should look.
+   * If such a transformation cannot be done, null is returned.
    */
-  stroke(opts?: StrokeOpts): boolean;
+  stroke(opts?: StrokeOpts): null | SkPath;
 
   /**
    * Appends CLOSE_VERB to Path. A closed contour connects the first and last point
@@ -260,10 +266,8 @@ export interface SkPath extends SkJSIInstance<"Path"> {
    * only lines. If Path contains curves, computed bounds includes
    * the maximum extent of the quad, conic, or cubic; is slower than getBounds();
    * and unlike getBounds(), does not cache the result.
-   * @param outputArray - if provided, the bounding box will be copied into this array instead of
-   *                      allocating a new one.
    */
-  computeTightBounds(outputArray?: SkRect): SkRect;
+  computeTightBounds(): SkRect;
 
   /**
    * Appends arc to Path. Arc added is part of ellipse
@@ -371,7 +375,7 @@ export interface SkPath extends SkJSIInstance<"Path"> {
     cpy2: number,
     x: number,
     y: number
-  ): void;
+  ): SkPath;
 
   /**
    * Changes this path to be the dashed version of itself. This is the same effect as creating
@@ -458,7 +462,18 @@ export interface SkPath extends SkJSIInstance<"Path"> {
    */
   isVolatile(): boolean;
 
-  addCircle(x: number, y: number, r: number): void;
+  /** Adds circle centered at (x, y) of size radius to SkPath, appending kMove_Verb,
+      four kConic_Verb, and kClose_Verb. Circle begins at: (x + radius, y), continuing
+      clockwise if dir is kCW_Direction, and counterclockwise if dir is kCCW_Direction.
+
+      Has no effect if radius is zero or negative.
+
+      @param x       center of circle
+      @param y       center of circle
+      @param radius  distance from center to edge      
+      @return        reference to SkPath
+  */
+  addCircle(x: number, y: number, r: number): SkPath;
 
   getLastPt(): { x: number; y: number };
 
@@ -507,18 +522,13 @@ export interface SkPath extends SkJSIInstance<"Path"> {
    * @param stopT  - a value in the range [0.0, 1.0]. 1.0 is the end of the path.
    * @param isComplement
    */
-  trim(startT: number, stopT: number, isComplement: boolean): boolean;
+  trim(startT: number, stopT: number, isComplement: boolean): null | SkPath;
 
   /**
    * Transforms the path by the specified matrix.
    */
   transform(m3: SkMatrix): void;
 
-  /**
-   * Converts the text to a path with the given font at location x / y.
-   */
-  fromText(text: string, x: number, y: number, font: SkFont): void;
-
   /**
    * Interpolates between Path with point array of equal size.
    * Copy verb array and weights to result, and set result path to a weighted
@@ -535,10 +545,10 @@ export interface SkPath extends SkJSIInstance<"Path"> {
    * @param ending  path to interpolate with
    * @param weight  contribution of this path, and
    *                 one minus contribution of ending path
-   * @return        Path replaced by interpolated averages or undefined if 
+   * @return        Path replaced by interpolated averages or null if 
    *                not interpolatable
    * */
-  interpolate(end: SkPath, weight: number): SkPath;
+  interpolate(end: SkPath, weight: number): SkPath | null;
 
   /** Returns true if Path contain equal verbs and equal weights.
    *     @param compare  path to compare

package/src/skia/types/Path/PathFactory.ts

@@ -1,3 +1,5 @@
+import type { SkFont } from "../Font";
+
 import type { SkPath, PathOp, PathCommand } from "./Path";
 
 export interface PathFactory {
@@ -24,4 +26,9 @@ export interface PathFactory {
    * @param cmds
    */
   MakeFromCmds(cmds: PathCommand[]): SkPath | null;
+
+  /**
+   * Converts the text to a path with the given font at location x / y.
+   */
+  MakeFromText(text: string, x: number, y: number, font: SkFont): SkPath | null;
 }

package/src/skia/types/Picture/Picture.ts

@@ -1,8 +1,8 @@
-import type { InputColorMatrix } from "../ColorFilter";
 import type { FilterMode } from "../Image";
 import type { TileMode } from "../ImageFilter";
 import type { SkRect } from "../Rect";
 import type { SkShader } from "../Shader";
+import type { SkMatrix } from "../Matrix";
 
 export interface SkPicture {
   /**
@@ -22,7 +22,7 @@ export interface SkPicture {
     tmx: TileMode,
     tmy: TileMode,
     mode: FilterMode,
-    localMatrix?: InputColorMatrix,
+    localMatrix?: SkMatrix,
     tileRect?: SkRect
   ): SkShader;
 

package/src/skia/types/Point.ts

@@ -8,3 +8,5 @@ export interface SkPoint {
   readonly x: number;
   readonly y: number;
 }
+
+export type Vector = SkPoint;

package/src/skia/types/RRect.ts

@@ -5,3 +5,8 @@ export interface SkRRect {
   readonly rx: number;
   readonly ry: number;
 }
+
+// We have an issue to check property existence on JSI backed instances
+export const isRRect = (def: SkRect | SkRRect): def is SkRRect =>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (def as any).rect !== undefined;

package/src/skia/types/RuntimeEffect/RuntimeEffect.ts

@@ -10,7 +10,10 @@ export interface SkSLUniform {
   isInteger: boolean;
 }
 
-export type SkRuntimeShaderBuilder = SkJSIInstance<"RuntimeShaderBuilder">;
+export interface SkRuntimeShaderBuilder
+  extends SkJSIInstance<"RuntimeShaderBuilder"> {
+  setUniform(name: string, value: readonly number[]): void;
+}
 
 export interface SkRuntimeEffect extends SkJSIInstance<"RuntimeEffect"> {
   /**

package/src/skia/types/SVG/SVGFactory.ts

@@ -1,8 +1,8 @@
-import type { Data } from "../Data";
+import type { SkData } from "../Data";
 
 import type { SkSVG } from "./SVG";
 
 export interface SVGFactory {
-  MakeFromData(data: Data): SkSVG | null;
+  MakeFromData(data: SkData): SkSVG | null;
   MakeFromString(str: string): SkSVG | null;
 }

package/src/skia/types/Shader/Shader.ts

@@ -1,6 +1,65 @@
 import type { SkJSIInstance } from "../JsiInstance";
+import type { Vector } from "../Point";
+import type { SkRuntimeEffect, SkRuntimeShaderBuilder } from "../RuntimeEffect";
 
 export const isShader = (obj: SkJSIInstance<string> | null): obj is SkShader =>
   obj !== null && obj.__typename__ === "Shader";
 
 export type SkShader = SkJSIInstance<"Shader">;
+
+export type UniformValue = number | Vector | readonly number[];
+
+export type Uniform = UniformValue | readonly UniformValue[];
+
+export interface Uniforms {
+  [name: string]: Uniform;
+}
+
+const isVector = (obj: unknown): obj is Vector =>
+  // We have an issue to check property existence on JSI backed instances
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (obj as any).x !== undefined && (obj as any).y !== undefined;
+
+const processValue = (value: UniformValue): number | readonly number[] => {
+  if (isVector(value)) {
+    return [value.x, value.y];
+  }
+  return value;
+};
+
+export const processUniforms = (
+  source: SkRuntimeEffect,
+  uniforms: Uniforms,
+  builder?: SkRuntimeShaderBuilder
+) => {
+  const processed = new Array(source.getUniformCount())
+    .fill(0)
+    .flatMap((_, i) => {
+      const name = source.getUniformName(i);
+      const value = uniforms[name];
+      if (value === undefined) {
+        throw new Error(`No value specified for uniform ${name}`);
+      }
+      const result = Array.isArray(value)
+        ? value.flatMap(processValue)
+        : processValue(value as UniformValue);
+      builder?.setUniform(name, typeof result === "number" ? [result] : result);
+      return result;
+    });
+  const names = Object.keys(uniforms);
+  if (names.length > source.getUniformCount()) {
+    const usedUniforms = new Array(source.getUniformCount())
+      .fill(0)
+      .map((_, i) => source.getUniformName(i));
+    const unusedUniform = names
+      .map((name) => {
+        if (usedUniforms.indexOf(name) === -1) {
+          return name;
+        }
+        return null;
+      })
+      .filter((n) => n !== null);
+    console.warn("Unused uniforms were provided: " + unusedUniform.join(", "));
+  }
+  return processed;
+};

package/src/skia/types/Skia.ts

@@ -48,7 +48,7 @@ export interface Skia {
   PictureRecorder: () => SkPictureRecorder;
   Picture: PictureFactory;
   Path: PathFactory;
-  Matrix: () => SkMatrix;
+  Matrix: (matrix?: number[]) => SkMatrix;
   ColorFilter: ColorFilterFactory;
   Font: (typeface?: SkTypeface, size?: number) => SkFont;
   Typeface: TypefaceFactory;

package/src/skia/types/Typeface/TypefaceFactory.ts

@@ -1,7 +1,7 @@
-import type { Data } from "../Data";
+import type { SkData } from "../Data";
 
 import type { SkTypeface } from "./Typeface";
 
 export interface TypefaceFactory {
-  MakeFreeTypeFaceFromData(data: Data): SkTypeface | null;
+  MakeFreeTypeFaceFromData(data: SkData): SkTypeface | null;
 }

package/src/skia/web/{api/Host.ts → Host.ts}

@@ -1,7 +1,13 @@
 /* eslint-disable no-nested-ternary */
 import type { CanvasKit, EmbindEnumEntity } from "canvaskit-wasm";
 
-import type { SkJSIInstance } from "../../types";
+import type { SkJSIInstance } from "../types";
+
+export class NotImplementedOnRNWeb extends Error {
+  constructor() {
+    super("Not implemented on React Native Web");
+  }
+}
 
 export abstract class Host {
   readonly CanvasKit: CanvasKit;