@theseam/ui-common 0.4.15 → 0.4.18

package/fesm2020/theseam-ui-common-google-maps.mjs

@@ -486,6 +486,9 @@ class GoogleMapsService {
     setBaseLatLng(lat, lng) {
         this._baseLatLng = { lat, lng };
     }
+    setPadding(padding) {
+        this._padding = padding;
+    }
     // TODO: Refactor out of the service meant to just wrap the google maps api.
     setFeatureContextMenu(menu) {
         this.closeContextMenu();
@@ -597,7 +600,7 @@ class GoogleMapsService {
         this._assertInitialized();
         removeAllFeatures(this.googleMap.data);
         this.googleMap.data.addGeoJson(data);
-        this.googleMap.fitBounds(getBoundsWithAllFeatures(this.googleMap.data));
+        this.googleMap.fitBounds(getBoundsWithAllFeatures(this.googleMap.data), this._padding);
     }
     // TODO: Refactor out of the service meant to just wrap the google maps api.
     reCenterOnFeatures() {
@@ -609,7 +612,7 @@ class GoogleMapsService {
             this.googleMap.panTo(this._baseLatLng);
             return;
         }
-        this.googleMap.fitBounds(getBoundsWithAllFeatures(this.googleMap.data));
+        this.googleMap.fitBounds(getBoundsWithAllFeatures(this.googleMap.data), this._padding);
         // TODO: Fix to pan to center. Currently fitBounds results in the expected
         // result, but pantToBounds animates.
         // this.googleMap.panToBounds(getBoundsWithAllFeatures(this.googleMap.data))
@@ -1279,6 +1282,7 @@ class TheSeamGoogleMapsComponent extends _TheSeamGoogleMapsMixinBase {
         this.zoom = 14;
         this.longitude = -98.570209;
         this.latitude = 37.633814;
+        this.padding = 0;
         this.mapReady = new EventEmitter();
         this._options = {
             mapTypeControl: true,
@@ -1314,6 +1318,7 @@ class TheSeamGoogleMapsComponent extends _TheSeamGoogleMapsMixinBase {
             }
         }));
         this._googleMaps.setBaseLatLng(this.latitude, this.longitude);
+        this._googleMaps.setPadding(this.padding);
         this._gmApiLoaded = this._googleMapsApiLoader.load().pipe(map(() => true), catchError(() => of(false)));
     }
     ngOnInit() {
@@ -1372,6 +1377,9 @@ class TheSeamGoogleMapsComponent extends _TheSeamGoogleMapsMixinBase {
         if (Object.prototype.hasOwnProperty.call(changes, 'editingEnabled')) {
             this._googleMaps.setEditingEnabled(this.editingEnabled);
         }
+        if (Object.prototype.hasOwnProperty.call(changes, 'padding')) {
+            this._googleMaps.setPadding(this.padding);
+        }
     }
     writeValue(value) {
         this.value = value;
@@ -1404,27 +1412,24 @@ class TheSeamGoogleMapsComponent extends _TheSeamGoogleMapsMixinBase {
     _onMapReady(theMap) {
         this._googleMaps.setMap(theMap);
         this._googleMaps.setData(this._mapValueManager.value);
-        // NOTE: AgmMap has a race condition problem that causes the input latitude,
-        // longitude, and zoom to get ignored, before googlemaps emits
-        // 'center_changed'. This should avoid the issue, until we stop using AgmMap
-        // or upgrade to a more recent version that may not have the issue anymore.
-        // TODO: Check if the switch to '@angular/google-maps' fixed this problem.
-        this._googleMaps.reCenterOnFeatures();
-        // NOTE: the input zoom level was getting reset after this function ran,
+        // NOTE: The input zoom level was getting reset after this function ran,
         // so putting in this idle listener to wait until the map is fully rendered
         // to set the zoom.
+        // Calling reCenterOnFeatures() after setZoom() ensures that maps with pre-drawn shapes
+        // will display correctly
         this.idleListener = this._googleMaps.googleMap?.addListener('idle', () => {
             this._googleMaps.googleMap?.setZoom(this.zoom);
+            this._googleMaps.reCenterOnFeatures();
+            this.mapReady.emit(this._googleMaps.googleMap);
             this.idleListener?.remove();
         });
-        this.mapReady.emit(this._googleMaps.googleMap);
     }
     _onClickDeleteFeature() {
         this._googleMaps.deleteSelection();
     }
 }
 TheSeamGoogleMapsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamGoogleMapsComponent, deps: [{ token: i0.ElementRef }, { token: i1.FocusMonitor }, { token: GoogleMapsService }, { token: MapValueManagerService }, { token: TheSeamGoogleMapsApiLoader }], target: i0.ɵɵFactoryTarget.Component });
-TheSeamGoogleMapsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: TheSeamGoogleMapsComponent, selector: "seam-google-maps", inputs: { disabled: "disabled", value: "value", tabIndex: "tabIndex", fileDropEnabled: "fileDropEnabled", fileUploadControlEnabled: "fileUploadControlEnabled", fullscreenControlEnabled: "fullscreenControlEnabled", reCenterControlEnabled: "reCenterControlEnabled", mapTypeControlEnabled: "mapTypeControlEnabled", streetViewControlEnabled: "streetViewControlEnabled", allowDrawingHoleInPolygon: "allowDrawingHoleInPolygon", editingEnabled: "editingEnabled", fileImportHandler: "fileImportHandler", zoom: "zoom", longitude: "longitude", latitude: "latitude" }, outputs: { mapReady: "mapReady" }, host: { properties: { "attr.disabled": "this._attrDisabled", "attr.tabindex": "this._attrTabIndex" } }, providers: [
+TheSeamGoogleMapsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: TheSeamGoogleMapsComponent, selector: "seam-google-maps", inputs: { disabled: "disabled", value: "value", tabIndex: "tabIndex", fileDropEnabled: "fileDropEnabled", fileUploadControlEnabled: "fileUploadControlEnabled", fullscreenControlEnabled: "fullscreenControlEnabled", reCenterControlEnabled: "reCenterControlEnabled", mapTypeControlEnabled: "mapTypeControlEnabled", streetViewControlEnabled: "streetViewControlEnabled", allowDrawingHoleInPolygon: "allowDrawingHoleInPolygon", editingEnabled: "editingEnabled", fileImportHandler: "fileImportHandler", zoom: "zoom", longitude: "longitude", latitude: "latitude", padding: "padding" }, outputs: { mapReady: "mapReady" }, host: { properties: { "attr.disabled": "this._attrDisabled", "attr.tabindex": "this._attrTabIndex" } }, providers: [
         MapValueManagerService,
         GoogleMapsService,
         { provide: MAP_CONTROLS_SERVICE, useClass: GoogleMapsControlsService },
@@ -1517,6 +1522,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 type: Input
             }], latitude: [{
                 type: Input
+            }], padding: [{
+                type: Input
             }], mapReady: [{
                 type: Output
             }], featureContextMenu: [{