[NME] fix wheel behaviour and overscroll

[gomes042]

• fix [NME] Pinch on trackpad breaks layout #12536
• disable horizontal scroll (handle return back/next page)
• fix page overscroll

---

Before:

After:

[azure-pipelines]

Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s).
To prevent this PR from going to the changelog marked it with the "skip changelog" label.

[sebavan]

ohhhhh thanks a lot for the PR looks good to me but will add ppl who know way more than myself about the nme editor :-)

[azure-pipelines]

Snapshot stored with reference name:
refs/pull/12537/merge

Test environment:
https://babylonsnapshots.z22.web.core.windows.net/refs/pull/12537/merge/index.html

To test a playground add it to the URL, for example:

https://babylonsnapshots.z22.web.core.windows.net/refs/pull/12537/merge/index.html#WGZLGJ#4600

Links to test babylon tools with this snapshot:

https://playground.babylonjs.com/?snapshot=refs/pull/12537/merge
https://sandbox.babylonjs.com/?snapshot=refs/pull/12537/merge
https://gui.babylonjs.com/?snapshot=refs/pull/12537/merge
https://nme.babylonjs.com/?snapshot=refs/pull/12537/merge

To test the snapshot in the playground with a playground ID add it after the snapshot query string:

https://playground.babylonjs.com/?snapshot=refs/pull/12537/merge#BCU1XR#0

[gomes042]

Apparently it's not working on the snapshot completely as it should (probably because of index.html's). I recommend run it locally and review...

Remember to clear browser's cache please... 😅

[azure-pipelines]

Visualization tests for webgl2 have failed. If some tests failed because the snapshots do not match, the report can be found at

https://babylonsnapshots.z22.web.core.windows.net/refs/pull/12537/merge/testResults/webgl2/index.html

If tests were successful afterwards, this report might not be available anymore.

[RaananW]

Thanks! Certainly a needed change.

I'm not sure I'm happy about a global script tag in the html page. This can be done in one of the components as part of the react application.
TBH I'm not too sure how many of those prevent default calls are needed, but I'm sure you have tested that. I haven't tested the pr yet, this comment is only about the code location.

[carolhmj]

Tested and seems to be working nicely, just +1 on Raanan that it would be better to have the event listener in a component instead of in a global script. graphEditor.tsx would be a good place.

[gomes042]

The idea of the script on index.html was meant to overwrite the browser's default behavior as soon as the page is loaded, before the bundle is even loaded or any components are mounted. If the user zooms in before the page loads the whole JS bundle he will get stuck, the initial idea was to avoid it

[gomes042]

Which one is the best choice? Move the overwride to the graphEditor.tsx by adding and removing an eventListener in the respective componentDidMount and componentWillUnmount or leave it in the index.html for a behavior applied on browser before anything else?

[RaananW]

I would still prefer keeping implementation outside of index.html. There are many different reasons for that. The main one is the separation done between the static resources and the compiled resources.

[gomes042]

I would still prefer keeping implementation outside of index.html. There are many different reasons for that. The main one is the separation done between the static resources and the compiled resources.

Done 👍

[azure-pipelines]

Please make sure to label your PR with "bug", "new feature" or "breaking change" label(s).
To prevent this PR from going to the changelog marked it with the "skip changelog" label.

[azure-pipelines]

Snapshot stored with reference name:
refs/pull/12537/merge

Test environment:
https://babylonsnapshots.z22.web.core.windows.net/refs/pull/12537/merge/index.html

To test a playground add it to the URL, for example:

https://babylonsnapshots.z22.web.core.windows.net/refs/pull/12537/merge/index.html#WGZLGJ#4600

Links to test babylon tools with this snapshot:

https://playground.babylonjs.com/?snapshot=refs/pull/12537/merge
https://sandbox.babylonjs.com/?snapshot=refs/pull/12537/merge
https://gui.babylonjs.com/?snapshot=refs/pull/12537/merge
https://nme.babylonjs.com/?snapshot=refs/pull/12537/merge

To test the snapshot in the playground with a playground ID add it after the snapshot query string:

https://playground.babylonjs.com/?snapshot=refs/pull/12537/merge#BCU1XR#0