Improve rotate experience when close to center #5104

HarelM · 2024-11-24T14:14:56Z

Launch Checklist

This is a continue of the following PR, where a comment mention that the experience around the center it not great.

Improve rotate UX #5074

I have reverted to experience around the center to be as it was before my change.
Up until 100 pixels from the center.
Simplified the navigation control to use a single handler.

Confirm your changes do not include backports from Mapbox projects (unless with compliant license) - if you are not sure about this, please ask!
Briefly describe the changes in this PR.
Link to related issues.
Add an entry to CHANGELOG.md under the ## main section.

codecov · 2024-11-24T14:18:00Z

Codecov Report

Attention: Patch coverage is 98.73418% with 1 line in your changes missing coverage. Please review.

Project coverage is 91.81%. Comparing base (662700d) to head (27a21da).
Report is 2 commits behind head on main.

❌ We are unable to process any of the uploaded JUnit XML files. Please ensure your files are in the right format.

Files with missing lines	Patch %	Lines
src/ui/handler/drag_move_state_manager.ts	96.15%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #5104      +/-   ##
==========================================
- Coverage   91.81%   91.81%   -0.01%     
==========================================
  Files         279      278       -1     
  Lines       38347    38318      -29     
  Branches     6702     6703       +1     
==========================================
- Hits        35209    35181      -28     
+ Misses       3006     3004       -2     
- Partials      132      133       +1

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

kubapelc

Works much better around the center!

I'm still not a fan of this control scheme as a whole though, I can't intuitively predict how will mouse movements translate to map rotation, even after playing with the map for a while and reading about how the new rotation controls work.

HarelM · 2024-11-25T08:52:34Z

I think only you and I have rotated the map on the desktop and are aware of this issue :-) otherwise I would've expected other people to complain about the behavior...
Thanks for the review!

HarelM · 2024-11-25T08:53:57Z

I see now that coverage is a bit lacking, I'll see if I can solve that.

…ulate

…/maplibre-gl-js into improve-ux-for-rotation

HarelM · 2024-11-26T07:36:12Z

@kubapelc let me know if you want to review this again, I've changed the navigation control heavily...

ibesora

I agree with @kubapelc that the handling is not great via mouse because you don't get an intuition of what will happen but this is an improvement over what we have currently.

Added a couple of minor comments but approving either way

ibesora · 2024-11-27T08:32:05Z

src/ui/control/navigation_control.test.ts

@@ -84,7 +84,7 @@ describe('NavigationControl', () => {
        const navRect = navButton.getClientRects();

        const buttonX = (navRect.x ?? 0) + (navRect.width ?? 0) / 2;
-        const buttonY = (navRect.y ?? 0) + (navRect.height ?? 0) / 2;
+        const buttonY = (navRect.y ?? 0) + (navRect.height ?? 0) / 2 - 1;


What's this -1 doing here?
Can we add a comment so it's clear what it's doing?

Instead of dragging from the exact center of the button where it won't change the rotation I moved the drag to be one pixel lower.

ibesora · 2024-11-27T08:32:14Z

src/ui/control/navigation_control.test.ts

@@ -168,7 +168,7 @@ describe('NavigationControl', () => {
        const navRect = navButton.getClientRects();

        const buttonX = (navRect.x ?? 0) + (navRect.width ?? 0) / 2;
-        const buttonY = (navRect.y ?? 0) + (navRect.height ?? 0) / 2;
+        const buttonY = (navRect.y ?? 0) + (navRect.height ?? 0) / 2 - 1;


src/ui/handler/drag_move_state_manager.ts

This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [maplibre-gl](https://maplibre.org/) ([source](https://github.com/maplibre/maplibre-gl-js)) | dependencies | major | [`4.7.1` -> `5.1.0`](https://renovatebot.com/diffs/npm/maplibre-gl/4.7.1/5.1.0) | --- ### Release Notes <details> <summary>maplibre/maplibre-gl-js (maplibre-gl)</summary> ### [`v5.1.0`](https://github.com/maplibre/maplibre-gl-js/blob/HEAD/CHANGELOG.md#510) [Compare Source](maplibre/maplibre-gl-js@v5.0.1...v5.1.0) ##### ✨ Features and improvements - Add support for `vertical-align` in `format` expression ([specification](https://maplibre.org/maplibre-style-spec/expressions/#format))([#5043](https://github.com/maplibre/maplibre-gl-js/pull/5043)). ##### 🐞 Bug fixes - Render frame synchronized again in requestAnimationFrame callback ([#4535](maplibre/maplibre-gl-js#4535)) ### [`v5.0.1`](https://github.com/maplibre/maplibre-gl-js/blob/HEAD/CHANGELOG.md#501) [Compare Source](maplibre/maplibre-gl-js@v5.0.0...v5.0.1) ##### ✨ Features and improvements - ⚠️ Revert changes made in `geometry-type` ([#5285](maplibre/maplibre-gl-js#5331)). This change was causing issues in a [large number of styles](maplibre/maplibre-style-spec#965) and thus reverted. ##### 🐞 Bug fixes - Skip control button css hover effects on touch devices ([#5285](maplibre/maplibre-gl-js#5285)) ### [`v5.0.0`](https://github.com/maplibre/maplibre-gl-js/blob/HEAD/CHANGELOG.md#500) [Compare Source](maplibre/maplibre-gl-js@v4.7.1...v5.0.0) ##### ✨ Features and improvements - \~~⚠️ Changed `geometry-type` to identify "Multi-" features ([#4877](maplibre/maplibre-gl-js#4877)). Use `$type` which has no "Multi-" support or use `in` expression to get the previous behavior.~~ - ⚠️ `StyleLayer`'s `queryIntersectsFeature` method parameters were moved to `QueryIntersectsFeatureParams`. ([#5276](maplibre/maplibre-gl-js#5276)) Wrap the method parameters with `{}` to solve this - ⚠️ Support setting WebGL context options on map creation ([#5196](maplibre/maplibre-gl-js#5196)). Previously supported WebGL context options like `antialias`, `preserveDrawingBuffer` and `failIfMajorPerformanceCaveat` must now be defined inside the `canvasContextAttributes` object on `MapOptions`. - ⚠️ Change the return type of `on` method to return a `Subscription` to allow for easy unsubscribe ([#5080](maplibre/maplibre-gl-js#5080)). `map.on('x').on('y')` => `map.on('x'); map.on('y');`. - ⚠️ Change drag rotate behavior to be around the center of the screen ([#5074](maplibre/maplibre-gl-js#5074)) - ⚠️ Return actual altitude from queryTerrainElevation + Pass non-translated matrices to custom layer on mercator map ([#3854](maplibre/maplibre-gl-js#3854)) - ⚠️ Remove unminified prod build ([#4906](maplibre/maplibre-gl-js#4906)). You'll need to use a different build. - Allows setting the desired WebGL version to use ([#5236](maplibre/maplibre-gl-js#5236)). You can now use `contextType` inside `canvasContextAttributes` to choose which WebGL version to use - Dual-Stack WebGL Runtime with WebGL2 to WebGL1 Fallback ([#5198](maplibre/maplibre-gl-js#5198)) - Add support for projection type expression as part of a refactoring of the transfrom and projection classes ([#5139](maplibre/maplibre-gl-js#5139)) - Export `Event` class ([#5016](maplibre/maplibre-gl-js#5016)) - Support Vertical Perspective projection ([#5023](maplibre/maplibre-gl-js#5023)) - When clustering circles and the promoteId is set to some parameter, the promoted ID is used on non-clustered features and the cluster_id is used on clustered features. Previously the ID was undefined for non-clustered features ([#4899](maplibre/maplibre-gl-js#4899)) - Support Terrain in Globe projection ([#4976](maplibre/maplibre-gl-js#4976)) - Improved performance of the `coveringTiles` (tile culling) function for globe ([#4937](maplibre/maplibre-gl-js#4937)) - Catches network fetching errors such as CORS, DNS or malformed URL as actual `AJAXError` to expose HTTP request details to the `"error"` event (maplibre/maplibre-gl-js#4822) - Add setVerticalFieldOfView() to public API ([#4717](maplibre/maplibre-gl-js#4717)) - Disable sky when using globe and blend it in when changing to mercator ([#4853](maplibre/maplibre-gl-js#4853)) - New GlobeControl ([#4960](maplibre/maplibre-gl-js#4960)) - Add support for pitch > 90 degrees ([#4717](maplibre/maplibre-gl-js#4717)) - Add support for camera roll angle ([#4717](maplibre/maplibre-gl-js#4717)) - Improve performance of `queryRenderedFeatures` by using JavaScript `Set`s to assess layer membership internally ([#4777](maplibre/maplibre-gl-js#4777)) - Support globe mode ([#3963](maplibre/maplibre-gl-js#3963)) - Merge atmosphere and sky implementation ([#3888](maplibre/maplibre-gl-js#3888)) - Add option to display a realistic atmosphere when using a Globe projection ([#3888](maplibre/maplibre-gl-js#3888)) ##### 🐞 Bug fixes - ⚠️ Fix level of detail at high pitch angle by changing which tiles to load ([#3983](maplibre/maplibre-gl-js#3983)) - Fix holes at the poles when terrain is used with globe ([#5232](maplibre/maplibre-gl-js#5232)) - Fix geometry artifacts when globe terrain is zoomed out too much ([#5232](maplibre/maplibre-gl-js#5232)) - Fix center being incorrectly constrained when using globe ([#5186](maplibre/maplibre-gl-js#5186)) - Fix atmosphere improperly blending into the background ([#5235](maplibre/maplibre-gl-js#5235)) - Fix parsing wrong hash location ([#5131](maplibre/maplibre-gl-js#5131)) - Fix swallowing of errors ([#4532](maplibre/maplibre-gl-js#4532)) - Fix erroring requests not reported on `error` handler ([#4613](maplibre/maplibre-gl-js#4613)) - Fix children not retained when using globe ([#5271](maplibre/maplibre-gl-js#5271)) - Fix symbol size increasing when looking from poles ([#5275](maplibre/maplibre-gl-js#5275)) - Fix globe custom layers being supplied incorrect matrices after projection transition to mercator ([#5150](maplibre/maplibre-gl-js#5150)) - Fix custom 3D models disappearing during projection transition ([#5150](maplibre/maplibre-gl-js#5150)) - Fix regression in NavigationControl compass on Firefox and Safari browsers ([#5205](maplibre/maplibre-gl-js#5205)) - Fix smooth mouse wheel zooming ([#5154](maplibre/maplibre-gl-js#5154)) - Change drag rotate behavior to be less abrupt around the center ([#5104](maplibre/maplibre-gl-js#5104)) - Fix regression in render world copies ([#5101](maplibre/maplibre-gl-js#5101)) - Fix unwanted roll when motion is interrupted ([#5083](maplibre/maplibre-gl-js#5083)) - Fix `geometry-type` filter expression results ([#5132](maplibre/maplibre-gl-js#5132)) - Fix easeTo not applying padding in globe projection ([#5134](maplibre/maplibre-gl-js#5134)) - Convert WebGL1 shaders to WebGL2 ([#5166](maplibre/maplibre-gl-js#5166)) - Fixes line flickering problem ([#5094](maplibre/maplibre-gl-js#5094)) - Fix poor performance in Chrome related to passing matrices to WebGL ([#5072](maplibre/maplibre-gl-js#5072)) - Fixes scale control for globe on zoom out ([#4897](maplibre/maplibre-gl-js#4897)) - Fixes cooperative gestures displaying the mobile help text when screen width is smaller than 480px on non-touch devices ([#5053](maplibre/maplibre-gl-js#5053)) - Fixes incorrect cluster radius scaling in `GeoJSONSource.setClusterOptions()` ([#5055](maplibre/maplibre-gl-js#5055)) - Improve innerHTML handling in code ([#5057](maplibre/maplibre-gl-js#5057))) - Fix geometry beyond tile borders being rendered ([#4868](maplibre/maplibre-gl-js#4868)) - Fix line-placed map-pitch-aligned texts being too large when viewed from some latitudes on a globe ([#4786](maplibre/maplibre-gl-js#4786)) - Disabled unsupported Fog rendering, for Terrain3D on Globe ([#4963](maplibre/maplibre-gl-js#4963)) - Fix issue where raster tile source won't fetch updates following request error ([#4890](maplibre/maplibre-gl-js#4890)) - Fix 3D models in custom layers not being properly occluded by the globe ([#4817](maplibre/maplibre-gl-js#4817)) - Fix issue where raster tiles were not rendered correctly when using globe and terrain ([#4912](maplibre/maplibre-gl-js#4912)) - Fix text not being hidden behind the globe when overlap mode was set to `always` ([#4802](maplibre/maplibre-gl-js#4802)) - Fix a single white frame being displayed when the map internally transitions from mercator to globe projection ([#4816](maplibre/maplibre-gl-js#4816)) - Fix loading of RTL plugin version 0.3.0 ([#4860](maplibre/maplibre-gl-js#4860)) - Fix a memory leak due to missing removal of event listener registration ([#4824](maplibre/maplibre-gl-js#4824)) - Improve symbol collision performance for both mercator and globe projections ([#4778](maplibre/maplibre-gl-js#4778)) - Fix bad line scaling near the poles under globe projection ([#4778](maplibre/maplibre-gl-js#4778)) - Fix globe loading many tiles at an unnecessarily high zoom level when the camera is pitched ([#4778](maplibre/maplibre-gl-js#4778)) </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **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. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  Reviewed-on: https://git.tristess.app/alexandresoro/ouca-web/pulls/5 Reviewed-by: Alexandre Soro <code@soro.dev> Co-authored-by: renovate <renovate@git.tristess.app> Co-committed-by: renovate <renovate@git.tristess.app>

Improve rotate experience

a5c07a4

HarelM requested review from ibesora and kubapelc November 24, 2024 14:15

Update changelog

111883a

HarelM mentioned this pull request Nov 24, 2024

Improve rotate UX #5074

Merged

6 tasks

kubapelc approved these changes Nov 25, 2024

View reviewed changes

Merge branch 'main' into improve-ux-for-rotation

d511c8a

HarelM mentioned this pull request Nov 26, 2024

Error: "We are unable to process any of the uploaded JUnit XML files. Please ensure your files are in the right format." codecov/test-results-action#99

Open

HarelM added 4 commits November 26, 2024 09:27

Reduce complexity for navigation control, use only get center to calc…

0b4a1cc

…ulate

Merge branch 'improve-ux-for-rotation' of https://github.com/maplibre…

f5ba6f6

…/maplibre-gl-js into improve-ux-for-rotation

Merge branch 'main' into improve-ux-for-rotation

75a7117

Solve spellcheck issue.

8a15833

Merge branch 'main' into improve-ux-for-rotation

b52bb9d

ibesora approved these changes Nov 27, 2024

View reviewed changes

HarelM added 2 commits November 27, 2024 13:35

Merge branch 'main' into improve-ux-for-rotation

ffa94df

Update CHANGELOG.md

27a21da

HarelM enabled auto-merge (squash) November 27, 2024 11:36

HarelM merged commit 985b657 into main Nov 27, 2024
17 checks passed

HarelM deleted the improve-ux-for-rotation branch November 27, 2024 11:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve rotate experience when close to center #5104

Improve rotate experience when close to center #5104

HarelM commented Nov 24, 2024 •

edited

Loading

codecov bot commented Nov 24, 2024 •

edited

Loading

kubapelc left a comment

HarelM commented Nov 25, 2024

HarelM commented Nov 25, 2024

HarelM commented Nov 26, 2024

ibesora left a comment

ibesora Nov 27, 2024

HarelM Nov 27, 2024

ibesora Nov 27, 2024

Improve rotate experience when close to center #5104

Improve rotate experience when close to center #5104

Conversation

HarelM commented Nov 24, 2024 • edited Loading

Launch Checklist

codecov bot commented Nov 24, 2024 • edited Loading

Codecov Report

kubapelc left a comment

Choose a reason for hiding this comment

HarelM commented Nov 25, 2024

HarelM commented Nov 25, 2024

HarelM commented Nov 26, 2024

ibesora left a comment

Choose a reason for hiding this comment

ibesora Nov 27, 2024

Choose a reason for hiding this comment

HarelM Nov 27, 2024

Choose a reason for hiding this comment

ibesora Nov 27, 2024

Choose a reason for hiding this comment

HarelM commented Nov 24, 2024 •

edited

Loading

codecov bot commented Nov 24, 2024 •

edited

Loading