Accept Matrix4 in path.transform

Author: wcandillon

package/src/renderer/__tests__/e2e/Matrix4.spec.tsx

@@ -9,16 +9,9 @@ import {
   processTransform3d,
   rotateX,
   translate,
+  toMatrix3,
 } from "../../../skia/types";
 
-/**
- * @worklet
- */
-export const toCKMatrix3 = (m: number[]) => {
-  "worklet";
-  return [m[0], m[1], m[3], m[4], m[5], m[7], m[12], m[13], m[15]];
-};
-
 const ckPerspective = (d: number) => [
   1,
   0,
@@ -43,7 +36,7 @@ const concat = (a: number[], b: number[]) => CanvasKit.M44.multiply(a, b);
 describe("Matrix4", () => {
   it("should be a row major matix", () => {
     const m4 = CanvasKit.M44.identity();
-    expect(processTransform3d([])).toEqual(toCKMatrix3(m4));
+    expect(processTransform3d([])).toEqual(m4);
   });
   it("should match identity matrix", () => {
     const m4 = CanvasKit.M44.identity();
@@ -54,7 +47,7 @@ describe("Matrix4", () => {
         { translateX: -256 / 2 },
         { translateY: -256 / 2 },
       ])
-    ).toEqual(toCKMatrix3(m4));
+    ).toEqual(m4);
   });
   it("Identity should match identity matrix", () => {
     const m4 = CanvasKit.M44.identity();
@@ -65,7 +58,7 @@ describe("Matrix4", () => {
         { translateX: -256 / 2 },
         { translateY: -256 / 2 },
       ])
-    ).toEqual(toCKMatrix3(m4));
+    ).toEqual(m4);
   });
   it("should match perspective matrix", () => {
     let m4 = CanvasKit.M44.identity();
@@ -80,15 +73,15 @@ describe("Matrix4", () => {
         { translateX: -256 / 2 },
         { translateY: -256 / 2 },
       ])
-    ).toEqual(toCKMatrix3(m4));
+    ).toEqual(m4);
   });
   it("should match rotation matrix (1)", () => {
     let m4 = CanvasKit.M44.identity();
     m4 = concat(m4, CanvasKit.M44.rotated([1, 0, 0], 1));
-    expect(processTransform3d([{ rotateX: 1 }])).toEqual(toCKMatrix3(m4));
+    expect(processTransform3d([{ rotateX: 1 }])).toEqual(m4);
     m4 = CanvasKit.M44.identity();
     m4 = concat(m4, CanvasKit.M44.rotated([0, 1, 0], Math.PI));
-    expect(processTransform3d([{ rotateY: Math.PI }])).toEqual(toCKMatrix3(m4));
+    expect(processTransform3d([{ rotateY: Math.PI }])).toEqual(m4);
   });
   it("should match rotation matrix (2)", () => {
     let m4 = CanvasKit.M44.identity();
@@ -103,7 +96,7 @@ describe("Matrix4", () => {
         { translateX: -256 / 2 },
         { translateY: -256 / 2 },
       ])
-    ).toEqual(toCKMatrix3(m4));
+    ).toEqual(m4);
   });
   it("Should do a perspective transformation (1)", async () => {
     const { width, height } = surface;
@@ -221,12 +214,14 @@ describe("Matrix4", () => {
     );
     // eslint-disable-next-line @typescript-eslint/no-explicit-any, jest/valid-expect
     (expect(result) as any).toBeApproximatelyEqual(
-      processTransform3d([
-        { translate: [width / 2, height / 2] },
-        { perspective: 300 },
-        { rotateX: 1 },
-        { translate: [-width / 2, -height / 2] },
-      ]),
+      toMatrix3(
+        processTransform3d([
+          { translate: [width / 2, height / 2] },
+          { perspective: 300 },
+          { rotateX: 1 },
+          { translate: [-width / 2, -height / 2] },
+        ])
+      ),
       0.1
     );
   });

package/src/skia/types/Canvas.ts

@@ -13,6 +13,7 @@ import type { SkImageFilter } from "./ImageFilter";
 import type { SkVertices } from "./Vertices";
 import type { SkTextBlob } from "./TextBlob";
 import type { SkPicture } from "./Picture";
+import type { Matrix4, Matrix3 } from "./Matrix4";
 
 export enum ClipOp {
   Difference,
@@ -485,7 +486,7 @@ export interface SkCanvas {
    * Replaces current matrix with m premultiplied with the existing matrix.
    * @param m
    */
-  concat(m: SkMatrix | number[]): void;
+  concat(m: SkMatrix | number[] | Matrix4 | Matrix3): void;
 
   /**
    * Draws the given picture using the current clip, current matrix, and the provided paint.

package/src/skia/types/Matrix4.ts

@@ -278,8 +278,7 @@ export const rotateY = (value: number, p?: Point) => {
  */
 export const processTransform3d = (transforms: Transforms3d) => {
   "worklet";
-  return toMatrix3(
-    transforms.reduce((acc, val) => {
+  return transforms.reduce((acc, val) => {
       const key = Object.keys(val)[0] as Transform3dName;
       const transform = val as Pick<Transformations, typeof key>;
       if (key === "translateX") {
@@ -339,6 +338,5 @@ export const processTransform3d = (transforms: Transforms3d) => {
         return multiply4(acc, value);
       }
       return exhaustiveCheck(key);
-    }, Matrix4())
-  );
+    }, Matrix4());
 };

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

@@ -4,6 +4,7 @@ import type { SkRRect } from "../RRect";
 import type { StrokeJoin, StrokeCap } from "../Paint";
 import type { SkMatrix } from "../Matrix";
 import type { SkJSIInstance } from "../JsiInstance";
+import { Matrix3, Matrix4 } from "../Matrix4";
 
 /**
  * Options used for Path.stroke(). If an option is omitted, a sensible default will be used.
@@ -540,7 +541,7 @@ export interface SkPath extends SkJSIInstance<"Path"> {
   /**
    * Transforms the path by the specified matrix.
    */
-  transform(m3: SkMatrix | number[]): SkPath;
+  transform(m3: SkMatrix | number[] | Matrix3 | Matrix4): SkPath;
 
   /**
    * Interpolates between Path with point array of equal size.