@shopify/react-native-skia 0.1.228 → 0.1.229

package/lib/typescript/src/skia/types/Matrix.d.ts

@@ -3,7 +3,7 @@ import type { SkCanvas } from "./Canvas";
 import type { Matrix3, Matrix4, Transforms3d } from "./Matrix4";
 export declare const isMatrix: (obj: unknown) => obj is SkMatrix;
 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;
@@ -15,6 +15,7 @@ export interface SkMatrix extends SkJSIInstance<"Matrix"> {
     identity: () => SkMatrix;
     get: () => number[];
 }
+export type InputMatrix = SkMatrix | Matrix3 | Matrix4 | number[];
 export interface TransformProp {
     transform?: Transforms3d;
 }

package/lib/typescript/src/skia/types/Matrix4.d.ts

@@ -86,5 +86,13 @@ export declare const rotateY: (value: number, p?: Point) => Matrix4;
 /**
  * @worklet
  */
-export declare const processTransform3d: (transforms: Transforms3d) => number[];
+export declare const processTransform3d: (transforms: Transforms3d) => Matrix4;
+/**
+ * @worklet
+ */
+export declare const convertToColumnMajor: (rowMajorMatrix: Matrix4) => number[];
+/**
+ * @worklet
+ */
+export declare const convertToAffineMatrix: (m4: number[]) => number[];
 export {};

package/lib/typescript/src/skia/types/Path/Path.d.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";
 /**
  * Options used for Path.stroke(). If an option is omitted, a sensible default will be used.
@@ -440,7 +440,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.
      * Copy verb array and weights to result, and set result path to a weighted

package/lib/typescript/src/skia/web/JsiSkMatrix.d.ts

@@ -1,12 +1,12 @@
 import type { CanvasKit, Matrix3x3 } from "canvaskit-wasm";
-import { type Matrix3, type Matrix4, type SkMatrix } from "../types";
+import type { SkMatrix, InputMatrix } from "../types";
 import { HostObject } from "./Host";
 export declare class JsiSkMatrix extends HostObject<Matrix3x3, "Matrix"> implements SkMatrix {
     constructor(CanvasKit: CanvasKit, ref: Matrix3x3);
     private preMultiply;
     private postMultiply;
     dispose: () => void;
-    concat(matrix: SkMatrix | number[] | Matrix4 | Matrix3): this;
+    concat(matrix: InputMatrix): this;
     translate(x: number, y: number): this;
     postTranslate(x: number, y: number): this;
     scale(x: number, y?: number): this;

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.228",
+  "version": "0.1.229",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [

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/Canvas.tsx

@@ -14,11 +14,11 @@ import type {
 } from "react";
 import type { LayoutChangeEvent } from "react-native";
 
-import { SkiaDomView, SkiaPictureView } from "../views";
+import { SkiaDomView } from "../views";
+import { SkiaDomView as SkiaDomViewWeb } from "../views/SkiaDomView.web";
 import { Skia } from "../skia/Skia";
 import type { TouchHandler, SkiaBaseViewProps } from "../views";
 import type { SkiaValue } from "../values/types";
-import { JsiDrawingContext } from "../dom/types";
 
 import { SkiaRoot } from "./Reconciler";
 import { NATIVE_DOM } from "./HostComponents";
@@ -116,23 +116,16 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
         />
       );
     } 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 (
-        <SkiaPictureView
+        <SkiaDomViewWeb
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           ref={ref as any}
           style={style}
+          root={root.dom}
+          onTouch={onTouch}
+          onLayout={onLayout}
           mode={mode}
           debug={debug}
-          picture={picture}
-          onLayout={onLayout}
           {...props}
         />
       );

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,98 @@ 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());
+};
+
+/**
+ * @worklet
+ */
+export const convertToColumnMajor = (rowMajorMatrix: Matrix4) => {
+  "worklet";
+
+  const colMajorMatrix = new Array<number>(16);
+  const size = 4;
+  for (let row = 0; row < size; row++) {
+    for (let col = 0; col < size; col++) {
+      colMajorMatrix[col * size + row] = rowMajorMatrix[row * size + col];
+    }
+  }
+  return colMajorMatrix;
+};
+
+/**
+ * @worklet
+ */
+export const convertToAffineMatrix = (m4: number[]) => {
+  "worklet";
+  // Extracting the relevant components from the 4x4 matrix
+  const a = m4[0]; // Scale X
+  const b = m4[1]; // Skew Y
+  const c = m4[4]; // Skew X
+  const d = m4[5]; // Scale Y
+  const tx = m4[12]; // Translate X
+  const ty = m4[13]; // Translate Y
+
+  // Returning the 6-element affine transformation matrix
+  return [a, b, c, d, tx, ty];
 };

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)