@shopify/react-native-skia 0.1.128 → 0.1.131

package/src/skia/web/JsiSkColorFilterFactory.ts

@@ -0,0 +1,67 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type {
+  ColorFilterFactory,
+  SkColorFilter,
+  InputColorMatrix,
+  SkColor,
+  BlendMode,
+} from "../types";
+
+import { ckEnum, Host, toValue, NotImplementedOnRNWeb } from "./Host";
+import { JsiSkColorFilter } from "./JsiSkColorFilter";
+
+export class JsiSkColorFilterFactory
+  extends Host
+  implements ColorFilterFactory
+{
+  constructor(CanvasKit: CanvasKit) {
+    super(CanvasKit);
+  }
+
+  MakeMatrix(cMatrix: InputColorMatrix) {
+    return new JsiSkColorFilter(
+      this.CanvasKit,
+      this.CanvasKit.ColorFilter.MakeMatrix(cMatrix)
+    );
+  }
+
+  MakeBlend(color: SkColor, mode: BlendMode) {
+    return new JsiSkColorFilter(
+      this.CanvasKit,
+      this.CanvasKit.ColorFilter.MakeBlend(toValue(color), ckEnum(mode))
+    );
+  }
+
+  MakeCompose(outer: SkColorFilter, inner: SkColorFilter) {
+    return new JsiSkColorFilter(
+      this.CanvasKit,
+      this.CanvasKit.ColorFilter.MakeCompose(toValue(outer), toValue(inner))
+    );
+  }
+
+  MakeLerp(t: number, dst: SkColorFilter, src: SkColorFilter) {
+    return new JsiSkColorFilter(
+      this.CanvasKit,
+      this.CanvasKit.ColorFilter.MakeLerp(t, toValue(dst), toValue(src))
+    );
+  }
+
+  MakeLinearToSRGBGamma() {
+    return new JsiSkColorFilter(
+      this.CanvasKit,
+      this.CanvasKit.ColorFilter.MakeLinearToSRGBGamma()
+    );
+  }
+
+  MakeSRGBToLinearGamma() {
+    return new JsiSkColorFilter(
+      this.CanvasKit,
+      this.CanvasKit.ColorFilter.MakeSRGBToLinearGamma()
+    );
+  }
+
+  MakeLumaColorFilter(): SkColorFilter {
+    throw new NotImplementedOnRNWeb();
+  }
+}

package/src/skia/web/JsiSkContourMeasure.ts

@@ -0,0 +1,35 @@
+import type { CanvasKit, ContourMeasure } from "canvaskit-wasm";
+
+import type { SkContourMeasure } from "../types";
+
+import { HostObject } from "./Host";
+import { JsiSkPath } from "./JsiSkPath";
+
+export class JsiSkContourMeasure
+  extends HostObject<ContourMeasure, "ContourMeasure">
+  implements SkContourMeasure
+{
+  constructor(CanvasKit: CanvasKit, ref: ContourMeasure) {
+    super(CanvasKit, ref, "ContourMeasure");
+  }
+
+  getPosTan(distance: number) {
+    const [px, py, tx, ty] = this.ref.getPosTan(distance);
+    return { px, py, tx, ty };
+  }
+
+  getSegment(startD: number, stopD: number, startWithMoveTo: boolean) {
+    return new JsiSkPath(
+      this.CanvasKit,
+      this.ref.getSegment(startD, stopD, startWithMoveTo)
+    );
+  }
+
+  isClosed() {
+    return this.ref.isClosed();
+  }
+
+  length() {
+    return this.ref.length();
+  }
+}

package/src/skia/web/JsiSkContourMeasureIter.ts

@@ -0,0 +1,23 @@
+import type { CanvasKit, ContourMeasureIter } from "canvaskit-wasm";
+
+import type { SkContourMeasureIter } from "../types/ContourMeasure";
+
+import { HostObject } from "./Host";
+import { JsiSkContourMeasure } from "./JsiSkContourMeasure";
+
+export class JsiSkContourMeasureIter
+  extends HostObject<ContourMeasureIter, "ContourMeasureIter">
+  implements SkContourMeasureIter
+{
+  constructor(CanvasKit: CanvasKit, ref: ContourMeasureIter) {
+    super(CanvasKit, ref, "ContourMeasureIter");
+  }
+
+  next() {
+    const result = this.ref.next();
+    if (result === null) {
+      return null;
+    }
+    return new JsiSkContourMeasure(this.CanvasKit, result);
+  }
+}

package/src/skia/web/JsiSkData.ts

@@ -0,0 +1,13 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type { SkData } from "../types";
+
+import { HostObject } from "./Host";
+
+type Data = ArrayBuffer;
+
+export class JsiSkData extends HostObject<Data, "Data"> implements SkData {
+  constructor(CanvasKit: CanvasKit, ref: Data) {
+    super(CanvasKit, ref, "Data");
+  }
+}

package/src/skia/web/JsiSkDataFactory.ts

@@ -0,0 +1,35 @@
+/*global btoa, atob*/
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type { SkData } from "../types";
+import type { DataFactory } from "../types/Data/DataFactory";
+
+import { Host } from "./Host";
+import { JsiSkData } from "./JsiSkData";
+
+export class JsiSkDataFactory extends Host implements DataFactory {
+  constructor(CanvasKit: CanvasKit) {
+    super(CanvasKit);
+  }
+
+  fromURI(uri: string) {
+    return fetch(uri)
+      .then((response) => response.arrayBuffer())
+      .then((data) => new JsiSkData(this.CanvasKit, data));
+  }
+  /**
+   * Creates a new Data object from a byte array.
+   * @param bytes An array of bytes representing the data
+   */
+  fromBytes(bytes: Uint8Array) {
+    return new JsiSkData(this.CanvasKit, bytes);
+  }
+  /**
+   * Creates a new Data object from a base64 encoded string.
+   * @param base64 A Base64 encoded string representing the data
+   */
+  fromBase64(base64: string): SkData {
+    const bytes = Uint8Array.from(atob(base64), (c) => c.charCodeAt(0));
+    return this.fromBytes(bytes);
+  }
+}

package/src/skia/web/JsiSkFont.ts

@@ -0,0 +1,124 @@
+import type { CanvasKit, Font } from "canvaskit-wasm";
+
+import type {
+  FontEdging,
+  FontHinting,
+  SkFont,
+  SkPaint,
+  SkPoint,
+  SkRect,
+  SkTypeface,
+} from "../types";
+
+import { HostObject, NotImplementedOnRNWeb, toValue, ckEnum } from "./Host";
+import { JsiSkRect } from "./JsiSkRect";
+import { JsiSkTypeface } from "./JsiSkTypeface";
+
+export class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
+  constructor(CanvasKit: CanvasKit, ref: Font) {
+    super(CanvasKit, ref, "Font");
+  }
+
+  measureText(_text: string, _paint?: SkPaint): SkRect {
+    throw new NotImplementedOnRNWeb();
+  }
+
+  getMetrics() {
+    const result = this.ref.getMetrics();
+    return {
+      ascent: result.ascent,
+      descent: result.descent,
+      leading: result.leading,
+      bounds: result.bounds
+        ? new JsiSkRect(this.CanvasKit, result.bounds)
+        : undefined,
+    };
+  }
+
+  getGlyphIDs(str: string, numCodePoints?: number) {
+    // TODO: Fix return value in the C++ implementation
+    return [...this.ref.getGlyphIDs(str, numCodePoints)];
+  }
+
+  // TODO: Fix return value in the C++ implementation, it return float32
+  getGlyphWidths(glyphs: number[], paint?: SkPaint | null) {
+    return this.ref.getGlyphWidths(glyphs, paint ? toValue(paint) : null);
+  }
+
+  getGlyphIntercepts(
+    glyphs: number[],
+    positions: SkPoint[],
+    top: number,
+    bottom: number
+  ) {
+    return [
+      ...this.ref.getGlyphIntercepts(
+        glyphs,
+        positions.map((p) => toValue(p)),
+        top,
+        bottom
+      ),
+    ];
+  }
+
+  getScaleX() {
+    return this.ref.getScaleX();
+  }
+
+  getSize() {
+    return this.ref.getSize();
+  }
+
+  getSkewX() {
+    return this.ref.getSkewX();
+  }
+
+  isEmbolden() {
+    return this.ref.isEmbolden();
+  }
+
+  getTypeface() {
+    const tf = this.ref.getTypeface();
+    return tf ? new JsiSkTypeface(this.CanvasKit, tf) : null;
+  }
+
+  setEdging(edging: FontEdging) {
+    this.ref.setEdging(ckEnum(edging));
+  }
+
+  setEmbeddedBitmaps(embeddedBitmaps: boolean) {
+    this.ref.setEmbeddedBitmaps(embeddedBitmaps);
+  }
+
+  setHinting(hinting: FontHinting) {
+    this.ref.setHinting(ckEnum(hinting));
+  }
+
+  setLinearMetrics(linearMetrics: boolean) {
+    this.ref.setLinearMetrics(linearMetrics);
+  }
+
+  setScaleX(sx: number) {
+    this.ref.setScaleX(sx);
+  }
+
+  setSize(points: number) {
+    this.ref.setSize(points);
+  }
+
+  setSkewX(sx: number) {
+    this.ref.setSkewX(sx);
+  }
+
+  setEmbolden(embolden: boolean) {
+    this.ref.setEmbolden(embolden);
+  }
+
+  setSubpixel(subpixel: boolean) {
+    this.ref.setSubpixel(subpixel);
+  }
+
+  setTypeface(face: SkTypeface | null) {
+    this.ref.setTypeface(face ? toValue(face) : null);
+  }
+}

package/src/skia/web/JsiSkFontMgr.ts

@@ -0,0 +1,42 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type { FontStyle, SkFontMgr, SkTypeface } from "../types";
+
+import { HostObject } from "./Host";
+
+export class JsiSkFontMgr
+  extends HostObject<null, "FontMgr">
+  implements SkFontMgr
+{
+  constructor(CanvasKit: CanvasKit) {
+    console.warn(
+      // eslint-disable-next-line max-len
+      "Using system fonts is deprecated. Please use the font property instead: https://shopify.github.io/react-native-skia/docs/text/fonts"
+    );
+    super(CanvasKit, null, "FontMgr");
+  }
+
+  countFamilies() {
+    console.warn(
+      "countFamilies() is deprecated. It returns 0 on React Native Web"
+    );
+    return 0;
+  }
+
+  getFamilyName(_index: number) {
+    console.warn(
+      "getFamilyName() is deprecated. It returns an empty string on React Native Web"
+    );
+    return "";
+  }
+
+  matchFamilyStyle(
+    _familyName: string,
+    _fontStyle?: FontStyle
+  ): SkTypeface | null {
+    console.warn(
+      "matchFamilyStyle() is deprecated. It returns null on React Native Web"
+    );
+    return null;
+  }
+}

package/src/skia/web/JsiSkFontMgrFactory.ts

@@ -0,0 +1,18 @@
+/*global atob*/
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type { SkFontMgr } from "../types";
+import type { FontMgrFactory } from "../types/FontMgr/FontMgrFactory";
+
+import { Host } from "./Host";
+import { JsiSkFontMgr } from "./JsiSkFontMgr";
+
+export class JsiSkFontMgrFactory extends Host implements FontMgrFactory {
+  constructor(CanvasKit: CanvasKit) {
+    super(CanvasKit);
+  }
+
+  RefDefault(): SkFontMgr {
+    return new JsiSkFontMgr(this.CanvasKit);
+  }
+}

package/src/skia/web/JsiSkImage.ts

@@ -0,0 +1,66 @@
+import type { CanvasKit, Image } from "canvaskit-wasm";
+
+import type {
+  ImageFormat,
+  FilterMode,
+  MipmapMode,
+  SkImage,
+  SkMatrix,
+  SkShader,
+  TileMode,
+} from "../types";
+
+import { ckEnum, HostObject } from "./Host";
+
+export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
+  constructor(CanvasKit: CanvasKit, ref: Image) {
+    super(CanvasKit, ref, "Image");
+  }
+
+  height() {
+    return this.ref.height();
+  }
+
+  width() {
+    return this.ref.width();
+  }
+
+  makeShaderOptions(
+    _tx: TileMode,
+    _ty: TileMode,
+    _fm: FilterMode,
+    _mm: MipmapMode,
+    _localMatrix?: SkMatrix
+  ): SkShader {
+    throw new Error("Not implemented yet");
+  }
+
+  makeShaderCubic(
+    _tx: TileMode,
+    _ty: TileMode,
+    _B: number,
+    _C: number,
+    _localMatrix?: SkMatrix
+  ): SkShader {
+    throw new Error("Not implemented yet");
+  }
+
+  encodeToBytes(fmt?: ImageFormat, quality?: number): Uint8Array {
+    let result: Uint8Array | null;
+    if (fmt && quality) {
+      result = this.ref.encodeToBytes(ckEnum(fmt), quality);
+    } else if (fmt) {
+      result = this.ref.encodeToBytes(ckEnum(fmt));
+    } else {
+      result = this.ref.encodeToBytes();
+    }
+    if (!result) {
+      throw new Error("encodeToBytes failed");
+    }
+    return result;
+  }
+
+  encodeToBase64(_fmt?: ImageFormat, _quality?: number): string {
+    throw new Error("Not implemented yet");
+  }
+}

package/src/skia/web/JsiSkImageFactory.ts

@@ -0,0 +1,40 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type { SkData, ImageInfo } from "../types";
+import type { ImageFactory } from "../types/Image/ImageFactory";
+
+import { Host, toValue, ckEnum } from "./Host";
+import { JsiSkImage } from "./JsiSkImage";
+
+export class JsiSkImageFactory extends Host implements ImageFactory {
+  constructor(CanvasKit: CanvasKit) {
+    super(CanvasKit);
+  }
+
+  MakeImageFromEncoded(encoded: SkData) {
+    const image = this.CanvasKit.MakeImageFromEncoded(toValue(encoded));
+    if (image === null) {
+      return null;
+    }
+    return new JsiSkImage(this.CanvasKit, image);
+  }
+
+  MakeImage(info: ImageInfo, data: SkData, bytesPerRow: number) {
+    // see toSkImageInfo() from canvaskit
+    const image = this.CanvasKit.MakeImage(
+      {
+        alphaType: ckEnum(info.alphaType),
+        colorSpace: this.CanvasKit.ColorSpace.SRGB,
+        colorType: ckEnum(info.colorType),
+        height: info.height,
+        width: info.width,
+      },
+      toValue(data),
+      bytesPerRow
+    );
+    if (image === null) {
+      return null;
+    }
+    return new JsiSkImage(this.CanvasKit, image);
+  }
+}

package/src/skia/web/JsiSkImageFilter.ts

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

package/src/skia/web/JsiSkMaskFilter.ts

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

package/src/skia/web/JsiSkMaskFilterFactory.ts

@@ -0,0 +1,20 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type { BlurStyle } from "../types";
+import type { MaskFilterFactory } from "../types/MaskFilter";
+
+import { Host, ckEnum } from "./Host";
+import { JsiSkMaskFilter } from "./JsiSkMaskFilter";
+
+export class JsiSkMaskFilterFactory extends Host implements MaskFilterFactory {
+  constructor(CanvasKit: CanvasKit) {
+    super(CanvasKit);
+  }
+
+  MakeBlur(style: BlurStyle, sigma: number, respectCTM: boolean) {
+    return new JsiSkMaskFilter(
+      this.CanvasKit,
+      this.CanvasKit.MaskFilter.MakeBlur(ckEnum(style), sigma, respectCTM)
+    );
+  }
+}

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/JsiSkPaint.ts

@@ -0,0 +1,104 @@
+import type { CanvasKit, Paint } from "canvaskit-wasm";
+
+import type {
+  BlendMode,
+  SkColor,
+  SkColorFilter,
+  SkImageFilter,
+  SkPaint,
+  SkShader,
+  StrokeCap,
+  StrokeJoin,
+  PaintStyle,
+  SkMaskFilter,
+  SkPathEffect,
+} from "../types";
+
+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");
+  }
+
+  copy() {
+    return new JsiSkPaint(this.CanvasKit, this.ref.copy());
+  }
+
+  getColor() {
+    return this.ref.getColor();
+  }
+
+  getStrokeCap() {
+    return this.ref.getStrokeCap().value;
+  }
+
+  getStrokeJoin() {
+    return this.ref.getStrokeJoin().value;
+  }
+
+  getStrokeMiter() {
+    return this.ref.getStrokeMiter();
+  }
+
+  getStrokeWidth() {
+    return this.ref.getStrokeWidth();
+  }
+
+  setAlphaf(alpha: number) {
+    this.ref.setAlphaf(alpha);
+  }
+
+  setAntiAlias(aa: boolean) {
+    this.ref.setAntiAlias(aa);
+  }
+
+  setBlendMode(blendMode: BlendMode) {
+    this.ref.setBlendMode(ckEnum(blendMode));
+  }
+
+  setColor(color: SkColor) {
+    this.ref.setColor(color);
+  }
+
+  setColorFilter(filter: SkColorFilter | null) {
+    this.ref.setColorFilter(toNullableValue(filter));
+  }
+
+  setImageFilter(filter: SkImageFilter | null) {
+    this.ref.setImageFilter(toNullableValue(filter));
+  }
+
+  setMaskFilter(filter: SkMaskFilter | null) {
+    this.ref.setMaskFilter(toNullableValue(filter));
+  }
+
+  setPathEffect(effect: SkPathEffect | null) {
+    this.ref.setPathEffect(toNullableValue(effect));
+  }
+
+  setShader(shader: SkShader | null) {
+    this.ref.setShader(toNullableValue(shader));
+  }
+
+  setStrokeCap(cap: StrokeCap) {
+    this.ref.setStrokeCap(ckEnum(cap));
+  }
+
+  setStrokeJoin(join: StrokeJoin) {
+    this.ref.setStrokeJoin(ckEnum(join));
+  }
+
+  setStrokeMiter(limit: number) {
+    this.ref.setStrokeMiter(limit);
+  }
+
+  setStrokeWidth(width: number) {
+    this.ref.setStrokeWidth(width);
+  }
+
+  setStyle(style: PaintStyle) {
+    this.ref.setStyle({ value: style });
+  }
+}