Merge pull request #2059 from Shopify/web

Fix regression on RN Web

Author: wcandillon

example/src/Examples/Stickers/GestureHandler.tsx

@@ -5,28 +5,18 @@ import {
   rotateZ,
   scale,
   translate,
+  convertToColumnMajor,
+  convertToAffineMatrix,
 } from "@shopify/react-native-skia";
 import React from "react";
+import { Platform } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import type { SharedValue } from "react-native-reanimated";
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
 } from "react-native-reanimated";
 
-const convertToColumnMajor = (rowMajorMatrix: Matrix4) => {
-  "worklet";
-
-  const colMajorMatrix = new Array(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;
-};
-
 interface GestureHandlerProps {
   matrix: SharedValue<Matrix4>;
   dimensions: SkRect;
@@ -68,6 +58,7 @@ export const GestureHandler = ({
     });
 
   const style = useAnimatedStyle(() => {
+    const m4 = convertToColumnMajor(matrix.value);
     return {
       position: "absolute",
       left: x,
@@ -79,7 +70,7 @@ export const GestureHandler = ({
         { translateX: -width / 2 },
         { translateY: -height / 2 },
         {
-          matrix: convertToColumnMajor(matrix.value),
+          matrix: Platform.OS === "web" ? convertToAffineMatrix(m4) : m4,
         },
         { translateX: width / 2 },
         { translateY: height / 2 },

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/Matrix4.ts

@@ -340,3 +340,36 @@ export const processTransform3d = (transforms: Transforms3d) => {
     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];
+};