[Version: 2.4.0] Rotation & Pinch with anchor points that consider the touch points?

[lsps9150414]

Goal

Gesture behavior that is present in the Instagram Story editor when moving, scaling, and rotating stickers.

In particular, when rotating a sticker with 2 fingers, 1 still and 1 moving, the still touchpoint is the anchor point.

When pinching, the scaling also respects the line of the touchpoints, the shape will scale away from the line. If you touch the bottom edge of a shape and pinch out, the shape will only grow above the line of your touches and the bottom edge of the shape will constantly be where your touches are.

Default behavior of the rotation gesture out-of-the-box

The anchorX and anchorY seems to be describing the center point of the 2 touches, which I assume is provided for the users to apply translate before and after rotate when transforming the UI in order to move the rotation anchor point away from the default center. (i.e. https://stackoverflow.com/questions/37165715/react-native-transforms-with-pivot-point)

However, as described in my goal, I want to use the touchpoint that is not moving as the anchor point instead of the center point of the touches. From the docs, it seems like such information is not possible to obtain from the gesture event.

Is there any way to build such gesture behavior with the current version? Perhaps use the Manual gesture and implement all pan, rotation, and pinch interactions from the ground up?

[lsps9150414]

I've found this repo which can calculate a transform matrix from given sets of points: https://github.com/axelpale/nudged

So technically it should be possible to provide (a) the 2 initial touchpoints from the activate event and (b) the current touchpoints from the update event to the lib and retrieve the translate, rotate, and scale params, which can then be applied to the component style.
The repo also supports setting a center point for rotation and scaling which when set with the still touchpoint will result in the behavior of the Instagram story editor.

I have not yet tried to implement this so not sure if it actually works as expected.

However, I'm still wondering if this is the easiest way to do it, or perhaps there is something built-in of RN-gesture-handler that I'm missing?

[lsps9150414]

This is answered here: #1826 (reply in thread)