@shopify/react-native-skia 0.1.202 → 0.1.203

package/src/skia/core/Font.ts

@@ -1,8 +1,11 @@
 /*global SkiaApi*/
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import { Skia } from "../Skia";
-import type { DataSourceParam } from "../types";
+import { FontSlant } from "../types";
+import type { DataModule, DataSourceParam, SkFontMgr } from "../types";
+import { Platform } from "../../Platform";
+import type { SkTypefaceFontProvider } from "../types/Paragraph/TypefaceFontProvider";
 
 import { useTypeface } from "./Typeface";
 
@@ -25,3 +28,107 @@ export const useFont = (
     }
   }, [size, typeface]);
 };
+
+type Slant = "normal" | "italic" | "oblique";
+type Weight =
+  | "normal"
+  | "bold"
+  | "100"
+  | "200"
+  | "300"
+  | "400"
+  | "500"
+  | "600"
+  | "700"
+  | "800"
+  | "900";
+
+interface RNFontStyle {
+  fontFamily: string;
+  fontSize: number;
+  fontStyle: Slant;
+  fontWeight: Weight;
+}
+
+const defaultFontStyle: RNFontStyle = {
+  fontFamily: "System",
+  fontSize: 14,
+  fontStyle: "normal",
+  fontWeight: "normal",
+};
+
+const slant = (s: Slant) => {
+  if (s === "italic") {
+    return FontSlant.Italic;
+  } else if (s === "oblique") {
+    return FontSlant.Oblique;
+  } else {
+    return FontSlant.Upright;
+  }
+};
+
+const weight = (fontWeight: Weight) => {
+  switch (fontWeight) {
+    case "normal":
+      return 400;
+    case "bold":
+      return 700;
+    default:
+      return parseInt(fontWeight, 10);
+  }
+};
+
+export const matchFont = (
+  inputStyle: Partial<RNFontStyle> = {},
+  fontMgr: SkFontMgr = Skia.FontMgr.System()
+) => {
+  const fontStyle = {
+    ...defaultFontStyle,
+    ...inputStyle,
+  };
+  const style = {
+    weight: weight(fontStyle.fontWeight),
+    width: 5,
+    slant: slant(fontStyle.fontStyle),
+  };
+  const typeface = fontMgr.matchFamilyStyle(fontStyle.fontFamily, style);
+  return Skia.Font(typeface, fontStyle.fontSize);
+};
+
+export const listFontFamilies = (fontMgr: SkFontMgr = Skia.FontMgr.System()) =>
+  new Array(fontMgr.countFamilies())
+    .fill(0)
+    .map((_, i) => fontMgr.getFamilyName(i));
+
+const loadTypefaces = (typefacesToLoad: Record<string, DataModule[]>) => {
+  const promises = Object.keys(typefacesToLoad).flatMap((familyName) => {
+    return typefacesToLoad[familyName].map((typefaceToLoad) => {
+      return Skia.Data.fromURI(Platform.resolveAsset(typefaceToLoad)).then(
+        (data) => {
+          const tf = Skia.Typeface.MakeFreeTypeFaceFromData(data);
+          if (tf === null) {
+            throw new Error(`Couldn't create typeface for ${familyName}`);
+          }
+          return [familyName, tf] as const;
+        }
+      );
+    });
+  });
+  return Promise.all(promises);
+};
+
+export const useFonts = (sources: Record<string, DataModule[]>) => {
+  const [fontMgr, setFontMgr] = useState<null | SkTypefaceFontProvider>(null);
+
+  useEffect(() => {
+    loadTypefaces(sources).then((result) => {
+      const fMgr = Skia.TypefaceFontProvider.Make();
+      result.forEach(([familyName, typeface]) => {
+        fMgr.registerFont(typeface, familyName);
+      });
+      setFontMgr(fMgr);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return fontMgr;
+};

package/src/skia/types/Font/FontMgr.ts

@@ -0,0 +1,10 @@
+import type { SkJSIInstance } from "../JsiInstance";
+import type { SkTypeface } from "../Typeface";
+
+import type { FontStyle } from "./Font";
+
+export interface SkFontMgr extends SkJSIInstance<"FontMgr"> {
+  countFamilies(): number;
+  getFamilyName(index: number): string;
+  matchFamilyStyle(name: string, style: FontStyle): SkTypeface;
+}

package/src/skia/types/Font/FontMgrFactory.ts

@@ -0,0 +1,5 @@
+import type { SkFontMgr } from "./FontMgr";
+
+export interface FontMgrFactory {
+  System(): SkFontMgr;
+}

package/src/skia/types/Font/index.ts

@@ -1 +1,3 @@
 export * from "./Font";
+export * from "./FontMgr";
+export * from "./FontMgrFactory";

package/src/skia/types/Paragraph/TypefaceFontProvider.ts

@@ -0,0 +1,11 @@
+import type { SkFontMgr } from "../Font";
+import type { SkTypeface } from "../Typeface";
+
+export interface SkTypefaceFontProvider extends SkFontMgr {
+  /**
+   * Registers a given typeface with the given family name.
+   * @param typeface - Typeface.
+   * @param family
+   */
+  registerFont(typeface: SkTypeface, familyName: string): void;
+}

package/src/skia/types/Paragraph/TypefaceFontProviderFactory.ts

@@ -0,0 +1,5 @@
+import type { SkTypefaceFontProvider } from "./TypefaceFontProvider";
+
+export interface TypefaceFontProviderFactory {
+  Make(): SkTypefaceFontProvider;
+}

package/src/skia/types/Skia.ts

@@ -1,7 +1,7 @@
 import type { ImageFilterFactory } from "./ImageFilter";
 import type { PathFactory } from "./Path";
 import type { ColorFilterFactory } from "./ColorFilter";
-import type { SkFont } from "./Font";
+import type { SkFont, FontMgrFactory } from "./Font";
 import type { SkTypeface, TypefaceFactory } from "./Typeface";
 import type { ImageFactory } from "./Image";
 import type { MaskFilterFactory } from "./MaskFilter";
@@ -27,7 +27,7 @@ import type { SkPath } from "./Path/Path";
 import type { SkContourMeasureIter } from "./ContourMeasure";
 import type { PictureFactory, SkPictureRecorder } from "./Picture";
 import type { Color, SkColor } from "./Color";
-
+import type { TypefaceFontProviderFactory } from "./Paragraph/TypefaceFontProviderFactory";
 /**
  * Declares the interface for the native Skia API
  */
@@ -51,6 +51,8 @@ export interface Skia {
   ColorFilter: ColorFilterFactory;
   Font: (typeface?: SkTypeface, size?: number) => SkFont;
   Typeface: TypefaceFactory;
+  TypefaceFontProvider: TypefaceFontProviderFactory;
+  FontMgr: FontMgrFactory;
   MaskFilter: MaskFilterFactory;
   RuntimeEffect: RuntimeEffectFactory;
   ImageFilter: ImageFilterFactory;

package/src/skia/web/Host.ts

@@ -29,7 +29,7 @@ export abstract class BaseHostObject<T, N extends string>
     this.__typename__ = typename;
   }
 
-  abstract dispose: () => void;
+  abstract dispose(): void;
 }
 
 export abstract class HostObject<T, N extends string> extends BaseHostObject<

package/src/skia/web/JsiSkFontMgr.ts

@@ -0,0 +1,26 @@
+import type { CanvasKit, FontMgr } from "canvaskit-wasm";
+
+import type { FontStyle, SkFontMgr, SkTypeface } from "../types";
+
+import { HostObject, NotImplementedOnRNWeb } from "./Host";
+
+export class JsiSkFontMgr
+  extends HostObject<FontMgr, "FontMgr">
+  implements SkFontMgr
+{
+  constructor(CanvasKit: CanvasKit, ref: FontMgr) {
+    super(CanvasKit, ref, "FontMgr");
+  }
+  dispose() {
+    this.ref.delete();
+  }
+  countFamilies() {
+    return this.ref.countFamilies();
+  }
+  getFamilyName(index: number) {
+    return this.ref.getFamilyName(index);
+  }
+  matchFamilyStyle(_familyName: string, _fontStyle: FontStyle): SkTypeface {
+    throw new NotImplementedOnRNWeb();
+  }
+}

package/src/skia/web/JsiSkFontMgrFactory.ts

@@ -0,0 +1,22 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type { FontMgrFactory } from "../types";
+
+import { Host } from "./Host";
+import { JsiSkFontMgr } from "./JsiSkFontMgr";
+
+export class JsiSkFontMgrFactory extends Host implements FontMgrFactory {
+  constructor(CanvasKit: CanvasKit) {
+    super(CanvasKit);
+  }
+
+  System() {
+    const fontMgr = this.CanvasKit.TypefaceFontProvider.Make();
+    if (!fontMgr) {
+      throw new Error("Couldn't create system font manager");
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    return new JsiSkFontMgr(this.CanvasKit, fontMgr);
+  }
+}

package/src/skia/web/JsiSkTypefaceFontProvider.ts

@@ -0,0 +1,89 @@
+import type { CanvasKit, TypefaceFontProvider } from "canvaskit-wasm";
+
+import type { SkTypefaceFontProvider } from "../types/Paragraph/TypefaceFontProvider";
+import type { FontStyle, SkTypeface } from "../types";
+
+import { HostObject, NotImplementedOnRNWeb } from "./Host";
+
+export class JsiSkTypefaceFontProvider
+  extends HostObject<TypefaceFontProvider, "FontMgr">
+  implements SkTypefaceFontProvider
+{
+  private allocatedPointers: number[] = [];
+
+  constructor(CanvasKit: CanvasKit, ref: TypefaceFontProvider) {
+    super(CanvasKit, ref, "FontMgr");
+  }
+
+  matchFamilyStyle(_name: string, _style: FontStyle): SkTypeface {
+    throw new NotImplementedOnRNWeb();
+  }
+  countFamilies() {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    return this.ref.countFamilies();
+  }
+  getFamilyName(index: number) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    return this.ref.getFamilyName(index);
+  }
+  registerFont(typeface: SkTypeface, familyName: string) {
+    const strLen = lengthBytesUTF8(familyName) + 1;
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    const strPtr = this.CanvasKit._malloc(strLen);
+    stringToUTF8(this.CanvasKit, familyName, strPtr, strLen);
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    this.ref._registerFont(typeface.ref, strPtr);
+  }
+
+  dispose() {
+    for (const ptr of this.allocatedPointers) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      this.CanvasKit._free(ptr);
+    }
+
+    this.ref.delete();
+  }
+}
+
+const lengthBytesUTF8 = (str: string) => {
+  // TextEncoder will give us the byte length in UTF8 form
+  const encoder = new TextEncoder();
+  const utf8 = encoder.encode(str);
+  return utf8.length;
+};
+
+const stringToUTF8 = (
+  CanvasKit: CanvasKit,
+  str: string,
+  outPtr: number,
+  maxBytesToWrite: number
+) => {
+  // TextEncoder will give us the byte array in UTF8 form
+  const encoder = new TextEncoder();
+  const utf8 = encoder.encode(str);
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  const heap: Int8Array = CanvasKit.HEAPU8;
+
+  // Check if there's enough space
+  if (utf8.length > maxBytesToWrite) {
+    throw new Error("Not enough space to write UTF8 encoded string");
+  }
+
+  // Copy the bytes
+  for (let i = 0; i < utf8.length; i++) {
+    heap[outPtr + i] = utf8[i];
+  }
+
+  // Null terminate
+  if (utf8.length < maxBytesToWrite) {
+    heap[outPtr + utf8.length] = 0;
+  }
+};

package/src/skia/web/JsiSkTypefaceFontProviderFactory.ts

@@ -0,0 +1,18 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import { Host } from "./Host";
+import { JsiSkTypefaceFontProvider } from "./JsiSkTypefaceFontProvider";
+
+export class JsiSkTypefaceFontProviderFactory
+  extends Host
+  implements JsiSkTypefaceFontProviderFactory
+{
+  constructor(CanvasKit: CanvasKit) {
+    super(CanvasKit);
+  }
+
+  Make() {
+    const tf = this.CanvasKit.TypefaceFontProvider.Make();
+    return new JsiSkTypefaceFontProvider(this.CanvasKit, tf);
+  }
+}

package/src/skia/web/JsiSkia.ts

@@ -37,6 +37,8 @@ import { JsiSkFont } from "./JsiSkFont";
 import { MakeVertices } from "./JsiSkVerticesFactory";
 import { JsiSkPath } from "./JsiSkPath";
 import { JsiSkTypeface } from "./JsiSkTypeface";
+import { JsiSkTypefaceFontProviderFactory } from "./JsiSkTypefaceFontProviderFactory";
+import { JsiSkFontMgrFactory } from "./JsiSkFontMgrFactory";
 
 export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
   Point: (x: number, y: number) =>
@@ -102,4 +104,6 @@ export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
     return new JsiSkRect(CanvasKit, CanvasKit.XYWHRect(x, y, width, height));
   },
   Surface: new JsiSkSurfaceFactory(CanvasKit),
+  TypefaceFontProvider: new JsiSkTypefaceFontProviderFactory(CanvasKit),
+  FontMgr: new JsiSkFontMgrFactory(CanvasKit),
 });