@shopify/react-native-skia 0.1.130 → 0.1.131

package/src/skia/web/JsiSkMatrix.ts

@@ -0,0 +1,54 @@
+import type { CanvasKit, Matrix3x3 } from "canvaskit-wasm";
+
+import type { SkMatrix } from "../types";
+
+import { HostObject, toValue } from "./Host";
+
+export class JsiSkMatrix
+  extends HostObject<Matrix3x3, "Matrix">
+  implements SkMatrix
+{
+  constructor(CanvasKit: CanvasKit, ref: Matrix3x3) {
+    super(CanvasKit, ref, "Matrix");
+  }
+
+  concat(matrix: SkMatrix) {
+    this.ref.set(this.CanvasKit.Matrix.multiply(this.ref, toValue(matrix)));
+  }
+
+  translate(x: number, y: number) {
+    this.concat(
+      new JsiSkMatrix(
+        this.CanvasKit,
+        Float32Array.of(...this.CanvasKit.Matrix.translated(x, y))
+      )
+    );
+  }
+
+  scale(x: number, y?: number) {
+    this.concat(
+      new JsiSkMatrix(
+        this.CanvasKit,
+        Float32Array.of(...this.CanvasKit.Matrix.scaled(x, y ?? x))
+      )
+    );
+  }
+
+  skew(x: number, y: number) {
+    this.concat(
+      new JsiSkMatrix(
+        this.CanvasKit,
+        Float32Array.of(...this.CanvasKit.Matrix.skewed(x, y))
+      )
+    );
+  }
+
+  rotate(value: number) {
+    this.concat(
+      new JsiSkMatrix(
+        this.CanvasKit,
+        Float32Array.of(...this.CanvasKit.Matrix.rotated(value))
+      )
+    );
+  }
+}

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

@@ -12,12 +12,13 @@ import type {
   PaintStyle,
   SkMaskFilter,
   SkPathEffect,
-} from "../../types";
+} from "../types";
 
-import { HostObject, toNullableValue } from "./Host";
+import { HostObject, toNullableValue, ckEnum } from "./Host";
 
 export class JsiSkPaint extends HostObject<Paint, "Paint"> implements SkPaint {
   constructor(CanvasKit: CanvasKit, ref: Paint) {
+    ref.setAntiAlias(true);
     super(CanvasKit, ref, "Paint");
   }
 
@@ -54,7 +55,7 @@ export class JsiSkPaint extends HostObject<Paint, "Paint"> implements SkPaint {
   }
 
   setBlendMode(blendMode: BlendMode) {
-    this.ref.setBlendMode({ value: blendMode });
+    this.ref.setBlendMode(ckEnum(blendMode));
   }
 
   setColor(color: SkColor) {
@@ -82,11 +83,11 @@ export class JsiSkPaint extends HostObject<Paint, "Paint"> implements SkPaint {
   }
 
   setStrokeCap(cap: StrokeCap) {
-    this.ref.setStrokeCap({ value: cap });
+    this.ref.setStrokeCap(ckEnum(cap));
   }
 
   setStrokeJoin(join: StrokeJoin) {
-    this.ref.setStrokeJoin({ value: join });
+    this.ref.setStrokeJoin(ckEnum(join));
   }
 
   setStrokeMiter(limit: number) {

package/src/skia/web/JsiSkPath.ts

@@ -0,0 +1,369 @@
+import type { CanvasKit, Path } from "canvaskit-wasm";
+
+import { PathVerb } from "../types";
+import type {
+  FillType,
+  PathCommand,
+  PathOp,
+  SkMatrix,
+  SkPath,
+  SkPoint,
+  SkRect,
+  SkRRect,
+  StrokeOpts,
+} from "../types";
+
+import { ckEnum, HostObject, optEnum, toValue } from "./Host";
+import { JsiSkPoint } from "./JsiSkPoint";
+import { JsiSkRect } from "./JsiSkRect";
+
+export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
+  constructor(CanvasKit: CanvasKit, ref: Path) {
+    super(CanvasKit, ref, "Path");
+  }
+
+  addArc(
+    oval: SkRect,
+    startAngleInDegrees: number,
+    sweepAngleInDegrees: number
+  ) {
+    this.ref.addArc(toValue(oval), startAngleInDegrees, sweepAngleInDegrees);
+    return this;
+  }
+
+  addOval(oval: SkRect, isCCW?: boolean, startIndex?: number) {
+    this.ref.addOval(toValue(oval), isCCW, startIndex);
+    return this;
+  }
+
+  countPoints() {
+    return this.ref.countPoints();
+  }
+
+  addPoly(points: SkPoint[], close: boolean) {
+    this.ref.addPoly(
+      points.map((p) => toValue(p)),
+      close
+    );
+    return this;
+  }
+
+  moveTo(x: number, y: number) {
+    this.ref.moveTo(x, y);
+    return this;
+  }
+
+  lineTo(x: number, y: number) {
+    this.ref.lineTo(x, y);
+    return this;
+  }
+
+  makeAsWinding() {
+    const result = this.ref.makeAsWinding();
+    return result === null ? result : this;
+  }
+
+  offset(dx: number, dy: number) {
+    this.ref.offset(dx, dy);
+    return this;
+  }
+
+  rArcTo(
+    rx: number,
+    ry: number,
+    xAxisRotateInDegrees: number,
+    useSmallArc: boolean,
+    isCCW: boolean,
+    dx: number,
+    dy: number
+  ) {
+    this.ref.rArcTo(rx, ry, xAxisRotateInDegrees, useSmallArc, isCCW, dx, dy);
+    return this;
+  }
+
+  rConicTo(dx1: number, dy1: number, dx2: number, dy2: number, w: number) {
+    this.ref.rConicTo(dx1, dy1, dx2, dy2, w);
+    return this;
+  }
+
+  rCubicTo(
+    cpx1: number,
+    cpy1: number,
+    cpx2: number,
+    cpy2: number,
+    x: number,
+    y: number
+  ) {
+    this.ref.rCubicTo(cpx1, cpy1, cpx2, cpy2, x, y);
+    return this;
+  }
+
+  rMoveTo(x: number, y: number) {
+    this.ref.rMoveTo(x, y);
+    return this;
+  }
+
+  rLineTo(x: number, y: number) {
+    this.ref.rLineTo(x, y);
+    return this;
+  }
+
+  rQuadTo(x1: number, y1: number, x2: number, y2: number) {
+    this.ref.rQuadTo(x1, y1, x2, y2);
+    return this;
+  }
+
+  setFillType(fill: FillType) {
+    this.ref.setFillType(ckEnum(fill));
+  }
+
+  setIsVolatile(volatile: boolean) {
+    this.ref.setIsVolatile(volatile);
+  }
+
+  stroke(opts?: StrokeOpts) {
+    const result = this.ref.stroke(
+      opts === undefined
+        ? undefined
+        : {
+            width: opts.width,
+            // eslint-disable-next-line camelcase
+            miter_limit: opts.width,
+            precision: opts.width,
+            join: optEnum(opts.join),
+            cap: optEnum(opts.cap),
+          }
+    );
+    return result === null ? result : this;
+  }
+
+  close() {
+    this.ref.close();
+  }
+
+  reset() {
+    this.ref.reset();
+  }
+
+  rewind() {
+    this.ref.rewind();
+  }
+
+  computeTightBounds(): SkRect {
+    return new JsiSkRect(this.CanvasKit, this.ref.computeTightBounds());
+  }
+
+  arcToOval(
+    oval: SkRect,
+    startAngleInDegrees: number,
+    sweepAngleInDegrees: number,
+    forceMoveTo: boolean
+  ) {
+    this.ref.arcToOval(
+      toValue(oval),
+      startAngleInDegrees,
+      sweepAngleInDegrees,
+      forceMoveTo
+    );
+    return this;
+  }
+
+  arcToRotated(
+    rx: number,
+    ry: number,
+    xAxisRotateInDegrees: number,
+    useSmallArc: boolean,
+    isCCW: boolean,
+    x: number,
+    y: number
+  ) {
+    this.ref.arcToRotated(
+      rx,
+      ry,
+      xAxisRotateInDegrees,
+      useSmallArc,
+      isCCW,
+      x,
+      y
+    );
+    return this;
+  }
+
+  arcToTangent(x1: number, y1: number, x2: number, y2: number, radius: number) {
+    this.ref.arcToTangent(x1, y1, x2, y2, radius);
+    return this;
+  }
+
+  conicTo(x1: number, y1: number, x2: number, y2: number, w: number) {
+    this.ref.conicTo(x1, y1, x2, y2, w);
+    return this;
+  }
+
+  contains(x: number, y: number) {
+    return this.ref.contains(x, y);
+  }
+
+  copy() {
+    return new JsiSkPath(this.CanvasKit, this.ref.copy());
+  }
+
+  cubicTo(
+    cpx1: number,
+    cpy1: number,
+    cpx2: number,
+    cpy2: number,
+    x: number,
+    y: number
+  ) {
+    this.ref.cubicTo(cpx1, cpy1, cpx2, cpy2, x, y);
+    return this;
+  }
+
+  dash(on: number, off: number, phase: number) {
+    return this.ref.dash(on, off, phase);
+  }
+
+  equals(other: SkPath) {
+    return this.ref.equals(toValue(other));
+  }
+
+  getBounds() {
+    return new JsiSkRect(this.CanvasKit, this.ref.getBounds());
+  }
+
+  getFillType() {
+    return this.ref.getFillType().value;
+  }
+
+  quadTo(x1: number, y1: number, x2: number, y2: number) {
+    this.ref.quadTo(x1, y1, x2, y2);
+  }
+
+  addRect(rect: SkRect, isCCW?: boolean) {
+    this.ref.addRect(toValue(rect), isCCW);
+  }
+
+  addRRect(rrect: SkRRect, isCCW?: boolean) {
+    this.ref.addRRect(toValue(rrect), isCCW);
+    return this;
+  }
+
+  getPoint(index: number) {
+    return new JsiSkPoint(this.CanvasKit, this.ref.getPoint(index));
+  }
+
+  isEmpty() {
+    return this.ref.isEmpty();
+  }
+
+  isVolatile() {
+    return this.ref.isVolatile();
+  }
+
+  addCircle(x: number, y: number, r: number) {
+    // We leave the comment below to remind us that this is not implemented in CanvasKit
+    // throw new NotImplementedOnRNWeb();
+    this.ref.addOval(this.CanvasKit.LTRBRect(x - r, y - r, x + r, y + r));
+    return this;
+  }
+
+  getLastPt() {
+    return new JsiSkPoint(
+      this.CanvasKit,
+      this.ref.getPoint(this.ref.countPoints() - 1)
+    );
+  }
+
+  op(path: SkPath, op: PathOp) {
+    return this.ref.op(toValue(path), ckEnum(op));
+  }
+
+  simplify() {
+    return this.ref.simplify();
+  }
+
+  toSVGString() {
+    return this.ref.toSVGString();
+  }
+
+  trim(startT: number, stopT: number, isComplement: boolean) {
+    const result = this.ref.trim(startT, stopT, isComplement);
+    return result === null ? result : this;
+  }
+
+  transform(m3: SkMatrix) {
+    this.ref.transform(toValue(m3));
+  }
+
+  interpolate(end: SkPath, t: number) {
+    // Do not remove the comment below. We use it to track missing APIs in CanvasKit
+    // throw new NotImplementedOnRNWeb();
+    const cmd1 = this.toCmds();
+    const cmd2 = end.toCmds();
+    if (cmd1.length !== cmd2.length) {
+      return null;
+    }
+    const interpolated: PathCommand[] = [];
+    for (let i = 0; i < cmd1.length; i++) {
+      if (cmd1[i][0] !== cmd2[i][0]) {
+        return null;
+      }
+      const cmd: PathCommand = [cmd1[i][0]];
+      for (let j = 1; j < cmd1[i].length; j++) {
+        cmd.push(cmd2[i][j] + (cmd1[i][j] - cmd2[i][j]) * t);
+      }
+      interpolated.push(cmd);
+    }
+    const path = this.CanvasKit.Path.MakeFromCmds(interpolated.flat());
+    if (path === null) {
+      return null;
+    }
+    return new JsiSkPath(this.CanvasKit, path);
+  }
+
+  isInterpolatable(path2: SkPath): boolean {
+    // Do not remove the comment below. We use it to track missing APIs in CanvasKit
+    // throw new NotImplementedOnRNWeb();
+    const cmd1 = this.toCmds();
+    const cmd2 = path2.toCmds();
+    if (cmd1.length !== cmd2.length) {
+      return false;
+    }
+    for (let i = 0; i < cmd1.length; i++) {
+      if (cmd1[i][0] !== cmd2[i][0]) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  toCmds(): PathCommand[] {
+    const cmds: PathCommand[] = [];
+    let cmd = [];
+    const flatCmds = this.ref.toCmds();
+    const CmdCount = {
+      [PathVerb.Move]: 3,
+      [PathVerb.Line]: 3,
+      [PathVerb.Quad]: 5,
+      [PathVerb.Conic]: 6,
+      [PathVerb.Cubic]: 7,
+      [PathVerb.Close]: 0,
+      [PathVerb.Done]: 0,
+    };
+    for (let i = 0; i < flatCmds.length; i++) {
+      if (cmd.length === 0 && flatCmds[i] === PathVerb.Done) {
+        break;
+      }
+      const c = flatCmds[i];
+      cmd.push(c);
+      if (cmd.length > 1) {
+        const length = CmdCount[cmd[0] as PathVerb];
+        if (cmd.length === length) {
+          cmds.push(cmd);
+          cmd = [];
+        }
+      }
+    }
+    return cmds.concat(cmd);
+  }
+}

package/src/skia/web/JsiSkPathEffect.ts

@@ -0,0 +1,14 @@
+import type { CanvasKit, PathEffect } from "canvaskit-wasm";
+
+import type { SkPathEffect } from "../types/PathEffect";
+
+import { HostObject } from "./Host";
+
+export class JsiSkPathEffect
+  extends HostObject<PathEffect, "PathEffect">
+  implements SkPathEffect
+{
+  constructor(CanvasKit: CanvasKit, ref: PathEffect) {
+    super(CanvasKit, ref, "PathEffect");
+  }
+}

package/src/skia/web/JsiSkPathEffectFactory.ts

@@ -0,0 +1,85 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type {
+  Path1DEffectStyle,
+  PathEffectFactory,
+  SkMatrix,
+  SkPath,
+  SkPathEffect,
+} from "../types";
+
+import { ckEnum, Host, NotImplementedOnRNWeb, toValue } from "./Host";
+import { JsiSkPathEffect } from "./JsiSkPathEffect";
+
+export class JsiSkPathEffectFactory extends Host implements PathEffectFactory {
+  constructor(CanvasKit: CanvasKit) {
+    super(CanvasKit);
+  }
+
+  MakeCorner(radius: number) {
+    const pe = this.CanvasKit.PathEffect.MakeCorner(radius);
+    if (pe === null) {
+      return null;
+    }
+    return new JsiSkPathEffect(this.CanvasKit, pe);
+  }
+
+  MakeDash(intervals: number[], phase?: number) {
+    const pe = this.CanvasKit.PathEffect.MakeDash(intervals, phase);
+    return new JsiSkPathEffect(this.CanvasKit, pe);
+  }
+
+  MakeDiscrete(segLength: number, dev: number, seedAssist: number) {
+    const pe = this.CanvasKit.PathEffect.MakeDiscrete(
+      segLength,
+      dev,
+      seedAssist
+    );
+    return new JsiSkPathEffect(this.CanvasKit, pe);
+  }
+
+  MakeCompose(_outer: SkPathEffect, _inner: SkPathEffect): SkPathEffect {
+    throw new NotImplementedOnRNWeb();
+  }
+
+  MakeSum(_outer: SkPathEffect, _inner: SkPathEffect): SkPathEffect {
+    throw new NotImplementedOnRNWeb();
+  }
+
+  MakeLine2D(width: number, matrix: SkMatrix) {
+    const pe = this.CanvasKit.PathEffect.MakeLine2D(width, toValue(matrix));
+    if (pe === null) {
+      return null;
+    }
+    return new JsiSkPathEffect(this.CanvasKit, pe);
+  }
+
+  MakePath1D(
+    path: SkPath,
+    advance: number,
+    phase: number,
+    style: Path1DEffectStyle
+  ) {
+    const pe = this.CanvasKit.PathEffect.MakePath1D(
+      toValue(path),
+      advance,
+      phase,
+      ckEnum(style)
+    );
+    if (pe === null) {
+      return null;
+    }
+    return new JsiSkPathEffect(this.CanvasKit, pe);
+  }
+
+  MakePath2D(matrix: SkMatrix, path: SkPath) {
+    const pe = this.CanvasKit.PathEffect.MakePath2D(
+      toValue(matrix),
+      toValue(path)
+    );
+    if (pe === null) {
+      return null;
+    }
+    return new JsiSkPathEffect(this.CanvasKit, pe);
+  }
+}

package/src/skia/web/JsiSkPathFactory.ts

@@ -0,0 +1,54 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type { PathCommand, PathOp, SkFont, SkPath } from "../types";
+import type { PathFactory } from "../types/Path/PathFactory";
+
+import { Host, ckEnum, toValue, NotImplementedOnRNWeb } from "./Host";
+import { JsiSkPath } from "./JsiSkPath";
+
+export class JsiSkPathFactory extends Host implements PathFactory {
+  constructor(CanvasKit: CanvasKit) {
+    super(CanvasKit);
+  }
+
+  Make() {
+    return new JsiSkPath(this.CanvasKit, new this.CanvasKit.Path());
+  }
+
+  MakeFromSVGString(str: string) {
+    const path = this.CanvasKit.Path.MakeFromSVGString(str);
+    if (path === null) {
+      return null;
+    }
+    return new JsiSkPath(this.CanvasKit, path);
+  }
+
+  MakeFromOp(one: SkPath, two: SkPath, op: PathOp) {
+    const path = this.CanvasKit.Path.MakeFromOp(
+      toValue(one),
+      toValue(two),
+      ckEnum(op)
+    );
+    if (path === null) {
+      return null;
+    }
+    return new JsiSkPath(this.CanvasKit, path);
+  }
+
+  MakeFromCmds(cmds: PathCommand[]) {
+    const path = this.CanvasKit.Path.MakeFromCmds(cmds.flat());
+    if (path === null) {
+      return null;
+    }
+    return new JsiSkPath(this.CanvasKit, path);
+  }
+
+  MakeFromText(
+    _text: string,
+    _x: number,
+    _y: number,
+    _font: SkFont
+  ): SkPath | null {
+    throw new NotImplementedOnRNWeb();
+  }
+}

package/src/skia/web/JsiSkPicture.ts

@@ -0,0 +1,45 @@
+// TODO: suggest to rename SkPicture to Picture for consistency
+import type { CanvasKit, SkPicture as Picture } from "canvaskit-wasm";
+
+import type {
+  FilterMode,
+  SkRect,
+  TileMode,
+  SkPicture,
+  SkMatrix,
+} from "../types";
+
+import { HostObject, toValue, ckEnum } from "./Host";
+import { JsiSkShader } from "./JsiSkShader";
+
+export class JsiSkPicture
+  extends HostObject<Picture, "Picture">
+  implements SkPicture
+{
+  constructor(CanvasKit: CanvasKit, ref: Picture) {
+    super(CanvasKit, ref, "Picture");
+  }
+
+  makeShader(
+    tmx: TileMode,
+    tmy: TileMode,
+    mode: FilterMode,
+    localMatrix?: SkMatrix,
+    tileRect?: SkRect
+  ) {
+    return new JsiSkShader(
+      this.CanvasKit,
+      this.ref.makeShader(
+        ckEnum(tmx),
+        ckEnum(tmy),
+        ckEnum(mode),
+        localMatrix ? toValue(localMatrix) : undefined,
+        tileRect ? toValue(tileRect) : undefined
+      )
+    );
+  }
+
+  serialize() {
+    return this.ref.serialize();
+  }
+}

package/src/skia/web/JsiSkPictureFactory.ts

@@ -0,0 +1,20 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type { PictureFactory } from "../types";
+
+import { Host } from "./Host";
+import { JsiSkPicture } from "./JsiSkPicture";
+
+export class JsiSkPictureFactory extends Host implements PictureFactory {
+  constructor(CanvasKit: CanvasKit) {
+    super(CanvasKit);
+  }
+
+  MakePicture(bytes: Uint8Array | ArrayBuffer) {
+    const pic = this.CanvasKit.MakePicture(bytes);
+    if (pic === null) {
+      return null;
+    }
+    return new JsiSkPicture(this.CanvasKit, pic);
+  }
+}

package/src/skia/web/JsiSkPictureRecorder.ts

@@ -0,0 +1,31 @@
+import type { CanvasKit, PictureRecorder } from "canvaskit-wasm";
+
+import type { SkRect } from "../types";
+import type { SkPictureRecorder } from "../types/Picture/PictureRecorder";
+
+import { HostObject, toValue } from "./Host";
+import { JsiSkCanvas } from "./JsiSkCanvas";
+import { JsiSkPicture } from "./JsiSkPicture";
+
+export class JsiSkPictureRecorder
+  extends HostObject<PictureRecorder, "PictureRecorder">
+  implements SkPictureRecorder
+{
+  constructor(CanvasKit: CanvasKit, ref: PictureRecorder) {
+    super(CanvasKit, ref, "PictureRecorder");
+  }
+
+  beginRecording(bounds: SkRect) {
+    return new JsiSkCanvas(
+      this.CanvasKit,
+      this.ref.beginRecording(toValue(bounds))
+    );
+  }
+
+  finishRecordingAsPicture() {
+    return new JsiSkPicture(
+      this.CanvasKit,
+      this.ref.finishRecordingAsPicture()
+    );
+  }
+}