Skip to content

[docs] Add guide for transformations example#4289

Open
m-bert wants to merge 3 commits into
mainfrom
@mbert/transformations-matrix
Open

[docs] Add guide for transformations example#4289
m-bert wants to merge 3 commits into
mainfrom
@mbert/transformations-matrix

Conversation

@m-bert

@m-bert m-bert commented Jul 1, 2026

Copy link
Copy Markdown
Collaborator

Description

Originally we thought about adding useTransformGesture hook. However, we decided to drop the idea and describe important caveats in docs guide.

I've also updated transformations examples to use 3x3 matrices instead of 4x4.

Test plan

  • Transformations examples
  • Read docs 🤓

Copilot AI review requested due to automatic review settings July 1, 2026 08:46
@m-bert m-bert added the Documentation Documentation change/enhancement label Jul 1, 2026

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds a new documentation guide explaining how to implement a “photo viewer” interaction (pan + pinch + rotation simultaneously) using matrix composition, and updates the transformations examples to use 3×3 affine matrices instead of 4×4 matrices.

Changes:

  • Added a new “Transforming a view” guide with conceptual explanation and a full example.
  • Updated both example-app transformations screens to use 3×3 matrix helpers (identity3/multiply3/translate3/scale3/rotate3) and adjusted translation indices accordingly.
  • Aligned transformed-coordinate conversion to the new 3×3 matrix layout (2×2 linear part extracted from [0,1,3,4]).

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File Description
packages/docs-gesture-handler/docs/guides/transformations.mdx New guide documenting multi-gesture transforms via affine matrices, including a full example snippet.
apps/common-app/src/new_api/complicated/transformations/index.tsx Migrates the new API transformations example from 4×4 to 3×3 matrix math and updates transform extraction.
apps/common-app/src/legacy/v2_api/transformations/index.tsx Migrates the legacy/v2 API transformations example from 4×4 to 3×3 matrix math and updates transform extraction.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +113 to +115
const det = a * d - b * c;

return [d / det, -b / det, -c / det, a / det];

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Comment thread packages/docs-gesture-handler/docs/guides/transformations.mdx
@m-bert m-bert requested a review from j-piasecki July 1, 2026 09:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Documentation Documentation change/enhancement

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants