[Map] Looks like Stimulus default values does not behave like Vue props, revert and use hassers instead

Author: Kocal

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

@@ -40,32 +40,14 @@ export type InfoWindowDefinition<InfoWindowOptions> = {
 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> {
     static values: {
-        providerOptions: {
-            type: ObjectConstructor;
-        };
-        center: {
-            type: ObjectConstructor;
-            default: null;
-        };
-        zoom: {
-            type: NumberConstructor;
-            default: null;
-        };
-        fitBoundsToMarkers: {
-            type: BooleanConstructor;
-        };
-        markers: {
-            type: ArrayConstructor;
-        };
-        polygons: {
-            type: ArrayConstructor;
-        };
-        polylines: {
-            type: ArrayConstructor;
-        };
-        options: {
-            type: ObjectConstructor;
-        };
+        providerOptions: ObjectConstructor;
+        center: ObjectConstructor;
+        zoom: NumberConstructor;
+        fitBoundsToMarkers: BooleanConstructor;
+        markers: ArrayConstructor;
+        polygons: ArrayConstructor;
+        polylines: ArrayConstructor;
+        options: ObjectConstructor;
     };
     centerValue: Point | null;
     zoomValue: number | null;
@@ -74,6 +56,13 @@ export default abstract class<MapOptions, Map, MarkerOptions, Marker, InfoWindow
     polygonsValue: Array<PolygonDefinition<PolygonOptions, InfoWindowOptions>>;
     polylinesValue: Array<PolylineDefinition<PolylineOptions, InfoWindowOptions>>;
     optionsValue: MapOptions;
+    hasCenterValue: boolean;
+    hasZoomValue: boolean;
+    hasFitBoundsToMarkersValue: boolean;
+    hasMarkersValue: boolean;
+    hasPolygonsValue: boolean;
+    hasPolylinesValue: boolean;
+    hasOptionsValue: boolean;
     protected map: Map;
     protected markers: globalThis.Map<string, Marker>;
     protected polygons: globalThis.Map<string, Polygon>;

src/Map/assets/dist/abstract_map_controller.js

@@ -15,7 +15,11 @@ 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.map = this.doCreateMap({ center: this.centerValue, zoom: this.zoomValue, options });
+        this.map = this.doCreateMap({
+            center: this.hasCenterValue ? this.centerValue : null,
+            zoom: this.hasZoomValue ? this.zoomValue : null,
+            options
+        });
         this.markersValue.forEach((definition) => this.createMarker({ definition }));
         this.polygonsValue.forEach((definition) => this.createPolygon({ definition }));
         this.polylinesValue.forEach((definition) => this.createPolyline({ definition }));
@@ -88,14 +92,14 @@ class default_1 extends Controller {
     }
 }
 default_1.values = {
-    providerOptions: { type: Object },
-    center: { type: Object, default: null },
-    zoom: { type: Number, default: null },
-    fitBoundsToMarkers: { type: Boolean },
-    markers: { type: Array },
-    polygons: { type: Array },
-    polylines: { type: Array },
-    options: { type: Object },
+    providerOptions: Object,
+    center: Object,
+    zoom: Number,
+    fitBoundsToMarkers: Boolean,
+    markers: Array,
+    polygons: Array,
+    polylines: Array,
+    options: Object,
 };
 
 export { default_1 as default };

src/Map/assets/src/abstract_map_controller.ts

@@ -94,14 +94,14 @@ export default abstract class<
     Polyline,
 > extends Controller<HTMLElement> {
     static values = {
-        providerOptions: { type: Object },
-        center: { type: Object, default: null },
-        zoom: { type: Number, default: null },
-        fitBoundsToMarkers: { type: Boolean },
-        markers: { type: Array },
-        polygons: { type: Array },
-        polylines: { type: Array },
-        options: { type: Object },
+        providerOptions: Object,
+        center: Object,
+        zoom: Number,
+        fitBoundsToMarkers: Boolean,
+        markers: Array,
+        polygons: Array,
+        polylines: Array,
+        options: Object,
     };
 
     declare centerValue: Point | null;
@@ -112,6 +112,14 @@ export default abstract class<
     declare polylinesValue: Array<PolylineDefinition<PolylineOptions, InfoWindowOptions>>;
     declare optionsValue: MapOptions;
 
+    declare hasCenterValue: boolean;
+    declare hasZoomValue: boolean;
+    declare hasFitBoundsToMarkersValue: boolean;
+    declare hasMarkersValue: boolean;
+    declare hasPolygonsValue: boolean;
+    declare hasPolylinesValue: boolean;
+    declare hasOptionsValue: boolean;
+
     protected map: Map;
     protected markers = new Map<Identifier, Marker>();
     protected polygons = new Map<Identifier, Polygon>();
@@ -140,7 +148,11 @@ export default abstract class<
         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.centerValue, zoom: this.zoomValue, options });
+        this.map = this.doCreateMap({
+            center: this.hasCenterValue ? this.centerValue : null,
+            zoom: this.hasZoomValue ? this.zoomValue : null,
+            options
+        });
         this.markersValue.forEach((definition) => this.createMarker({ definition }));
         this.polygonsValue.forEach((definition) => this.createPolygon({ definition }));
         this.polylinesValue.forEach((definition) => this.createPolyline({ definition }));

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

@@ -16,7 +16,11 @@ 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.map = this.doCreateMap({ center: this.centerValue, zoom: this.zoomValue, options });
+        this.map = this.doCreateMap({
+            center: this.hasCenterValue ? this.centerValue : null,
+            zoom: this.hasZoomValue ? this.zoomValue : null,
+            options
+        });
         this.markersValue.forEach((definition) => this.createMarker({ definition }));
         this.polygonsValue.forEach((definition) => this.createPolygon({ definition }));
         this.polylinesValue.forEach((definition) => this.createPolyline({ definition }));
@@ -89,14 +93,14 @@ class default_1 extends Controller {
     }
 }
 default_1.values = {
-    providerOptions: { type: Object },
-    center: { type: Object, default: null },
-    zoom: { type: Number, default: null },
-    fitBoundsToMarkers: { type: Boolean },
-    markers: { type: Array },
-    polygons: { type: Array },
-    polylines: { type: Array },
-    options: { type: Object },
+    providerOptions: Object,
+    center: Object,
+    zoom: Number,
+    fitBoundsToMarkers: Boolean,
+    markers: Array,
+    polygons: Array,
+    polylines: Array,
+    options: Object,
 };
 
 let _google;
@@ -121,12 +125,12 @@ class map_controller extends default_1 {
         super.connect();
     }
     centerValueChanged() {
-        if (this.map && this.centerValue) {
+        if (this.map && this.hasCenterValue && this.centerValue) {
             this.map.setCenter(this.centerValue);
         }
     }
     zoomValueChanged() {
-        if (this.map && this.zoomValue) {
+        if (this.map && this.hasZoomValue && this.zoomValue) {
             this.map.setZoom(this.zoomValue);
         }
     }

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

@@ -86,13 +86,13 @@ export default class extends AbstractMapController<
     }
 
     public centerValueChanged(): void {
-        if (this.map && this.centerValue) {
+        if (this.map && this.hasCenterValue && this.centerValue) {
             this.map.setCenter(this.centerValue);
         }
     }
 
     public zoomValueChanged(): void {
-        if (this.map && this.zoomValue) {
+        if (this.map && this.hasZoomValue && this.zoomValue) {
             this.map.setZoom(this.zoomValue);
         }
     }

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

@@ -17,7 +17,11 @@ 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.map = this.doCreateMap({ center: this.centerValue, zoom: this.zoomValue, options });
+        this.map = this.doCreateMap({
+            center: this.hasCenterValue ? this.centerValue : null,
+            zoom: this.hasZoomValue ? this.zoomValue : null,
+            options
+        });
         this.markersValue.forEach((definition) => this.createMarker({ definition }));
         this.polygonsValue.forEach((definition) => this.createPolygon({ definition }));
         this.polylinesValue.forEach((definition) => this.createPolyline({ definition }));
@@ -90,14 +94,14 @@ class default_1 extends Controller {
     }
 }
 default_1.values = {
-    providerOptions: { type: Object },
-    center: { type: Object, default: null },
-    zoom: { type: Number, default: null },
-    fitBoundsToMarkers: { type: Boolean },
-    markers: { type: Array },
-    polygons: { type: Array },
-    polylines: { type: Array },
-    options: { type: Object },
+    providerOptions: Object,
+    center: Object,
+    zoom: Number,
+    fitBoundsToMarkers: Boolean,
+    markers: Array,
+    polygons: Array,
+    polylines: Array,
+    options: Object,
 };
 
 class map_controller extends default_1 {
@@ -112,12 +116,12 @@ class map_controller extends default_1 {
         super.connect();
     }
     centerValueChanged() {
-        if (this.map && this.centerValue && this.zoomValue) {
+        if (this.map && this.hasCenterValue && this.centerValue && this.hasZoomValue && this.zoomValue) {
             this.map.setView(this.centerValue, this.zoomValue);
         }
     }
     zoomValueChanged() {
-        if (this.map && this.zoomValue) {
+        if (this.map && this.hasZoomValue && this.zoomValue) {
             this.map.setZoom(this.zoomValue);
         }
     }

src/Map/src/Bridge/Leaflet/assets/src/map_controller.ts

@@ -48,13 +48,13 @@ export default class extends AbstractMapController<
     }
 
     public centerValueChanged(): void {
-        if (this.map && this.centerValue && this.zoomValue) {
+        if (this.map && this.hasCenterValue && this.centerValue && this.hasZoomValue && this.zoomValue) {
             this.map.setView(this.centerValue, this.zoomValue);
         }
     }
 
     public zoomValueChanged(): void {
-        if (this.map && this.zoomValue) {
+        if (this.map && this.hasZoomValue && this.zoomValue) {
             this.map.setZoom(this.zoomValue);
         }
     }