From 23e592873c075f8484d9235f6611d5e8d1025093 Mon Sep 17 00:00:00 2001 From: Sylvain Blondeau Date: Wed, 6 Nov 2024 21:00:26 +0100 Subject: [PATCH] fix lint and tests --- src/Map/CHANGELOG.md | 5 +- .../assets/dist/abstract_map_controller.d.ts | 14 ++-- .../assets/dist/abstract_map_controller.js | 5 +- src/Map/assets/src/abstract_map_controller.ts | 59 +++++++++-------- src/Map/doc/index.rst | 25 ++++---- .../Google/assets/dist/map_controller.js | 24 ++----- .../Google/assets/src/map_controller.ts | 19 +----- .../Google/tests/GoogleRendererTest.php | 12 ++-- .../Leaflet/assets/dist/map_controller.js | 64 +------------------ .../Leaflet/tests/LeafletRendererTest.php | 6 +- src/Map/src/Polygon.php | 6 ++ src/Map/src/Polyline.php | 8 ++- src/Map/src/Twig/MapRuntime.php | 2 +- src/Map/src/Twig/UXMapComponent.php | 2 +- 14 files changed, 94 insertions(+), 157 deletions(-) diff --git a/src/Map/CHANGELOG.md b/src/Map/CHANGELOG.md index 47fc02ae74c..693f7147a46 100644 --- a/src/Map/CHANGELOG.md +++ b/src/Map/CHANGELOG.md @@ -1,5 +1,9 @@ # CHANGELOG +## 2.22 + +- Add `Polyline` support + ## 2.20 - Deprecate `render_map` Twig function (will be removed in 2.21). Use @@ -10,7 +14,6 @@ - The importmap entry `@symfony/ux-map/abstract-map-controller` can be removed from your importmap, it is no longer needed. - Add `Polygon` support -- Add `Polyline` support ## 2.19 diff --git a/src/Map/assets/dist/abstract_map_controller.d.ts b/src/Map/assets/dist/abstract_map_controller.d.ts index 9cb0676457a..12a297d844a 100644 --- a/src/Map/assets/dist/abstract_map_controller.d.ts +++ b/src/Map/assets/dist/abstract_map_controller.d.ts @@ -65,11 +65,17 @@ export default abstract class): Marker; protected abstract doCreatePolygon(definition: PolygonDefinition): Polygon; protected abstract doCreatePolyline(definition: PolylineDefinition): Polyline; - protected createInfoWindow({ definition, element, }: { - definition: MarkerDefinition['infoWindow'] | PolygonDefinition['infoWindow'] | PolylineDefinition['infoWindow']; - element: Marker | Polygon | Polyline; + protected abstract createInfoWindow(args: { + definition: MarkerDefinition['infoWindow']; + element: Marker; + } | { + definition: PolygonDefinition['infoWindow']; + element: Polygon; + } | { + definition: PolylineDefinition['infoWindow']; + element: Polyline; }): InfoWindow; - protected abstract doCreateInfoWindow({ definition, element, }: { + protected abstract doCreateInfoWindow(args: { definition: MarkerDefinition['infoWindow']; element: Marker; } | { diff --git a/src/Map/assets/dist/abstract_map_controller.js b/src/Map/assets/dist/abstract_map_controller.js index 120ef1c8921..d93c21da3dc 100644 --- a/src/Map/assets/dist/abstract_map_controller.js +++ b/src/Map/assets/dist/abstract_map_controller.js @@ -9,7 +9,7 @@ class default_1 extends Controller { this.polylines = []; } connect() { - const { center, zoom, options, markers, polygons, fitBoundsToMarkers } = this.viewValue; + const { center, zoom, options, markers, polygons, polylines, fitBoundsToMarkers } = this.viewValue; this.dispatchEvent('pre-connect', { options }); this.map = this.doCreateMap({ center, zoom, options }); markers.forEach((marker) => this.createMarker(marker)); @@ -47,7 +47,8 @@ class default_1 extends Controller { this.polylines.push(polyline); return polyline; } - createInfoWindow({ definition, element, }) { + createInfoWindow(args) { + const { definition, element } = args; this.dispatchEvent('info-window:before-create', { definition, element }); const infoWindow = this.doCreateInfoWindow({ definition, element }); this.dispatchEvent('info-window:after-create', { infoWindow, element }); diff --git a/src/Map/assets/src/abstract_map_controller.ts b/src/Map/assets/src/abstract_map_controller.ts index 262aa2b327b..e08fd87486b 100644 --- a/src/Map/assets/src/abstract_map_controller.ts +++ b/src/Map/assets/src/abstract_map_controller.ts @@ -91,7 +91,7 @@ export default abstract class< protected polylines: Array = []; connect() { - const { center, zoom, options, markers, polygons, fitBoundsToMarkers } = this.viewValue; + const { center, zoom, options, markers, polygons, polylines, fitBoundsToMarkers } = this.viewValue; this.dispatchEvent('pre-connect', { options }); @@ -156,16 +156,22 @@ export default abstract class< protected abstract doCreatePolygon(definition: PolygonDefinition): Polygon; protected abstract doCreatePolyline(definition: PolylineDefinition): Polyline; - protected createInfoWindow({ - definition, - element, - }: { - definition: - | MarkerDefinition['infoWindow'] - | PolygonDefinition['infoWindow'] - | PolylineDefinition['infoWindow']; - element: Marker | Polygon | Polyline; - }): InfoWindow { + protected abstract createInfoWindow( + args: + | { + definition: MarkerDefinition['infoWindow']; + element: Marker; + } + | { + definition: PolygonDefinition['infoWindow']; + element: Polygon; + } + | { + definition: PolylineDefinition['infoWindow']; + element: Polyline; + } + ): InfoWindow { + const { definition, element } = args; this.dispatchEvent('info-window:before-create', { definition, element }); const infoWindow = this.doCreateInfoWindow({ definition, element }); this.dispatchEvent('info-window:after-create', { infoWindow, element }); @@ -175,22 +181,21 @@ export default abstract class< return infoWindow; } - protected abstract doCreateInfoWindow({ - definition, - element, - }: - | { - definition: MarkerDefinition['infoWindow']; - element: Marker; - } - | { - definition: PolygonDefinition['infoWindow']; - element: Polygon; - } - | { - definition: PolylineDefinition['infoWindow']; - element: Polyline; - }): InfoWindow; + protected abstract doCreateInfoWindow( + args: + | { + definition: MarkerDefinition['infoWindow']; + element: Marker; + } + | { + definition: PolygonDefinition['infoWindow']; + element: Polygon; + } + | { + definition: PolylineDefinition['infoWindow']; + element: Polyline; + } + ): InfoWindow; protected abstract doFitBoundsToMarkers(): void; diff --git a/src/Map/doc/index.rst b/src/Map/doc/index.rst index c0fd61a1237..3ecbf47914c 100644 --- a/src/Map/doc/index.rst +++ b/src/Map/doc/index.rst @@ -130,11 +130,13 @@ You can add markers to a map using the ``addMarker()`` method:: ) ; -Add Polylines -~~~~~~~~~~~~~ -You can add Polylines, which represents a path made by a series of `Point` instances - $myMap->addPolyline(new Polyline( +Add Polygons +~~~~~~~~~~~~ + +You can also add Polygons, which represents an area enclosed by a series of ``Point`` instances:: + + $myMap->addPolygon(new Polygon( points: [ new Point(48.8566, 2.3522), new Point(45.7640, 4.8357), @@ -142,16 +144,15 @@ You can add Polylines, which represents a path made by a series of `Point` insta new Point(44.8378, -0.5792), ], infoWindow: new InfoWindow( - content: 'A line passing through Paris, Lyon, Marseille, Bordeaux', + content: 'Paris, Lyon, Marseille, Bordeaux', ), )); -Add Polygons -~~~~~~~~~~~~ - -You can also add Polygons, which represents an area enclosed by a series of ``Point`` instances:: +Add Polylines +~~~~~~~~~~~~~ - $myMap->addPolygon(new Polygon( +You can add Polylines, which represents a path made by a series of `Point` instances + $myMap->addPolyline(new Polyline( points: [ new Point(48.8566, 2.3522), new Point(45.7640, 4.8357), @@ -159,11 +160,13 @@ You can also add Polygons, which represents an area enclosed by a series of ``Po new Point(44.8378, -0.5792), ], infoWindow: new InfoWindow( - content: 'Paris, Lyon, Marseille, Bordeaux', + content: 'A line passing through Paris, Lyon, Marseille, Bordeaux', ), )); + Render a map +------------ To render a map in your Twig template, use the ``ux_map`` Twig function, e.g.: diff --git a/src/Map/src/Bridge/Google/assets/dist/map_controller.js b/src/Map/src/Bridge/Google/assets/dist/map_controller.js index 14fa4f22642..a2bee153b3b 100644 --- a/src/Map/src/Bridge/Google/assets/dist/map_controller.js +++ b/src/Map/src/Bridge/Google/assets/dist/map_controller.js @@ -10,7 +10,7 @@ let default_1$1 = class default_1 extends Controller { this.polylines = []; } connect() { - const { center, zoom, options, markers, polygons, fitBoundsToMarkers } = this.viewValue; + const { center, zoom, options, markers, polygons, polylines, fitBoundsToMarkers } = this.viewValue; this.dispatchEvent('pre-connect', { options }); this.map = this.doCreateMap({ center, zoom, options }); markers.forEach((marker) => this.createMarker(marker)); @@ -48,7 +48,8 @@ let default_1$1 = class default_1 extends Controller { this.polylines.push(polyline); return polyline; } - createInfoWindow({ definition, element, }) { + createInfoWindow(args) { + const { definition, element } = args; this.dispatchEvent('info-window:before-create', { definition, element }); const infoWindow = this.doCreateInfoWindow({ definition, element }); this.dispatchEvent('info-window:after-create', { infoWindow, element }); @@ -165,24 +166,7 @@ class default_1 extends default_1$1 { infoWindow.open({ map: this.map, anchor: element }); } } - else if (element instanceof google.maps.Polygon) { - element.addListener('click', (event) => { - if (definition.autoClose) { - this.closeInfoWindowsExcept(infoWindow); - } - infoWindow.setPosition(event.latLng); - infoWindow.open(this.map); - }); - if (definition.opened) { - const bounds = new google.maps.LatLngBounds(); - element.getPath().forEach((point) => { - bounds.extend(point); - }); - infoWindow.setPosition(bounds.getCenter()); - infoWindow.open({ map: this.map, anchor: element }); - } - } - else if (element instanceof google.maps.Polyline) { + else if (element instanceof google.maps.Polygon || element instanceof google.maps.Polyline) { element.addListener('click', (event) => { if (definition.autoClose) { this.closeInfoWindowsExcept(infoWindow); diff --git a/src/Map/src/Bridge/Google/assets/src/map_controller.ts b/src/Map/src/Bridge/Google/assets/src/map_controller.ts index 18396a0c85a..9e5f8762d6f 100644 --- a/src/Map/src/Bridge/Google/assets/src/map_controller.ts +++ b/src/Map/src/Bridge/Google/assets/src/map_controller.ts @@ -210,24 +210,7 @@ export default class extends AbstractMapController< if (definition.opened) { infoWindow.open({ map: this.map, anchor: element }); } - } else if (element instanceof google.maps.Polygon) { - element.addListener('click', (event: any) => { - if (definition.autoClose) { - this.closeInfoWindowsExcept(infoWindow); - } - infoWindow.setPosition(event.latLng); - infoWindow.open(this.map); - }); - - if (definition.opened) { - const bounds = new google.maps.LatLngBounds(); - element.getPath().forEach((point: google.maps.LatLng) => { - bounds.extend(point); - }); - infoWindow.setPosition(bounds.getCenter()); - infoWindow.open({ map: this.map, anchor: element }); - } - } else if (element instanceof google.maps.Polyline) { + } else if (element instanceof google.maps.Polygon || element instanceof google.maps.Polyline) { element.addListener('click', (event: any) => { if (definition.autoClose) { this.closeInfoWindowsExcept(infoWindow); diff --git a/src/Map/src/Bridge/Google/tests/GoogleRendererTest.php b/src/Map/src/Bridge/Google/tests/GoogleRendererTest.php index 0dee4010410..5a3b167b267 100644 --- a/src/Map/src/Bridge/Google/tests/GoogleRendererTest.php +++ b/src/Map/src/Bridge/Google/tests/GoogleRendererTest.php @@ -29,26 +29,26 @@ public function provideTestRenderMap(): iterable ->zoom(12); yield 'simple map, with minimum options' => [ - 'expected_render' => '
', + 'expected_render' => '
', 'renderer' => new GoogleRenderer(new StimulusHelper(null), apiKey: 'api_key'), 'map' => $map, ]; yield 'with every options' => [ - 'expected_render' => '
', + 'expected_render' => '
', 'renderer' => new GoogleRenderer(new StimulusHelper(null), apiKey: 'api_key', id: 'gmap', language: 'fr', region: 'FR', nonce: 'abcd', retries: 10, url: 'https://maps.googleapis.com/maps/api/js', version: 'quarterly'), 'map' => $map, ]; yield 'with custom attributes' => [ - 'expected_render' => '
', + 'expected_render' => '
', 'renderer' => new GoogleRenderer(new StimulusHelper(null), apiKey: 'api_key'), 'map' => $map, 'attributes' => ['data-controller' => 'my-custom-controller', 'class' => 'map'], ]; yield 'with markers and infoWindows' => [ - 'expected_render' => '
', + 'expected_render' => '
', 'renderer' => new GoogleRenderer(new StimulusHelper(null), apiKey: 'api_key'), 'map' => (clone $map) ->addMarker(new Marker(new Point(48.8566, 2.3522), 'Paris')) @@ -56,7 +56,7 @@ public function provideTestRenderMap(): iterable ]; yield 'with controls enabled' => [ - 'expected_render' => '
', + 'expected_render' => '
', 'renderer' => new GoogleRenderer(new StimulusHelper(null), apiKey: 'api_key'), 'map' => (clone $map) ->options(new GoogleOptions( @@ -68,7 +68,7 @@ public function provideTestRenderMap(): iterable ]; yield 'without controls enabled' => [ - 'expected_render' => '
', + 'expected_render' => '
', 'renderer' => new GoogleRenderer(new StimulusHelper(null), apiKey: 'api_key'), 'map' => (clone $map) ->options(new GoogleOptions( diff --git a/src/Map/src/Bridge/Leaflet/assets/dist/map_controller.js b/src/Map/src/Bridge/Leaflet/assets/dist/map_controller.js index f98c299b31a..0087754f43d 100644 --- a/src/Map/src/Bridge/Leaflet/assets/dist/map_controller.js +++ b/src/Map/src/Bridge/Leaflet/assets/dist/map_controller.js @@ -1,68 +1,8 @@ -import { Controller } from '@hotwired/stimulus'; +import AbstractMapController from '@symfony/ux-map'; import 'leaflet/dist/leaflet.min.css'; import * as L from 'leaflet'; -class default_1 extends Controller { - constructor() { - super(...arguments); - this.markers = []; - this.infoWindows = []; - this.polygons = []; - this.polylines = []; - } - connect() { - const { center, zoom, options, markers, polygons, fitBoundsToMarkers } = this.viewValue; - this.dispatchEvent('pre-connect', { options }); - this.map = this.doCreateMap({ center, zoom, options }); - markers.forEach((marker) => this.createMarker(marker)); - polygons.forEach((polygon) => this.createPolygon(polygon)); - polylines.forEach((polyline) => this.createPolyline(polyline)); - if (fitBoundsToMarkers) { - this.doFitBoundsToMarkers(); - } - this.dispatchEvent('connect', { - map: this.map, - markers: this.markers, - polygons: this.polygons, - polylines: this.polylines, - infoWindows: this.infoWindows, - }); - } - createMarker(definition) { - this.dispatchEvent('marker:before-create', { definition }); - const marker = this.doCreateMarker(definition); - this.dispatchEvent('marker:after-create', { marker }); - this.markers.push(marker); - return marker; - } - createPolygon(definition) { - this.dispatchEvent('polygon:before-create', { definition }); - const polygon = this.doCreatePolygon(definition); - this.dispatchEvent('polygon:after-create', { polygon }); - this.polygons.push(polygon); - return polygon; - } - createPolyline(definition) { - this.dispatchEvent('polyline:before-create', { definition }); - const polyline = this.doCreatePolyline(definition); - this.dispatchEvent('polyline:after-create', { polyline }); - this.polylines.push(polyline); - return polyline; - } - createInfoWindow({ definition, element, }) { - this.dispatchEvent('info-window:before-create', { definition, element }); - const infoWindow = this.doCreateInfoWindow({ definition, element }); - this.dispatchEvent('info-window:after-create', { infoWindow, element }); - this.infoWindows.push(infoWindow); - return infoWindow; - } -} -default_1.values = { - providerOptions: Object, - view: Object, -}; - -class map_controller extends default_1 { +class map_controller extends AbstractMapController { connect() { L.Marker.prototype.options.icon = L.divIcon({ html: '', diff --git a/src/Map/src/Bridge/Leaflet/tests/LeafletRendererTest.php b/src/Map/src/Bridge/Leaflet/tests/LeafletRendererTest.php index 2624877c43b..e59d27838b5 100644 --- a/src/Map/src/Bridge/Leaflet/tests/LeafletRendererTest.php +++ b/src/Map/src/Bridge/Leaflet/tests/LeafletRendererTest.php @@ -28,20 +28,20 @@ public function provideTestRenderMap(): iterable ->zoom(12); yield 'simple map' => [ - 'expected_render' => '
', + 'expected_render' => '
', 'renderer' => new LeafletRenderer(new StimulusHelper(null)), 'map' => $map, ]; yield 'with custom attributes' => [ - 'expected_render' => '
', + 'expected_render' => '
', 'renderer' => new LeafletRenderer(new StimulusHelper(null)), 'map' => $map, 'attributes' => ['data-controller' => 'my-custom-controller', 'class' => 'map'], ]; yield 'with markers and infoWindows' => [ - 'expected_render' => '
', + 'expected_render' => '
', 'renderer' => new LeafletRenderer(new StimulusHelper(null)), 'map' => (clone $map) ->addMarker(new Marker(new Point(48.8566, 2.3522), 'Paris')) diff --git a/src/Map/src/Polygon.php b/src/Map/src/Polygon.php index 5d474346e7d..2339aff4ebb 100644 --- a/src/Map/src/Polygon.php +++ b/src/Map/src/Polygon.php @@ -33,6 +33,12 @@ public function __construct( /** * Convert the polygon to an array representation. + * @return array{ + * points: array, + * title: string|null, + * infoWindow: array|null, + * extra: object, + * } */ public function toArray(): array { diff --git a/src/Map/src/Polyline.php b/src/Map/src/Polyline.php index 44f9f11dc8b..345441bc387 100644 --- a/src/Map/src/Polyline.php +++ b/src/Map/src/Polyline.php @@ -16,7 +16,7 @@ /** * Represents a polyline on a map. * - * @author [Pierre Svgnt] + * @author [Sylvain Blondeau] */ final readonly class Polyline { @@ -33,6 +33,12 @@ public function __construct( /** * Convert the polyline to an array representation. + * @return array{ + * points: array, + * title: string|null, + * infoWindow: array|null, + * extra: object, + * } */ public function toArray(): array { diff --git a/src/Map/src/Twig/MapRuntime.php b/src/Map/src/Twig/MapRuntime.php index d81462f8a07..6dca2c53b4e 100644 --- a/src/Map/src/Twig/MapRuntime.php +++ b/src/Map/src/Twig/MapRuntime.php @@ -76,7 +76,7 @@ public function renderMap( public function render(array $args = []): string { - $map = array_intersect_key($args, ['map' => 0, 'markers' => 0, 'polygons' => 0, 'polylines' => 0, 'center' => 1, 'zoom' => 2]); + $map = array_intersect_key($args, ['map' => 0, 'markers' => 1, 'polygons' => 2, 'polylines' => 3, 'center' => 4, 'zoom' => 5]); $attributes = array_diff_key($args, $map); return $this->renderMap(...$map, attributes: $attributes); diff --git a/src/Map/src/Twig/UXMapComponent.php b/src/Map/src/Twig/UXMapComponent.php index ae764f41e49..a8801ad780d 100644 --- a/src/Map/src/Twig/UXMapComponent.php +++ b/src/Map/src/Twig/UXMapComponent.php @@ -11,8 +11,8 @@ namespace Symfony\UX\Map\Twig; -use Symfony\UX\Map\Point; use Symfony\UX\Map\Marker; +use Symfony\UX\Map\Point; use Symfony\UX\Map\Polygon; use Symfony\UX\Map\Polyline;