@shopify/react-native-skia 0.1.129 → 0.1.132

package/src/skia/web/JsiSkFont.ts

@@ -0,0 +1,128 @@
+import type { CanvasKit, Font } from "canvaskit-wasm";
+
+import type {
+  FontEdging,
+  FontHinting,
+  SkFont,
+  SkPaint,
+  SkPoint,
+  SkRect,
+  SkTypeface,
+} from "../types";
+
+import { HostObject, 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 {
+    console.warn(
+      `measureText() is deprecated an returns an empty rectangle on React Native Web.
+Clients should use "Font.getGlyphWidths" instead (the latter does no shaping)`
+    );
+    return new JsiSkRect(this.CanvasKit, this.CanvasKit.XYWHRect(0, 0, 0, 0));
+  }
+
+  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/{api/JsiSkImage.ts → JsiSkImage.ts}

@@ -8,7 +8,7 @@ import type {
   SkMatrix,
   SkShader,
   TileMode,
-} from "../../types";
+} from "../types";
 
 import { ckEnum, HostObject } from "./Host";
 

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/{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) {