@shopify/react-native-skia 0.1.224 → 0.1.227

package/src/skia/types/Canvas.ts

@@ -485,7 +485,7 @@ export interface SkCanvas {
    * Replaces current matrix with m premultiplied with the existing matrix.
    * @param m
    */
-  concat(m: SkMatrix): void;
+  concat(m: SkMatrix | number[]): void;
 
   /**
    * Draws the given picture using the current clip, current matrix, and the provided paint.

package/src/skia/types/Matrix.ts

@@ -1,5 +1,7 @@
 import type { SkJSIInstance } from "./JsiInstance";
 import type { SkCanvas } from "./Canvas";
+import type { Transforms3d } from "./Matrix4";
+import { processTransform3d } from "./Matrix4";
 export enum MatrixIndex {
   ScaleX = 0,
   SkewX = 1,
@@ -16,7 +18,7 @@ export const isMatrix = (obj: unknown): obj is SkMatrix =>
   obj !== null && (obj as SkJSIInstance<string>).__typename__ === "Matrix";
 
 export interface SkMatrix extends SkJSIInstance<"Matrix"> {
-  concat: (matrix: SkMatrix) => SkMatrix;
+  concat: (matrix: SkMatrix | number[]) => SkMatrix;
   translate: (x: number, y: number) => SkMatrix;
   scale: (x: number, y?: number) => SkMatrix;
   skew: (x: number, y: number) => SkMatrix;
@@ -29,88 +31,19 @@ export interface SkMatrix extends SkJSIInstance<"Matrix"> {
   get: () => number[];
 }
 
-type Transform2dName =
-  | "translateX"
-  | "translateY"
-  | "scale"
-  | "skewX"
-  | "skewY"
-  | "scaleX"
-  | "scaleY"
-  | "rotateZ"
-  | "rotate";
-
-type Transformations = {
-  readonly [Name in Transform2dName]: number;
-};
-
-export type Transforms2d = readonly (
-  | Pick<Transformations, "translateX">
-  | Pick<Transformations, "translateY">
-  | Pick<Transformations, "scale">
-  | Pick<Transformations, "scaleX">
-  | Pick<Transformations, "scaleY">
-  | Pick<Transformations, "skewX">
-  | Pick<Transformations, "skewY">
-  | Pick<Transformations, "rotate">
-)[];
-
 export interface TransformProp {
-  transform?: Transforms2d;
+  transform?: Transforms3d;
 }
 
 export const processTransform = <T extends SkMatrix | SkCanvas>(
   m: T,
-  transforms: Transforms2d
+  transforms: Transforms3d
 ) => {
-  for (const transform of transforms) {
-    const key = Object.keys(transform)[0] as Transform2dName;
-    const value = (transform as Pick<Transformations, typeof key>)[key];
-    if (key === "translateX") {
-      m.translate(value, 0);
-      continue;
-    }
-    if (key === "translateY") {
-      m.translate(0, value);
-      continue;
-    }
-    if (key === "scale") {
-      m.scale(value, value);
-      continue;
-    }
-    if (key === "scaleX") {
-      m.scale(value, 1);
-      continue;
-    }
-    if (key === "scaleY") {
-      m.scale(1, value);
-      continue;
-    }
-    if (key === "skewX") {
-      m.skew(value, 0);
-      continue;
-    }
-    if (key === "skewY") {
-      m.skew(0, value);
-      continue;
-    }
-    if (key === "rotate" || key === "rotateZ") {
-      if (isMatrix(m)) {
-        m.rotate(value);
-      } else {
-        m.rotate(toDegrees(value), 0, 0);
-      }
-      continue;
-    }
-    exhaustiveCheck(key);
-  }
+  const m3 = processTransform3d(transforms);
+  m.concat(m3);
   return m;
 };
 
-const exhaustiveCheck = (a: never): never => {
-  throw new Error(`Unknown transformation: ${a}`);
-};
-
 export const toDegrees = (rad: number) => {
   return (rad * 180) / Math.PI;
 };

package/src/skia/types/Matrix4.ts

@@ -0,0 +1,266 @@
+type Vec2 = readonly [number, number];
+type Vec3 = readonly [number, number, number];
+type Vec4 = readonly [number, number, number, number];
+
+export type Matrix4 = readonly [
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number
+];
+
+type Transform3dName =
+  | "translateX"
+  | "translateY"
+  | "translateZ"
+  | "translate"
+  | "scale"
+  | "scaleX"
+  | "scaleY"
+  | "skewX"
+  | "skewY"
+  | "rotateZ"
+  | "rotate"
+  | "perspective"
+  | "rotateX"
+  | "rotateY"
+  | "matrix";
+
+type Transformations = {
+  [Name in Transform3dName]: Name extends "matrix"
+    ? Matrix4
+    : Name extends "translate"
+    ? Vec3 | Vec2
+    : number;
+};
+
+type Transform3d =
+  | Pick<Transformations, "translateX">
+  | Pick<Transformations, "translateY">
+  | Pick<Transformations, "translateZ">
+  | Pick<Transformations, "translate">
+  | Pick<Transformations, "scale">
+  | Pick<Transformations, "scaleX">
+  | Pick<Transformations, "scaleY">
+  | Pick<Transformations, "skewX">
+  | Pick<Transformations, "skewY">
+  | Pick<Transformations, "perspective">
+  | Pick<Transformations, "rotateX">
+  | Pick<Transformations, "rotateY">
+  | Pick<Transformations, "rotateZ">
+  | Pick<Transformations, "rotate">
+  | Pick<Transformations, "matrix">;
+
+export type Transforms3d = Transform3d[];
+
+const exhaustiveCheck = (a: never): never => {
+  "worklet";
+  throw new Error(`Unexhaustive handling for ${a}`);
+};
+
+/**
+ * @worklet
+ */
+export const Matrix4 = (): Matrix4 => {
+  "worklet";
+  return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
+};
+
+const translate = (x: number, y: number, z: number): Matrix4 => {
+  "worklet";
+  return [1, 0, 0, x, 0, 1, 0, y, 0, 0, 1, z, 0, 0, 0, 1];
+};
+
+const scale = (sx: number, sy: number, sz: number): Matrix4 => {
+  "worklet";
+  return [sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1];
+};
+
+const perspective = (p: number): Matrix4 => {
+  "worklet";
+  return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, -1 / p, 1];
+};
+
+const normalizeVec = (vec: Vec3): Vec3 => {
+  "worklet";
+  const [x, y, z] = vec;
+  const length = Math.sqrt(x * x + y * y + z * z);
+  // Check for zero length to avoid division by zero
+  if (length === 0) {
+    return [0, 0, 0];
+  }
+  return [x / length, y / length, z / length];
+};
+
+const rotatedUnitSinCos = (
+  axisVec: Vec3,
+  sinAngle: number,
+  cosAngle: number
+): Matrix4 => {
+  "worklet";
+  const x = axisVec[0];
+  const y = axisVec[1];
+  const z = axisVec[2];
+  const c = cosAngle;
+  const s = sinAngle;
+  const t = 1 - c;
+  return [
+    t * x * x + c,
+    t * x * y - s * z,
+    t * x * z + s * y,
+    0,
+    t * x * y + s * z,
+    t * y * y + c,
+    t * y * z - s * x,
+    0,
+    t * x * z - s * y,
+    t * y * z + s * x,
+    t * z * z + c,
+    0,
+    0,
+    0,
+    0,
+    1,
+  ];
+};
+
+const rotate = (axis: Vec3, value: number) => {
+  "worklet";
+  return rotatedUnitSinCos(
+    normalizeVec(axis),
+    Math.sin(value),
+    Math.cos(value)
+  );
+};
+
+const matrixVecMul4 = (m: Matrix4, v: Vec4) => {
+  "worklet";
+  const [vx, vy, vz, vw] = v;
+  return [
+    vx * m[0] + vy * m[4] + vz * m[8] + vw * m[12],
+    vx * m[1] + vy * m[5] + vz * m[9] + vw * m[13],
+    vx * m[2] + vy * m[6] + vz * m[10] + vw * m[14],
+    vx * m[3] + vy * m[7] + vz * m[11] + vw * m[15],
+  ];
+};
+
+/**
+ * @worklet
+ */
+export const mapPoint3d = (m: Matrix4, v: Vec3) => {
+  "worklet";
+  const r = matrixVecMul4(m, [...v, 1]);
+  return [r[0] / r[3], r[1] / r[3], r[2] / r[3]] as const;
+};
+
+const multiply4 = (a: Matrix4, b: Matrix4): Matrix4 => {
+  "worklet";
+  const result = new Array(16).fill(0);
+  for (let i = 0; i < 4; i++) {
+    for (let j = 0; j < 4; j++) {
+      result[i * 4 + j] =
+        a[i * 4] * b[j] +
+        a[i * 4 + 1] * b[j + 4] +
+        a[i * 4 + 2] * b[j + 8] +
+        a[i * 4 + 3] * b[j + 12];
+    }
+  }
+  return result as unknown as Matrix4;
+};
+
+const skewY = (angle: number): Matrix4 => {
+  "worklet";
+  return [1, Math.tan(angle), 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
+};
+
+const skewX = (angle: number): Matrix4 => {
+  "worklet";
+  return [1, 0, 0, 0, Math.tan(angle), 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
+};
+
+const toMatrix3 = (m: Matrix4) => {
+  "worklet";
+  return [m[0], m[1], m[3], m[4], m[5], m[7], m[12], m[13], m[15]];
+};
+
+/**
+ * @worklet
+ */
+export const processTransform3d = (transforms: Transforms3d) => {
+  "worklet";
+  return toMatrix3(
+    transforms.reduce((acc, val) => {
+      const key = Object.keys(val)[0] as Transform3dName;
+      const transform = val as Pick<Transformations, typeof key>;
+      if (key === "translateX") {
+        const value = transform[key];
+        return multiply4(acc, translate(value, 0, 0));
+      }
+      if (key === "translate") {
+        const [x, y, z = 0] = transform[key];
+        return multiply4(acc, translate(x, y, z));
+      }
+      if (key === "translateY") {
+        const value = transform[key];
+        return multiply4(acc, translate(0, value, 0));
+      }
+      if (key === "translateZ") {
+        const value = transform[key];
+        return multiply4(acc, translate(0, 0, value));
+      }
+      if (key === "scale") {
+        const value = transform[key];
+        return multiply4(acc, scale(value, value, 1));
+      }
+      if (key === "scaleX") {
+        const value = transform[key];
+        return multiply4(acc, scale(value, 1, 1));
+      }
+      if (key === "scaleY") {
+        const value = transform[key];
+        return multiply4(acc, scale(1, value, 1));
+      }
+      if (key === "skewX") {
+        const value = transform[key];
+        return multiply4(acc, skewX(value));
+      }
+      if (key === "skewY") {
+        const value = transform[key];
+        return multiply4(acc, skewY(value));
+      }
+      if (key === "rotateX") {
+        const value = transform[key];
+        return multiply4(acc, rotate([1, 0, 0], value));
+      }
+      if (key === "rotateY") {
+        const value = transform[key];
+        return multiply4(acc, rotate([0, 1, 0], value));
+      }
+      if (key === "perspective") {
+        const value = transform[key];
+        return multiply4(acc, perspective(value));
+      }
+      if (key === "rotate" || key === "rotateZ") {
+        const value = transform[key];
+        return multiply4(acc, rotate([0, 0, 1], value));
+      }
+      if (key === "matrix") {
+        const value = transform[key];
+        return multiply4(acc, value);
+      }
+      return exhaustiveCheck(key);
+    }, Matrix4())
+  );
+};

package/src/skia/types/Path/Path.ts

@@ -540,7 +540,7 @@ export interface SkPath extends SkJSIInstance<"Path"> {
   /**
    * Transforms the path by the specified matrix.
    */
-  transform(m3: SkMatrix): SkPath;
+  transform(m3: SkMatrix | number[]): SkPath;
 
   /**
    * Interpolates between Path with point array of equal size.

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

@@ -9,7 +9,7 @@ export interface SkPictureRecorder {
    *
    * @param bounds - a rect to cull the results.
    */
-  beginRecording(bounds: SkRect): SkCanvas;
+  beginRecording(bounds?: SkRect): SkCanvas;
 
   /**
    * Returns the captured draw commands as a picture and invalidates the canvas returned earlier.

package/src/skia/types/Rect.ts

@@ -4,3 +4,17 @@ export interface SkRect {
   readonly width: number;
   readonly height: number;
 }
+
+export const isRect = (def: unknown): def is SkRect => {
+  "worklet";
+  if (typeof def === "object" && def !== null) {
+    const rect = def as SkRect;
+    return (
+      typeof rect.x === "number" &&
+      typeof rect.y === "number" &&
+      typeof rect.width === "number" &&
+      typeof rect.height === "number"
+    );
+  }
+  return false;
+};

package/src/skia/types/index.ts

@@ -28,3 +28,4 @@ export * from "./Skia";
 export * from "./TextBlob";
 export * from "./Size";
 export * from "./Paragraph";
+export * from "./Matrix4";

package/src/skia/web/JsiSkCanvas.ts

@@ -368,8 +368,8 @@ export class JsiSkCanvas
     );
   }
 
-  concat(m: SkMatrix) {
-    this.ref.concat(JsiSkMatrix.fromValue(m));
+  concat(m: SkMatrix | number[]) {
+    this.ref.concat(Array.isArray(m) ? m : JsiSkMatrix.fromValue(m));
   }
 
   drawPicture(skp: SkPicture) {

package/src/skia/web/JsiSkMatrix.ts

@@ -24,8 +24,10 @@ export class JsiSkMatrix
     // Do nothing - the matrix is represenetd by a Float32Array
   };
 
-  concat(matrix: SkMatrix) {
-    this.preMultiply(JsiSkMatrix.fromValue(matrix));
+  concat(matrix: SkMatrix | number[]) {
+    this.preMultiply(
+      Array.isArray(matrix) ? matrix : JsiSkMatrix.fromValue(matrix)
+    );
     return this;
   }
 

package/src/skia/web/JsiSkPath.ts

@@ -337,7 +337,7 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
   }
 
   transform(m3: SkMatrix) {
-    this.ref.transform(JsiSkMatrix.fromValue(m3));
+    this.ref.transform(Array.isArray(m3) ? m3 : JsiSkMatrix.fromValue(m3));
     return this;
   }
 

package/src/skia/web/JsiSkPictureRecorder.ts

@@ -20,10 +20,14 @@ export class JsiSkPictureRecorder
     this.ref.delete();
   };
 
-  beginRecording(bounds: SkRect) {
+  beginRecording(bounds?: SkRect) {
     return new JsiSkCanvas(
       this.CanvasKit,
-      this.ref.beginRecording(JsiSkRect.fromValue(this.CanvasKit, bounds))
+      this.ref.beginRecording(
+        bounds
+          ? JsiSkRect.fromValue(this.CanvasKit, bounds)
+          : Float32Array.of(0, 0, 2_000_000, 2_000_000)
+      )
     );
   }
 

package/src/values/api.ts

@@ -1,8 +1,61 @@
-import type { ISkiaValueApi } from "./types";
+import type {
+  AnimationState,
+  ISkiaValueApi,
+  SkiaAnimation,
+  SkiaClockValue,
+  SkiaMutableValue,
+  SkiaValue,
+} from "./types";
 
 declare global {
   var SkiaValueApi: ISkiaValueApi;
 }
 
 const { SkiaValueApi } = global;
-export const ValueApi = SkiaValueApi;
+
+const deprecatedWarning = () => {
+  console.warn(
+    `Skia values are deprecated and will be removed in the next Skia release.
+Please use Reanimated instead: https://shopify.github.io/react-native-skia/docs/animations/animations`
+  );
+};
+
+export const ValueApi = {
+  /**
+   * @deprecated Use Reanimated 3
+   * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+   */
+  createValue<T>(initialValue: T): SkiaMutableValue<T> {
+    deprecatedWarning();
+    return SkiaValueApi.createValue(initialValue);
+  },
+  /**
+   * @deprecated Use Reanimated 3
+   * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+   */
+  createComputedValue<R>(
+    cb: () => R,
+    values: SkiaValue<unknown>[]
+  ): SkiaValue<R> {
+    deprecatedWarning();
+    return SkiaValueApi.createComputedValue(cb, values);
+  },
+  /**
+   * @deprecated Use Reanimated 3
+   * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+   */
+  createClockValue(): SkiaClockValue {
+    deprecatedWarning();
+    return SkiaValueApi.createClockValue();
+  },
+  /**
+   * @deprecated Use Reanimated 3
+   * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+   */
+  createAnimation<S extends AnimationState = AnimationState>(
+    cb: (t: number, state: S | undefined) => S
+  ): SkiaAnimation {
+    deprecatedWarning();
+    return SkiaValueApi.createAnimation(cb);
+  },
+};

package/src/values/hooks/useClockValue.ts

@@ -3,6 +3,9 @@ import { useEffect, useMemo } from "react";
 import { ValueApi } from "../api";
 
 /**
+ * @deprecated Use Reanimated 3
+ * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+ *
  * @returns A new value that will be updated on every frame redraw with the
  * number of milliseconds elapsed since the value was started.
  * The clock is created in the stopped state.

package/src/values/hooks/useComputedValue.ts

@@ -4,6 +4,9 @@ import { ValueApi } from "../api";
 import { isValue } from "../../renderer/processors/Animations";
 
 /**
+ * @deprecated Use Reanimated 3
+ * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+ *
  * Creates a new computed value - a value that will calculate its value depending
  * on other values.
  * @param cb Callback to calculate new value

package/src/values/hooks/useValue.ts

@@ -4,6 +4,9 @@ import { ValueApi } from "../api";
 import type { SkiaMutableValue } from "../types";
 
 /**
+ * @deprecated Use Reanimated 3
+ * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+ *
  * Creates a new value that holds some data.
  * @param v Value to hold
  * @returns A Value of type of v

package/src/values/hooks/useValueEffect.ts

@@ -3,6 +3,9 @@ import { useEffect } from "react";
 import type { SkiaValue } from "../types";
 
 /**
+ * @deprecated Use Reanimated 3
+ * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+ *
  * Sets up an effect that will be run whenever the value changes
  * @param value Value to subscribe to changes on
  * @param cb Callback to run when value changes

package/src/values/types.ts

@@ -48,26 +48,26 @@ export interface ISkiaValueApi {
    * Creates a new value that holds the initial value and that
    * can be changed.
    */
-  createValue: <T>(initialValue: T) => SkiaMutableValue<T>;
+  createValue<T>(initialValue: T): SkiaMutableValue<T>;
   /**
    * Creates a computed value. This is a calculated value that returns the result of
    * a function that is called with the values of the dependencies.
    */
-  createComputedValue: <R>(
+  createComputedValue<R>(
     cb: () => R,
     values: Array<SkiaValue<unknown>>
-  ) => SkiaValue<R>;
+  ): SkiaValue<R>;
   /**
    * Creates a clock value where the value is the number of milliseconds elapsed
    * since the clock was created
    */
-  createClockValue: () => SkiaClockValue;
+  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>(
+  createAnimation<S extends AnimationState = AnimationState>(
     cb: (t: number, state: S | undefined) => S
-  ) => SkiaAnimation;
+  ): SkiaAnimation;
 }

package/src/views/SkiaView.tsx

@@ -11,9 +11,20 @@ export const SkiaViewNativeId = { current: 1000 };
 
 const NativeSkiaView = SkiaDrawViewNativeComponent;
 
+/**
+ * @deprecated If you are looking to use the Skia imperative API, you can use:
+ * The picture API: https://shopify.github.io/react-native-skia/docs/shapes/pictures/
+ * The offscreen API: https://shopify.github.io/react-native-skia/docs/animations/textures
+ */
 export class SkiaView extends React.Component<SkiaDrawViewProps> {
   constructor(props: SkiaDrawViewProps) {
     super(props);
+    console.warn(
+      `The SkiaView component is deprecated and will be removed in the next release.
+If you are looking to use the Skia imperative API, you can use:
+* The picture API: https://shopify.github.io/react-native-skia/docs/shapes/pictures/
+* The offscreen API: https://shopify.github.io/react-native-skia/docs/animations/textures`
+    );
     this._nativeId = SkiaViewNativeId.current++;
     const { onDraw, onSize } = props;
     if (onDraw) {