add polyline support

Author: sblondeau

src/Map/assets/dist/abstract_map_controller.d.ts

@@ -3,12 +3,13 @@ export type Point = {
     lat: number;
     lng: number;
 };
-export type MapView<Options, MarkerOptions, InfoWindowOptions, PolygonOptions> = {
+export type MapView<Options, MarkerOptions, InfoWindowOptions, PolygonOptions, PolylineOptions> = {
     center: Point | null;
     zoom: number | null;
     fitBoundsToMarkers: boolean;
     markers: Array<MarkerDefinition<MarkerOptions, InfoWindowOptions>>;
     polygons: Array<PolygonDefinition<PolygonOptions, InfoWindowOptions>>;
+    polylines: Array<PolylineDefinition<PolylineOptions, InfoWindowOptions>>;
     options: Options;
 };
 export type MarkerDefinition<MarkerOptions, InfoWindowOptions> = {
@@ -25,6 +26,13 @@ export type PolygonDefinition<PolygonOptions, InfoWindowOptions> = {
     rawOptions?: PolygonOptions;
     extra: Record<string, unknown>;
 };
+export type PolylineDefinition<PolylineOptions, InfoWindowOptions> = {
+    infoWindow?: Omit<InfoWindowDefinition<InfoWindowOptions>, 'position'>;
+    points: Array<Point>;
+    title: string | null;
+    rawOptions?: PolylineOptions;
+    extra: Record<string, unknown>;
+};
 export type InfoWindowDefinition<InfoWindowOptions> = {
     headerContent: string | null;
     content: string | null;
@@ -34,16 +42,17 @@ export type InfoWindowDefinition<InfoWindowOptions> = {
     rawOptions?: InfoWindowOptions;
     extra: Record<string, unknown>;
 };
-export default abstract class<MapOptions, Map, MarkerOptions, Marker, InfoWindowOptions, InfoWindow, PolygonOptions, Polygon> extends Controller<HTMLElement> {
+export default abstract class<MapOptions, Map, MarkerOptions, Marker, InfoWindowOptions, InfoWindow, PolygonOptions, Polygon, PolylineOptions, Polyline> extends Controller<HTMLElement> {
     static values: {
         providerOptions: ObjectConstructor;
         view: ObjectConstructor;
     };
-    viewValue: MapView<MapOptions, MarkerOptions, InfoWindowOptions, PolygonOptions>;
+    viewValue: MapView<MapOptions, MarkerOptions, InfoWindowOptions, PolygonOptions, PolylineOptions>;
     protected map: Map;
     protected markers: Array<Marker>;
     protected infoWindows: Array<InfoWindow>;
     protected polygons: Array<Polygon>;
+    protected polylines: Array<Polyline>;
     connect(): void;
     protected abstract doCreateMap({ center, zoom, options, }: {
         center: Point | null;
@@ -52,18 +61,23 @@ export default abstract class<MapOptions, Map, MarkerOptions, Marker, InfoWindow
     }): Map;
     createMarker(definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>): Marker;
     createPolygon(definition: PolygonDefinition<PolygonOptions, InfoWindowOptions>): Polygon;
+    createPolyline(definition: PolylineDefinition<PolylineOptions, InfoWindowOptions>): Polyline;
     protected abstract doCreateMarker(definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>): Marker;
     protected abstract doCreatePolygon(definition: PolygonDefinition<PolygonOptions, InfoWindowOptions>): Polygon;
+    protected abstract doCreatePolyline(definition: PolylineDefinition<PolylineOptions, InfoWindowOptions>): Polyline;
     protected createInfoWindow({ definition, element, }: {
-        definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow'] | PolygonDefinition<PolygonOptions, InfoWindowOptions>['infoWindow'];
-        element: Marker | Polygon;
+        definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow'] | PolygonDefinition<PolygonOptions, InfoWindowOptions>['infoWindow'] | PolylineDefinition<PolylineOptions, InfoWindowOptions>['infoWindow'];
+        element: Marker | Polygon| Polyline;
     }): InfoWindow;
     protected abstract doCreateInfoWindow({ definition, element, }: {
         definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow'];
         element: Marker;
     } | {
         definition: PolygonDefinition<PolygonOptions, InfoWindowOptions>['infoWindow'];
         element: Polygon;
+    }| {
+        definition: PolylineDefinition<PolylineOptions, InfoWindowOptions>['infoWindow'];
+        element: Polyline;
     }): InfoWindow;
     protected abstract doFitBoundsToMarkers(): void;
     protected abstract dispatchEvent(name: string, payload: Record<string, unknown>): void;

src/Map/assets/dist/abstract_map_controller.js

@@ -6,20 +6,23 @@ class default_1 extends Controller {
         this.markers = [];
         this.infoWindows = [];
         this.polygons = [];
+        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));
         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,
         });
     }
@@ -37,6 +40,13 @@ class default_1 extends Controller {
         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 });

src/Map/assets/src/abstract_map_controller.ts

@@ -2,12 +2,13 @@ import { Controller } from '@hotwired/stimulus';
 
 export type Point = { lat: number; lng: number };
 
-export type MapView<Options, MarkerOptions, InfoWindowOptions, PolygonOptions> = {
+export type MapView<Options, MarkerOptions, InfoWindowOptions, PolygonOptions, PolylineOptions> = {
     center: Point | null;
     zoom: number | null;
     fitBoundsToMarkers: boolean;
     markers: Array<MarkerDefinition<MarkerOptions, InfoWindowOptions>>;
     polygons: Array<PolygonDefinition<PolygonOptions, InfoWindowOptions>>;
+    polylines: Array<PolylineDefinition<PolylineOptions, InfoWindowOptions>>;
     options: Options;
 };
 
@@ -36,6 +37,14 @@ export type PolygonDefinition<PolygonOptions, InfoWindowOptions> = {
     extra: Record<string, unknown>;
 };
 
+export type PolylineDefinition<PolylineOptions, InfoWindowOptions> = {
+    infoWindow?: Omit<InfoWindowDefinition<InfoWindowOptions>, 'position'>;
+    points: Array<Point>;
+    title: string | null;
+    rawOptions?: PolylineOptions;
+    extra: Record<string, unknown>;
+};
+
 export type InfoWindowDefinition<InfoWindowOptions> = {
     headerContent: string | null;
     content: string | null;
@@ -56,7 +65,7 @@ export type InfoWindowDefinition<InfoWindowOptions> = {
     extra: Record<string, unknown>;
 };
 
-export default abstract class<
+export default abstract class <
     MapOptions,
     Map,
     MarkerOptions,
@@ -65,18 +74,21 @@ export default abstract class<
     InfoWindow,
     PolygonOptions,
     Polygon,
+    PolylineOptions,
+    Polyline,
 > extends Controller<HTMLElement> {
     static values = {
         providerOptions: Object,
         view: Object,
     };
 
-    declare viewValue: MapView<MapOptions, MarkerOptions, InfoWindowOptions, PolygonOptions>;
+    declare viewValue: MapView<MapOptions, MarkerOptions, InfoWindowOptions, PolygonOptions, PolylineOptions>;
 
     protected map: Map;
     protected markers: Array<Marker> = [];
     protected infoWindows: Array<InfoWindow> = [];
     protected polygons: Array<Polygon> = [];
+    protected polylines: Array<Polyline> = [];
 
     connect() {
         const { center, zoom, options, markers, polygons, fitBoundsToMarkers } = this.viewValue;
@@ -89,6 +101,8 @@ export default abstract class<
 
         polygons.forEach((polygon) => this.createPolygon(polygon));
 
+        polylines.forEach((polyline) => this.createPolyline(polyline));
+
         if (fitBoundsToMarkers) {
             this.doFitBoundsToMarkers();
         }
@@ -97,6 +111,7 @@ export default abstract class<
             map: this.map,
             markers: this.markers,
             polygons: this.polygons,
+            polylines: this.polylines,
             infoWindows: this.infoWindows,
         });
     }
@@ -129,17 +144,27 @@ export default abstract class<
         return polygon;
     }
 
+    createPolyline(definition: PolylineDefinition<PolylineOptions, InfoWindowOptions>): Polyline {
+        this.dispatchEvent('polyline:before-create', { definition });
+        const polyline = this.doCreatePolyline(definition);
+        this.dispatchEvent('polyline:after-create', { polyline });
+        this.polylines.push(polyline);
+        return polyline;
+    }
+
     protected abstract doCreateMarker(definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>): Marker;
     protected abstract doCreatePolygon(definition: PolygonDefinition<PolygonOptions, InfoWindowOptions>): Polygon;
+    protected abstract doCreatePolyline(definition: PolylineDefinition<PolylineOptions, InfoWindowOptions>): Polyline;
 
     protected createInfoWindow({
         definition,
         element,
     }: {
         definition:
-            | MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow']
-            | PolygonDefinition<PolygonOptions, InfoWindowOptions>['infoWindow'];
-        element: Marker | Polygon;
+        | MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow']
+        | PolygonDefinition<PolygonOptions, InfoWindowOptions>['infoWindow']
+        | PolylineDefinition<PolylineOptions, InfoWindowOptions>['infoWindow'];
+        element: Marker | Polygon | Polyline;
     }): InfoWindow {
         this.dispatchEvent('info-window:before-create', { definition, element });
         const infoWindow = this.doCreateInfoWindow({ definition, element });
@@ -155,13 +180,17 @@ export default abstract class<
         element,
     }:
         | {
-              definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow'];
-              element: Marker;
-          }
+            definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow'];
+            element: Marker;
+        }
+        | {
+            definition: PolygonDefinition<PolygonOptions, InfoWindowOptions>['infoWindow'];
+            element: Polygon;
+        }
         | {
-              definition: PolygonDefinition<PolygonOptions, InfoWindowOptions>['infoWindow'];
-              element: Polygon;
-          }): InfoWindow;
+            definition: PolylineDefinition<PolylineOptions, InfoWindowOptions>['infoWindow'];
+            element: Polyline;
+        }): InfoWindow;
 
     protected abstract doFitBoundsToMarkers(): void;
 

src/Map/assets/test/abstract_map_controller.test.ts

@@ -35,13 +35,25 @@ class MyMapController extends AbstractMapController {
         return polygon;
     }
 
+    doCreatePolyline(definition) {
+        const polyline = { polyline: 'polyline', title: definition.title };
+
+        if (definition.infoWindow) {
+            this.createInfoWindow({ definition: definition.infoWindow, element: polyline });
+        }
+        return polyline;
+    }
+
     doCreateInfoWindow({ definition, element }) {
         if (element.marker) {
             return { infoWindow: 'infoWindow', headerContent: definition.headerContent, marker: element.title };
         }
         if (element.polygon) {
             return { infoWindow: 'infoWindow', headerContent: definition.headerContent, polygon: element.title };
         }
+        if (element.polyline) {
+            return { infoWindow: 'infoWindow', headerContent: definition.headerContent, polyline: element.title };
+        }
     }
 
     doFitBoundsToMarkers() {
@@ -113,6 +125,32 @@ describe('AbstractMapController', () => {
                             "autoClose": true
                         }
                     }
+                ],
+                "polylines": [
+                    {
+                        "coordinates": [
+                            { "lat": 48.858844, "lng": 2.294351 },
+                            { "lat": 48.853, "lng": 2.3499 },
+                            { "lat": 48.8566, "lng": 2.3522 }
+                        ],
+                        "title": "Polyline 1",
+                        "infoWindow": null
+                    },
+                    {
+                        "coordinates": [
+                            { "lat": 45.764043, "lng": 4.835659 },
+                            { "lat": 45.750000, "lng": 4.850000 },
+                            { "lat": 45.770000, "lng": 4.820000 }
+                        ],
+                        "title": "Polyline 2",
+                        "infoWindow": {
+                            "headerContent": "<b>Polyline 2</b>",
+                            "content": "A polyline around Lyon with some additional info.",
+                            "position": null,
+                            "opened": false,
+                            "autoClose": true
+                        }
+                    }
                 ]
             }'>
         </div>
@@ -123,7 +161,7 @@ describe('AbstractMapController', () => {
         clearDOM();
     });
 
-    it('connect and create map, marker, polygon and info window', async () => {
+    it('connect and create map, marker, polygon, polyline and info window', async () => {
         const div = getByTestId(container, 'map');
         expect(div).not.toHaveClass('connected');
 
@@ -140,6 +178,10 @@ describe('AbstractMapController', () => {
             { polygon: 'polygon', title: 'Polygon 1' },
             { polygon: 'polygon', title: 'Polygon 2' },
         ]);
+        expect(controller.polylines).toEqual([
+            { polyline: 'polyline', title: 'Polyline 1' },
+            { polyline: 'polyline', title: 'Polyline 2' },
+        ]);
         expect(controller.infoWindows).toEqual([
             {
                 headerContent: '<b>Lyon</b>',
@@ -151,6 +193,11 @@ describe('AbstractMapController', () => {
                 infoWindow: 'infoWindow',
                 polygon: 'Polygon 2',
             },
+            {
+                headerContent: '<b>Polyline 2</b>',
+                infoWindow: 'infoWindow',
+                polyline: 'Polyline 2',
+            },
         ]);
     });
 });

src/Map/doc/index.rst

@@ -114,8 +114,20 @@ A map is created by calling ``new Map()``. You can configure the center, zoom, a
                     ),
                 )
             ;
+            // 3. You can also 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),
+                    new Point(43.2965, 5.3698),
+                    new Point(44.8378, -0.5792),
+                ],
+                infoWindow: new InfoWindow(
+                    content: 'A line passing through Paris, Lyon, Marseille, Bordeaux',
+                ),
+            ));
 
-            // 3. You can also add Polygons, which represents an area enclosed by a series of `Point` instances
+            // 4. 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),
@@ -124,11 +136,11 @@ A map is created by calling ``new Map()``. You can configure the center, zoom, a
                     new Point(44.8378, -0.5792),
                 ],
                 infoWindow: new InfoWindow(
-                    content: 'Paris, Lyon, Marseille, Bordeaux',
+                    content: 'A polygon enclosed by Paris, Lyon, Marseille, Bordeaux',
                 ),
             ));
 
-            // 4. And inject the map in your template to render it
+            // 5. And inject the map in your template to render it
             return $this->render('contact/index.html.twig', [
                 'my_map' => $myMap,
             ]);

src/Map/src/Bridge/Google/assets/dist/map_controller.d.ts

@@ -1,5 +1,5 @@
 import AbstractMapController from '@symfony/ux-map';
-import type { Point, MarkerDefinition, PolygonDefinition } from '@symfony/ux-map';
+import type { Point, MarkerDefinition, PolygonDefinition, PolylineDefinition } from '@symfony/ux-map';
 import type { LoaderOptions } from '@googlemaps/js-api-loader';
 type MapOptions = Pick<google.maps.MapOptions, 'mapId' | 'gestureHandling' | 'backgroundColor' | 'disableDoubleClickZoom' | 'zoomControl' | 'zoomControlOptions' | 'mapTypeControl' | 'mapTypeControlOptions' | 'streetViewControl' | 'streetViewControlOptions' | 'fullscreenControl' | 'fullscreenControlOptions'>;
 export default class extends AbstractMapController<MapOptions, google.maps.Map, google.maps.marker.AdvancedMarkerElementOptions, google.maps.marker.AdvancedMarkerElement, google.maps.InfoWindowOptions, google.maps.InfoWindow, google.maps.PolygonOptions, google.maps.Polygon> {
@@ -16,9 +16,10 @@ export default class extends AbstractMapController<MapOptions, google.maps.Map,
     }): google.maps.Map;
     protected doCreateMarker(definition: MarkerDefinition<google.maps.marker.AdvancedMarkerElementOptions, google.maps.InfoWindowOptions>): google.maps.marker.AdvancedMarkerElement;
     protected doCreatePolygon(definition: PolygonDefinition<google.maps.Polygon, google.maps.InfoWindowOptions>): google.maps.Polygon;
+    protected doCreatePolyline(definition: PolylineDefinition<google.maps.Polyline, google.maps.InfoWindowOptions>): google.maps.Polyline;
     protected doCreateInfoWindow({ definition, element, }: {
-        definition: MarkerDefinition<google.maps.marker.AdvancedMarkerElementOptions, google.maps.InfoWindowOptions>['infoWindow'] | PolygonDefinition<google.maps.Polygon, google.maps.InfoWindowOptions>['infoWindow'];
-        element: google.maps.marker.AdvancedMarkerElement | google.maps.Polygon;
+        definition: MarkerDefinition<google.maps.marker.AdvancedMarkerElementOptions, google.maps.InfoWindowOptions>['infoWindow'] | PolygonDefinition<google.maps.Polygon, google.maps.InfoWindowOptions>['infoWindow'] | PolylineDefinition<google.maps.Polyline, google.maps.InfoWindowOptions>['infoWindow'];
+        element: google.maps.marker.AdvancedMarkerElement | google.maps.Polygon | google.maps.Polyline;
     }): google.maps.InfoWindow;
     private createTextOrElement;
     private closeInfoWindowsExcept;