@shopify/react-native-skia 0.1.124 → 0.1.127

package/src/skia/Skia.ts

@@ -1,131 +1,12 @@
-import { Platform, processColor } from "react-native";
-
 /*global SkiaApi*/
-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 } 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 "./NativeSetup";
-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";
-
-/*
- * Parse CSS colors
- */
-const SkiaColor = (cl: Color) => {
-  if (typeof cl === "number") {
-    return cl;
-  }
-  const color = Skia.parseColorString(cl);
-  if (color !== undefined) {
-    return color;
-  } else {
-    // If the color is not recognized, we fallback to React Native
-    let rnColor = processColor(cl);
-    // 1. Neither Skia or RN could parse the color
-    if (typeof rnColor !== "number") {
-      console.warn("Skia couldn't parse the following color " + cl);
-      return BLACK;
-      // 2. The color is recognized by RN but not by Skia
-    } else {
-      console.warn(
-        "Skia couldn't parse the following color " +
-          cl +
-          ". The color parsing was delegated to React Native. Please file on issue with that color."
-      );
-      // On android we need to move the alpha byte to the start of the structure
-      if (Platform.OS === "android") {
-        rnColor = rnColor >>> 0;
-        const a = (rnColor >> 24) & 0xff;
-        const r = (rnColor >> 16) & 0xff;
-        const g = (rnColor >> 8) & 0xff;
-        const b = rnColor & 0xff;
-        rnColor = ((a << 24) | (r << 16) | (g << 8) | b) >>> 0;
-      }
-      return rnColor;
-    }
-  }
-};
-
-/**
- * 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;
-  RRectXY: (rect: SkRect, rx: number, ry: number) => SkRRect;
-  RSXform: (scos: number, ssin: number, tx: number, ty: number) => SkRSXform;
-  Color: (color: Color) => SkColor;
-  parseColorString: (color: string) => SkColor | undefined;
-  ContourMeasureIter: (
-    path: SkPath,
-    forceClosed: boolean,
-    resScale: number
-  ) => SkContourMeasureIter;
-  Paint: () => SkPaint;
-  PictureRecorder: () => SkPictureRecorder;
-  Picture: PictureFactory;
-  Path: PathFactory;
-  Matrix: () => 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;
-}
+import type { SkiaApi as SkSkiaApi } from "./SkiaApi";
 
 /**
  * Declares the SkiaApi as an available object in the global scope
  */
 declare global {
-  var SkiaApi: Skia;
+  var SkiaApi: SkSkiaApi;
 }
 
 /**
@@ -149,15 +30,14 @@ export const Skia = {
   Point: SkiaApi.Point,
   XYWHRect: SkiaApi.XYWHRect,
   RRectXY: SkiaApi.RRectXY,
+  RuntimeShaderBuilder: SkiaApi.RuntimeShaderBuilder,
   Paint: SkiaApi.Paint,
   PictureRecorder: SkiaApi.PictureRecorder,
   Picture: SkiaApi.Picture,
   Path: SkiaApi.Path,
   ColorFilter: SkiaApi.ColorFilter,
   ContourMeasureIter: SkiaApi.ContourMeasureIter,
-  // Here are constructors for data types which are represented as typed arrays in CanvasKit
-  Color: SkiaColor,
-  parseColorString: SkiaApi.parseColorString,
+  Color: SkiaApi.Color,
   RSXform: SkiaApi.RSXform,
   // For the following methods the factory symmetry is broken to be comptatible with CanvasKit
   MakeSurface: SkiaApi.Surface.Make,
@@ -165,5 +45,3 @@ export const Skia = {
   MakeImage: SkiaApi.Image.MakeImage,
   MakeVertices: SkiaApi.MakeVertices,
 };
-
-const BLACK = Skia.parseColorString("black")!;

package/src/skia/SkiaApi.ts

@@ -0,0 +1,86 @@
+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 } 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 "./NativeSetup";
+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";
+import type {
+  SkRuntimeShaderBuilder,
+  SkRuntimeEffect,
+} from "./RuntimeEffect/RuntimeEffect";
+
+/**
+ * Declares the interface for the native Skia API
+ */
+export interface SkiaApi {
+  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;
+  parseColorString: (color: string) => SkColor | undefined;
+  ContourMeasureIter: (
+    path: SkPath,
+    forceClosed: boolean,
+    resScale: number
+  ) => SkContourMeasureIter;
+  Paint: () => SkPaint;
+  PictureRecorder: () => SkPictureRecorder;
+  Picture: PictureFactory;
+  Path: PathFactory;
+  Matrix: () => 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/Surface/Surface.ts

@@ -3,7 +3,7 @@ import type { SkCanvas } from "../Canvas";
 import type { SkJSIInstance } from "../JsiInstance";
 import type { SkRect } from "../Rect";
 
-export interface ISurface extends SkJSIInstance<"Surface"> {
+export interface SkSurface extends SkJSIInstance<"Surface"> {
   /** Returns Canvas that draws into the surface. Subsequent calls return the
      same Canvas. Canvas returned is managed and owned by Surface, and is
      deleted when Surface is deleted.

package/src/skia/Surface/SurfaceFactory.ts

@@ -1,4 +1,4 @@
-import type { ISurface } from "./Surface";
+import type { SkSurface } from "./Surface";
 
 export interface SurfaceFactory {
   /**
@@ -8,5 +8,5 @@ export interface SurfaceFactory {
    * @param width - number of pixels of the width of the drawable area.
    * @param height - number of pixels of the height of the drawable area.
    */
-  Make: (width: number, height: number) => ISurface | null;
+  Make: (width: number, height: number) => SkSurface | null;
 }

package/src/values/api.ts

@@ -1,49 +1,10 @@
-import type {
-  SkiaAnimation,
-  AnimationState,
-  SkiaReadonlyValue,
-  SkiaClockValue,
-  SkiaValue,
-} from "./types";
-
-export interface ISkiaValueApi {
-  /**
-   * Creates a new value that holds the initial value and that
-   * can be changed.
-   */
-  createValue: <T>(initialValue: T) => SkiaValue<T>;
-  /**
-   * Creates a derived value. This is a calculated value that returns the result of
-   * a function that is called with the values of the dependencies.
-   */
-  createDerivedValue: <R>(
-    cb: () => R,
-    values: Array<SkiaReadonlyValue<unknown>>
-  ) => SkiaReadonlyValue<R>;
-  /**
-   * Creates a clock value where the value is the number of milliseconds elapsed
-   * since the clock was created
-   */
-  createClockValue: () => SkiaClockValue;
-  /**
-   * Creates an animation that is driven from a clock and updated every frame.
-   * @param cb Callback to calculate next value from time.
-   * @returns An animation object that can control a value.
-   */
-  createAnimation: <S extends AnimationState = AnimationState>(
-    cb: (t: number, state: S | undefined) => S
-  ) => SkiaAnimation;
-}
+import type { ISkiaValueApi } from "./types";
 
 declare global {
   var SkiaValueApi: ISkiaValueApi;
 }
 
-export const ValueApi: ISkiaValueApi = {
-  createValue: global.SkiaValueApi.createValue,
-  createDerivedValue: global.SkiaValueApi.createDerivedValue,
-  createClockValue: global.SkiaValueApi.createClockValue,
-  createAnimation: global.SkiaValueApi.createAnimation,
-};
+const { SkiaValueApi } = global;
+export const ValueApi = SkiaValueApi;
 
 export const { createValue, createDerivedValue } = ValueApi;

package/src/values/api.web.ts

@@ -0,0 +1,5 @@
+import { ValueApi as ValueApiWeb } from "./web";
+
+export const ValueApi = ValueApiWeb;
+
+export const { createValue, createDerivedValue } = ValueApi;

package/src/values/index.ts

@@ -1,4 +1,3 @@
 export * from "./types";
 export * from "./hooks";
-export * from "./animation";
 export * from "./api";

package/src/values/types.ts

@@ -30,7 +30,7 @@ export interface SkiaClockValue extends SkiaReadonlyValue<number> {
   stop: () => void;
 }
 
-export interface SkiaAnimation {
+export interface SkiaAnimation extends SkiaClockValue {
   cancel: () => void;
 }
 
@@ -38,3 +38,32 @@ export interface AnimationState {
   current: number;
   finished: boolean;
 }
+
+export interface ISkiaValueApi {
+  /**
+   * Creates a new value that holds the initial value and that
+   * can be changed.
+   */
+  createValue: <T>(initialValue: T) => SkiaValue<T>;
+  /**
+   * Creates a derived value. This is a calculated value that returns the result of
+   * a function that is called with the values of the dependencies.
+   */
+  createDerivedValue: <R>(
+    cb: () => R,
+    values: Array<SkiaReadonlyValue<unknown>>
+  ) => SkiaReadonlyValue<R>;
+  /**
+   * Creates a clock value where the value is the number of milliseconds elapsed
+   * since the clock was created
+   */
+  createClockValue: () => SkiaClockValue;
+  /**
+   * Creates an animation that is driven from a clock and updated every frame.
+   * @param cb Callback to calculate next value from time.
+   * @returns An animation object that can control a value.
+   */
+  createAnimation: <S extends AnimationState = AnimationState>(
+    cb: (t: number, state: S | undefined) => S
+  ) => SkiaAnimation;
+}

package/src/values/web/RNSkAnimation.ts

@@ -0,0 +1,33 @@
+import type { AnimationState, SkiaAnimation } from "../types";
+
+import { RNSkClockValue } from "./RNSkClockValue";
+
+export class RNSkAnimation<S extends AnimationState = AnimationState>
+  extends RNSkClockValue
+  implements SkiaAnimation
+{
+  constructor(
+    callback: (t: number, state: S | undefined) => S,
+    raf: (callback: (time: number) => void) => number
+  ) {
+    super(raf);
+    this._callback = callback;
+  }
+
+  private _callback: (t: number, state: S | undefined) => S;
+  private _animationState: S | undefined = undefined;
+
+  public cancel() {
+    this.stop();
+  }
+
+  protected update(nextValue: number): void {
+    if (this._callback) {
+      this._animationState = this._callback(nextValue, this._animationState);
+      if (this._animationState?.finished) {
+        this.stop();
+      }
+    }
+    super.update(this._animationState?.current ?? nextValue);
+  }
+}

package/src/values/web/RNSkClockValue.ts

@@ -0,0 +1,58 @@
+import type { SkiaClockValue } from "../types";
+
+import { RNSkReadonlyValue } from "./RNSkReadonlyValue";
+
+enum RNSkClockState {
+  NotStarted = 0,
+  Running = 1,
+  Stopped = 2,
+}
+
+export class RNSkClockValue
+  extends RNSkReadonlyValue<number>
+  implements SkiaClockValue
+{
+  constructor(raf: (callback: (time: number) => void) => number) {
+    super(0);
+    this._raf = raf;
+    this.update(0);
+  }
+
+  private _raf: (callback: (time: number) => void) => number;
+  private _start: number | undefined;
+  private _stop: number | undefined;
+  private _state: RNSkClockState = RNSkClockState.NotStarted;
+
+  private notifyUpdate = (_: number) => {
+    if (this._state === RNSkClockState.Running) {
+      const now = Date.now();
+      const deltaFromStart = now - this._start!;
+      this.tick(deltaFromStart);
+      this._raf(this.notifyUpdate);
+    }
+  };
+
+  protected tick(value: number) {
+    this.update(value);
+  }
+
+  public start() {
+    if (this._state === RNSkClockState.NotStarted) {
+      this._start = Date.now();
+      this._stop = this._start;
+    }
+    // Subtract pause time from start
+    const timeSinceStop = Date.now() - this._stop!;
+    this._start! += timeSinceStop;
+
+    this._state = RNSkClockState.Running;
+    this._raf(this.notifyUpdate);
+  }
+
+  public stop() {
+    if (this._state === RNSkClockState.Running) {
+      this._state = RNSkClockState.Stopped;
+      this._stop = Date.now();
+    }
+  }
+}

package/src/values/web/RNSkDerivedValue.ts

@@ -0,0 +1,38 @@
+import type { DependencyList } from "react";
+
+import { RNSkReadonlyValue } from "./RNSkReadonlyValue";
+
+export class RNSkDerivedValue<T> extends RNSkReadonlyValue<T> {
+  constructor(callback: () => T, dependencies: DependencyList) {
+    // Initialize dependencies - we can't call this yet, since
+    // super if not called and it requires a start value to be set.
+    const unsubscribers: Array<() => void> = [];
+    const notifyUpdateRef: { current: (() => void) | undefined } = {
+      current: undefined,
+    };
+    dependencies.forEach((dep) => {
+      if ("__typename__" in dep && "addListener" in dep) {
+        unsubscribers.push(
+          (dep as RNSkReadonlyValue<unknown>).addListener(() =>
+            notifyUpdateRef.current?.()
+          )
+        );
+      }
+    });
+    super(callback());
+    this._unsubscribers = unsubscribers;
+    notifyUpdateRef.current = this.dependecyUpdated.bind(this);
+    this._callback = callback;
+  }
+
+  private dependecyUpdated() {
+    this.update(this._callback());
+  }
+
+  private _callback: () => T;
+  private _unsubscribers: Array<() => void>;
+
+  public unsubscribe() {
+    this._unsubscribers.forEach((unsubscribe) => unsubscribe());
+  }
+}

package/src/values/web/RNSkReadonlyValue.ts

@@ -0,0 +1,32 @@
+import type { SkiaReadonlyValue } from "../types";
+
+export class RNSkReadonlyValue<T> implements SkiaReadonlyValue<T> {
+  constructor(value: T) {
+    this._current = value;
+  }
+
+  private _current: T;
+  private _listeners: Array<(value: T) => void> = [];
+
+  private notifyListeners(): void {
+    this._listeners.forEach((cb) => cb(this._current));
+  }
+
+  protected update(nextValue: T): void {
+    this._current = nextValue;
+    this.notifyListeners();
+  }
+
+  public readonly __typename__ = "RNSkValue";
+
+  public get current(): T {
+    return this._current;
+  }
+
+  public addListener(cb: (value: T) => void) {
+    this._listeners.push(cb);
+    return () => {
+      this._listeners.splice(this._listeners.indexOf(cb), 1);
+    };
+  }
+}

package/src/values/web/RNSkValue.ts

@@ -0,0 +1,57 @@
+import type { SkiaAnimation, SkiaValue } from "../types";
+
+import { RNSkReadonlyValue } from "./RNSkReadonlyValue";
+
+export class RNSkValue<T> extends RNSkReadonlyValue<T> implements SkiaValue<T> {
+  constructor(value: T) {
+    super(value);
+    this._unsubscribe = undefined;
+  }
+
+  public set current(value: T) {
+    this.update(value);
+  }
+
+  public get current(): T {
+    return super.current;
+  }
+
+  private _unsubscribe: (() => void) | undefined;
+
+  private unsubscribe() {
+    if (this._unsubscribe) {
+      this._unsubscribe();
+      this._unsubscribe = undefined;
+    }
+    if (this._animation) {
+      this._animation.cancel();
+      this._animation = undefined;
+    }
+  }
+
+  private subscribe(animation: SkiaAnimation | undefined) {
+    this.unsubscribe();
+    if (animation) {
+      this._animation = animation;
+      this._unsubscribe = animation.addListener(
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        this.animationDidUpdate.bind(this)
+      );
+      this._animation.start();
+    }
+  }
+
+  private animationDidUpdate(value: T) {
+    this.update(value);
+  }
+
+  private _animation: SkiaAnimation | undefined;
+  public get animation(): SkiaAnimation | undefined {
+    return this._animation;
+  }
+
+  public set animation(v: SkiaAnimation | undefined) {
+    this.subscribe(v);
+  }
+}

package/src/values/web/__tests__/RNSkAnimation.spec.ts

@@ -0,0 +1,21 @@
+import { RNSkAnimation } from "../RNSkAnimation";
+import { RNSkValue } from "../RNSkValue";
+
+describe("RNSkAnimation", () => {
+  it("should update a value", () => {
+    const valueToTest = new RNSkValue(0);
+    const raf = (cb: (t: number) => void) => {
+      cb(1);
+      return 1;
+    };
+    valueToTest.animation = new RNSkAnimation(
+      () => ({
+        finished: true,
+        current: 1,
+      }),
+      raf
+    );
+    valueToTest.animation.stop();
+    expect(valueToTest.current).toBe(1);
+  });
+});

package/src/values/web/__tests__/RNSkDerivedValue.spec.ts

@@ -0,0 +1,15 @@
+import { RNSkDerivedValue } from "../RNSkDerivedValue";
+import { RNSkValue } from "../RNSkValue";
+
+describe("RNSkDerivedValue", () => {
+  it("should update when dependency changes", () => {
+    const dependency = new RNSkValue(10);
+    const derived = new RNSkDerivedValue(
+      () => 10 * dependency.current,
+      [dependency]
+    );
+    expect(derived.current).toBe(100);
+    dependency.current = 20;
+    expect(derived.current).toBe(200);
+  });
+});

package/src/values/web/__tests__/RNSkReadonlyValue.spec.ts

@@ -0,0 +1,8 @@
+import { RNSkReadonlyValue } from "../RNSkReadonlyValue";
+
+describe("RNSkReadonlyValue", () => {
+  it("should expose __typename as RNSkValue", () => {
+    const valueToTest = new RNSkReadonlyValue(100);
+    expect(valueToTest.__typename__).toEqual("RNSkValue");
+  });
+});

package/src/values/web/__tests__/RNSkValue.spec.ts

@@ -0,0 +1,11 @@
+import { RNSkValue } from "../RNSkValue";
+
+describe("RNSkValue", () => {
+  it("should notify on change", () => {
+    const valueToTest = new RNSkValue(100);
+    const spy = jest.fn();
+    valueToTest.addListener(spy);
+    valueToTest.current = 200;
+    expect(spy).toHaveBeenCalledWith(200);
+  });
+});