@shopify/react-native-skia 0.1.130 → 0.1.131

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/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";
@@ -45,6 +44,7 @@ export enum PathVerb {
   Conic,
   Cubic,
   Close,
+  Done,
 }
 
 export type PathCommand = number[];
@@ -78,7 +78,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 +94,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 +104,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 +117,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 +132,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 +152,7 @@ export interface SkPath extends SkJSIInstance<"Path"> {
     isCCW: boolean,
     dx: number,
     dy: number
-  ): void;
+  ): SkPath;
 
   /**
    * Relative version of conicTo.
@@ -162,7 +162,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 +186,7 @@ export interface SkPath extends SkJSIInstance<"Path"> {
     cpy2: number,
     x: number,
     y: number
-  ): void;
+  ): SkPath;
 
   /**
    * Relative version of moveTo.
@@ -225,8 +231,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 +267,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 +376,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 +463,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 +523,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 +546,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

@@ -7,10 +7,12 @@ export interface SkSLUniform {
   rows: number;
   /** The index into the uniforms array that this uniform begins. */
   slot: number;
-  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,67 @@
 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}`);
+      }
+      let result: number | readonly number[];
+      if (Array.isArray(value)) {
+        result = value.flatMap(processValue);
+      }
+      result = 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;

package/src/skia/web/JsiImageFilterFactory.ts

@@ -0,0 +1,144 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type {
+  ColorChannel,
+  ImageFilterFactory,
+  SkColor,
+  SkColorFilter,
+  SkImageFilter,
+  BlendMode,
+  SkRect,
+  SkRuntimeShaderBuilder,
+  SkShader,
+  TileMode,
+} from "../types";
+
+import { Host, NotImplementedOnRNWeb, ckEnum, toValue } from "./Host";
+import { JsiSkImageFilter } from "./JsiSkImageFilter";
+
+export class JsiSkImageFilterFactory
+  extends Host
+  implements ImageFilterFactory
+{
+  constructor(CanvasKit: CanvasKit) {
+    super(CanvasKit);
+  }
+
+  MakeOffset(
+    _dx: number,
+    _dy: number,
+    _input: SkImageFilter | null
+  ): SkImageFilter {
+    throw new NotImplementedOnRNWeb();
+  }
+
+  MakeDisplacementMap(
+    _channelX: ColorChannel,
+    _channelY: ColorChannel,
+    _scale: number,
+    _in1: SkImageFilter,
+    _input: SkImageFilter | null
+  ): SkImageFilter {
+    throw new NotImplementedOnRNWeb();
+  }
+
+  MakeShader(_shader: SkShader, _input: SkImageFilter | null): SkImageFilter {
+    throw new NotImplementedOnRNWeb();
+  }
+
+  MakeBlur(
+    sigmaX: number,
+    sigmaY: number,
+    mode: TileMode,
+    input: SkImageFilter | null
+  ) {
+    return new JsiSkImageFilter(
+      this.CanvasKit,
+      this.CanvasKit.ImageFilter.MakeBlur(
+        sigmaX,
+        sigmaY,
+        ckEnum(mode),
+        input === null ? null : toValue(input)
+      )
+    );
+  }
+
+  MakeColorFilter(cf: SkColorFilter, input: SkImageFilter | null) {
+    return new JsiSkImageFilter(
+      this.CanvasKit,
+      this.CanvasKit.ImageFilter.MakeColorFilter(
+        toValue(cf),
+        input === null ? null : toValue(input)
+      )
+    );
+  }
+
+  MakeCompose(outer: SkImageFilter | null, inner: SkImageFilter | null) {
+    return new JsiSkImageFilter(
+      this.CanvasKit,
+      this.CanvasKit.ImageFilter.MakeCompose(
+        outer === null ? null : toValue(outer),
+        inner === null ? null : toValue(inner)
+      )
+    );
+  }
+
+  MakeDropShadow(
+    _dx: number,
+    _dy: number,
+    _sigmaX: number,
+    _sigmaY: number,
+    _color: SkColor,
+    _input: SkImageFilter | null,
+    _cropRect?: SkRect
+  ): SkImageFilter {
+    throw new NotImplementedOnRNWeb();
+  }
+
+  MakeDropShadowOnly(
+    _dx: number,
+    _dy: number,
+    _sigmaX: number,
+    _sigmaY: number,
+    _color: SkColor,
+    _input: SkImageFilter | null,
+    _cropRect?: SkRect
+  ): SkImageFilter {
+    throw new NotImplementedOnRNWeb();
+  }
+
+  MakeErode(
+    _rx: number,
+    _ry: number,
+    _input: SkImageFilter | null,
+    _cropRect?: SkRect
+  ): SkImageFilter {
+    throw new NotImplementedOnRNWeb();
+  }
+
+  MakeDilate(
+    _rx: number,
+    _ry: number,
+    _input: SkImageFilter | null,
+    _cropRect?: SkRect
+  ): SkImageFilter {
+    throw new NotImplementedOnRNWeb();
+  }
+
+  MakeBlend(
+    _mode: BlendMode,
+    _background: SkImageFilter,
+    _foreground: SkImageFilter | null,
+    _cropRect?: SkRect
+  ): SkImageFilter {
+    throw new NotImplementedOnRNWeb();
+  }
+
+  MakeRuntimeShader(
+    _builder: SkRuntimeShaderBuilder,
+    _childShaderName: string | null,
+    _input: SkImageFilter | null
+  ): SkImageFilter {
+    throw new NotImplementedOnRNWeb();
+  }
+}

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

@@ -1,4 +1,4 @@
-import type { Canvas, CanvasKit, Image, Paint, Rect } from "canvaskit-wasm";
+import type { Canvas, Image, Paint, CanvasKit } from "canvaskit-wasm";
 
 import type {
   BlendMode,
@@ -22,7 +22,7 @@ import type {
   SkSVG,
   SkTextBlob,
   SkVertices,
-} from "../../types";
+} from "../types";
 
 import {
   ckEnum,
@@ -31,6 +31,7 @@ import {
   toUndefinedableValue,
   toOptionalValue,
 } from "./Host";
+import { JsiSkRect } from "./JsiSkRect";
 
 export class JsiSkCanvas
   extends HostObject<Canvas, "Canvas">
@@ -41,7 +42,10 @@ export class JsiSkCanvas
   }
 
   drawRect(rect: SkRect, paint: SkPaint) {
-    this.ref.drawRect(toValue<Rect>(rect), toValue<Paint>(paint));
+    this.ref.drawRect(
+      JsiSkRect.fromValue(this.CanvasKit, rect).ref,
+      toValue<Paint>(paint)
+    );
   }
 
   drawImage(image: SkImage, x: number, y: number, paint?: SkPaint) {
@@ -57,8 +61,8 @@ export class JsiSkCanvas
   ) {
     this.ref.drawImageRect(
       toValue<Image>(img),
-      toValue<Rect>(src),
-      toValue<Rect>(dest),
+      JsiSkRect.fromValue(this.CanvasKit, src).ref,
+      JsiSkRect.fromValue(this.CanvasKit, dest).ref,
       toValue<Paint>(paint),
       fastSample
     );
@@ -126,8 +130,8 @@ export class JsiSkCanvas
   ) {
     this.ref.drawImageRectCubic(
       toValue<Image>(img),
-      toValue<Rect>(src),
-      toValue<Rect>(dest),
+      JsiSkRect.fromValue(this.CanvasKit, src).ref,
+      JsiSkRect.fromValue(this.CanvasKit, dest).ref,
       B,
       C,
       toOptionalValue(paint)
@@ -144,8 +148,8 @@ export class JsiSkCanvas
   ) {
     this.ref.drawImageRectOptions(
       toValue<Image>(img),
-      toValue<Rect>(src),
-      toValue<Rect>(dest),
+      JsiSkRect.fromValue(this.CanvasKit, src).ref,
+      JsiSkRect.fromValue(this.CanvasKit, dest).ref,
       ckEnum(fm),
       ckEnum(mm),
       toOptionalValue(paint)
@@ -176,7 +180,7 @@ export class JsiSkCanvas
     paint?: SkPaint
   ) {
     this.ref.drawPatch(
-      toValue(cubics),
+      cubics.map(({ x, y }) => [x, y]).flat(),
       colors,
       toOptionalValue(texs),
       mode ? ckEnum(mode) : null,
@@ -189,7 +193,11 @@ export class JsiSkCanvas
   }
 
   drawPoints(mode: PointMode, points: SkPoint[], paint: SkPaint) {
-    this.ref.drawPoints(ckEnum(mode), toValue(points), toValue(paint));
+    this.ref.drawPoints(
+      ckEnum(mode),
+      points.map(({ x, y }) => [x, y]).flat(),
+      toValue(paint)
+    );
   }
 
   drawArc(