symfony / ux

Symfony UX initiative: a JavaScript ecosystem for Symfony
https://ux.symfony.com/
MIT License
856 stars 315 forks source link

[Map] Make UX Map compatible with Live Components (and some internal things) #2385

Open Kocal opened 5 days ago

Kocal commented 5 days ago
Q A
Bug fix? no
New feature? yes
Issues Fix #...
License MIT

Here’s a corrected and polished version of your text:


Hi! 😊

This PR enhances the UX Map to be compatible with Live Components, allowing you to interact with the Map directly from your PHP code. You can perform actions and see your map update in real-time from the front-end!

To achieve this, I had to refactor and improve several areas:

  1. Due to the hydration and de-hydration processes of Live Components, I ensured that the toArray and new fromArray methods for Map, Marker, and all other value objects could rebuild an equivalent object accurately (e.g., $marker == Marker::fromArray($marker->toArray())).
  2. Since Stimulus monitors value changes, it wasn’t efficient to store everything in a single large view object containing zoom, center, markers, etc. These properties were split into individual values to improve performance.
  3. Before rendering the map, an @id is now automatically computed for each Marker and Polygon definition. This optimization makes rendering significantly more efficient, avoiding the need to remove and re-render all markers or polygons (and avoiding a visual glitch aswell).

https://github.com/user-attachments/assets/c151e64c-7321-46d3-a5c6-cfeaf57beb47

https://github.com/user-attachments/assets/ffb12035-a0c3-48b3-afb7-ddf2c24c318a

github-actions[bot] commented 5 days ago

πŸ“Š Packages dist files size difference

Thanks for the PR! Here is the difference in size of the packages dist files between the base branch and the PR. Please review the changes and make sure they are expected.

FileBefore (Size / Gzip)After (Size / Gzip)
Map
abstract_map_controller.d.ts 3 kB / 741 B 3.31 kB+10% πŸ“ˆ / 821 B+11% πŸ“ˆ
abstract_map_controller.js 1.88 kB / 610 B 3.23 kB+72% πŸ“ˆ / 843 B+38% πŸ“ˆ
Map (Bridge Google)
map_controller.d.ts 2.07 kB / 729 B 2.19 kB+6% πŸ“ˆ / 733 B+1% πŸ“ˆ
map_controller.js 7.07 kB / 1.67 kB 8.7 kB+23% πŸ“ˆ / 1.95 kB+17% πŸ“ˆ
Map (Bridge Leaflet)
map_controller.d.ts 1.31 kB / 544 B 1.57 kB+20% πŸ“ˆ / 579 B+6% πŸ“ˆ
map_controller.js 5.52 kB / 1.77 kB 7.2 kB+30% πŸ“ˆ / 2.06 kB+16% πŸ“ˆ
Kocal commented 5 days ago

Note: Usages and examples can be a bit limited for the moment, but for a next PR I would like to add more methods like getZoom() or removeMarker() (...)