[Map] Re-organize methods order, simplify types, don't dirty-append @id anymore

Author: Kocal

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

@@ -3,30 +3,31 @@ export type Point = {
     lat: number;
     lng: number;
 };
-export type MarkerDefinition<MarkerOptions, InfoWindowOptions> = {
-    '@id': string;
+export type Identifier = string;
+export type WithIdentifier<T extends Record<string, unknown>> = T & {
+    '@id': Identifier;
+};
+export type MarkerDefinition<MarkerOptions, InfoWindowOptions> = WithIdentifier<{
     position: Point;
     title: string | null;
-    infoWindow?: Omit<InfoWindowDefinition<InfoWindowOptions>, 'position'>;
+    infoWindow?: InfoWindowWithoutPositionDefinition<InfoWindowOptions>;
     rawOptions?: MarkerOptions;
     extra: Record<string, unknown>;
-};
-export type PolygonDefinition<PolygonOptions, InfoWindowOptions> = {
-    '@id': string;
-    infoWindow?: Omit<InfoWindowDefinition<InfoWindowOptions>, 'position'>;
+}>;
+export type PolygonDefinition<PolygonOptions, InfoWindowOptions> = WithIdentifier<{
+    infoWindow?: InfoWindowWithoutPositionDefinition<InfoWindowOptions>;
     points: Array<Point>;
     title: string | null;
     rawOptions?: PolygonOptions;
     extra: Record<string, unknown>;
-};
-export type PolylineDefinition<PolylineOptions, InfoWindowOptions> = {
-    '@id': string;
-    infoWindow?: Omit<InfoWindowDefinition<InfoWindowOptions>, 'position'>;
+}>;
+export type PolylineDefinition<PolylineOptions, InfoWindowOptions> = WithIdentifier<{
+    infoWindow?: InfoWindowWithoutPositionDefinition<InfoWindowOptions>;
     points: Array<Point>;
     title: string | null;
     rawOptions?: PolylineOptions;
     extra: Record<string, unknown>;
-};
+}>;
 export type InfoWindowDefinition<InfoWindowOptions> = {
     headerContent: string | null;
     content: string | null;
@@ -36,6 +37,7 @@ export type InfoWindowDefinition<InfoWindowOptions> = {
     rawOptions?: 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> {
     static values: {
         providerOptions: ObjectConstructor;
@@ -55,50 +57,39 @@ export default abstract class<MapOptions, Map, MarkerOptions, Marker, InfoWindow
     polylinesValue: Array<PolylineDefinition<PolylineOptions, InfoWindowOptions>>;
     optionsValue: MapOptions;
     protected map: Map;
-    protected markers: globalThis.Map<any, any>;
+    protected markers: globalThis.Map<string, Marker>;
+    protected polygons: globalThis.Map<string, Polygon>;
+    protected polylines: globalThis.Map<string, Polyline>;
     protected infoWindows: Array<InfoWindow>;
-    protected polygons: globalThis.Map<any, any>;
-    protected polylines: globalThis.Map<any, any>;
+    private isConnected;
+    protected abstract dispatchEvent(name: string, payload: Record<string, unknown>): void;
     connect(): void;
+    createMarker(definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>): Marker;
+    createPolygon(definition: PolygonDefinition<PolygonOptions, InfoWindowOptions>): Polygon;
+    createPolyline(definition: PolylineDefinition<PolylineOptions, InfoWindowOptions>): Polyline;
+    createInfoWindow({ definition, element, }: {
+        definition: InfoWindowWithoutPositionDefinition<InfoWindowOptions>;
+        element: Marker | Polygon | Polyline;
+    }): InfoWindow;
+    abstract centerValueChanged(): void;
+    abstract zoomValueChanged(): void;
+    markersValueChanged(): void;
+    polygonsValueChanged(): void;
+    polylinesValueChanged(): void;
     protected abstract doCreateMap({ center, zoom, options, }: {
         center: Point | null;
         zoom: number | null;
         options: MapOptions;
     }): Map;
-    createMarker(definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>): Marker;
-    protected abstract removeMarker(marker: Marker): void;
+    protected abstract doFitBoundsToMarkers(): void;
     protected abstract doCreateMarker(definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>): Marker;
-    createPolygon(definition: PolygonDefinition<PolygonOptions, InfoWindowOptions>): Polygon;
-    protected abstract removePolygon(polygon: Polygon): void;
+    protected abstract doRemoveMarker(marker: Marker): void;
     protected abstract doCreatePolygon(definition: PolygonDefinition<PolygonOptions, InfoWindowOptions>): Polygon;
-    createPolyline(definition: PolylineDefinition<PolylineOptions, InfoWindowOptions>): Polyline;
-    protected abstract removePolyline(polyline: Polyline): void;
+    protected abstract doRemovePolygon(polygon: Polygon): void;
     protected abstract doCreatePolyline(definition: PolylineDefinition<PolylineOptions, InfoWindowOptions>): Polyline;
-    protected createInfoWindow({ definition, element, }: {
-        definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow'];
-        element: Marker;
-    } | {
-        definition: PolygonDefinition<PolygonOptions, InfoWindowOptions>['infoWindow'];
-        element: Polygon;
-    } | {
-        definition: PolylineDefinition<PolylineOptions, InfoWindowOptions>['infoWindow'];
-        element: Polyline;
-    }): InfoWindow;
+    protected abstract doRemovePolyline(polyline: Polyline): void;
     protected abstract doCreateInfoWindow({ definition, element, }: {
-        definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow'];
-        element: Marker;
-    } | {
-        definition: PolygonDefinition<PolygonOptions, InfoWindowOptions>['infoWindow'];
-        element: Polygon;
-    } | {
-        definition: PolylineDefinition<PolylineOptions, InfoWindowOptions>['infoWindow'];
-        element: Polyline;
+        definition: InfoWindowWithoutPositionDefinition<InfoWindowOptions>;
+        element: Marker | Polygon | Polyline;
     }): InfoWindow;
-    protected abstract doFitBoundsToMarkers(): void;
-    protected abstract dispatchEvent(name: string, payload: Record<string, unknown>): void;
-    abstract centerValueChanged(): void;
-    abstract zoomValueChanged(): void;
-    markersValueChanged(): void;
-    polygonsValueChanged(): void;
-    polylinesValueChanged(): void;
 }

src/Map/assets/dist/abstract_map_controller.js

@@ -4,9 +4,10 @@ class default_1 extends Controller {
     constructor() {
         super(...arguments);
         this.markers = new Map();
-        this.infoWindows = [];
         this.polygons = new Map();
         this.polylines = new Map();
+        this.infoWindows = [];
+        this.isConnected = false;
     }
     connect() {
         const options = this.optionsValue;
@@ -25,28 +26,26 @@ class default_1 extends Controller {
             polylines: [...this.polylines.values()],
             infoWindows: this.infoWindows,
         });
+        this.isConnected = true;
     }
     createMarker(definition) {
         this.dispatchEvent('marker:before-create', { definition });
         const marker = this.doCreateMarker(definition);
         this.dispatchEvent('marker:after-create', { marker });
-        marker['@id'] = definition['@id'];
         this.markers.set(definition['@id'], marker);
         return marker;
     }
     createPolygon(definition) {
         this.dispatchEvent('polygon:before-create', { definition });
         const polygon = this.doCreatePolygon(definition);
         this.dispatchEvent('polygon:after-create', { polygon });
-        polygon['@id'] = definition['@id'];
         this.polygons.set(definition['@id'], polygon);
         return polygon;
     }
     createPolyline(definition) {
         this.dispatchEvent('polyline:before-create', { definition });
         const polyline = this.doCreatePolyline(definition);
         this.dispatchEvent('polyline:after-create', { polyline });
-        polyline['@id'] = definition['@id'];
         this.polylines.set(definition['@id'], polyline);
         return polyline;
     }
@@ -58,53 +57,62 @@ class default_1 extends Controller {
         return infoWindow;
     }
     markersValueChanged() {
-        if (!this.map) {
+        if (!this.isConnected) {
             return;
         }
-        this.markers.forEach((marker) => {
-            if (!this.markersValue.find((m) => m['@id'] === marker['@id'])) {
-                this.removeMarker(marker);
-                this.markers.delete(marker['@id']);
-            }
+        const idsToRemove = new Set(this.markers.keys());
+        this.markersValue.forEach((definition) => {
+            idsToRemove.delete(definition['@id']);
+        });
+        idsToRemove.forEach((id) => {
+            const marker = this.markers.get(id);
+            this.doRemoveMarker(marker);
+            this.markers.delete(id);
         });
-        this.markersValue.forEach((marker) => {
-            if (!this.markers.has(marker['@id'])) {
-                this.createMarker(marker);
+        this.markersValue.forEach((definition) => {
+            if (!this.markers.has(definition['@id'])) {
+                this.createMarker(definition);
             }
         });
         if (this.fitBoundsToMarkersValue) {
             this.doFitBoundsToMarkers();
         }
     }
     polygonsValueChanged() {
-        if (!this.map) {
+        if (!this.isConnected) {
             return;
         }
-        this.polygons.forEach((polygon) => {
-            if (!this.polygonsValue.find((p) => p['@id'] === polygon['@id'])) {
-                this.removePolygon(polygon);
-                this.polygons.delete(polygon['@id']);
-            }
+        const idsToRemove = new Set(this.polygons.keys());
+        this.polygonsValue.forEach((definition) => {
+            idsToRemove.delete(definition['@id']);
+        });
+        idsToRemove.forEach((id) => {
+            const polygon = this.polygons.get(id);
+            this.doRemovePolygon(polygon);
+            this.polygons.delete(id);
         });
-        this.polygonsValue.forEach((polygon) => {
-            if (!this.polygons.has(polygon['@id'])) {
-                this.createPolygon(polygon);
+        this.polygonsValue.forEach((definition) => {
+            if (!this.polygons.has(definition['@id'])) {
+                this.createPolygon(definition);
             }
         });
     }
     polylinesValueChanged() {
-        if (!this.map) {
+        if (!this.isConnected) {
             return;
         }
-        this.polylines.forEach((polyline) => {
-            if (!this.polylinesValue.find((p) => p['@id'] === polyline['@id'])) {
-                this.removePolyline(polyline);
-                this.polylines.delete(polyline['@id']);
-            }
+        const idsToRemove = new Set(this.polylines.keys());
+        this.polylinesValue.forEach((definition) => {
+            idsToRemove.delete(definition['@id']);
+        });
+        idsToRemove.forEach((id) => {
+            const polyline = this.polylines.get(id);
+            this.doRemovePolyline(polyline);
+            this.polylines.delete(id);
         });
-        this.polylinesValue.forEach((polyline) => {
-            if (!this.polylines.has(polyline['@id'])) {
-                this.createPolyline(polyline);
+        this.polylinesValue.forEach((definition) => {
+            if (!this.polylines.has(definition['@id'])) {
+                this.createPolyline(definition);
             }
         });
     }