@pompadour/react-native-skia 1.0.0

package/src/skia/web/JsiSkTextBlobFactory.ts

@@ -0,0 +1,55 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type { SkFont } from "../types";
+import type { TextBlobFactory } from "../types/TextBlob";
+import type { SkRSXform } from "../types/RSXform";
+
+import { Host } from "./Host";
+import { JsiSkFont } from "./JsiSkFont";
+import { JsiSkTextBlob } from "./JsiSkTextBlob";
+import { JsiSkRSXform } from "./JsiSkRSXform";
+
+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, JsiSkFont.fromValue(font))
+    );
+  }
+
+  MakeFromGlyphs(glyphs: number[], font: SkFont) {
+    return new JsiSkTextBlob(
+      this.CanvasKit,
+      this.CanvasKit.TextBlob.MakeFromGlyphs(glyphs, JsiSkFont.fromValue(font))
+    );
+  }
+
+  MakeFromRSXform(str: string, rsxforms: SkRSXform[], font: SkFont) {
+    return new JsiSkTextBlob(
+      this.CanvasKit,
+      this.CanvasKit.TextBlob.MakeFromRSXform(
+        str,
+        rsxforms.map((f) => Array.from(JsiSkRSXform.fromValue(f))).flat(),
+        JsiSkFont.fromValue(font)
+      )
+    );
+  }
+
+  MakeFromRSXformGlyphs(glyphs: number[], rsxforms: SkRSXform[], font: SkFont) {
+    const transforms = rsxforms.flatMap((s) =>
+      Array.from(JsiSkRSXform.fromValue(s))
+    );
+    return new JsiSkTextBlob(
+      this.CanvasKit,
+      this.CanvasKit.TextBlob.MakeFromRSXformGlyphs(
+        glyphs,
+        transforms,
+        JsiSkFont.fromValue(font)
+      )
+    );
+  }
+}

package/src/skia/web/JsiSkTextStyle.ts

@@ -0,0 +1,53 @@
+import type { TextStyle } from "canvaskit-wasm";
+
+import type { SkTextStyle } from "../types";
+
+export class JsiSkTextStyle {
+  static toTextStyle(value: SkTextStyle): TextStyle {
+    return {
+      backgroundColor: value.backgroundColor,
+      color: value.color,
+      decoration: value.decoration,
+      decorationColor: value.decorationColor,
+      decorationStyle: value.decorationStyle
+        ? { value: value.decorationStyle }
+        : undefined,
+      decorationThickness: value.decorationThickness,
+      fontFamilies: value.fontFamilies,
+      fontSize: value.fontSize,
+      fontStyle: value.fontStyle
+        ? {
+            slant: value.fontStyle.slant
+              ? { value: value.fontStyle.slant }
+              : undefined,
+            weight: value.fontStyle.weight
+              ? { value: value.fontStyle.weight }
+              : undefined,
+            width: value.fontStyle.width
+              ? { value: value.fontStyle.width }
+              : undefined,
+          }
+        : undefined,
+      fontFeatures: value.fontFeatures,
+      foregroundColor: value.foregroundColor,
+      fontVariations: value.fontVariations,
+      halfLeading: value.halfLeading,
+      heightMultiplier: value.heightMultiplier,
+      letterSpacing: value.letterSpacing,
+      locale: value.locale,
+      shadows: value.shadows
+        ? value.shadows.map((shadow) => ({
+            blurRadius: shadow.blurRadius,
+            color: shadow.color,
+            offset: shadow.offset
+              ? [shadow.offset.x, shadow.offset.y]
+              : undefined,
+          }))
+        : undefined,
+      textBaseline: value.textBaseline
+        ? { value: value.textBaseline }
+        : undefined,
+      wordSpacing: value.wordSpacing,
+    };
+  }
+}

package/src/skia/web/JsiSkTypeface.ts

@@ -0,0 +1,36 @@
+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;
+  }
+
+  getGlyphIDs(str: string, numCodePoints?: number) {
+    return Array.from(this.ref.getGlyphIDs(str, numCodePoints));
+  }
+
+  dispose = () => {
+    this.ref.delete();
+  };
+}

package/src/skia/web/JsiSkTypefaceFactory.tsx

@@ -0,0 +1,22 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type { SkData, TypefaceFactory } from "../types";
+
+import { Host } 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(
+      JsiSkTypeface.fromValue(data)
+    );
+    if (tf === null) {
+      return null;
+    }
+    return new JsiSkTypeface(this.CanvasKit, tf);
+  }
+}

package/src/skia/web/JsiSkTypefaceFontProvider.ts

@@ -0,0 +1,85 @@
+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() {
+    return this.ref.countFamilies();
+  }
+  getFamilyName(index: number) {
+    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/JsiSkVertices.ts

@@ -0,0 +1,27 @@
+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");
+  }
+
+  dispose = () => {
+    this.ref.delete();
+  };
+
+  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 { JsiSkVertices } from "./JsiSkVertices";
+import { getEnum } from "./Host";
+
+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(
+      getEnum(CanvasKit.VertexMode, 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,132 @@
+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 { 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 { JsiSkFont } from "./JsiSkFont";
+import { MakeVertices } from "./JsiSkVerticesFactory";
+import { JsiSkPath } from "./JsiSkPath";
+import { JsiSkTypeface } from "./JsiSkTypeface";
+import { JsiSkTypefaceFontProviderFactory } from "./JsiSkTypefaceFontProviderFactory";
+import { JsiSkFontMgrFactory } from "./JsiSkFontMgrFactory";
+import { JsiSkAnimatedImageFactory } from "./JsiSkAnimatedImageFactory";
+import { JsiSkParagraphBuilderFactory } from "./JsiSkParagraphBuilderFactory";
+import { JsiSkNativeBufferFactory } from "./JsiSkNativeBufferFactory";
+import { createVideo } from "./JsiVideo";
+
+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, rect, rx, ry),
+  RSXform: (scos: number, ssin: number, tx: number, ty: number) =>
+    new JsiSkRSXform(CanvasKit, Float32Array.of(scos, ssin, tx, ty)),
+  RSXformFromRadians: (
+    scale: number,
+    r: number,
+    tx: number,
+    ty: number,
+    px: number,
+    py: number
+  ) => {
+    const s = Math.sin(r) * scale;
+    const c = Math.cos(r) * scale;
+    return new JsiSkRSXform(
+      CanvasKit,
+      Float32Array.of(c, s, tx - c * px + s * py, ty - s * px - c * py)
+    );
+  },
+  Color,
+  ContourMeasureIter: (
+    path: SkPath,
+    forceClosed: boolean,
+    resScale: number
+  ): SkContourMeasureIter =>
+    new JsiSkContourMeasureIter(
+      CanvasKit,
+      new CanvasKit.ContourMeasureIter(
+        JsiSkPath.fromValue(path),
+        forceClosed,
+        resScale
+      )
+    ),
+  Paint: () => {
+    const paint = new JsiSkPaint(CanvasKit, new CanvasKit.Paint());
+    paint.setAntiAlias(true);
+    return paint;
+  },
+  PictureRecorder: () =>
+    new JsiSkPictureRecorder(CanvasKit, new CanvasKit.PictureRecorder()),
+  Picture: new JsiSkPictureFactory(CanvasKit),
+  Path: new JsiSkPathFactory(CanvasKit),
+  Matrix: (matrix?: readonly 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 : JsiSkTypeface.fromValue(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),
+  AnimatedImage: new JsiSkAnimatedImageFactory(CanvasKit),
+  SVG: new JsiSkSVGFactory(CanvasKit),
+  TextBlob: new JsiSkTextBlobFactory(CanvasKit),
+  XYWHRect: (x: number, y: number, width: number, height: number) => {
+    return new JsiSkRect(CanvasKit, CanvasKit.XYWHRect(x, y, width, height));
+  },
+  Surface: new JsiSkSurfaceFactory(CanvasKit),
+  TypefaceFontProvider: new JsiSkTypefaceFontProviderFactory(CanvasKit),
+  FontMgr: new JsiSkFontMgrFactory(CanvasKit),
+  ParagraphBuilder: new JsiSkParagraphBuilderFactory(CanvasKit),
+  NativeBuffer: new JsiSkNativeBufferFactory(CanvasKit),
+  Video: createVideo.bind(null, CanvasKit),
+});

package/src/skia/web/JsiVideo.ts

@@ -0,0 +1,96 @@
+import type { CanvasKit, Surface } from "canvaskit-wasm";
+
+import type { CanvasKitWebGLBuffer, Video, ImageFactory } from "../types";
+
+import { CanvasKitWebGLBufferImpl } from "./CanvasKitWebGLBufferImpl";
+import { JsiSkImageFactory } from "./JsiSkImageFactory";
+
+export const createVideo = async (
+  CanvasKit: CanvasKit,
+  url: string
+): Promise<Video> => {
+  const video = document.createElement("video");
+  return new Promise((resolve, reject) => {
+    video.src = url;
+    video.style.display = "none";
+    video.crossOrigin = "anonymous";
+    video.volume = 0;
+    video.addEventListener("loadedmetadata", () => {
+      document.body.appendChild(video);
+      resolve(new JsiVideo(new JsiSkImageFactory(CanvasKit), video));
+    });
+    video.addEventListener("error", () => {
+      reject(new Error(`Failed to load video from URL: ${url}`));
+    });
+  });
+};
+
+export class JsiVideo implements Video {
+  __typename__ = "Video" as const;
+
+  private webglBuffer: CanvasKitWebGLBuffer | null = null;
+
+  constructor(
+    private ImageFactory: ImageFactory,
+    private videoElement: HTMLVideoElement
+  ) {
+    document.body.appendChild(this.videoElement);
+  }
+
+  duration() {
+    return this.videoElement.duration * 1000;
+  }
+
+  framerate(): number {
+    throw new Error("Video.frame is not available on React Native Web");
+  }
+
+  setSurface(surface: Surface) {
+    // If we have the surface, we can use the WebGL buffer which is slightly faster
+    // This is because WebGL cannot be shared across contextes.
+    // This can be removed with WebGPU
+    this.webglBuffer = new CanvasKitWebGLBufferImpl(surface, this.videoElement);
+  }
+
+  nextImage() {
+    return this.ImageFactory.MakeImageFromNativeBuffer(
+      this.webglBuffer ? this.webglBuffer : this.videoElement
+    );
+  }
+
+  seek(time: number) {
+    if (isNaN(time)) {
+      throw new Error(`Invalid time: ${time}`);
+    }
+    this.videoElement.currentTime = time / 1000;
+  }
+
+  rotation() {
+    return 0 as const;
+  }
+
+  size() {
+    return {
+      width: this.videoElement.videoWidth,
+      height: this.videoElement.videoHeight,
+    };
+  }
+
+  pause() {
+    this.videoElement.pause();
+  }
+
+  play() {
+    this.videoElement.play();
+  }
+
+  setVolume(volume: number) {
+    this.videoElement.volume = volume;
+  }
+
+  dispose() {
+    if (this.videoElement.parentNode) {
+      this.videoElement.parentNode.removeChild(this.videoElement);
+    }
+  }
+}

package/src/skia/web/index.ts

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

package/src/specs/NativeSkiaModule.ts

@@ -0,0 +1,9 @@
+import type { TurboModule } from "react-native/Libraries/TurboModule/RCTExport";
+import { TurboModuleRegistry } from "react-native";
+
+export interface Spec extends TurboModule {
+  install: () => boolean;
+}
+
+// eslint-disable-next-line import/no-default-export
+export default TurboModuleRegistry.getEnforcing<Spec>("RNSkiaModule");

package/src/specs/SkiaDomViewNativeComponent.ts

@@ -0,0 +1,10 @@
+import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
+import type { ViewProps } from "react-native";
+
+export interface NativeProps extends ViewProps {
+  mode: string;
+  debug?: boolean;
+}
+
+// eslint-disable-next-line import/no-default-export
+export default codegenNativeComponent<NativeProps>("SkiaDomView");

package/src/specs/SkiaPictureViewNativeComponent.ts

@@ -0,0 +1,10 @@
+import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
+import type { ViewProps } from "react-native";
+
+export interface NativeProps extends ViewProps {
+  mode: string;
+  debug?: boolean;
+}
+
+// eslint-disable-next-line import/no-default-export
+export default codegenNativeComponent<NativeProps>("SkiaPictureView");