Merge pull request #2056 from Shopify/blur-depth

Accept Matrix4 in path.transform

Author: wcandillon

package/src/dom/types/Common.ts

@@ -3,10 +3,8 @@ import type { ReactNode } from "react";
 import type {
   BlendMode,
   Color,
-  Matrix3,
-  Matrix4,
+  InputMatrix,
   PaintStyle,
-  SkMatrix,
   SkPaint,
   SkPath,
   SkRect,
@@ -68,7 +66,7 @@ export type CircleDef = PointCircleDef | ScalarCircleDef;
 export interface TransformProps {
   transform?: Transforms3d;
   origin?: Vector;
-  matrix?: SkMatrix | Matrix4 | Matrix3 | number[];
+  matrix?: InputMatrix;
 }
 
 export interface PaintProps extends ChildrenProps {

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

@@ -8,7 +8,7 @@ import type { SkColor } from "./Color";
 import type { SkRRect } from "./RRect";
 import type { BlendMode } from "./Paint/BlendMode";
 import type { SkPoint, PointMode } from "./Point";
-import type { SkMatrix } from "./Matrix";
+import type { InputMatrix } from "./Matrix";
 import type { SkImageFilter } from "./ImageFilter";
 import type { SkVertices } from "./Vertices";
 import type { SkTextBlob } from "./TextBlob";
@@ -485,7 +485,7 @@ export interface SkCanvas {
    * Replaces current matrix with m premultiplied with the existing matrix.
    * @param m
    */
-  concat(m: SkMatrix | number[]): void;
+  concat(m: InputMatrix): void;
 
   /**
    * Draws the given picture using the current clip, current matrix, and the provided paint.

package/src/skia/types/Matrix.ts

@@ -7,7 +7,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 | Matrix4 | Matrix3 | number[]) => SkMatrix;
+  concat: (matrix: InputMatrix) => SkMatrix;
   translate: (x: number, y: number) => SkMatrix;
   scale: (x: number, y?: number) => SkMatrix;
   skew: (x: number, y: number) => SkMatrix;
@@ -20,6 +20,8 @@ export interface SkMatrix extends SkJSIInstance<"Matrix"> {
   get: () => number[];
 }
 
+export type InputMatrix = SkMatrix | Matrix3 | Matrix4 | number[];
+
 export interface TransformProp {
   transform?: Transforms3d;
 }

package/src/skia/types/Matrix4.ts

@@ -278,67 +278,65 @@ export const rotateY = (value: number, p?: Point) => {
  */
 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())
-  );
+  return 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

@@ -2,7 +2,7 @@ import type { SkRect } from "../Rect";
 import type { SkPoint } from "../Point";
 import type { SkRRect } from "../RRect";
 import type { StrokeJoin, StrokeCap } from "../Paint";
-import type { SkMatrix } from "../Matrix";
+import type { InputMatrix, SkMatrix } from "../Matrix";
 import type { SkJSIInstance } from "../JsiInstance";
 
 /**
@@ -540,7 +540,7 @@ export interface SkPath extends SkJSIInstance<"Path"> {
   /**
    * Transforms the path by the specified matrix.
    */
-  transform(m3: SkMatrix | number[]): SkPath;
+  transform(m3: InputMatrix): SkPath;
 
   /**
    * Interpolates between Path with point array of equal size.

package/src/skia/web/JsiSkMatrix.ts

@@ -1,12 +1,12 @@
 import type { CanvasKit, Matrix3x3 } from "canvaskit-wasm";
 
-import { toMatrix3, type Matrix3, type Matrix4, type SkMatrix } from "../types";
+import { toMatrix3 } from "../types";
+import type { SkMatrix, InputMatrix, Matrix4 } from "../types";
 
 import { HostObject } from "./Host";
 
-const isMatrixHostObject = (
-  obj: SkMatrix | number[] | Matrix4 | Matrix3
-): obj is SkMatrix => !Array.isArray(obj);
+const isMatrixHostObject = (obj: InputMatrix): obj is SkMatrix =>
+  !Array.isArray(obj);
 
 export class JsiSkMatrix
   extends HostObject<Matrix3x3, "Matrix">
@@ -28,7 +28,7 @@ export class JsiSkMatrix
     // Do nothing - the matrix is represenetd by a Float32Array
   };
 
-  concat(matrix: SkMatrix | number[] | Matrix4 | Matrix3) {
+  concat(matrix: InputMatrix) {
     this.preMultiply(
       // eslint-disable-next-line no-nested-ternary
       isMatrixHostObject(matrix)