How to use Gesture.Simultaneous with the Matrix handler in the Stickers example?

[VictorioMolina]

https://github.com/Shopify/react-native-skia/blob/cc7f30da719e7cfcc3e6c49f84a730ecb9e7f499/fabricexample/src/Examples/Stickers/GestureHandler.tsx

With Gesture.Race(), everything works as expected. But what about using Gesture.Simultaneous()?

In a simultaneous combo of gestures:

1. When rotating, pinching and panning seems to have no effect.
2. When pinching, panning has no effect.

Not sure, but seems the matrix is always overlapped by the last started gesture.

/* eslint-disable no-param-reassign */
import React, { memo } from "react";
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  runOnJS,
} from "react-native-reanimated";
import {
  multiply4,
  translate,
  scale,
  rotateZ,
  convertToColumnMajor,
  Matrix4,
} from "@shopify/react-native-skia";
import { useTheme } from "react-native-paper";

import {
  MatrixGesturePropTypes,
  areMatrixGesturePropsEqual,
} from "@atoms/gestures/types";
import { computeM4Transformation } from "@atoms/gestures/worklets";
import { globalStyles } from "@css";

/**
 * Component that provides gesture handling capabilities for panning, rotating,
 * and pinching elements. It manipulates a transformation matrix to apply
 * transformations to a given rectangular area.
 *
 * @typedef {React.FC<import("./types/gestures.d").MatrixGestureProps>}
 * @param {import("./types/gestures.d").MatrixGestureProps} props - Props.
 * @returns {React.ReactElement} A component that handles gestures and
 *   applies transformations using a matrix.
 */
function MatrixGesture({
  matrix,
  rect,
  debug = false,
  gestures = ["pan", "pinch", "rotate"],
  onPanBegin,
  onPanChange,
  onPanEnd,
  onPinchBegin,
  onPinchChange,
  onPinchEnd,
  onRotationBegin,
  onRotationChange,
  onRotationEnd,
}) {
  const { colors } = useTheme();

  const origin = useSharedValue({ x: 0, y: 0 });
  const offset = useSharedValue(Matrix4());

  /**
   * Handles the beginning of the pan gesture.
   *
   * @returns {void}
   */
  const handleOnPanBegin = () => {
    "worklet";

    const transformation = computeM4Transformation(matrix.value);

    if (onPanBegin) {
      runOnJS(onPanBegin)(transformation);
    }
  };

  /**
   * Handles changes in the pan gesture.
   *
   * @param {import("react-native-gesture-handler").GestureUpdateEvent<
   *   import("react-native-gesture-handler").PanGestureHandlerEventPayload &
   *   import("react-native-gesture-handler").PanGestureChangeEventPayload
   * >} e - The pan change event.
   * @returns {void}
   */
  const handleOnPanChange = ({ changeX, changeY }) => {
    "worklet";

    const a = translate(changeX, changeY);
    const b = matrix.value;

    matrix.value = multiply4(a, b);

    const transformation = computeM4Transformation(matrix.value);

    if (onPanChange) {
      runOnJS(onPanChange)(transformation);
    }
  };

  /**
   * Handles the end of the pan gesture.
   *
   * @returns {void}
   */
  const handleOnPanEnd = () => {
    "worklet";

    const transformation = computeM4Transformation(matrix.value);

    if (onPanEnd) {
      runOnJS(onPanEnd)(transformation);
    }
  };

  /**
   * Handles the beginning of the pinch gesture.
   *
   * @param {import("react-native-gesture-handler").GestureStateChangeEvent<
   *   import("react-native-gesture-handler").PinchGestureHandlerEventPayload
   * >} e - The pinch begin event.
   * @returns {void}
   */
  const handleOnPinchBegin = ({ focalX, focalY }) => {
    "worklet";

    const transformation = computeM4Transformation(matrix.value);

    origin.value = { x: focalX, y: focalY };
    offset.value = matrix.value;

    if (onPinchBegin) {
      runOnJS(onPinchBegin)(transformation);
    }
  };

  /**
   * Handles changes in the pinch gesture.
   *
   * @param {import("react-native-gesture-handler").GestureUpdateEvent<
   *   import("react-native-gesture-handler").PinchGestureHandlerEventPayload &
   *   import("react-native-gesture-handler").PinchGestureChangeEventPayload
   * >} e - The pinch change event.
   * @returns {void}
   */
  const handleOnPinchChange = (e) => {
    "worklet";

    const a = offset.value;
    const b = scale(e.scale, e.scale, 1, origin.value);

    matrix.value = multiply4(a, b);

    const transformation = computeM4Transformation(matrix.value);

    if (onPinchChange) {
      runOnJS(onPinchChange)(transformation);
    }
  };

  /**
   * Handles the end of the pinch gesture.
   *
   * @returns {void}
   */
  const handleOnPinchEnd = () => {
    "worklet";

    const transformation = computeM4Transformation(matrix.value);

    if (onPinchEnd) {
      runOnJS(onPinchEnd)(transformation);
    }
  };

  /**
   * Handles the beginning of the rotation gesture.
   *
   * @param {import("react-native-gesture-handler").GestureStateChangeEvent<
   *   import("react-native-gesture-handler").RotationGestureHandlerEventPayload
   * >} e - The rotation begin event.
   * @returns {void}
   */
  const handleOnRotationBegin = ({ anchorX, anchorY }) => {
    "worklet";

    origin.value = { x: anchorX, y: anchorY };
    offset.value = matrix.value;

    const transformation = computeM4Transformation(matrix.value);

    if (onRotationBegin) {
      runOnJS(onRotationBegin)(transformation);
    }
  };

  /**
   * Handles changes in the rotation gesture.
   *
   * @param {import("react-native-gesture-handler").GestureUpdateEvent<
   *   import("react-native-gesture-handler").RotationGestureHandlerEventPayload
   * >} e - The rotation change event.
   * @returns {void}
   */
  const handleOnRotationChange = ({ rotation }) => {
    "worklet";

    const a = offset.value;
    const b = rotateZ(rotation, origin.value);

    matrix.value = multiply4(a, b);

    const transformation = computeM4Transformation(matrix.value);

    if (onRotationChange) {
      runOnJS(onRotationChange)(transformation);
    }
  };

  /**
   * Handles the end of the rotation gesture.
   *
   * @returns {void}
   */
  const handleOnRotationEnd = () => {
    "worklet";

    const transformation = computeM4Transformation(matrix.value);

    if (onRotationEnd) {
      runOnJS(onRotationEnd)(transformation);
    }
  };

  const pan = Gesture.Pan()
    .averageTouches(true)
    .onBegin(handleOnPanBegin)
    .onChange(handleOnPanChange)
    .onEnd(handleOnPanEnd);

  const pinch = Gesture.Pinch()
    .onBegin(handleOnPinchBegin)
    .onChange(handleOnPinchChange)
    .onEnd(handleOnPinchEnd);

  const rotate = Gesture.Rotation()
    .onBegin(handleOnRotationBegin)
    .onChange(handleOnRotationChange)
    .onEnd(handleOnRotationEnd);

  const activeGestures = [
    gestures.includes("pan") ? pan : undefined,
    gestures.includes("pinch") ? pinch : undefined,
    gestures.includes("rotate") ? rotate : undefined,
  ].filter(Boolean);

  const gesture = Gesture.Simultaneous(...activeGestures);

  const style = useAnimatedStyle(() => {
    const m4 = convertToColumnMajor(matrix.value);

    // eslint-disable-next-line object-curly-newline
    const { x, y, width, height } = rect.value ?? rect;

    return {
      ...globalStyles.absolute,
      left: x,
      top: y,
      width,
      height,
      backgroundColor: debug ? "rgba(100, 200, 300, 0.4)" : colors.transparent,
      transform: [
        { translateX: -width / 2 },
        { translateY: -height / 2 },
        { matrix: m4 },
        { translateX: width / 2 },
        { translateY: height / 2 },
      ],
    };
  });

  return (
    <GestureDetector gesture={gesture}>
      <Animated.View style={style} />
    </GestureDetector>
  );
};

MatrixGesture.propTypes = MatrixGesturePropTypes;

export default memo(MatrixGesture, areMatrixGesturePropsEqual);