update snapshot and add dist files

Author: Valmonzo

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

@@ -48,6 +48,14 @@ export type PolylineDefinition<PolylineOptions, InfoWindowOptions> = WithIdentif
     rawOptions?: PolylineOptions;
     extra: Record<string, unknown>;
 }>;
+export type CircleDefinition<CircleOptions, InfoWindowOptions> = WithIdentifier<{
+    infoWindow?: InfoWindowWithoutPositionDefinition<InfoWindowOptions>;
+    center: Point;
+    radius: number;
+    title: string | null;
+    rawOptions?: CircleOptions;
+    extra: Record<string, unknown>;
+}>;
 export type InfoWindowDefinition<InfoWindowOptions> = {
     headerContent: string | null;
     content: string | null;
@@ -58,7 +66,7 @@ export type InfoWindowDefinition<InfoWindowOptions> = {
     extra: Record<string, unknown>;
 };
 export type InfoWindowWithoutPositionDefinition<InfoWindowOptions> = Omit<InfoWindowDefinition<InfoWindowOptions>, 'position'>;
-export default abstract class<MapOptions, Map, MarkerOptions, Marker, InfoWindowOptions, InfoWindow, PolygonOptions, Polygon, PolylineOptions, Polyline> extends Controller<HTMLElement> {
+export default abstract class<MapOptions, Map, MarkerOptions, Marker, InfoWindowOptions, InfoWindow, PolygonOptions, Polygon, PolylineOptions, Polyline, CircleOptions, Circle> extends Controller<HTMLElement> {
     static values: {
         providerOptions: ObjectConstructor;
         center: ObjectConstructor;
@@ -67,6 +75,7 @@ export default abstract class<MapOptions, Map, MarkerOptions, Marker, InfoWindow
         markers: ArrayConstructor;
         polygons: ArrayConstructor;
         polylines: ArrayConstructor;
+        circles: ArrayConstructor;
         options: ObjectConstructor;
     };
     centerValue: Point | null;
@@ -75,34 +84,39 @@ export default abstract class<MapOptions, Map, MarkerOptions, Marker, InfoWindow
     markersValue: Array<MarkerDefinition<MarkerOptions, InfoWindowOptions>>;
     polygonsValue: Array<PolygonDefinition<PolygonOptions, InfoWindowOptions>>;
     polylinesValue: Array<PolylineDefinition<PolylineOptions, InfoWindowOptions>>;
+    circlesValue: Array<CircleDefinition<CircleOptions, InfoWindowOptions>>;
     optionsValue: MapOptions;
     hasCenterValue: boolean;
     hasZoomValue: boolean;
     hasFitBoundsToMarkersValue: boolean;
     hasMarkersValue: boolean;
     hasPolygonsValue: boolean;
     hasPolylinesValue: boolean;
+    hasCirclesValue: boolean;
     hasOptionsValue: boolean;
     protected map: Map;
     protected markers: globalThis.Map<string, Marker>;
     protected polygons: globalThis.Map<string, Polygon>;
     protected polylines: globalThis.Map<string, Polyline>;
+    protected circles: globalThis.Map<string, Circle>;
     protected infoWindows: Array<InfoWindow>;
     private isConnected;
     private createMarker;
     private createPolygon;
     private createPolyline;
+    private createCircle;
     protected abstract dispatchEvent(name: string, payload: Record<string, unknown>): void;
     connect(): void;
     createInfoWindow({ definition, element, }: {
         definition: InfoWindowWithoutPositionDefinition<InfoWindowOptions>;
-        element: Marker | Polygon | Polyline;
+        element: Marker | Polygon | Polyline | Circle;
     }): InfoWindow;
     abstract centerValueChanged(): void;
     abstract zoomValueChanged(): void;
     markersValueChanged(): void;
     polygonsValueChanged(): void;
     polylinesValueChanged(): void;
+    circlesValueChanged(): void;
     protected abstract doCreateMap({ center, zoom, options, }: {
         center: Point | null;
         zoom: number | null;
@@ -121,9 +135,13 @@ export default abstract class<MapOptions, Map, MarkerOptions, Marker, InfoWindow
         definition: PolylineDefinition<PolylineOptions, InfoWindowOptions>;
     }): Polyline;
     protected abstract doRemovePolyline(polyline: Polyline): void;
+    protected abstract doCreateCircle({ definition, }: {
+        definition: CircleDefinition<CircleOptions, InfoWindowOptions>;
+    }): Circle;
+    protected abstract doRemoveCircle(circle: Circle): void;
     protected abstract doCreateInfoWindow({ definition, element, }: {
         definition: InfoWindowWithoutPositionDefinition<InfoWindowOptions>;
-        element: Marker | Polygon | Polyline;
+        element: Marker | Polygon | Polyline | Circle;
     }): InfoWindow;
     protected abstract doCreateIcon({ definition, element, }: {
         definition: Icon;

src/Map/assets/dist/abstract_map_controller.js

@@ -11,6 +11,7 @@ class default_1 extends Controller {
         this.markers = new Map();
         this.polygons = new Map();
         this.polylines = new Map();
+        this.circles = new Map();
         this.infoWindows = [];
         this.isConnected = false;
     }
@@ -20,6 +21,7 @@ class default_1 extends Controller {
         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.createCircle = this.createDrawingFactory('circle', this.circles, this.doCreateCircle.bind(this));
         this.map = this.doCreateMap({
             center: this.hasCenterValue ? this.centerValue : null,
             zoom: this.hasZoomValue ? this.zoomValue : null,
@@ -28,6 +30,7 @@ class default_1 extends Controller {
         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 }));
         if (this.fitBoundsToMarkersValue) {
             this.doFitBoundsToMarkers();
         }
@@ -36,6 +39,7 @@ class default_1 extends Controller {
             markers: [...this.markers.values()],
             polygons: [...this.polygons.values()],
             polylines: [...this.polylines.values()],
+            circles: [...this.circles.values()],
             infoWindows: this.infoWindows,
         });
         this.isConnected = true;
@@ -68,6 +72,12 @@ 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);
+    }
     createDrawingFactory(type, draws, factory) {
         const eventBefore = `${type}:before-create`;
         const eventAfter = `${type}:after-create`;
@@ -104,6 +114,7 @@ default_1.values = {
     markers: Array,
     polygons: Array,
     polylines: Array,
+    circles: Array,
     options: Object,
 };
 

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

@@ -1,8 +1,8 @@
 import type { LoaderOptions } from '@googlemaps/js-api-loader';
 import AbstractMapController from '@symfony/ux-map';
-import type { Icon, InfoWindowWithoutPositionDefinition, MarkerDefinition, Point, PolygonDefinition, PolylineDefinition } from '@symfony/ux-map';
+import type { CircleDefinition, 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.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> {
     providerOptionsValue: Pick<LoaderOptions, 'apiKey' | 'id' | 'language' | 'region' | 'nonce' | 'retries' | 'url' | 'version' | 'libraries'>;
     map: google.maps.Map;
     parser: DOMParser;
@@ -27,6 +27,10 @@ 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 doCreateInfoWindow({ definition, element, }: {
         definition: InfoWindowWithoutPositionDefinition<google.maps.InfoWindowOptions>;
         element: google.maps.marker.AdvancedMarkerElement | google.maps.Polygon | google.maps.Polyline;

src/Map/src/Bridge/Google/assets/dist/map_controller.js

@@ -12,6 +12,7 @@ class default_1 extends Controller {
         this.markers = new Map();
         this.polygons = new Map();
         this.polylines = new Map();
+        this.circles = new Map();
         this.infoWindows = [];
         this.isConnected = false;
     }
@@ -21,6 +22,7 @@ class default_1 extends Controller {
         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.createCircle = this.createDrawingFactory('circle', this.circles, this.doCreateCircle.bind(this));
         this.map = this.doCreateMap({
             center: this.hasCenterValue ? this.centerValue : null,
             zoom: this.hasZoomValue ? this.zoomValue : null,
@@ -29,6 +31,7 @@ class default_1 extends Controller {
         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 }));
         if (this.fitBoundsToMarkersValue) {
             this.doFitBoundsToMarkers();
         }
@@ -37,6 +40,7 @@ class default_1 extends Controller {
             markers: [...this.markers.values()],
             polygons: [...this.polygons.values()],
             polylines: [...this.polylines.values()],
+            circles: [...this.circles.values()],
             infoWindows: this.infoWindows,
         });
         this.isConnected = true;
@@ -69,6 +73,12 @@ 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);
+    }
     createDrawingFactory(type, draws, factory) {
         const eventBefore = `${type}:before-create`;
         const eventAfter = `${type}:after-create`;
@@ -105,6 +115,7 @@ default_1.values = {
     markers: Array,
     polygons: Array,
     polylines: Array,
+    circles: Array,
     options: Object,
 };
 
@@ -220,6 +231,25 @@ class map_controller extends default_1 {
     doRemovePolyline(polyline) {
         polyline.setMap(null);
     }
+    doCreateCircle({ definition, }) {
+        const { '@id': _id, center, radius, title, infoWindow, rawOptions = {} } = definition;
+        const circle = new _google.maps.Circle({
+            ...rawOptions,
+            center,
+            radius,
+            map: this.map,
+        });
+        if (title) {
+            circle.set('title', title);
+        }
+        if (infoWindow) {
+            this.createInfoWindow({ definition: infoWindow, element: circle });
+        }
+        return circle;
+    }
+    doRemoveCircle(circle) {
+        circle.setMap(null);
+    }
     doCreateInfoWindow({ definition, element, }) {
         const { headerContent, content, extra, rawOptions = {}, ...otherOptions } = definition;
         const infoWindow = new _google.maps.InfoWindow({

src/Map/src/Bridge/Google/tests/__snapshots__/GoogleRendererTest__testRenderMap with data set markers with icons__1.txt

@@ -10,4 +10,5 @@
   data-symfony--ux-google-map--map-markers-value="[{"position":{"lat":48.8566,"lng":2.3522},"title":"Paris","infoWindow":null,"icon":{"type":"url","width":32,"height":32,"url":"https:\/\/cdn.jsdelivr.net\/npm\/[email protected]\/icons\/geo-alt.svg"},"extra":[],"id":null,"@id":"217fa57668ad8e64"},{"position":{"lat":45.764,"lng":4.8357},"title":"Lyon","infoWindow":null,"icon":{"type":"ux-icon","width":32,"height":32,"name":"fa:map-marker","_generated_html":"<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\">...<\/svg>"},"extra":[],"id":null,"@id":"255b208136900fc0"},{"position":{"lat":45.8566,"lng":2.3522},"title":"Dijon","infoWindow":null,"icon":{"type":"svg","width":24,"height":24,"html":"<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\">...<\/svg>"},"extra":[],"id":null,"@id":"1a410e92214f770c"}]"
   data-symfony--ux-google-map--map-polygons-value="[]"
   data-symfony--ux-google-map--map-polylines-value="[]"
+  data-symfony--ux-google-map--map-circles-value="[]"
 ></div>

src/Map/src/Bridge/Google/tests/__snapshots__/GoogleRendererTest__testRenderMap with data set simple map, with minimum options__1.txt

@@ -10,4 +10,5 @@
   data-symfony--ux-google-map--map-markers-value="[]"
   data-symfony--ux-google-map--map-polygons-value="[]"
   data-symfony--ux-google-map--map-polylines-value="[]"
+  data-symfony--ux-google-map--map-circles-value="[]"
 ></div>

src/Map/src/Bridge/Google/tests/__snapshots__/GoogleRendererTest__testRenderMap with data set with all markers removed__1.txt

@@ -10,4 +10,5 @@
   data-symfony--ux-google-map--map-markers-value="[]"
   data-symfony--ux-google-map--map-polygons-value="[]"
   data-symfony--ux-google-map--map-polylines-value="[]"
+  data-symfony--ux-google-map--map-circles-value="[]"
 ></div>

src/Map/src/Bridge/Google/tests/__snapshots__/GoogleRendererTest__testRenderMap with data set with circles and infoWindows__1.txt

@@ -0,0 +1,14 @@
+<!-- This HTML has been prettified for testing purposes, and may not represent the actual HTML output.
+     Run "php vendor/bin/phpunit -d --update-snapshots" to update the snapshot. -->
+<div
+  data-controller="symfony--ux-google-map--map"
+  data-symfony--ux-google-map--map-provider-options-value="{&quot;apiKey&quot;:&quot;api_key&quot;}"
+  data-symfony--ux-google-map--map-center-value="{&quot;lat&quot;:48.8566,&quot;lng&quot;:2.3522}"
+  data-symfony--ux-google-map--map-zoom-value="12"
+  data-symfony--ux-google-map--map-fit-bounds-to-markers-value="false"
+  data-symfony--ux-google-map--map-options-value="{&quot;mapId&quot;:null,&quot;gestureHandling&quot;:&quot;auto&quot;,&quot;backgroundColor&quot;:null,&quot;disableDoubleClickZoom&quot;:false,&quot;zoomControlOptions&quot;:{&quot;position&quot;:22},&quot;mapTypeControlOptions&quot;:{&quot;mapTypeIds&quot;:[],&quot;position&quot;:14,&quot;style&quot;:0},&quot;streetViewControlOptions&quot;:{&quot;position&quot;:22},&quot;fullscreenControlOptions&quot;:{&quot;position&quot;:20},&quot;@provider&quot;:&quot;google&quot;}"
+  data-symfony--ux-google-map--map-markers-value="[]"
+  data-symfony--ux-google-map--map-polygons-value="[]"
+  data-symfony--ux-google-map--map-polylines-value="[]"
+  data-symfony--ux-google-map--map-circles-value="[{&quot;center&quot;:{&quot;lat&quot;:48.8566,&quot;lng&quot;:2.3522},&quot;radius&quot;:500,&quot;title&quot;:null,&quot;infoWindow&quot;:{&quot;headerContent&quot;:null,&quot;content&quot;:&quot;Circle&quot;,&quot;position&quot;:null,&quot;opened&quot;:false,&quot;autoClose&quot;:true,&quot;extra&quot;:[]},&quot;extra&quot;:[],&quot;id&quot;:null},{&quot;center&quot;:{&quot;lat&quot;:1.1,&quot;lng&quot;:2.2},&quot;radius&quot;:1000,&quot;title&quot;:null,&quot;infoWindow&quot;:{&quot;headerContent&quot;:null,&quot;content&quot;:&quot;Circle&quot;,&quot;position&quot;:null,&quot;opened&quot;:false,&quot;autoClose&quot;:true,&quot;extra&quot;:[]},&quot;extra&quot;:[],&quot;id&quot;:null}]"
+></div>

src/Map/src/Bridge/Google/tests/__snapshots__/GoogleRendererTest__testRenderMap with data set with controls enabled__1.txt

@@ -10,4 +10,5 @@
   data-symfony--ux-google-map--map-markers-value="[]"
   data-symfony--ux-google-map--map-polygons-value="[]"
   data-symfony--ux-google-map--map-polylines-value="[]"
+  data-symfony--ux-google-map--map-circles-value="[]"
 ></div>

src/Map/src/Bridge/Google/tests/__snapshots__/GoogleRendererTest__testRenderMap with data set with custom attributes__1.txt

@@ -10,5 +10,6 @@
   data-symfony--ux-google-map--map-markers-value="[]"
   data-symfony--ux-google-map--map-polygons-value="[]"
   data-symfony--ux-google-map--map-polylines-value="[]"
+  data-symfony--ux-google-map--map-circles-value="[]"
   class="map"
 ></div>