Map component single-interaction-mode rework

[robinmolen]

Partly closes open-formulieren/open-forms#5798, open-formulieren/open-forms#5819

The map component "single-interaction-mode" has been reworked to reduce confusion for users. Now we always show the interaction buttons, and only enter drawing mode when the user would want to enter the drawing mode.

To solve the issue of open-formulieren/open-forms#5819, and produce a more expected user experience, we now always show the interaction buttons. This allows the user to change the map data whenever they want, and keeps the UI consistent with the regular multiple interactions modes.

As described in open-formulieren/open-forms#5798 (comment), the "single-interaction-mode" will now only be placed in a "active drawing" state when the map is empty. To change the map data the user must either delete the current shape (using the 'trash can' button), or manually enter drawing mode by clicking the interaction buttons. This prevents scenario's where users would see multiple "pin" icons right after placing a pin on the map (the issue of open-formulieren/open-forms#5798).

Because we now always show the interaction buttons, we should use these for the automatically triggered "drawing mode". Leaflet-draw doesn't provide any tooling for this, so I've added some custom functions to Leaflet.Control.Draw. What this all comes down to is: when we programmatically trigger "drawing mode" we also open the interaction buttons and show their sub-menus (the "cancel", "finish shape", "remove last point", etc. buttons). This allows us to provide full access to the Leaflet-draw interaction features, and keeps the UI/UX similar to when a user would themselves enter drawing mode.

[codecov]

Codecov Report

❌ Patch coverage is 52.72727% with 26 lines in your changes missing coverage. Please review.
✅ Project coverage is 69.26%. Comparing base (5d42293) to head (c8ea8e4).
⚠️ Report is 7 commits behind head on main.

Files with missing lines	Patch %	Lines
src/components/map/LeafletMap.tsx	37.50%	15 Missing ⚠️
src/components/map/drawToolbarControls.ts	64.51%	11 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #285      +/-   ##
==========================================
- Coverage   69.28%   69.26%   -0.02%     
==========================================
  Files         287      288       +1     
  Lines       10796    10822      +26     
  Branches     1749     1800      +51     
==========================================
+ Hits         7480     7496      +16     
- Misses       3312     3322      +10     
  Partials        4        4              

Flag	Coverage Δ
storybook	89.61% <93.54%> (+0.11%)	⬆️
vitest	53.88% <0.00%> (-0.13%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

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

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[sergei-maertens]

See 58a19d1 - could this be the nature of the race condition(s) you're experiencing?

[robinmolen]

Mhh, no unfortunately not. The issue that I faced here seems to be an leaflet-draw internal "issue".

By clicking the map component using userEvent.click(map, {x: 100, y: 100}) leaflet-draw, internally using proj4, needs to figure out which coordinates correlate to the x,y point. The first interaction with userEvent.click is fine, but for the subsequent interactions the coordinates don't seems to be finite numbers (I suspect because the projection isn't loaded yet, so the point cannot correctly be calculated). After a few milliseconds proj4 can correctly interpret the coordinates and can calculate the positions.

So, we could add some sleep(200ms) calls in between, but that would unnecessarily slow-down the test. (And isn't guaranteed to work on all environments, as "proj4 getting ready" could take slightly longer)

By calculating the points using leafletMap.containerPointToLatLng() and firing the click event directly on the map instance, it seems we don't run into this issue. I think this uses a different part of the leaflet/proj4 code to calculate the points and do transformations, but I'm not entirely sure..

TL;DR: These race-condition don't seems to be caused by an import miss-match between Leaflet and Leaflet-draw, but due to some Leaflet-draw / proj4 internal stuff. I'll update the import statement, just in case any other unforeseen issues pop-up