Merge pull request #2143 from Shopify/fix-pathtransform

Web support: fix minor regressions

Author: wcandillon

docs/static/img/blurred-paragraph-ios.png

@@ -8,6 +8,7 @@ import { useCallback, useMemo } from "react";
 import type { SkPath, SkPoint } from "../../skia/types";
 import { interpolatePaths, interpolateVector } from "../../animation";
 import { Skia } from "../../skia";
+import { Platform } from "../../Platform";
 
 import {
   useAnimatedReaction,
@@ -18,7 +19,7 @@ import {
 
 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;
   }

docs/static/img/opacity-paragraph-ios.png

@@ -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/external/reanimated/interpolators.ts

@@ -45,7 +45,7 @@ const CheckTogglingImage = ({}: EmptyProps) => {
     if (oslo && zurich) {
       h.current = setTimeout(() => {
         setIdx(1);
-      }, 20);
+      }, 200);
     }
     return () => {
       clearTimeout(h.current);

package/src/renderer/Canvas.tsx

@@ -227,6 +227,38 @@ 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 () => {
+    let result = await surface.eval((Skia) => {
+      const path = Skia.Path.MakeFromSVGString("M150 0L75 200L225 200L150 0Z")!;
+      const m = [1, 0, 0, 100, 0, 1, 0, 100, 0, 0, 1, 0, 0, 0, 0, 1];
+      path.transform([m[0], m[1], m[3], m[4], m[5], m[7], m[12], m[13], m[15]]);
+      return path.toSVGString();
+    });
+    expect(result).toEqual("M250 100L175 300L325 300L250 100Z");
+
+    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/renderer/__tests__/Data.spec.tsx

@@ -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/renderer/__tests__/e2e/Matrix4.spec.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/skia/web/JsiSkPath.ts

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