@shopify/react-native-skia 0.1.225 → 0.1.228

package/src/renderer/Canvas.tsx

@@ -4,7 +4,6 @@ import React, {
   useMemo,
   forwardRef,
   useRef,
-  useLayoutEffect,
 } from "react";
 import type {
   RefObject,
@@ -13,13 +12,13 @@ import type {
   ForwardedRef,
   FunctionComponent,
 } from "react";
+import type { LayoutChangeEvent } from "react-native";
 
-import { SkiaDomView, SkiaView } from "../views";
+import { SkiaDomView, SkiaPictureView } from "../views";
 import { Skia } from "../skia/Skia";
 import type { TouchHandler, SkiaBaseViewProps } from "../views";
 import type { SkiaValue } from "../values/types";
 import { JsiDrawingContext } from "../dom/types";
-import { useValue } from "../values";
 
 import { SkiaRoot } from "./Reconciler";
 import { NATIVE_DOM } from "./HostComponents";
@@ -33,34 +32,42 @@ export interface CanvasProps extends SkiaBaseViewProps {
   onTouch?: TouchHandler;
 }
 
-const useOnSizeEvent = (resultValue: SkiaBaseViewProps["onSize"]) => {
-  const onSize = useValue({
-    width: 0,
-    height: 0,
-  });
+const useOnSizeEvent = (
+  resultValue: SkiaBaseViewProps["onSize"],
+  onLayout?: (event: LayoutChangeEvent) => void
+) => {
+  return useCallback(
+    (event: LayoutChangeEvent) => {
+      if (onLayout) {
+        onLayout(event);
+      }
+      const { width, height } = event.nativeEvent.layout;
 
-  useLayoutEffect(() => {
-    if (!resultValue) {
-      return;
-    }
-    return onSize.addListener((newValue) => {
       if (isValue(resultValue)) {
-        resultValue.current = newValue;
-      } else {
-        resultValue.value = newValue;
+        resultValue.current = { width, height };
+      } else if (resultValue) {
+        resultValue.value = { width, height };
       }
-    });
-  }, [resultValue, onSize]);
-
-  return onSize;
+    },
+    [onLayout, resultValue]
+  );
 };
 
 export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
   (
-    { children, style, debug, mode, onTouch, onSize: _onSize, ...props },
+    {
+      children,
+      style,
+      debug,
+      mode,
+      onTouch,
+      onSize: _onSize,
+      onLayout: _onLayout,
+      ...props
+    },
     forwardedRef
   ) => {
-    const onSize = useOnSizeEvent(_onSize);
+    const onLayout = useOnSizeEvent(_onSize, _onLayout);
     const innerRef = useCanvasRef();
     const ref = useCombinedRefs(forwardedRef, innerRef);
     const redraw = useCallback(() => {
@@ -102,26 +109,30 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
           style={style}
           root={root.dom}
           onTouch={onTouch}
-          onSize={onSize}
+          onLayout={onLayout}
           mode={mode}
           debug={debug}
           {...props}
         />
       );
     } else {
+      // This is for debugging
+      const recorder = Skia.PictureRecorder();
+      const canvas = recorder.beginRecording(
+        Skia.XYWHRect(0, 0, 2_000_000, 2_000_000)
+      );
+      const ctx = new JsiDrawingContext(Skia, canvas);
+      root.dom.render(ctx);
+      const picture = recorder.finishRecordingAsPicture();
       return (
-        <SkiaView
+        <SkiaPictureView
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           ref={ref as any}
           style={style}
           mode={mode}
           debug={debug}
-          onSize={onSize}
-          onDraw={(canvas, info) => {
-            onTouch && onTouch(info.touches);
-            const ctx = new JsiDrawingContext(Skia, canvas);
-            root.dom.render(ctx);
-          }}
+          picture={picture}
+          onLayout={onLayout}
           {...props}
         />
       );

package/src/renderer/components/Drawing.tsx

@@ -2,6 +2,11 @@ import React from "react";
 
 import type { CustomDrawingNodeProps } from "../../dom/types";
 
+/**
+ * @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 const Drawing = (props: CustomDrawingNodeProps) => {
   return <skDrawing {...props} />;
 };

package/src/skia/core/Matrix.ts

@@ -1,6 +1,6 @@
 import { Skia } from "../Skia";
-import type { Transforms2d } from "../types";
+import type { Transforms3d } from "../types";
 import { processTransform } from "../types";
 
-export const processTransform2d = (transforms: Transforms2d) =>
+export const processTransform2d = (transforms: Transforms3d) =>
   processTransform(Skia.Matrix(), transforms);

package/src/skia/core/Picture.ts

@@ -1,5 +1,5 @@
 import { Skia } from "../Skia";
-import type { SkCanvas, SkRect } from "../types";
+import { isRect, type SkCanvas, type SkRect, type SkSize } from "../types";
 
 /**
  * Memoizes and returns an SkPicture that can be drawn to another canvas.
@@ -7,9 +7,17 @@ import type { SkCanvas, SkRect } from "../types";
  * @param cb Callback for drawing to the canvas
  * @returns SkPicture
  */
-export const createPicture = (rect: SkRect, cb: (canvas: SkCanvas) => void) => {
+export const createPicture = (
+  cb: (canvas: SkCanvas) => void,
+  rect?: SkRect | SkSize
+) => {
+  "worklet";
   const recorder = Skia.PictureRecorder();
-  const canvas = recorder.beginRecording(rect);
+  let bounds: undefined | SkRect;
+  if (rect) {
+    bounds = isRect(rect) ? rect : Skia.XYWHRect(0, 0, rect.width, rect.height);
+  }
+  const canvas = recorder.beginRecording(bounds);
   cb(canvas);
   return recorder.finishRecordingAsPicture();
 };

package/src/skia/core/Vector.ts

@@ -22,7 +22,3 @@ export const dist = (a: Vector, b: Vector) => {
   "worklet";
   return Math.hypot(a.x - b.x, a.y - b.y);
 };
-export const translate = ({ x, y }: Vector) => {
-  "worklet";
-  return [{ translateX: x }, { translateY: y }] as const;
-};

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,22 +1,13 @@
 import type { SkJSIInstance } from "./JsiInstance";
 import type { SkCanvas } from "./Canvas";
-export enum MatrixIndex {
-  ScaleX = 0,
-  SkewX = 1,
-  TransX = 2,
-  SkewY = 3,
-  ScaleY = 4,
-  TransY = 5,
-  Persp0 = 6,
-  Persp1 = 7,
-  Persp2 = 8,
-}
+import type { Matrix3, Matrix4, Transforms3d } from "./Matrix4";
+import { processTransform3d } from "./Matrix4";
 
 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 | Matrix4 | Matrix3 | number[]) => SkMatrix;
   translate: (x: number, y: number) => SkMatrix;
   scale: (x: number, y?: number) => SkMatrix;
   skew: (x: number, y: number) => SkMatrix;
@@ -29,88 +20,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,344 @@
+type Point = { x: number; y: number };
+type Vec2 = readonly [number, number];
+type Vec3 = readonly [number, number, number];
+type Vec4 = readonly [number, number, number, number];
+
+export type Matrix3 = readonly [
+  number,
+  number,
+  number,
+  number,
+  number,
+  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];
+};
+
+/**
+ * @worklet
+ */
+export const translate = (x: number, y: number, z: number = 0): Matrix4 => {
+  "worklet";
+  return [1, 0, 0, x, 0, 1, 0, y, 0, 0, 1, z, 0, 0, 0, 1];
+};
+
+/**
+ * @worklet
+ */
+export 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 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;
+};
+
+/**
+ * @worklet
+ */
+export 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];
+};
+
+/**
+ * @worklet
+ */
+export const toMatrix3 = (m: Matrix4) => {
+  "worklet";
+  return [m[0], m[1], m[3], m[4], m[5], m[7], m[12], m[13], m[15]];
+};
+
+const rotate = (axis: Vec3, value: number) => {
+  "worklet";
+  return rotatedUnitSinCos(
+    normalizeVec(axis),
+    Math.sin(value),
+    Math.cos(value)
+  );
+};
+
+/**
+ * @worklet
+ */
+export const pivot = (m: Matrix4, p: Point) => {
+  "worklet";
+  return multiply4(translate(p.x, p.y), multiply4(m, translate(-p.x, -p.y)));
+};
+
+/**
+ * @worklet
+ */
+export const scale = (
+  sx: number,
+  sy: number,
+  sz: number = 1,
+  p?: Point
+): Matrix4 => {
+  "worklet";
+  const m4: Matrix4 = [sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1];
+  if (p) {
+    return pivot(m4, p);
+  }
+  return m4;
+};
+
+const rotateAxis = (axis: Vec3, angle: number, p?: Point) => {
+  "worklet";
+  const result = rotate(axis, angle);
+  if (p) {
+    return pivot(result, p);
+  }
+  return result;
+};
+
+/**
+ * @worklet
+ */
+export const rotateZ = (value: number, p?: Point) => {
+  "worklet";
+  return rotateAxis([0, 0, 1], value, p);
+};
+
+/**
+ * @worklet
+ */
+export const rotateX = (value: number, p?: Point) => {
+  "worklet";
+  return rotateAxis([1, 0, 0], value, p);
+};
+
+/**
+ * @worklet
+ */
+export const rotateY = (value: number, p?: Point) => {
+  "worklet";
+  return rotateAxis([0, 1, 0], value, p);
+};
+
+/**
+ * @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";