[Map] Split "view" attribute into multiple attributes

Author: Kocal

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

@@ -3,14 +3,6 @@ export type Point = {
     lat: number;
     lng: number;
 };
-export type MapView<Options, MarkerOptions, InfoWindowOptions, PolygonOptions> = {
-    center: Point | null;
-    zoom: number | null;
-    fitBoundsToMarkers: boolean;
-    markers: Array<MarkerDefinition<MarkerOptions, InfoWindowOptions>>;
-    polygons: Array<PolygonDefinition<PolygonOptions, InfoWindowOptions>>;
-    options: Options;
-};
 export type MarkerDefinition<MarkerOptions, InfoWindowOptions> = {
     position: Point;
     title: string | null;
@@ -39,7 +31,12 @@ export default abstract class<MapOptions, Map, MarkerOptions, Marker, InfoWindow
         providerOptions: ObjectConstructor;
         view: ObjectConstructor;
     };
-    viewValue: MapView<MapOptions, MarkerOptions, InfoWindowOptions, PolygonOptions>;
+    centerValue: Point | null;
+    zoomValue: number | null;
+    fitBoundsToMarkersValue: boolean;
+    markersValue: Array<MarkerDefinition<MarkerOptions, InfoWindowOptions>>;
+    polygonsValue: Array<PolygonDefinition<PolygonOptions, InfoWindowOptions>>;
+    optionsValue: MapOptions;
     protected map: Map;
     protected markers: Array<Marker>;
     protected infoWindows: Array<InfoWindow>;

src/Map/assets/dist/abstract_map_controller.js

@@ -8,12 +8,12 @@ class default_1 extends Controller {
         this.polygons = [];
     }
     connect() {
-        const { center, zoom, options, markers, polygons, fitBoundsToMarkers } = this.viewValue;
+        const options = this.optionsValue;
         this.dispatchEvent('pre-connect', { options });
-        this.map = this.doCreateMap({ center, zoom, options });
-        markers.forEach((marker) => this.createMarker(marker));
-        polygons.forEach((polygon) => this.createPolygon(polygon));
-        if (fitBoundsToMarkers) {
+        this.map = this.doCreateMap({ center: this.centerValue, zoom: this.zoomValue, options });
+        this.markersValue.forEach((marker) => this.createMarker(marker));
+        this.polygonsValue.forEach((polygon) => this.createPolygon(polygon));
+        if (this.fitBoundsToMarkersValue) {
             this.doFitBoundsToMarkers();
         }
         this.dispatchEvent('connect', {

src/Map/assets/src/abstract_map_controller.ts

@@ -2,15 +2,6 @@ import { Controller } from '@hotwired/stimulus';
 
 export type Point = { lat: number; lng: number };
 
-export type MapView<Options, MarkerOptions, InfoWindowOptions, PolygonOptions> = {
-    center: Point | null;
-    zoom: number | null;
-    fitBoundsToMarkers: boolean;
-    markers: Array<MarkerDefinition<MarkerOptions, InfoWindowOptions>>;
-    polygons: Array<PolygonDefinition<PolygonOptions, InfoWindowOptions>>;
-    options: Options;
-};
-
 export type MarkerDefinition<MarkerOptions, InfoWindowOptions> = {
     position: Point;
     title: string | null;
@@ -71,25 +62,30 @@ export default abstract class<
         view: Object,
     };
 
-    declare viewValue: MapView<MapOptions, MarkerOptions, InfoWindowOptions, PolygonOptions>;
+    declare centerValue: Point | null;
+    declare zoomValue: number | null;
+    declare fitBoundsToMarkersValue: boolean;
+    declare markersValue: Array<MarkerDefinition<MarkerOptions, InfoWindowOptions>>;
+    declare polygonsValue: Array<PolygonDefinition<PolygonOptions, InfoWindowOptions>>;
+    declare optionsValue: MapOptions;
 
     protected map: Map;
     protected markers: Array<Marker> = [];
     protected infoWindows: Array<InfoWindow> = [];
     protected polygons: Array<Polygon> = [];
 
     connect() {
-        const { center, zoom, options, markers, polygons, fitBoundsToMarkers } = this.viewValue;
+        const options = this.optionsValue;
 
         this.dispatchEvent('pre-connect', { options });
 
-        this.map = this.doCreateMap({ center, zoom, options });
+        this.map = this.doCreateMap({ center: this.centerValue, zoom: this.zoomValue, options });
 
-        markers.forEach((marker) => this.createMarker(marker));
+        this.markersValue.forEach((marker) => this.createMarker(marker));
 
-        polygons.forEach((polygon) => this.createPolygon(polygon));
+        this.polygonsValue.forEach((polygon) => this.createPolygon(polygon));
 
-        if (fitBoundsToMarkers) {
+        if (this.fitBoundsToMarkersValue) {
             this.doFitBoundsToMarkers();
         }
 

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

@@ -9,12 +9,12 @@ let default_1$1 = class default_1 extends Controller {
         this.polygons = [];
     }
     connect() {
-        const { center, zoom, options, markers, polygons, fitBoundsToMarkers } = this.viewValue;
+        const options = this.optionsValue;
         this.dispatchEvent('pre-connect', { options });
-        this.map = this.doCreateMap({ center, zoom, options });
-        markers.forEach((marker) => this.createMarker(marker));
-        polygons.forEach((polygon) => this.createPolygon(polygon));
-        if (fitBoundsToMarkers) {
+        this.map = this.doCreateMap({ center: this.centerValue, zoom: this.zoomValue, options });
+        this.markersValue.forEach((marker) => this.createMarker(marker));
+        this.polygonsValue.forEach((polygon) => this.createPolygon(polygon));
+        if (this.fitBoundsToMarkersValue) {
             this.doFitBoundsToMarkers();
         }
         this.dispatchEvent('connect', {