Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Unify scaled coordinates between web and native side. #2943

Merged
merged 4 commits into from
Jun 14, 2024
Merged

Unify scaled coordinates between web and native side. #2943

merged 4 commits into from
Jun 14, 2024

Conversation

m-bert
Copy link
Contributor

@m-bert m-bert commented Jun 13, 2024

Description

On android and iOS if 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 size 100x100. If you click in the middle, x and y fields in event will both be 50. Now, if you scale this view by 2 (i.e. new size is 200x200) 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 in transformations

@m-bert m-bert requested review from j-piasecki and latekvo June 13, 2024 11:39
latekvo
latekvo reviewed Jun 13, 2024
View reviewed changes
src/web/utils.ts Outdated Show resolved Hide resolved
latekvo
latekvo approved these changes Jun 13, 2024
View reviewed changes
Copy link
Contributor

@latekvo latekvo left a comment

Choose a reason for hiding this comment

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

lgtm 🪨

@m-bert m-bert requested a review from j-piasecki June 14, 2024 07:18
j-piasecki
j-piasecki approved these changes Jun 14, 2024
View reviewed changes
Copy link
Member

@j-piasecki j-piasecki left a comment

Choose a reason for hiding this comment

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

We also need something like that for rotation, don't we?

@m-bert
Copy link
Contributor Author

m-bert commented 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 m-bert merged commit f393b8e into main Jun 14, 2024
2 checks passed
@m-bert m-bert deleted the @mbert/fix-scaled-coordinates branch June 14, 2024 08:18
@m-bert m-bert mentioned this pull request Jun 14, 2024
Merged
m-bert added a commit that referenced this pull request Jun 14, 2024
@m-bert
[Web] Send relative coords in event. (#2944)
8110301 
## 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
@renovate
fix(deps): update dependency react-native-gesture-handler to ^2.17.1 (#…
7661d22 
…5575)

[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](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)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/react-native-gesture-handler/2.17.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/react-native-gesture-handler/2.17.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/react-native-gesture-handler/2.16.2/2.17.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/react-native-gesture-handler/2.16.2/2.17.1?slim=true)](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
[@&#8203;j-piasecki](https://togithub.com/j-piasecki) in
[#&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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 [@&#8203;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
[@&#8203;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 [@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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 [@&#8203;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
[@&#8203;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 [@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;swmansion/t-rex-ui](https://togithub.com/swmansion/t-rex-ui) by
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;swmansion/t-rex-ui](https://togithub.com/swmansion/t-rex-ui)"
by [@&#8203;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 [@&#8203;sideway/formula](https://togithub.com/sideway/formula)
from 3.0.0 to 3.0.1 by
[@&#8203;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
[@&#8203;swmansion/t-rex-ui](https://togithub.com/swmansion/t-rex-ui) by
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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
[@&#8203;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

- [@&#8203;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)
- [@&#8203;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)
- [@&#8203;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>
@2lambda123 2lambda123 mentioned this pull request Jul 10, 2024
Merged
@toomeem toomeem mentioned this pull request Jul 11, 2024
Merged
@Abellache-Rabah Abellache-Rabah mentioned this pull request Jul 13, 2024
Open
@ColeCoffman ColeCoffman mentioned this pull request Jul 17, 2024
Open
@toomeem toomeem mentioned this pull request Jul 18, 2024
Open
@tiago002pro tiago002pro mentioned this pull request Aug 5, 2024
Open
@Cabreira97 Cabreira97 mentioned this pull request Aug 23, 2024
Open
@ColeCoffman ColeCoffman mentioned this pull request Aug 30, 2024
Open
@undrthegraveyard undrthegraveyard mentioned this pull request Sep 4, 2024
Closed
@Bonnie-TJ Bonnie-TJ mentioned this pull request Sep 4, 2024
Merged
@SanteriMertakorpi SanteriMertakorpi mentioned this pull request Sep 20, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@latekvo latekvo latekvo approved these changes

@j-piasecki j-piasecki j-piasecki approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@m-bert @j-piasecki @latekvo