@symfony/ux-google-map 2.26.0 → 2.27.0

package/dist/map_controller.d.ts

@@ -1,19 +1,16 @@
 import type { LoaderOptions } from '@googlemaps/js-api-loader';
+import type { CircleDefinition, Icon, InfoWindowDefinition, MapDefinition, MarkerDefinition, PolygonDefinition, PolylineDefinition, RectangleDefinition } from '@symfony/ux-map';
 import AbstractMapController from '@symfony/ux-map';
-import type { Icon, InfoWindowWithoutPositionDefinition, MarkerDefinition, Point, PolygonDefinition, PolylineDefinition } from '@symfony/ux-map';
 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, google.maps.PolylineOptions, google.maps.Polyline> {
+export default class extends AbstractMapController<MapOptions, google.maps.MapOptions, google.maps.Map, google.maps.marker.AdvancedMarkerElementOptions, google.maps.marker.AdvancedMarkerElement, google.maps.InfoWindowOptions, google.maps.InfoWindow, google.maps.PolygonOptions, google.maps.Polygon, google.maps.PolylineOptions, google.maps.Polyline, google.maps.CircleOptions, google.maps.Circle, google.maps.RectangleOptions, google.maps.Rectangle> {
     providerOptionsValue: Pick<LoaderOptions, 'apiKey' | 'id' | 'language' | 'region' | 'nonce' | 'retries' | 'url' | 'version' | 'libraries'>;
     map: google.maps.Map;
-    parser: DOMParser;
     connect(): Promise<void>;
     centerValueChanged(): void;
     zoomValueChanged(): void;
     protected dispatchEvent(name: string, payload?: Record<string, unknown>): void;
-    protected doCreateMap({ center, zoom, options, }: {
-        center: Point | null;
-        zoom: number | null;
-        options: MapOptions;
+    protected doCreateMap({ definition }: {
+        definition: MapDefinition<MapOptions, google.maps.MapOptions>;
     }): google.maps.Map;
     protected doCreateMarker({ definition, }: {
         definition: MarkerDefinition<google.maps.marker.AdvancedMarkerElementOptions, google.maps.InfoWindowOptions>;
@@ -27,13 +24,21 @@ export default class extends AbstractMapController<MapOptions, google.maps.Map,
         definition: PolylineDefinition<google.maps.PolylineOptions, google.maps.InfoWindowOptions>;
     }): google.maps.Polyline;
     protected doRemovePolyline(polyline: google.maps.Polyline): void;
+    protected doCreateCircle({ definition }: {
+        definition: CircleDefinition<google.maps.CircleOptions, google.maps.InfoWindowOptions>;
+    }): google.maps.Circle;
+    protected doRemoveCircle(circle: google.maps.Circle): void;
+    protected doCreateRectangle({ definition, }: {
+        definition: RectangleDefinition<google.maps.RectangleOptions, google.maps.InfoWindowOptions>;
+    }): google.maps.Rectangle;
+    protected doRemoveRectangle(rectangle: google.maps.Rectangle): void;
     protected doCreateInfoWindow({ definition, element, }: {
-        definition: InfoWindowWithoutPositionDefinition<google.maps.InfoWindowOptions>;
-        element: google.maps.marker.AdvancedMarkerElement | google.maps.Polygon | google.maps.Polyline;
+        definition: Omit<InfoWindowDefinition<google.maps.InfoWindowOptions>, 'position'>;
+        element: google.maps.marker.AdvancedMarkerElement | google.maps.Polygon | google.maps.Polyline | google.maps.Circle | google.maps.Rectangle;
     }): google.maps.InfoWindow;
     protected doFitBoundsToMarkers(): void;
     private createTextOrElement;
-    protected doCreateIcon({ definition, element, }: {
+    protected doCreateIcon({ definition, element }: {
         definition: Icon;
         element: google.maps.marker.AdvancedMarkerElement;
     }): void;

package/dist/map_controller.js

@@ -12,23 +12,31 @@ class default_1 extends Controller {
         this.markers = new Map();
         this.polygons = new Map();
         this.polylines = new Map();
+        this.circles = new Map();
+        this.rectangles = new Map();
         this.infoWindows = [];
         this.isConnected = false;
     }
     connect() {
-        const options = this.optionsValue;
-        this.dispatchEvent('pre-connect', { options });
+        const extra = this.hasExtraValue ? this.extraValue : {};
+        const mapDefinition = {
+            center: this.hasCenterValue ? this.centerValue : null,
+            zoom: this.hasZoomValue ? this.zoomValue : null,
+            options: this.optionsValue,
+            extra,
+        };
+        this.dispatchEvent('pre-connect', mapDefinition);
         this.createMarker = this.createDrawingFactory('marker', this.markers, this.doCreateMarker.bind(this));
         this.createPolygon = this.createDrawingFactory('polygon', this.polygons, this.doCreatePolygon.bind(this));
         this.createPolyline = this.createDrawingFactory('polyline', this.polylines, this.doCreatePolyline.bind(this));
-        this.map = this.doCreateMap({
-            center: this.hasCenterValue ? this.centerValue : null,
-            zoom: this.hasZoomValue ? this.zoomValue : null,
-            options,
-        });
+        this.createCircle = this.createDrawingFactory('circle', this.circles, this.doCreateCircle.bind(this));
+        this.createRectangle = this.createDrawingFactory('rectangle', this.rectangles, this.doCreateRectangle.bind(this));
+        this.map = this.doCreateMap({ definition: mapDefinition });
         this.markersValue.forEach((definition) => this.createMarker({ definition }));
         this.polygonsValue.forEach((definition) => this.createPolygon({ definition }));
         this.polylinesValue.forEach((definition) => this.createPolyline({ definition }));
+        this.circlesValue.forEach((definition) => this.createCircle({ definition }));
+        this.rectanglesValue.forEach((definition) => this.createRectangle({ definition }));
         if (this.fitBoundsToMarkersValue) {
             this.doFitBoundsToMarkers();
         }
@@ -37,7 +45,10 @@ class default_1 extends Controller {
             markers: [...this.markers.values()],
             polygons: [...this.polygons.values()],
             polylines: [...this.polylines.values()],
+            circles: [...this.circles.values()],
+            rectangles: [...this.rectangles.values()],
             infoWindows: this.infoWindows,
+            extra,
         });
         this.isConnected = true;
     }
@@ -69,11 +80,26 @@ class default_1 extends Controller {
         }
         this.onDrawChanged(this.polylines, this.polylinesValue, this.createPolyline, this.doRemovePolyline);
     }
+    circlesValueChanged() {
+        if (!this.isConnected) {
+            return;
+        }
+        this.onDrawChanged(this.circles, this.circlesValue, this.createCircle, this.doRemoveCircle);
+    }
+    rectanglesValueChanged() {
+        if (!this.isConnected) {
+            return;
+        }
+        this.onDrawChanged(this.rectangles, this.rectanglesValue, this.createRectangle, this.doRemoveRectangle);
+    }
     createDrawingFactory(type, draws, factory) {
         const eventBefore = `${type}:before-create`;
         const eventAfter = `${type}:after-create`;
         return ({ definition }) => {
             this.dispatchEvent(eventBefore, { definition });
+            if (typeof definition.rawOptions !== 'undefined') {
+                console.warn(`[Symfony UX Map] The event "${eventBefore}" added a deprecated "rawOptions" property to the definition, it will be removed in a next major version, replace it with "bridgeOptions" instead.`, definition);
+            }
             const drawing = factory({ definition });
             this.dispatchEvent(eventAfter, { [type]: drawing, definition });
             draws.set(definition['@id'], drawing);
@@ -105,34 +131,51 @@ default_1.values = {
     markers: Array,
     polygons: Array,
     polylines: Array,
+    circles: Array,
+    rectangles: Array,
     options: Object,
+    extra: Object,
 };
 
 let _google;
+let _loading = false;
+let _loaded = false;
+let _onLoadedCallbacks = [];
 const parser = new DOMParser();
 class map_controller extends default_1 {
     async connect() {
-        if (!_google) {
-            _google = { maps: {} };
-            let { libraries = [], ...loaderOptions } = this.providerOptionsValue;
-            const loader = new Loader(loaderOptions);
-            libraries = ['core', ...libraries.filter((library) => library !== 'core')];
-            const librariesImplementations = await Promise.all(libraries.map((library) => loader.importLibrary(library)));
-            librariesImplementations.map((libraryImplementation, index) => {
-                if (typeof libraryImplementation !== 'object' || libraryImplementation === null) {
-                    return;
-                }
-                const library = libraries[index];
-                if (['marker', 'places', 'geometry', 'journeySharing', 'drawing', 'visualization'].includes(library)) {
-                    _google.maps[library] = libraryImplementation;
-                }
-                else {
-                    _google.maps = { ..._google.maps, ...libraryImplementation };
-                }
-            });
+        const onLoaded = () => super.connect();
+        if (_loaded) {
+            onLoaded();
+            return;
+        }
+        if (_loading) {
+            _onLoadedCallbacks.push(onLoaded);
+            return;
         }
-        super.connect();
-        this.parser = new DOMParser();
+        _loading = true;
+        _google = { maps: {} };
+        let { libraries = [], ...loaderOptions } = this.providerOptionsValue;
+        const loader = new Loader(loaderOptions);
+        libraries = ['core', ...libraries.filter((library) => library !== 'core')];
+        const librariesImplementations = await Promise.all(libraries.map((library) => loader.importLibrary(library)));
+        librariesImplementations.map((libraryImplementation, index) => {
+            if (typeof libraryImplementation !== 'object' || libraryImplementation === null) {
+                return;
+            }
+            const library = libraries[index];
+            if (['marker', 'places', 'geometry', 'journeySharing', 'drawing', 'visualization'].includes(library)) {
+                _google.maps[library] = libraryImplementation;
+            }
+            else {
+                _google.maps = { ..._google.maps, ...libraryImplementation };
+            }
+        });
+        _loading = false;
+        _loaded = true;
+        onLoaded();
+        _onLoadedCallbacks.forEach((callback) => callback());
+        _onLoadedCallbacks = [];
     }
     centerValueChanged() {
         if (this.map && this.hasCenterValue && this.centerValue) {
@@ -145,33 +188,33 @@ class map_controller extends default_1 {
         }
     }
     dispatchEvent(name, payload = {}) {
+        payload.google = _google;
         this.dispatch(name, {
             prefix: 'ux:map',
-            detail: {
-                ...payload,
-                google: _google,
-            },
+            detail: payload,
         });
     }
-    doCreateMap({ center, zoom, options, }) {
+    doCreateMap({ definition }) {
+        const { center, zoom, options, bridgeOptions = {} } = definition;
         options.zoomControl = typeof options.zoomControlOptions !== 'undefined';
         options.mapTypeControl = typeof options.mapTypeControlOptions !== 'undefined';
         options.streetViewControl = typeof options.streetViewControlOptions !== 'undefined';
         options.fullscreenControl = typeof options.fullscreenControlOptions !== 'undefined';
         return new _google.maps.Map(this.element, {
-            ...options,
             center,
             zoom,
+            ...options,
+            ...bridgeOptions,
         });
     }
     doCreateMarker({ definition, }) {
-        const { '@id': _id, position, title, infoWindow, icon, extra, rawOptions = {}, ...otherOptions } = definition;
+        const { '@id': _id, position, title, infoWindow, icon, rawOptions = {}, bridgeOptions = {} } = definition;
         const marker = new _google.maps.marker.AdvancedMarkerElement({
             position,
             title,
-            ...otherOptions,
-            ...rawOptions,
             map: this.map,
+            ...rawOptions,
+            ...bridgeOptions,
         });
         if (infoWindow) {
             this.createInfoWindow({ definition: infoWindow, element: marker });
@@ -185,11 +228,12 @@ class map_controller extends default_1 {
         marker.map = null;
     }
     doCreatePolygon({ definition, }) {
-        const { '@id': _id, points, title, infoWindow, rawOptions = {} } = definition;
+        const { '@id': _id, points, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition;
         const polygon = new _google.maps.Polygon({
-            ...rawOptions,
             paths: points,
             map: this.map,
+            ...rawOptions,
+            ...bridgeOptions,
         });
         if (title) {
             polygon.set('title', title);
@@ -203,11 +247,12 @@ class map_controller extends default_1 {
         polygon.setMap(null);
     }
     doCreatePolyline({ definition, }) {
-        const { '@id': _id, points, title, infoWindow, rawOptions = {} } = definition;
+        const { '@id': _id, points, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition;
         const polyline = new _google.maps.Polyline({
-            ...rawOptions,
             path: points,
             map: this.map,
+            ...rawOptions,
+            ...bridgeOptions,
         });
         if (title) {
             polyline.set('title', title);
@@ -220,41 +265,77 @@ class map_controller extends default_1 {
     doRemovePolyline(polyline) {
         polyline.setMap(null);
     }
+    doCreateCircle({ definition }) {
+        const { '@id': _id, center, radius, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition;
+        const circle = new _google.maps.Circle({
+            center,
+            radius,
+            map: this.map,
+            ...rawOptions,
+            ...bridgeOptions,
+        });
+        if (title) {
+            circle.set('title', title);
+        }
+        if (infoWindow) {
+            this.createInfoWindow({ definition: infoWindow, element: circle });
+        }
+        return circle;
+    }
+    doRemoveCircle(circle) {
+        circle.setMap(null);
+    }
+    doCreateRectangle({ definition, }) {
+        const { northEast, southWest, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition;
+        const rectangle = new _google.maps.Rectangle({
+            bounds: new _google.maps.LatLngBounds(southWest, northEast),
+            map: this.map,
+            ...rawOptions,
+            ...bridgeOptions,
+        });
+        if (title) {
+            rectangle.set('title', title);
+        }
+        if (infoWindow) {
+            this.createInfoWindow({ definition: infoWindow, element: rectangle });
+        }
+        return rectangle;
+    }
+    doRemoveRectangle(rectangle) {
+        rectangle.setMap(null);
+    }
     doCreateInfoWindow({ definition, element, }) {
-        const { headerContent, content, extra, rawOptions = {}, ...otherOptions } = definition;
-        const infoWindow = new _google.maps.InfoWindow({
+        const { headerContent, content, opened, autoClose, rawOptions = {}, bridgeOptions = {} } = definition;
+        let position = null;
+        if (element instanceof google.maps.Circle) {
+            position = element.getCenter();
+        }
+        else if (element instanceof google.maps.Rectangle) {
+            position = element.getBounds()?.getCenter() || null;
+        }
+        else if (element instanceof google.maps.Polygon || element instanceof google.maps.Polyline) ;
+        const infoWindowOptions = {
             headerContent: this.createTextOrElement(headerContent),
             content: this.createTextOrElement(content),
-            ...otherOptions,
+            position,
             ...rawOptions,
-        });
-        if (element instanceof google.maps.marker.AdvancedMarkerElement) {
-            element.addListener('click', () => {
-                if (definition.autoClose) {
-                    this.closeInfoWindowsExcept(infoWindow);
-                }
-                infoWindow.open({ map: this.map, anchor: element });
-            });
-            if (definition.opened) {
-                infoWindow.open({ map: this.map, anchor: element });
+            ...bridgeOptions,
+        };
+        const infoWindow = new _google.maps.InfoWindow(infoWindowOptions);
+        element.addListener('click', (event) => {
+            if (autoClose) {
+                this.closeInfoWindowsExcept(infoWindow);
             }
-        }
-        else if (element instanceof google.maps.Polygon) {
-            element.addListener('click', (event) => {
-                if (definition.autoClose) {
-                    this.closeInfoWindowsExcept(infoWindow);
-                }
+            if (infoWindowOptions.position === null) {
                 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 });
             }
+            infoWindow.open({ map: this.map, anchor: element });
+        });
+        if (opened) {
+            if (autoClose) {
+                this.closeInfoWindowsExcept(infoWindow);
+            }
+            infoWindow.open({ map: this.map, anchor: element });
         }
         return infoWindow;
     }
@@ -282,7 +363,7 @@ class map_controller extends default_1 {
         }
         return content;
     }
-    doCreateIcon({ definition, element, }) {
+    doCreateIcon({ definition, element }) {
         const { type, width, height } = definition;
         if (type === IconTypes.Svg) {
             element.content = parser.parseFromString(definition.html, 'image/svg+xml').documentElement;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symfony/ux-google-map",
   "description": "GoogleMaps bridge for Symfony UX Map, integrate interactive maps in your Symfony applications",
   "license": "MIT",
-  "version": "2.26.0",
+  "version": "2.27.0",
   "keywords": [
     "symfony-ux",
     "google-maps",
@@ -50,7 +50,7 @@
   "devDependencies": {
     "@googlemaps/js-api-loader": "^1.16.6",
     "@hotwired/stimulus": "^3.0.0",
-    "@symfony/ux-map": "2.26.0",
+    "@symfony/ux-map": "2.27.0",
     "@types/google.maps": "^3.55.9"
   }
 }