Fix minor regressions

Author: wcandillon

package/src/external/reanimated/interpolators.ts

@@ -15,10 +15,11 @@ import {
   useSharedValue,
   useDerivedValue,
 } from "./moduleWrapper";
+import { Platform } from "../../Platform";
 
 export const notifyChange = (value: SharedValue<unknown>) => {
   "worklet";
-  if (_WORKLET) {
+  if (_WORKLET || Platform.OS === "web") {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (value as any)._value = value.value;
   }

package/src/renderer/Canvas.tsx

@@ -17,8 +17,7 @@ import type { LayoutChangeEvent } from "react-native";
 import { SkiaDomView } from "../views";
 import { Skia } from "../skia/Skia";
 import type { TouchHandler, SkiaBaseViewProps } from "../views";
-import { SkiaDomView2 } from "../views/SkiaDomView2";
-import { Platform } from "../Platform";
+import { SkiaJSDomView } from "../views/SkiaJSDomView";
 
 import { SkiaRoot } from "./Reconciler";
 import { NATIVE_DOM } from "./HostComponents";
@@ -91,7 +90,7 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
       };
     }, [root]);
 
-    if (NATIVE_DOM || Platform.OS === "web") {
+    if (NATIVE_DOM) {
       return (
         <SkiaDomView
           ref={ref}
@@ -106,7 +105,7 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
       );
     } else {
       return (
-        <SkiaDomView2
+        <SkiaJSDomView
           Skia={Skia}
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           ref={ref as any}

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

@@ -227,6 +227,30 @@ describe("Matrix4", () => {
       0.1
     );
   });
+
+  it("Path.transform() should accept 4x4 (1)", async () => {
+    let result = await surface.eval((Skia) => {
+      const path = Skia.Path.MakeFromSVGString("M150 0L75 200L225 200L150 0Z")!;
+      path.transform([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
+      return path.toSVGString();
+    });
+    expect(result).toEqual("M150 0L75 200L225 200L150 0Z");
+
+    result = await surface.eval((Skia) => {
+      const path = Skia.Path.MakeFromSVGString("M150 0L75 200L225 200L150 0Z")!;
+      path.transform([1, 0, 0, 0, 0, 1, 0, 0, 0]);
+      return path.toSVGString();
+    });
+    expect(result).not.toEqual("M150 0L75 200L225 200L150 0Z");
+  });
+  it("Path.transform() should accept 4x4 (2)", async () => {
+    const result = await surface.eval((Skia) => {
+      const path = Skia.Path.MakeFromSVGString("M150 0L75 200L225 200L150 0Z")!;
+      path.transform([1, 0, 0, 100, 0, 1, 0, 100, 0, 0, 1, 0, 0, 0, 0, 1]);
+      return path.toSVGString();
+    });
+    expect(result).toEqual("M250 100L175 300L325 300L250 100Z");
+  });
   it("should correctly transform a point with an identity matrix", () => {
     const identityMatrix = Matrix4();
     const point = [100, -100, 200] as const; // Define some test point

package/src/skia/web/JsiSkPath.ts

@@ -1,4 +1,4 @@
-import type { CanvasKit, Path } from "canvaskit-wasm";
+import type { CanvasKit, Matrix3x3, Path } from "canvaskit-wasm";
 
 import { PathVerb } from "../types";
 import type {
@@ -11,6 +11,7 @@ import type {
   SkRect,
   InputRRect,
   StrokeOpts,
+  InputMatrix,
 } from "../types";
 
 import { getEnum, HostObject, optEnum } from "./Host";
@@ -339,8 +340,27 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
     return result === null ? result : this;
   }
 
-  transform(m3: SkMatrix) {
-    this.ref.transform(Array.isArray(m3) ? m3 : JsiSkMatrix.fromValue(m3));
+  transform(m: InputMatrix) {
+    let matrix =
+      m instanceof JsiSkMatrix
+        ? Array.from(JsiSkMatrix.fromValue<Matrix3x3>(m))
+        : (m as Exclude<InputMatrix, SkMatrix>);
+    if (matrix.length === 16) {
+      matrix = [
+        matrix[0],
+        matrix[1],
+        matrix[3],
+        matrix[4],
+        matrix[5],
+        matrix[7],
+        matrix[12],
+        matrix[13],
+        matrix[15],
+      ];
+    } else if (matrix.length !== 9) {
+      throw new Error(`Invalid matrix length: ${matrix.length}`);
+    }
+    this.ref.transform(matrix);
     return this;
   }
 

package/src/views/SkiaDomView2.tsx renamed to package/src/views/SkiaJSDomView.tsx

@@ -16,7 +16,7 @@ const NativeSkiaPictureView: HostComponent<SkiaPictureViewProps> =
     : // eslint-disable-next-line @typescript-eslint/no-explicit-any
       (null as any);
 
-export class SkiaDomView2 extends React.Component<
+export class SkiaJSDomView extends React.Component<
   SkiaDomViewProps & { Skia: Skia }
 > {
   constructor(props: SkiaDomViewProps & { Skia: Skia }) {

package/src/views/SkiaJSDomView.web.tsx

@@ -0,0 +1 @@
+export { SkiaDomView as SkiaJSDomView } from "./SkiaDomView";