@shopify/react-native-skia 0.1.128 → 0.1.131

package/src/skia/types/Picture/Picture.ts

@@ -0,0 +1,34 @@
+import type { FilterMode } from "../Image";
+import type { TileMode } from "../ImageFilter";
+import type { SkRect } from "../Rect";
+import type { SkShader } from "../Shader";
+import type { SkMatrix } from "../Matrix";
+
+export interface SkPicture {
+  /**
+   *  Returns a new shader that will draw with this picture.
+   *
+   *  @param tmx  The tiling mode to use when sampling in the x-direction.
+   *  @param tmy  The tiling mode to use when sampling in the y-direction.
+   *  @param mode How to filter the tiles
+   *  @param localMatrix Optional matrix used when sampling
+   *  @param tileRect The tile rectangle in picture coordinates: this represents the subset
+   *              (or superset) of the picture used when building a tile. It is not
+   *              affected by localMatrix and does not imply scaling (only translation
+   *              and cropping). If null, the tile rect is considered equal to the picture
+   *              bounds.
+   */
+  makeShader(
+    tmx: TileMode,
+    tmy: TileMode,
+    mode: FilterMode,
+    localMatrix?: SkMatrix,
+    tileRect?: SkRect
+  ): SkShader;
+
+  /**
+   * Returns the serialized format of this SkPicture. The format may change at anytime and
+   * no promises are made for backwards or forward compatibility.
+   */
+  serialize(): Uint8Array | null;
+}

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

@@ -0,0 +1,3 @@
+export * from "./Picture";
+export * from "./PictureRecorder";
+export * from "./PictureFactory";

package/src/skia/types/Point.ts

@@ -0,0 +1,12 @@
+export enum PointMode {
+  Points,
+  Lines,
+  Polygon,
+}
+
+export interface SkPoint {
+  readonly x: number;
+  readonly y: number;
+}
+
+export type Vector = SkPoint;

package/src/skia/types/RRect.ts

@@ -0,0 +1,12 @@
+import type { SkRect } from "./Rect";
+
+export interface SkRRect {
+  readonly rect: SkRect;
+  readonly rx: number;
+  readonly ry: number;
+}
+
+// We have an issue to check property existence on JSI backed instances
+export const isRRect = (def: SkRect | SkRRect): def is SkRRect =>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (def as any).rect !== undefined;

package/src/skia/types/RuntimeEffect/RuntimeEffect.ts

@@ -0,0 +1,60 @@
+import type { SkShader } from "../Shader";
+import type { SkJSIInstance } from "../JsiInstance";
+import type { SkMatrix } from "../Matrix";
+
+export interface SkSLUniform {
+  columns: number;
+  rows: number;
+  /** The index into the uniforms array that this uniform begins. */
+  slot: number;
+}
+
+export interface SkRuntimeShaderBuilder
+  extends SkJSIInstance<"RuntimeShaderBuilder"> {
+  setUniform(name: string, value: readonly number[]): void;
+}
+
+export interface SkRuntimeEffect extends SkJSIInstance<"RuntimeEffect"> {
+  /**
+   * Returns a shader executed using the given uniform data.
+   * @param uniforms
+   * @param localMatrix
+   */
+  makeShader(uniforms: number[], localMatrix?: SkMatrix): SkShader;
+
+  /**
+   * Returns a shader executed using the given uniform data and the children as inputs.
+   * @param uniforms
+   * @param children
+   * @param localMatrix
+   */
+  makeShaderWithChildren(
+    uniforms: number[],
+    children?: SkShader[],
+    localMatrix?: SkMatrix
+  ): SkShader;
+
+  /**
+   * Returns the nth uniform from the effect.
+   * @param index
+   */
+  getUniform(index: number): SkSLUniform;
+
+  /**
+   * Returns the number of uniforms in the effect.
+   */
+  getUniformCount(): number;
+
+  /**
+   * Returns the total number of floats across all uniforms on the effect. This is the length
+   * of the uniforms array expected by makeShader. For example, an effect with a single float3
+   * uniform, would return 1 from `getUniformCount()`, but 3 from `getUniformFloatCount()`.
+   */
+  getUniformFloatCount(): number;
+
+  /**
+   * Returns the name of the nth effect uniform.
+   * @param index
+   */
+  getUniformName(index: number): string;
+}

package/src/skia/types/SVG/SVGFactory.ts

@@ -0,0 +1,8 @@
+import type { SkData } from "../Data";
+
+import type { SkSVG } from "./SVG";
+
+export interface SVGFactory {
+  MakeFromData(data: SkData): SkSVG | null;
+  MakeFromString(str: string): SkSVG | null;
+}

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

@@ -0,0 +1,2 @@
+export * from "./SVG";
+export * from "./SVGFactory";

package/src/skia/types/Shader/Shader.ts

@@ -0,0 +1,67 @@
+import type { SkJSIInstance } from "../JsiInstance";
+import type { Vector } from "../Point";
+import type { SkRuntimeEffect, SkRuntimeShaderBuilder } from "../RuntimeEffect";
+
+export const isShader = (obj: SkJSIInstance<string> | null): obj is SkShader =>
+  obj !== null && obj.__typename__ === "Shader";
+
+export type SkShader = SkJSIInstance<"Shader">;
+
+export type UniformValue = number | Vector | readonly number[];
+
+export type Uniform = UniformValue | readonly UniformValue[];
+
+export interface Uniforms {
+  [name: string]: Uniform;
+}
+
+const isVector = (obj: unknown): obj is Vector =>
+  // We have an issue to check property existence on JSI backed instances
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (obj as any).x !== undefined && (obj as any).y !== undefined;
+
+const processValue = (value: UniformValue): number | readonly number[] => {
+  if (isVector(value)) {
+    return [value.x, value.y];
+  }
+  return value;
+};
+
+export const processUniforms = (
+  source: SkRuntimeEffect,
+  uniforms: Uniforms,
+  builder?: SkRuntimeShaderBuilder
+) => {
+  const processed = new Array(source.getUniformCount())
+    .fill(0)
+    .flatMap((_, i) => {
+      const name = source.getUniformName(i);
+      const value = uniforms[name];
+      if (value === undefined) {
+        throw new Error(`No value specified for uniform ${name}`);
+      }
+      let result: number | readonly number[];
+      if (Array.isArray(value)) {
+        result = value.flatMap(processValue);
+      }
+      result = processValue(value as UniformValue);
+      builder?.setUniform(name, typeof result === "number" ? [result] : result);
+      return result;
+    });
+  const names = Object.keys(uniforms);
+  if (names.length > source.getUniformCount()) {
+    const usedUniforms = new Array(source.getUniformCount())
+      .fill(0)
+      .map((_, i) => source.getUniformName(i));
+    const unusedUniform = names
+      .map((name) => {
+        if (usedUniforms.indexOf(name) === -1) {
+          return name;
+        }
+        return null;
+      })
+      .filter((n) => n !== null);
+    console.warn("Unused uniforms were provided: " + unusedUniform.join(", "));
+  }
+  return processed;
+};

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

@@ -0,0 +1,2 @@
+export * from "./Shader";
+export * from "./ShaderFactory";

package/src/skia/types/Skia.ts

@@ -0,0 +1,84 @@
+import type { ImageFilterFactory } from "./ImageFilter";
+import type { PathFactory } from "./Path";
+import type { ColorFilterFactory } from "./ColorFilter";
+import type { SkFont } from "./Font";
+import type { SkTypeface, TypefaceFactory } from "./Typeface";
+import type { ImageFactory } from "./Image";
+import type { MaskFilterFactory } from "./MaskFilter";
+import type { SkPaint } from "./Paint";
+import type { SkRect } from "./Rect";
+import type { SkRRect } from "./RRect";
+import type {
+  RuntimeEffectFactory,
+  SkRuntimeEffect,
+  SkRuntimeShaderBuilder,
+} from "./RuntimeEffect";
+import type { ShaderFactory } from "./Shader";
+import type { SkMatrix } from "./Matrix";
+import type { PathEffectFactory } from "./PathEffect";
+import type { SkPoint } from "./Point";
+import type { SkVertices, VertexMode } from "./Vertices/Vertices";
+import type { DataFactory } from "./Data";
+import type { SVGFactory } from "./SVG";
+import type { TextBlobFactory } from "./TextBlob";
+import type { FontMgrFactory } from "./FontMgr/FontMgrFactory";
+import type { SurfaceFactory } from "./Surface";
+import type { SkRSXform } from "./RSXform";
+import type { SkPath } from "./Path/Path";
+import type { SkContourMeasureIter } from "./ContourMeasure";
+import type { PictureFactory, SkPictureRecorder } from "./Picture";
+import type { Color, SkColor } from "./Color";
+
+/**
+ * Declares the interface for the native Skia API
+ */
+export interface Skia {
+  Point: (x: number, y: number) => SkPoint;
+  XYWHRect: (x: number, y: number, width: number, height: number) => SkRect;
+  RuntimeShaderBuilder: (rt: SkRuntimeEffect) => SkRuntimeShaderBuilder;
+  RRectXY: (rect: SkRect, rx: number, ry: number) => SkRRect;
+  RSXform: (scos: number, ssin: number, tx: number, ty: number) => SkRSXform;
+  Color: (color: Color) => SkColor;
+  ContourMeasureIter: (
+    path: SkPath,
+    forceClosed: boolean,
+    resScale: number
+  ) => SkContourMeasureIter;
+  Paint: () => SkPaint;
+  PictureRecorder: () => SkPictureRecorder;
+  Picture: PictureFactory;
+  Path: PathFactory;
+  Matrix: (matrix?: number[]) => SkMatrix;
+  ColorFilter: ColorFilterFactory;
+  Font: (typeface?: SkTypeface, size?: number) => SkFont;
+  Typeface: TypefaceFactory;
+  MaskFilter: MaskFilterFactory;
+  RuntimeEffect: RuntimeEffectFactory;
+  ImageFilter: ImageFilterFactory;
+  Shader: ShaderFactory;
+  PathEffect: PathEffectFactory;
+  /**
+   * Returns an Vertices based on the given positions and optional parameters.
+   * See SkVertices.h (especially the Builder) for more details.
+   * @param mode
+   * @param positions
+   * @param textureCoordinates
+   * @param colors - either a list of int colors or a flattened color array.
+   * @param indices
+   * @param isVolatile
+   */
+  MakeVertices(
+    mode: VertexMode,
+    positions: SkPoint[],
+    textureCoordinates?: SkPoint[] | null,
+    colors?: SkColor[],
+    indices?: number[] | null,
+    isVolatile?: boolean
+  ): SkVertices;
+  Data: DataFactory;
+  Image: ImageFactory;
+  SVG: SVGFactory;
+  FontMgr: FontMgrFactory;
+  TextBlob: TextBlobFactory;
+  Surface: SurfaceFactory;
+}

package/src/skia/types/Typeface/TypefaceFactory.ts

@@ -0,0 +1,7 @@
+import type { SkData } from "../Data";
+
+import type { SkTypeface } from "./Typeface";
+
+export interface TypefaceFactory {
+  MakeFreeTypeFaceFromData(data: SkData): SkTypeface | null;
+}

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

@@ -0,0 +1,2 @@
+export * from "./Typeface";
+export * from "./TypefaceFactory";

package/src/skia/types/index.ts

@@ -0,0 +1,28 @@
+export * from "./Picture";
+export * from "./Data";
+export * from "./SVG";
+export * from "./Surface";
+export * from "./FontMgr";
+export * from "./Vertices";
+export * from "./RuntimeEffect";
+export * from "./Shader";
+export * from "./Image";
+export * from "./ColorFilter";
+export * from "./ImageFilter";
+export * from "./Font";
+export * from "./Typeface";
+export * from "./Paint";
+export * from "./Path";
+export * from "./Color";
+export * from "./Canvas";
+export * from "./ContourMeasure";
+export * from "./MaskFilter";
+export * from "./Matrix";
+export * from "./PathEffect";
+export * from "./Point";
+export * from "./Rect";
+export * from "./RRect";
+export * from "./RSXform";
+export * from "./JsiInstance";
+export * from "./Skia";
+export * from "./TextBlob";

package/src/skia/web/Host.ts

@@ -0,0 +1,56 @@
+/* eslint-disable no-nested-ternary */
+import type { CanvasKit, EmbindEnumEntity } from "canvaskit-wasm";
+
+import type { SkJSIInstance } from "../types";
+
+export class NotImplementedOnRNWeb extends Error {
+  constructor() {
+    super("Not implemented on React Native Web");
+  }
+}
+
+export abstract class Host {
+  readonly CanvasKit: CanvasKit;
+
+  constructor(CanvasKit: CanvasKit) {
+    this.CanvasKit = CanvasKit;
+  }
+}
+
+export abstract class HostObject<T, N extends string>
+  extends Host
+  implements SkJSIInstance<N>
+{
+  readonly __typename__: N;
+  readonly ref: T;
+
+  constructor(CanvasKit: CanvasKit, ref: T, typename: N) {
+    super(CanvasKit);
+    this.ref = ref;
+    this.__typename__ = typename;
+  }
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type NonNullish = {};
+
+export const toOptionalValue = <T>(
+  value: NonNullish | undefined | null
+): T | undefined | null =>
+  value === undefined ? undefined : value === null ? null : toValue(value);
+
+export const toUndefinedableValue = <T>(
+  value: NonNullish | undefined
+): T | undefined => (value === undefined ? undefined : toValue(value));
+
+export const toNullableValue = <T>(value: NonNullish | null): T | null =>
+  value === null ? null : toValue(value);
+
+export const toValue = <T>(value: NonNullish): T =>
+  (value as HostObject<T, string>).ref;
+
+export const ckEnum = (value: number): EmbindEnumEntity => ({ value });
+export const optEnum = (
+  value: number | undefined
+): EmbindEnumEntity | undefined =>
+  value === undefined ? undefined : { value };

package/src/skia/web/JsiImageFilterFactory.ts

@@ -0,0 +1,144 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type {
+  ColorChannel,
+  ImageFilterFactory,
+  SkColor,
+  SkColorFilter,
+  SkImageFilter,
+  BlendMode,
+  SkRect,
+  SkRuntimeShaderBuilder,
+  SkShader,
+  TileMode,
+} from "../types";
+
+import { Host, NotImplementedOnRNWeb, ckEnum, toValue } from "./Host";
+import { JsiSkImageFilter } from "./JsiSkImageFilter";
+
+export class JsiSkImageFilterFactory
+  extends Host
+  implements ImageFilterFactory
+{
+  constructor(CanvasKit: CanvasKit) {
+    super(CanvasKit);
+  }
+
+  MakeOffset(
+    _dx: number,
+    _dy: number,
+    _input: SkImageFilter | null
+  ): SkImageFilter {
+    throw new NotImplementedOnRNWeb();
+  }
+
+  MakeDisplacementMap(
+    _channelX: ColorChannel,
+    _channelY: ColorChannel,
+    _scale: number,
+    _in1: SkImageFilter,
+    _input: SkImageFilter | null
+  ): SkImageFilter {
+    throw new NotImplementedOnRNWeb();
+  }
+
+  MakeShader(_shader: SkShader, _input: SkImageFilter | null): SkImageFilter {
+    throw new NotImplementedOnRNWeb();
+  }
+
+  MakeBlur(
+    sigmaX: number,
+    sigmaY: number,
+    mode: TileMode,
+    input: SkImageFilter | null
+  ) {
+    return new JsiSkImageFilter(
+      this.CanvasKit,
+      this.CanvasKit.ImageFilter.MakeBlur(
+        sigmaX,
+        sigmaY,
+        ckEnum(mode),
+        input === null ? null : toValue(input)
+      )
+    );
+  }
+
+  MakeColorFilter(cf: SkColorFilter, input: SkImageFilter | null) {
+    return new JsiSkImageFilter(
+      this.CanvasKit,
+      this.CanvasKit.ImageFilter.MakeColorFilter(
+        toValue(cf),
+        input === null ? null : toValue(input)
+      )
+    );
+  }
+
+  MakeCompose(outer: SkImageFilter | null, inner: SkImageFilter | null) {
+    return new JsiSkImageFilter(
+      this.CanvasKit,
+      this.CanvasKit.ImageFilter.MakeCompose(
+        outer === null ? null : toValue(outer),
+        inner === null ? null : toValue(inner)
+      )
+    );
+  }
+
+  MakeDropShadow(
+    _dx: number,
+    _dy: number,
+    _sigmaX: number,
+    _sigmaY: number,
+    _color: SkColor,
+    _input: SkImageFilter | null,
+    _cropRect?: SkRect
+  ): SkImageFilter {
+    throw new NotImplementedOnRNWeb();
+  }
+
+  MakeDropShadowOnly(
+    _dx: number,
+    _dy: number,
+    _sigmaX: number,
+    _sigmaY: number,
+    _color: SkColor,
+    _input: SkImageFilter | null,
+    _cropRect?: SkRect
+  ): SkImageFilter {
+    throw new NotImplementedOnRNWeb();
+  }
+
+  MakeErode(
+    _rx: number,
+    _ry: number,
+    _input: SkImageFilter | null,
+    _cropRect?: SkRect
+  ): SkImageFilter {
+    throw new NotImplementedOnRNWeb();
+  }
+
+  MakeDilate(
+    _rx: number,
+    _ry: number,
+    _input: SkImageFilter | null,
+    _cropRect?: SkRect
+  ): SkImageFilter {
+    throw new NotImplementedOnRNWeb();
+  }
+
+  MakeBlend(
+    _mode: BlendMode,
+    _background: SkImageFilter,
+    _foreground: SkImageFilter | null,
+    _cropRect?: SkRect
+  ): SkImageFilter {
+    throw new NotImplementedOnRNWeb();
+  }
+
+  MakeRuntimeShader(
+    _builder: SkRuntimeShaderBuilder,
+    _childShaderName: string | null,
+    _input: SkImageFilter | null
+  ): SkImageFilter {
+    throw new NotImplementedOnRNWeb();
+  }
+}