@shopify/react-native-skia 0.1.130 → 0.1.133

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

@@ -1,10 +1,20 @@
 import type { CanvasKit, Rect } from "canvaskit-wasm";
 
-import type { SkRect } from "../../types";
+import type { SkRect } from "../types";
 
 import { HostObject } from "./Host";
 
 export class JsiSkRect extends HostObject<Rect, "Rect"> implements SkRect {
+  static fromValue(CanvasKit: CanvasKit, rect: SkRect) {
+    if (rect instanceof JsiSkRect) {
+      return rect;
+    }
+    return new JsiSkRect(
+      CanvasKit,
+      CanvasKit.XYWHRect(rect.x, rect.y, rect.width, rect.height)
+    );
+  }
+
   constructor(CanvasKit: CanvasKit, ref: Rect) {
     super(CanvasKit, ref, "Rect");
   }

package/src/skia/web/JsiSkRuntimeEffect.ts

@@ -0,0 +1,57 @@
+import type { CanvasKit, RuntimeEffect } from "canvaskit-wasm";
+
+import type { SkMatrix, SkShader } from "../types";
+import type { SkRuntimeEffect } from "../types/RuntimeEffect/RuntimeEffect";
+
+import { HostObject, toValue } from "./Host";
+import { JsiSkShader } from "./JsiSkShader";
+
+export class JsiSkRuntimeEffect
+  extends HostObject<RuntimeEffect, "RuntimeEffect">
+  implements SkRuntimeEffect
+{
+  constructor(CanvasKit: CanvasKit, ref: RuntimeEffect) {
+    super(CanvasKit, ref, "RuntimeEffect");
+  }
+
+  makeShader(uniforms: number[], localMatrix?: SkMatrix) {
+    return new JsiSkShader(
+      this.CanvasKit,
+      this.ref.makeShader(
+        uniforms,
+        localMatrix !== undefined ? toValue(localMatrix) : localMatrix
+      )
+    );
+  }
+
+  makeShaderWithChildren(
+    uniforms: number[],
+    children?: SkShader[],
+    localMatrix?: SkMatrix
+  ) {
+    return new JsiSkShader(
+      this.CanvasKit,
+      this.ref.makeShaderWithChildren(
+        uniforms,
+        children?.map((child) => toValue(child)),
+        localMatrix !== undefined ? toValue(localMatrix) : localMatrix
+      )
+    );
+  }
+
+  getUniform(index: number) {
+    return this.ref.getUniform(index);
+  }
+
+  getUniformCount() {
+    return this.ref.getUniformCount();
+  }
+
+  getUniformFloatCount() {
+    return this.ref.getUniformFloatCount();
+  }
+
+  getUniformName(index: number) {
+    return this.ref.getUniformName(index);
+  }
+}

package/src/skia/web/JsiSkRuntimeEffectFactory.ts

@@ -0,0 +1,23 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type { RuntimeEffectFactory } from "../types/RuntimeEffect/RuntimeEffectFactory";
+
+import { Host } from "./Host";
+import { JsiSkRuntimeEffect } from "./JsiSkRuntimeEffect";
+
+export class JsiSkRuntimeEffectFactory
+  extends Host
+  implements RuntimeEffectFactory
+{
+  constructor(CanvasKit: CanvasKit) {
+    super(CanvasKit);
+  }
+
+  Make(sksl: string) {
+    const re = this.CanvasKit.RuntimeEffect.Make(sksl);
+    if (re === null) {
+      return null;
+    }
+    return new JsiSkRuntimeEffect(this.CanvasKit, re);
+  }
+}

package/src/skia/web/JsiSkSVGFactory.ts

@@ -0,0 +1,20 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type { SkData, SkSVG } from "../types";
+import type { SVGFactory } from "../types/SVG/SVGFactory";
+
+import { Host, NotImplementedOnRNWeb } from "./Host";
+
+export class JsiSkSVGFactory extends Host implements SVGFactory {
+  constructor(CanvasKit: CanvasKit) {
+    super(CanvasKit);
+  }
+
+  MakeFromData(_data: SkData): SkSVG | null {
+    throw new NotImplementedOnRNWeb();
+  }
+
+  MakeFromString(_str: string): SkSVG | null {
+    throw new NotImplementedOnRNWeb();
+  }
+}

package/src/skia/web/JsiSkShader.ts

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

package/src/skia/web/JsiSkShaderFactory.ts

@@ -0,0 +1,181 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type {
+  BlendMode,
+  SkColor,
+  SkMatrix,
+  SkPoint,
+  SkShader,
+  TileMode,
+} from "../types";
+import type { ShaderFactory } from "../types/Shader/ShaderFactory";
+
+import { Host, toValue, ckEnum } from "./Host";
+import { JsiSkShader } from "./JsiSkShader";
+
+export class JsiSkShaderFactory extends Host implements ShaderFactory {
+  constructor(CanvasKit: CanvasKit) {
+    super(CanvasKit);
+  }
+
+  MakeLinearGradient(
+    start: SkPoint,
+    end: SkPoint,
+    colors: SkColor[],
+    pos: number[] | null,
+    mode: TileMode,
+    localMatrix?: SkMatrix,
+    flags?: number
+  ) {
+    return new JsiSkShader(
+      this.CanvasKit,
+      this.CanvasKit.Shader.MakeLinearGradient(
+        toValue(start),
+        toValue(end),
+        colors,
+        pos,
+        ckEnum(mode),
+        localMatrix === undefined ? undefined : toValue(localMatrix),
+        flags
+      )
+    );
+  }
+
+  MakeRadialGradient(
+    center: SkPoint,
+    radius: number,
+    colors: SkColor[],
+    pos: number[] | null,
+    mode: TileMode,
+    localMatrix?: SkMatrix,
+    flags?: number
+  ) {
+    return new JsiSkShader(
+      this.CanvasKit,
+      this.CanvasKit.Shader.MakeRadialGradient(
+        toValue(center),
+        radius,
+        colors,
+        pos,
+        ckEnum(mode),
+        localMatrix === undefined ? undefined : toValue(localMatrix),
+        flags
+      )
+    );
+  }
+
+  MakeTwoPointConicalGradient(
+    start: SkPoint,
+    startRadius: number,
+    end: SkPoint,
+    endRadius: number,
+    colors: SkColor[],
+    pos: number[] | null,
+    mode: TileMode,
+    localMatrix?: SkMatrix,
+    flags?: number
+  ) {
+    return new JsiSkShader(
+      this.CanvasKit,
+      this.CanvasKit.Shader.MakeTwoPointConicalGradient(
+        toValue(start),
+        startRadius,
+        toValue(end),
+        endRadius,
+        colors,
+        pos,
+        ckEnum(mode),
+        localMatrix === undefined ? undefined : toValue(localMatrix),
+        flags
+      )
+    );
+  }
+
+  MakeSweepGradient(
+    cx: number,
+    cy: number,
+    colors: SkColor[],
+    pos: number[] | null,
+    mode: TileMode,
+    localMatrix?: SkMatrix | null,
+    flags?: number,
+    startAngleInDegrees?: number,
+    endAngleInDegrees?: number
+  ) {
+    return new JsiSkShader(
+      this.CanvasKit,
+      this.CanvasKit.Shader.MakeSweepGradient(
+        cx,
+        cy,
+        colors,
+        pos,
+        ckEnum(mode),
+        localMatrix === undefined || localMatrix === null
+          ? undefined
+          : toValue(localMatrix),
+        flags,
+        startAngleInDegrees,
+        endAngleInDegrees
+      )
+    );
+  }
+
+  MakeTurbulence(
+    baseFreqX: number,
+    baseFreqY: number,
+    octaves: number,
+    seed: number,
+    tileW: number,
+    tileH: number
+  ) {
+    return new JsiSkShader(
+      this.CanvasKit,
+      this.CanvasKit.Shader.MakeTurbulence(
+        baseFreqX,
+        baseFreqY,
+        octaves,
+        seed,
+        tileW,
+        tileH
+      )
+    );
+  }
+
+  MakeFractalNoise(
+    baseFreqX: number,
+    baseFreqY: number,
+    octaves: number,
+    seed: number,
+    tileW: number,
+    tileH: number
+  ) {
+    return new JsiSkShader(
+      this.CanvasKit,
+      this.CanvasKit.Shader.MakeFractalNoise(
+        baseFreqX,
+        baseFreqY,
+        octaves,
+        seed,
+        tileW,
+        tileH
+      )
+    );
+  }
+
+  MakeBlend(mode: BlendMode, one: SkShader, two: SkShader) {
+    return new JsiSkShader(
+      this.CanvasKit,
+      this.CanvasKit.Shader.MakeBlend(ckEnum(mode), toValue(one), toValue(two))
+    );
+  }
+
+  MakeColor(color: SkColor) {
+    return new JsiSkShader(
+      this.CanvasKit,
+      this.CanvasKit.Shader.MakeColor(
+        toValue(color),
+        this.CanvasKit.ColorSpace.SRGB
+      )
+    );
+  }
+}

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

@@ -1,6 +1,6 @@
 import type { CanvasKit, Surface } from "canvaskit-wasm";
 
-import type { SkCanvas, SkImage, SkRect, SkSurface } from "../../types";
+import type { SkCanvas, SkImage, SkRect, SkSurface } from "../types";
 
 import { HostObject, toUndefinedableValue } from "./Host";
 import { JsiSkCanvas } from "./JsiSkCanvas";

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

@@ -1,6 +1,6 @@
 import type { CanvasKit } from "canvaskit-wasm";
 
-import type { SurfaceFactory } from "../../types";
+import type { SurfaceFactory } from "../types";
 
 import { Host } from "./Host";
 import { JsiSkSurface } from "./JsiSkSurface";

package/src/skia/web/JsiSkTextBlob.ts

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

package/src/skia/web/JsiSkTextBlobFactory.ts

@@ -0,0 +1,49 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type { SkFont, SkRSXform } from "../types";
+import type { TextBlobFactory } from "../types/TextBlob";
+
+import { Host, toValue } from "./Host";
+import { JsiSkTextBlob } from "./JsiSkTextBlob";
+
+export class JsiSkTextBlobFactory extends Host implements TextBlobFactory {
+  constructor(CanvasKit: CanvasKit) {
+    super(CanvasKit);
+  }
+
+  MakeFromText(str: string, font: SkFont) {
+    return new JsiSkTextBlob(
+      this.CanvasKit,
+      this.CanvasKit.TextBlob.MakeFromText(str, toValue(font))
+    );
+  }
+
+  MakeFromGlyphs(glyphs: number[], font: SkFont) {
+    return new JsiSkTextBlob(
+      this.CanvasKit,
+      this.CanvasKit.TextBlob.MakeFromGlyphs(glyphs, toValue(font))
+    );
+  }
+
+  MakeFromRSXform(str: string, rsxforms: SkRSXform[], font: SkFont) {
+    return new JsiSkTextBlob(
+      this.CanvasKit,
+      this.CanvasKit.TextBlob.MakeFromRSXform(
+        str,
+        rsxforms.map((f) => toValue(f)),
+        toValue(font)
+      )
+    );
+  }
+
+  MakeFromRSXformGlyphs(glyphs: number[], rsxforms: SkRSXform[], font: SkFont) {
+    return new JsiSkTextBlob(
+      this.CanvasKit,
+      this.CanvasKit.TextBlob.MakeFromRSXformGlyphs(
+        glyphs,
+        rsxforms.map((f) => toValue(f)),
+        toValue(font)
+      )
+    );
+  }
+}

package/src/skia/web/JsiSkTypeface.ts

@@ -0,0 +1,28 @@
+import type { CanvasKit, Typeface } from "canvaskit-wasm";
+
+import type { SkTypeface } from "../types";
+
+import { HostObject } from "./Host";
+
+export class JsiSkTypeface
+  extends HostObject<Typeface, "Typeface">
+  implements SkTypeface
+{
+  constructor(CanvasKit: CanvasKit, ref: Typeface) {
+    super(CanvasKit, ref, "Typeface");
+  }
+
+  get bold(): boolean {
+    console.warn(
+      "Typeface.bold is deprecated and will be removed in a future release. The property will return false."
+    );
+    return false;
+  }
+
+  get italic(): boolean {
+    console.warn(
+      "Typeface.italic is deprecated and will be removed in a future release. The property will return false."
+    );
+    return false;
+  }
+}

package/src/skia/web/JsiSkTypefaceFactory.tsx

@@ -0,0 +1,20 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type { SkData, TypefaceFactory } from "../types";
+
+import { Host, toValue } from "./Host";
+import { JsiSkTypeface } from "./JsiSkTypeface";
+
+export class JsiSkTypefaceFactory extends Host implements TypefaceFactory {
+  constructor(CanvasKit: CanvasKit) {
+    super(CanvasKit);
+  }
+
+  MakeFreeTypeFaceFromData(data: SkData) {
+    const tf = this.CanvasKit.Typeface.MakeFreeTypeFaceFromData(toValue(data));
+    if (tf === null) {
+      return null;
+    }
+    return new JsiSkTypeface(this.CanvasKit, tf);
+  }
+}

package/src/skia/web/JsiSkVertices.ts

@@ -0,0 +1,23 @@
+import type { CanvasKit, Vertices } from "canvaskit-wasm";
+
+import type { SkVertices } from "../types";
+
+import { HostObject } from "./Host";
+import { JsiSkRect } from "./JsiSkRect";
+
+export class JsiSkVertices
+  extends HostObject<Vertices, "Vertices">
+  implements SkVertices
+{
+  constructor(CanvasKit: CanvasKit, ref: Vertices) {
+    super(CanvasKit, ref, "Vertices");
+  }
+
+  bounds() {
+    return new JsiSkRect(this.CanvasKit, this.ref.bounds());
+  }
+
+  uniqueID() {
+    return this.ref.uniqueID();
+  }
+}

package/src/skia/web/JsiSkVerticesFactory.ts

@@ -0,0 +1,41 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type { SkColor, SkPoint, VertexMode } from "../types";
+
+import { ckEnum } from "./Host";
+import { JsiSkVertices } from "./JsiSkVertices";
+
+const concat = (...arrays: Float32Array[]) => {
+  let totalLength = 0;
+  for (const arr of arrays) {
+    totalLength += arr.length;
+  }
+  const result = new Float32Array(totalLength);
+  let offset = 0;
+  for (const arr of arrays) {
+    result.set(arr, offset);
+    offset += arr.length;
+  }
+  return result;
+};
+
+export const MakeVertices = (
+  CanvasKit: CanvasKit,
+  mode: VertexMode,
+  positions: SkPoint[],
+  textureCoordinates?: SkPoint[] | null,
+  colors?: SkColor[],
+  indices?: number[] | null,
+  isVolatile?: boolean
+) =>
+  new JsiSkVertices(
+    CanvasKit,
+    CanvasKit.MakeVertices(
+      ckEnum(mode),
+      positions.map(({ x, y }) => [x, y]).flat(),
+      (textureCoordinates || []).map(({ x, y }) => [x, y]).flat(),
+      !colors ? null : colors.reduce((a, c) => concat(a, c)),
+      indices,
+      isVolatile
+    )
+  );

package/src/skia/web/JsiSkia.ts

@@ -0,0 +1,98 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type {
+  SkContourMeasureIter,
+  Skia,
+  SkPath,
+  SkRect,
+  SkRuntimeEffect,
+  SkRuntimeShaderBuilder,
+  SkTypeface,
+} from "../types";
+
+import { JsiSkPoint } from "./JsiSkPoint";
+import { JsiSkPaint } from "./JsiSkPaint";
+import { JsiSkRect } from "./JsiSkRect";
+import { Color } from "./JsiSkColor";
+import { JsiSkSurfaceFactory } from "./JsiSkSurfaceFactory";
+import { JsiSkRRect } from "./JsiSkRRect";
+import { JsiSkRSXform } from "./JsiSkRSXform";
+import { toValue } from "./Host";
+import { JsiSkContourMeasureIter } from "./JsiSkContourMeasureIter";
+import { JsiSkPictureRecorder } from "./JsiSkPictureRecorder";
+import { JsiSkPictureFactory } from "./JsiSkPictureFactory";
+import { JsiSkPathFactory } from "./JsiSkPathFactory";
+import { JsiSkMatrix } from "./JsiSkMatrix";
+import { JsiSkColorFilterFactory } from "./JsiSkColorFilterFactory";
+import { JsiSkTypefaceFactory } from "./JsiSkTypefaceFactory";
+import { JsiSkMaskFilterFactory } from "./JsiSkMaskFilterFactory";
+import { JsiSkRuntimeEffectFactory } from "./JsiSkRuntimeEffectFactory";
+import { JsiSkImageFilterFactory } from "./JsiSkImageFilterFactory";
+import { JsiSkShaderFactory } from "./JsiSkShaderFactory";
+import { JsiSkPathEffectFactory } from "./JsiSkPathEffectFactory";
+import { JsiSkDataFactory } from "./JsiSkDataFactory";
+import { JsiSkImageFactory } from "./JsiSkImageFactory";
+import { JsiSkSVGFactory } from "./JsiSkSVGFactory";
+import { JsiSkTextBlobFactory } from "./JsiSkTextBlobFactory";
+import { JsiSkFontMgrFactory } from "./JsiSkFontMgrFactory";
+import { JsiSkFont } from "./JsiSkFont";
+import { MakeVertices } from "./JsiSkVerticesFactory";
+
+export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
+  Point: (x: number, y: number) =>
+    new JsiSkPoint(CanvasKit, Float32Array.of(x, y)),
+  RuntimeShaderBuilder: (_: SkRuntimeEffect): SkRuntimeShaderBuilder => {
+    throw new Error("Not implemented on React Native Web");
+  },
+  RRectXY: (rect: SkRect, rx: number, ry: number) =>
+    new JsiSkRRect(CanvasKit, CanvasKit.RRectXY(toValue(rect), rx, ry)),
+  RSXform: (scos: number, ssin: number, tx: number, ty: number) =>
+    new JsiSkRSXform(CanvasKit, Float32Array.of(scos, ssin, tx, ty)),
+  Color,
+  ContourMeasureIter: (
+    path: SkPath,
+    forceClosed: boolean,
+    resScale: number
+  ): SkContourMeasureIter =>
+    new JsiSkContourMeasureIter(
+      CanvasKit,
+      new CanvasKit.ContourMeasureIter(toValue(path), forceClosed, resScale)
+    ),
+  Paint: () => new JsiSkPaint(CanvasKit, new CanvasKit.Paint()),
+  PictureRecorder: () =>
+    new JsiSkPictureRecorder(CanvasKit, new CanvasKit.PictureRecorder()),
+  Picture: new JsiSkPictureFactory(CanvasKit),
+  Path: new JsiSkPathFactory(CanvasKit),
+  Matrix: (matrix?: number[]) =>
+    new JsiSkMatrix(
+      CanvasKit,
+      matrix
+        ? Float32Array.of(...matrix)
+        : Float32Array.of(...CanvasKit.Matrix.identity())
+    ),
+  ColorFilter: new JsiSkColorFilterFactory(CanvasKit),
+  Font: (typeface?: SkTypeface, size?: number) =>
+    new JsiSkFont(
+      CanvasKit,
+      new CanvasKit.Font(
+        typeface === undefined ? null : toValue(typeface),
+        size
+      )
+    ),
+  Typeface: new JsiSkTypefaceFactory(CanvasKit),
+  MaskFilter: new JsiSkMaskFilterFactory(CanvasKit),
+  RuntimeEffect: new JsiSkRuntimeEffectFactory(CanvasKit),
+  ImageFilter: new JsiSkImageFilterFactory(CanvasKit),
+  Shader: new JsiSkShaderFactory(CanvasKit),
+  PathEffect: new JsiSkPathEffectFactory(CanvasKit),
+  MakeVertices: MakeVertices.bind(null, CanvasKit),
+  Data: new JsiSkDataFactory(CanvasKit),
+  Image: new JsiSkImageFactory(CanvasKit),
+  SVG: new JsiSkSVGFactory(CanvasKit),
+  TextBlob: new JsiSkTextBlobFactory(CanvasKit),
+  FontMgr: new JsiSkFontMgrFactory(CanvasKit),
+  XYWHRect: (x: number, y: number, width: number, height: number) => {
+    return new JsiSkRect(CanvasKit, CanvasKit.XYWHRect(x, y, width, height));
+  },
+  Surface: new JsiSkSurfaceFactory(CanvasKit),
+});

package/src/skia/web/index.ts

@@ -1 +1 @@
-export * from "./api";
+export * from "./JsiSkia";

package/src/values/web/api.ts

@@ -23,11 +23,11 @@ export const ValueApi: ISkiaValueApi = {
     return new RNSkDerivedValue(cb, values);
   },
   createClockValue: function (): SkiaClockValue {
-    return new RNSkClockValue(requestAnimationFrame);
+    return new RNSkClockValue(requestAnimationFrame.bind(window));
   },
   createAnimation: function <S extends AnimationState = AnimationState>(
     cb: (t: number, state: S | undefined) => S
   ): SkiaAnimation {
-    return new RNSkAnimation(cb, requestAnimationFrame);
+    return new RNSkAnimation(cb, requestAnimationFrame.bind(window));
   },
 };