Change offsetX and offsetY calculations in PointerEventManager
#2938
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
j-piasecki
approved these changes
Jun 14, 2024
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
referenced
this pull request
in valora-inc/wallet
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 [https://github.com/software-mansion/react-native-gesture-handler/pull/2903](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2903) - Unify touch events callbacks on `web` with respect to `Android` by [@​m-bert](https://togithub.com/m-bert) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2923](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2923) - Add `touchType` to `TouchEvent` by [@​latekvo](https://togithub.com/latekvo) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2941](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2941) #### 👍 Improvements - Refactor `GestureDetector` by [@​j-piasecki](https://togithub.com/j-piasecki) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2901](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2901) - Remove lodash by [@​m-bert](https://togithub.com/m-bert) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2916](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2916) - `PointerTracker` refactor. by [@​m-bert](https://togithub.com/m-bert) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2931](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2931) - Change `offsetX` and `offsetY` calculations in `PointerEventManager` by [@​m-bert](https://togithub.com/m-bert) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2938](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2938) #### 🐛 Bug fixes - Make `RootViewGestureHandler` handler cancel awaiting gestures by [@​j-piasecki](https://togithub.com/j-piasecki) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2900](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2900) - Get right bridge by [@​piaskowyk](https://togithub.com/piaskowyk) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2886](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2886) - Fix buttons getting stuck after scrolling on them by [@​j-piasecki](https://togithub.com/j-piasecki) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2693](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2693) - Fix Detector creating and attaching all gestures twice on first mount by [@​j-piasecki](https://togithub.com/j-piasecki) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2914](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2914) - Fix GestureDetector not working when its children change by [@​j-piasecki](https://togithub.com/j-piasecki) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2921](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2921) - Fix GestureDetector not working correctly with suspense and recycling by [@​j-piasecki](https://togithub.com/j-piasecki) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2925](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2925) - Fix nested buttons on the new architecture by [@​j-piasecki](https://togithub.com/j-piasecki) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2926](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2926) - Unify scaled coordinates between `web` and `native` side. by [@​m-bert](https://togithub.com/m-bert) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2943](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2943) - \[Web] Send relative coords in event. by [@​m-bert](https://togithub.com/m-bert) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2944](https://togithub.com/software-mansion/react-native-gesture-handler/pull/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 [https://github.com/software-mansion/react-native-gesture-handler/pull/2899](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2899) - Add Hire us section to docs by [@​patrycjakalinska](https://togithub.com/patrycjakalinska) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2904](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2904) - Bump ejs from 3.1.7 to 3.1.10 by [@​dependabot](https://togithub.com/dependabot) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2888](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2888) - Bump tar from 6.2.0 to 6.2.1 in /e2e/web-tests by [@​dependabot](https://togithub.com/dependabot) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2859](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2859) - docs: add [@​swmansion/t-rex-ui](https://togithub.com/swmansion/t-rex-ui) by [@​kacperkapusciak](https://togithub.com/kacperkapusciak) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2895](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2895) - Change navbar and footer to a reusable component by [@​patrycjakalinska](https://togithub.com/patrycjakalinska) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2902](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2902) - Add dark mode to button in `Hire us` section by [@​patrycjakalinska](https://togithub.com/patrycjakalinska) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2908](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2908) - Setup example app to use Expo by [@​bohdanprog](https://togithub.com/bohdanprog) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2905](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2905) - Revert "docs: add [@​swmansion/t-rex-ui](https://togithub.com/swmansion/t-rex-ui)" by [@​kacperkapusciak](https://togithub.com/kacperkapusciak) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2909](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2909) - Bump [@​sideway/formula](https://togithub.com/sideway/formula) from 3.0.0 to 3.0.1 by [@​dependabot](https://togithub.com/dependabot) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2910](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2910) - docs: add [@​swmansion/t-rex-ui](https://togithub.com/swmansion/t-rex-ui) by [@​patrycjakalinska](https://togithub.com/patrycjakalinska) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2911](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2911) - Fix symlink loop during pods installation by [@​j-piasecki](https://togithub.com/j-piasecki) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2917](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2917) - Bump rexml from 3.2.6 to 3.2.8 in /FabricExample by [@​dependabot](https://togithub.com/dependabot) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2915](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2915) - Add animated header to the example app by [@​j-piasecki](https://togithub.com/j-piasecki) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2913](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2913) - Add option to auto-open last example in the example app by [@​j-piasecki](https://togithub.com/j-piasecki) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2918](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2918) - Replace current theme components with `@swmansion/t-rex-ui` by [@​patrycjakalinska](https://togithub.com/patrycjakalinska) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2906](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2906) - Bump rexml from 3.2.6 to 3.2.8 in /MacOSExample by [@​dependabot](https://togithub.com/dependabot) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2924](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2924) - Bump rexml from 3.2.6 to 3.2.8 in /example by [@​dependabot](https://togithub.com/dependabot) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2930](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2930) - feat: automatically copy codegen artifacts to paper by [@​maciekstosio](https://togithub.com/maciekstosio) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2933](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2933) - Add swipeable example rewritten to new API by [@​latekvo](https://togithub.com/latekvo) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2934](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2934) - Fix new swipeable using useMemo with incomplete dependency list by [@​latekvo](https://togithub.com/latekvo) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2937](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2937) - docs: update Hire us links to directly lead to contact form by [@​kacperkapusciak](https://togithub.com/kacperkapusciak) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2935](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2935) - chore(types): add missing pointerType to GestureTouchEvent by [@​mgcrea](https://togithub.com/mgcrea) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2928](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2928) - Bump braces from 3.0.2 to 3.0.3 in /example by [@​dependabot](https://togithub.com/dependabot) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2945](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2945) - Bump braces from 3.0.2 to 3.0.3 in /e2e/web-tests by [@​dependabot](https://togithub.com/dependabot) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2946](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2946) - Bump ws from 6.2.2 to 6.2.3 by [@​dependabot](https://togithub.com/dependabot) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2947](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2947) - Bump ws from 6.2.2 to 6.2.3 in /e2e/web-tests by [@​dependabot](https://togithub.com/dependabot) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2948](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2948) - Add `relativeCoords` average to `PointerTracker` by [@​m-bert](https://togithub.com/m-bert) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2939](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2939) - Add missing import in docs by [@​piaskowyk](https://togithub.com/piaskowyk) in [https://github.com/software-mansion/react-native-gesture-handler/pull/2950](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2950) #### New Contributors - [@​bohdanprog](https://togithub.com/bohdanprog) made their first contribution in [https://github.com/software-mansion/react-native-gesture-handler/pull/2905](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2905) - [@​maciekstosio](https://togithub.com/maciekstosio) made their first contribution in [https://github.com/software-mansion/react-native-gesture-handler/pull/2933](https://togithub.com/software-mansion/react-native-gesture-handler/pull/2933) - [@​mgcrea](https://togithub.com/mgcrea) made their first contribution in [https://github.com/software-mansion/react-native-gesture-handler/pull/2928](https://togithub.com/software-mansion/react-native-gesture-handler/pull/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
While working on
PointerTrackerrefactor and addingrelativeCoordsto it, I've noticed thatoffsetX/offsetYinPointerEventManagerusePointerEvent.offsetX(andoffsetYrespectively) whileTouchEventManagercalculates this property by calculating the difference betweenclientXand bounding box (event.clientX - rect.left). I've decided to unify this behavior so thatoffsetis now calculated inPointerEventManagerthe same way as inTouchEventManager.As. you can see in the videos below, those 2 values may have different results - that is the main reason behind unifying them.
offsetproperty is used only inrelativeCoordswhich have been recently introduced, so it won't be a breaking change.Test plan
Tested by adding
console.tableinonPointerMoveinsidePanGestureHandlerdivwithPanBefore
Nagranie.z.ekranu.2024-06-11.o.12.08.55.mov
After
Nagranie.z.ekranu.2024-06-11.o.12.11.00.mov