Unify scaled coordinates between web and native side.
#2943
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
latekvo
reviewed
Jun 13, 2024
j-piasecki
reviewed
Jun 14, 2024
j-piasecki
approved these changes
Jun 14, 2024
|
@j-piasecki Probably we do, I've missed that so thanks for reminding me. Also, I think it will be better to do it in other PR, I hope you don't mind. |
m-bert
added a commit
that referenced
this pull request
Jun 14, 2024
## Description Changes made in #2938 and #2939 allowed us to calculate `x` and `y` relative to given `View` with the same method on `PointerEvents` and `TouchEvents`. This PR changes logic in `GestureHandler` base class, so that now it sends relative coordinates calculated by tracker. This change, combined with the one from #2943, makes handlers send correct relative coords. > [!NOTE] > New coords may not be correct if the `view` is rotated, or some of its ancestors are scaled. These cases will be handled in different PRs. ## Test plan Copy snippet below and paste it into `transformNativeEvent` in `GestureHandler.ts` <details> <summary> Logs snippet </summary> ```jsx const rect = this.delegate.measureView(); const old = { x: lastCoords.x - rect.pageX, y: lastCoords.y - rect.pageY, }; console.table({ oldX: old.x, oldY: old.y, newX: lastRelativeCoords.x, newY: lastRelativeCoords.y, dx: old.x - lastRelativeCoords.x, dy: old.y - lastRelativeCoords.y, }); ``` </details> Here's example video that shows difference between those calculations: https://github.com/software-mansion/react-native-gesture-handler/assets/63123542/d3a0575c-3821-4d2a-ac96-a0c3a870a1f5
github-merge-queue bot
pushed a commit
to valora-inc/wallet
that referenced
this pull request
Jun 26, 2024
…5575) [](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [react-native-gesture-handler](https://togithub.com/software-mansion/react-native-gesture-handler) | [`^2.16.2` -> `^2.17.1`](https://renovatebot.com/diffs/npm/react-native-gesture-handler/2.16.2/2.17.1) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>software-mansion/react-native-gesture-handler (react-native-gesture-handler)</summary> ### [`v2.17.1`](https://togithub.com/software-mansion/react-native-gesture-handler/releases/tag/2.17.1) [Compare Source](https://togithub.com/software-mansion/react-native-gesture-handler/compare/2.17.0...2.17.1) #### 🐛 Bug fixes - Don't register `checkIntegrityBetweenArchitectures` task when installed as a dependency by [@​j-piasecki](https://togithub.com/j-piasecki) in [#​2953](https://togithub.com/software-mansion/react-native-gesture-handler/issues/2953) **Full Changelog**: software-mansion/react-native-gesture-handler@2.17.0...2.17.1 ### [`v2.17.0`](https://togithub.com/software-mansion/react-native-gesture-handler/releases/tag/2.17.0) [Compare Source](https://togithub.com/software-mansion/react-native-gesture-handler/compare/2.16.2...2.17.0) #### ❗ Important changes - Add `ref` property to `Buttons` by [@​m-bert](https://togithub.com/m-bert) in [software-mansion/react-native-gesture-handler#2903 - Unify touch events callbacks on `web` with respect to `Android` by [@​m-bert](https://togithub.com/m-bert) in [software-mansion/react-native-gesture-handler#2923 - Add `touchType` to `TouchEvent` by [@​latekvo](https://togithub.com/latekvo) in [software-mansion/react-native-gesture-handler#2941 #### 👍 Improvements - Refactor `GestureDetector` by [@​j-piasecki](https://togithub.com/j-piasecki) in [software-mansion/react-native-gesture-handler#2901 - Remove lodash by [@​m-bert](https://togithub.com/m-bert) in [software-mansion/react-native-gesture-handler#2916 - `PointerTracker` refactor. by [@​m-bert](https://togithub.com/m-bert) in [software-mansion/react-native-gesture-handler#2931 - Change `offsetX` and `offsetY` calculations in `PointerEventManager` by [@​m-bert](https://togithub.com/m-bert) in [software-mansion/react-native-gesture-handler#2938 #### 🐛 Bug fixes - Make `RootViewGestureHandler` handler cancel awaiting gestures by [@​j-piasecki](https://togithub.com/j-piasecki) in [software-mansion/react-native-gesture-handler#2900 - Get right bridge by [@​piaskowyk](https://togithub.com/piaskowyk) in [software-mansion/react-native-gesture-handler#2886 - Fix buttons getting stuck after scrolling on them by [@​j-piasecki](https://togithub.com/j-piasecki) in [software-mansion/react-native-gesture-handler#2693 - Fix Detector creating and attaching all gestures twice on first mount by [@​j-piasecki](https://togithub.com/j-piasecki) in [software-mansion/react-native-gesture-handler#2914 - Fix GestureDetector not working when its children change by [@​j-piasecki](https://togithub.com/j-piasecki) in [software-mansion/react-native-gesture-handler#2921 - Fix GestureDetector not working correctly with suspense and recycling by [@​j-piasecki](https://togithub.com/j-piasecki) in [software-mansion/react-native-gesture-handler#2925 - Fix nested buttons on the new architecture by [@​j-piasecki](https://togithub.com/j-piasecki) in [software-mansion/react-native-gesture-handler#2926 - Unify scaled coordinates between `web` and `native` side. by [@​m-bert](https://togithub.com/m-bert) in [software-mansion/react-native-gesture-handler#2943 - \[Web] Send relative coords in event. by [@​m-bert](https://togithub.com/m-bert) in [software-mansion/react-native-gesture-handler#2944 #### 🔢 Miscellaneous - Add information about `GestureHandlerRootView` area and change component name in quick start section in docs. by [@​m-bert](https://togithub.com/m-bert) in [software-mansion/react-native-gesture-handler#2899 - Add Hire us section to docs by [@​patrycjakalinska](https://togithub.com/patrycjakalinska) in [software-mansion/react-native-gesture-handler#2904 - Bump ejs from 3.1.7 to 3.1.10 by [@​dependabot](https://togithub.com/dependabot) in [software-mansion/react-native-gesture-handler#2888 - Bump tar from 6.2.0 to 6.2.1 in /e2e/web-tests by [@​dependabot](https://togithub.com/dependabot) in [software-mansion/react-native-gesture-handler#2859 - docs: add [@​swmansion/t-rex-ui](https://togithub.com/swmansion/t-rex-ui) by [@​kacperkapusciak](https://togithub.com/kacperkapusciak) in [software-mansion/react-native-gesture-handler#2895 - Change navbar and footer to a reusable component by [@​patrycjakalinska](https://togithub.com/patrycjakalinska) in [software-mansion/react-native-gesture-handler#2902 - Add dark mode to button in `Hire us` section by [@​patrycjakalinska](https://togithub.com/patrycjakalinska) in [software-mansion/react-native-gesture-handler#2908 - Setup example app to use Expo by [@​bohdanprog](https://togithub.com/bohdanprog) in [software-mansion/react-native-gesture-handler#2905 - Revert "docs: add [@​swmansion/t-rex-ui](https://togithub.com/swmansion/t-rex-ui)" by [@​kacperkapusciak](https://togithub.com/kacperkapusciak) in [software-mansion/react-native-gesture-handler#2909 - Bump [@​sideway/formula](https://togithub.com/sideway/formula) from 3.0.0 to 3.0.1 by [@​dependabot](https://togithub.com/dependabot) in [software-mansion/react-native-gesture-handler#2910 - docs: add [@​swmansion/t-rex-ui](https://togithub.com/swmansion/t-rex-ui) by [@​patrycjakalinska](https://togithub.com/patrycjakalinska) in [software-mansion/react-native-gesture-handler#2911 - Fix symlink loop during pods installation by [@​j-piasecki](https://togithub.com/j-piasecki) in [software-mansion/react-native-gesture-handler#2917 - Bump rexml from 3.2.6 to 3.2.8 in /FabricExample by [@​dependabot](https://togithub.com/dependabot) in [software-mansion/react-native-gesture-handler#2915 - Add animated header to the example app by [@​j-piasecki](https://togithub.com/j-piasecki) in [software-mansion/react-native-gesture-handler#2913 - Add option to auto-open last example in the example app by [@​j-piasecki](https://togithub.com/j-piasecki) in [software-mansion/react-native-gesture-handler#2918 - Replace current theme components with `@swmansion/t-rex-ui` by [@​patrycjakalinska](https://togithub.com/patrycjakalinska) in [software-mansion/react-native-gesture-handler#2906 - Bump rexml from 3.2.6 to 3.2.8 in /MacOSExample by [@​dependabot](https://togithub.com/dependabot) in [software-mansion/react-native-gesture-handler#2924 - Bump rexml from 3.2.6 to 3.2.8 in /example by [@​dependabot](https://togithub.com/dependabot) in [software-mansion/react-native-gesture-handler#2930 - feat: automatically copy codegen artifacts to paper by [@​maciekstosio](https://togithub.com/maciekstosio) in [software-mansion/react-native-gesture-handler#2933 - Add swipeable example rewritten to new API by [@​latekvo](https://togithub.com/latekvo) in [software-mansion/react-native-gesture-handler#2934 - Fix new swipeable using useMemo with incomplete dependency list by [@​latekvo](https://togithub.com/latekvo) in [software-mansion/react-native-gesture-handler#2937 - docs: update Hire us links to directly lead to contact form by [@​kacperkapusciak](https://togithub.com/kacperkapusciak) in [software-mansion/react-native-gesture-handler#2935 - chore(types): add missing pointerType to GestureTouchEvent by [@​mgcrea](https://togithub.com/mgcrea) in [software-mansion/react-native-gesture-handler#2928 - Bump braces from 3.0.2 to 3.0.3 in /example by [@​dependabot](https://togithub.com/dependabot) in [software-mansion/react-native-gesture-handler#2945 - Bump braces from 3.0.2 to 3.0.3 in /e2e/web-tests by [@​dependabot](https://togithub.com/dependabot) in [software-mansion/react-native-gesture-handler#2946 - Bump ws from 6.2.2 to 6.2.3 by [@​dependabot](https://togithub.com/dependabot) in [software-mansion/react-native-gesture-handler#2947 - Bump ws from 6.2.2 to 6.2.3 in /e2e/web-tests by [@​dependabot](https://togithub.com/dependabot) in [software-mansion/react-native-gesture-handler#2948 - Add `relativeCoords` average to `PointerTracker` by [@​m-bert](https://togithub.com/m-bert) in [software-mansion/react-native-gesture-handler#2939 - Add missing import in docs by [@​piaskowyk](https://togithub.com/piaskowyk) in [software-mansion/react-native-gesture-handler#2950 #### New Contributors - [@​bohdanprog](https://togithub.com/bohdanprog) made their first contribution in [software-mansion/react-native-gesture-handler#2905 - [@​maciekstosio](https://togithub.com/maciekstosio) made their first contribution in [software-mansion/react-native-gesture-handler#2933 - [@​mgcrea](https://togithub.com/mgcrea) made their first contribution in [software-mansion/react-native-gesture-handler#2928 **Full Changelog**: software-mansion/react-native-gesture-handler@2.16.2...2.17.0 </details> --- ### Configuration 📅 **Schedule**: Branch creation - "after 5pm,every weekend" in timezone America/Los_Angeles, Automerge - "after 5pm,every weekend" in timezone America/Los_Angeles. 🚦 **Automerge**: Enabled. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/valora-inc/wallet). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy40MTMuMiIsInVwZGF0ZWRJblZlciI6IjM3LjQxMy4yIiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6WyJucG0iLCJyZW5vdmF0ZSJdfQ==--> --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: valora-bot <valorabot@valoraapp.com>
](https://renovatebot.com){kind=link}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
On
androidandiOSif you scale view and get relative coords, they will act like they were not scaled at all. Let's say that we have a square with size100x100. If you click in the middle,xandyfields in event will both be50. Now, if you scale this view by 2 (i.e. new size is200x200) and click in the middle, you'll still get values of 50.Web takes scale into account and on the above situation, second output would be
100. To unify this behavior we now divide coords by scale factors.Test plan
Add
console.log(e.x, e.y)in any example with scale, for example intransformations