map: type the map.updateLayer event

Use the new `onEvent` and `emitEvent` methods of the EventManager to type the calls to `map.updateLayer`. It receives an argument with 2 fields: `layerName` and `data`, which are respectively the layer to update and the geojson feature collection for the layer (or function to retrieve it).
chairemobilite · Dec 20, 2023 · 4c87641 · 4c87641
1 parent c4573f6
commit 4c87641
Show file tree

Hide file tree

Showing 19 changed files with 226 additions and 126 deletions.
diff --git a/packages/chaire-lib-frontend/src/services/map/MapLayerManager.ts b/packages/chaire-lib-frontend/src/services/map/MapLayerManager.ts
@@ -205,7 +205,10 @@ class MapboxLayerManager {
         this._map?.addLayer(this._layersByName[layerName].layer, this.getNextLayerName(layerName));
     }
 
-    updateLayer(layerName, geojson) {
+    updateLayer(
+        layerName: string,
+        geojson: GeoJSON.FeatureCollection | ((original: GeoJSON.FeatureCollection) => GeoJSON.FeatureCollection)
+    ) {
         const newGeojson =
             typeof geojson === 'function'
                 ? geojson(this._layersByName[layerName].source.data)

diff --git a/packages/chaire-lib-frontend/src/services/map/events/GlobalMapEvents.ts b/packages/chaire-lib-frontend/src/services/map/events/GlobalMapEvents.ts
@@ -13,6 +13,8 @@ import Preferences from 'chaire-lib-common/lib/config/Preferences';
 import { MapEventHandlerDescription } from '../IMapEventHandler';
 import { getLinesInView, offsetOverlappingLines } from 'chaire-lib-common/lib/services/geodata/ManageOverlappingLines';
 import { getNodesInView, manageRelocatingNodes } from 'chaire-lib-common/lib/services/geodata/RelocateNodes';
+import { EventManager } from 'chaire-lib-common/lib/services/events/EventManager';
+import { MapUpdateLayerEventType } from './MapEventsCallbacks';
 
 // TODO: Make zoomLimit modifiable by user
 const zoomLimit = 14; //Zoom levels smaller than this will not apply line separation
@@ -118,7 +120,10 @@ const applyAestheticChanges = async (boundsGL: MapboxGL.LngLatBounds, zoom: numb
         return;
     }
 
-    serviceLocator.eventManager.emit('map.updateLayer', 'transitPaths', layer);
+    (serviceLocator.eventManager as EventManager).emitEvent<MapUpdateLayerEventType>('map.updateLayer', {
+        layerName: 'transitPaths',
+        data: layer
+    });
 
     serviceLocator.eventManager.emit('map.updateLayers', {
         transitNodes: transitNodes

diff --git a/packages/chaire-lib-frontend/src/services/map/events/MapEventsCallbacks.ts b/packages/chaire-lib-frontend/src/services/map/events/MapEventsCallbacks.ts
@@ -0,0 +1,14 @@
+/*
+ * Copyright 2023, Polytechnique Montreal and contributors
+ *
+ * This file is licensed under the MIT License.
+ * License text available at https://opensource.org/licenses/MIT
+ */
+
+export type MapUpdateLayerEventType = {
+    name: 'map.updateLayer';
+    arguments: {
+        layerName: string;
+        data: GeoJSON.FeatureCollection | ((original: GeoJSON.FeatureCollection) => GeoJSON.FeatureCollection);
+    };
+};
diff --git a/packages/transition-frontend/src/components/forms/accessibilityMap/AccessibilityMapForm.tsx b/packages/transition-frontend/src/components/forms/accessibilityMap/AccessibilityMapForm.tsx
@@ -44,6 +44,8 @@ import AccessibilityMapStatsComponent from './AccessibilityMapStatsComponent';
 import TimeOfTripComponent from '../transitRouting/widgets/TimeOfTripComponent';
 import TransitRoutingBaseComponent from '../transitRouting/widgets/TransitRoutingBaseComponent';
 import AccessibilityMapBatchForm from './AccessibilityMapBatchForm';
+import { EventManager } from 'chaire-lib-common/lib/services/events/EventManager';
+import { MapUpdateLayerEventType } from 'chaire-lib-frontend/lib/services/map/events/MapEventsCallbacks';
 
 export interface AccessibilityMapFormProps extends WithTranslation {
     addEventListeners?: () => void;
@@ -89,11 +91,10 @@ class AccessibilityMapForm extends ChangeEventsForm<AccessibilityMapFormProps, T
         this.onScenarioCollectionUpdate = this.onScenarioCollectionUpdate.bind(this);
 
         if (routingEngine.hasLocation()) {
-            serviceLocator.eventManager.emit(
-                'map.updateLayer',
-                'accessibilityMapPoints',
-                routingEngine.locationToGeojson()
-            );
+            (serviceLocator.eventManager as EventManager).emitEvent<MapUpdateLayerEventType>('map.updateLayer', {
+                layerName: 'accessibilityMapPoints',
+                data: routingEngine.locationToGeojson()
+            });
         }
     }
 
@@ -108,7 +109,10 @@ class AccessibilityMapForm extends ChangeEventsForm<AccessibilityMapFormProps, T
         routing.setLocation(coordinates);
         //}
 
-        serviceLocator.eventManager.emit('map.updateLayer', 'accessibilityMapPoints', routing.locationToGeojson());
+        (serviceLocator.eventManager as EventManager).emitEvent<MapUpdateLayerEventType>('map.updateLayer', {
+            layerName: 'accessibilityMapPoints',
+            data: routing.locationToGeojson()
+        });
 
         this.removePolygons();
     }
@@ -140,12 +144,14 @@ class AccessibilityMapForm extends ChangeEventsForm<AccessibilityMapFormProps, T
     }
 
     removePolygons() {
-        serviceLocator.eventManager.emit('map.updateLayer', 'accessibilityMapPolygons', turfFeatureCollection([]));
-        serviceLocator.eventManager.emit(
-            'map.updateLayer',
-            'accessibilityMapPolygonStrokes',
-            turfFeatureCollection([])
-        );
+        (serviceLocator.eventManager as EventManager).emitEvent<MapUpdateLayerEventType>('map.updateLayer', {
+            layerName: 'accessibilityMapPolygons',
+            data: turfFeatureCollection([])
+        });
+        (serviceLocator.eventManager as EventManager).emitEvent<MapUpdateLayerEventType>('map.updateLayer', {
+            layerName: 'accessibilityMapPolygonStrokes',
+            data: turfFeatureCollection([])
+        });
         this.setState({
             currentResult: undefined,
             loading: false
@@ -157,7 +163,10 @@ class AccessibilityMapForm extends ChangeEventsForm<AccessibilityMapFormProps, T
         if (routing.hasLocation()) {
             routing.setLocation(coordinates, false);
             // only update layer for better performance:
-            serviceLocator.eventManager.emit('map.updateLayer', 'accessibilityMapPoints', routing.locationToGeojson());
+            (serviceLocator.eventManager as EventManager).emitEvent<MapUpdateLayerEventType>('map.updateLayer', {
+                layerName: 'accessibilityMapPoints',
+                data: routing.locationToGeojson()
+            });
             this.removePolygons();
             //this.calculateRouting();
         }
@@ -167,7 +176,10 @@ class AccessibilityMapForm extends ChangeEventsForm<AccessibilityMapFormProps, T
         const routing = this.state.object;
         // only both layer and routing engine object:
         routing.setLocation(coordinates);
-        serviceLocator.eventManager.emit('map.updateLayer', 'accessibilityMapPoints', routing.locationToGeojson());
+        (serviceLocator.eventManager as EventManager).emitEvent<MapUpdateLayerEventType>('map.updateLayer', {
+            layerName: 'accessibilityMapPoints',
+            data: routing.locationToGeojson()
+        });
         this.removePolygons();
         //this.calculateRouting();
     }
@@ -177,8 +189,14 @@ class AccessibilityMapForm extends ChangeEventsForm<AccessibilityMapFormProps, T
 
         console.log('polygons calculated');
 
-        serviceLocator.eventManager.emit('map.updateLayer', 'accessibilityMapPolygons', polygons);
-        serviceLocator.eventManager.emit('map.updateLayer', 'accessibilityMapPolygonStrokes', strokes);
+        (serviceLocator.eventManager as EventManager).emitEvent<MapUpdateLayerEventType>('map.updateLayer', {
+            layerName: 'accessibilityMapPolygons',
+            data: polygons
+        });
+        (serviceLocator.eventManager as EventManager).emitEvent<MapUpdateLayerEventType>('map.updateLayer', {
+            layerName: 'accessibilityMapPolygonStrokes',
+            data: strokes
+        });
 
         this.setState({
             geojsonDownloadUrl: DownloadsUtils.generateJsonDownloadUrl(polygons),

diff --git a/packages/transition-frontend/src/components/forms/agency/TransitAgencyButton.tsx b/packages/transition-frontend/src/components/forms/agency/TransitAgencyButton.tsx
@@ -17,6 +17,8 @@ import Button from '../../parts/Button';
 import ButtonCell from '../../parts/ButtonCell';
 import ButtonList from '../../parts/ButtonList';
 import TransitLineButton from '../line/TransitLineButton';
+import { EventManager } from 'chaire-lib-common/lib/services/events/EventManager';
+import { MapUpdateLayerEventType } from 'chaire-lib-frontend/lib/services/map/events/MapEventsCallbacks';
 
 interface AgencyButtonProps extends WithTranslation {
     agency: Agency;
@@ -62,11 +64,10 @@ const TransitAgencyButton: React.FunctionComponent<AgencyButtonProps> = (props:
                 // reload paths
                 await serviceLocator.collectionManager.get('paths').loadFromServer(serviceLocator.socketEventManager);
                 serviceLocator.collectionManager.refresh('paths');
-                serviceLocator.eventManager.emit(
-                    'map.updateLayer',
-                    'transitPaths',
-                    serviceLocator.collectionManager.get('paths').toGeojson()
-                );
+                (serviceLocator.eventManager as EventManager).emitEvent<MapUpdateLayerEventType>('map.updateLayer', {
+                    layerName: 'transitPaths',
+                    data: serviceLocator.collectionManager.get('paths').toGeojson()
+                });
                 await serviceLocator.collectionManager.get('lines').loadFromServer(serviceLocator.socketEventManager);
                 serviceLocator.collectionManager.refresh('lines');
             }
@@ -95,11 +96,10 @@ const TransitAgencyButton: React.FunctionComponent<AgencyButtonProps> = (props:
         serviceLocator.collectionManager.refresh('paths');
         serviceLocator.collectionManager.refresh('lines');
         serviceLocator.collectionManager.refresh('agencies');
-        serviceLocator.eventManager.emit(
-            'map.updateLayer',
-            'transitPaths',
-            serviceLocator.collectionManager.get('paths').toGeojson()
-        );
+        (serviceLocator.eventManager as EventManager).emitEvent<MapUpdateLayerEventType>('map.updateLayer', {
+            layerName: 'transitPaths',
+            data: serviceLocator.collectionManager.get('paths').toGeojson()
+        });
         serviceLocator.eventManager.emit('progress', { name: 'SavingAgency', progress: 1.0 });
     };
 

diff --git a/packages/transition-frontend/src/components/forms/agency/TransitAgencyEdit.tsx b/packages/transition-frontend/src/components/forms/agency/TransitAgencyEdit.tsx
@@ -23,6 +23,8 @@ import { SaveableObjectForm, SaveableObjectState } from 'chaire-lib-frontend/lib
 import SelectedObjectButtons from 'chaire-lib-frontend/lib/components/pageParts/SelectedObjectButtons';
 import CollectionDownloadButtons from 'chaire-lib-frontend/lib/components/pageParts/CollectionDownloadButtons';
 import Agency from 'transition-common/lib/services/agency/Agency';
+import { EventManager } from 'chaire-lib-common/lib/services/events/EventManager';
+import { MapUpdateLayerEventType } from 'chaire-lib-frontend/lib/services/map/events/MapEventsCallbacks';
 
 const timezoneZoneChoices: { label: string; value: string }[] = [];
 for (let i = 0, countI = timezones.length; i < countI; i++) {
@@ -77,11 +79,10 @@ class TransitAgencyEdit extends SaveableObjectForm<Agency, AgencyFormProps, Agen
             try {
                 await serviceLocator.collectionManager.get('paths').loadFromServer(serviceLocator.socketEventManager);
                 serviceLocator.collectionManager.refresh('paths');
-                serviceLocator.eventManager.emit(
-                    'map.updateLayer',
-                    'transitPaths',
-                    serviceLocator.collectionManager.get('paths').toGeojson()
-                );
+                (serviceLocator.eventManager as EventManager).emitEvent<MapUpdateLayerEventType>('map.updateLayer', {
+                    layerName: 'transitPaths',
+                    data: serviceLocator.collectionManager.get('paths').toGeojson()
+                });
                 serviceLocator.collectionManager
                     .get('lines')
                     .loadFromServer(serviceLocator.socketEventManager, serviceLocator.collectionManager);

diff --git a/packages/transition-frontend/src/components/forms/line/TransitLineButton.tsx b/packages/transition-frontend/src/components/forms/line/TransitLineButton.tsx
@@ -12,6 +12,8 @@ import Line from 'transition-common/lib/services/line/Line';
 import Button from '../../parts/Button';
 import ButtonCell from '../../parts/ButtonCell';
 import { duplicateLine } from 'transition-common/lib/services/line/LineDuplicator';
+import { EventManager } from 'chaire-lib-common/lib/services/events/EventManager';
+import { MapUpdateLayerEventType } from 'chaire-lib-frontend/lib/services/map/events/MapEventsCallbacks';
 
 interface LineButtonProps extends WithTranslation {
     line: Line;
@@ -51,11 +53,10 @@ const TransitLineButton: React.FunctionComponent<LineButtonProps> = (props: Line
                 // reload paths
                 await serviceLocator.collectionManager.get('paths').loadFromServer(serviceLocator.socketEventManager);
                 serviceLocator.collectionManager.refresh('paths');
-                serviceLocator.eventManager.emit(
-                    'map.updateLayer',
-                    'transitPaths',
-                    serviceLocator.collectionManager.get('paths').toGeojson()
-                );
+                (serviceLocator.eventManager as EventManager).emitEvent<MapUpdateLayerEventType>('map.updateLayer', {
+                    layerName: 'transitPaths',
+                    data: serviceLocator.collectionManager.get('paths').toGeojson()
+                });
             }
         }
         serviceLocator.eventManager.emit('progress', { name: 'DeletingLine', progress: 1.0 });
@@ -79,11 +80,10 @@ const TransitLineButton: React.FunctionComponent<LineButtonProps> = (props: Line
         serviceLocator.collectionManager.refresh('paths');
         serviceLocator.collectionManager.refresh('lines');
         serviceLocator.collectionManager.refresh('services');
-        serviceLocator.eventManager.emit(
-            'map.updateLayer',
-            'transitPaths',
-            serviceLocator.collectionManager.get('paths').toGeojson()
-        );
+        (serviceLocator.eventManager as EventManager).emitEvent<MapUpdateLayerEventType>('map.updateLayer', {
+            layerName: 'transitPaths',
+            data: serviceLocator.collectionManager.get('paths').toGeojson()
+        });
         serviceLocator.eventManager.emit('progress', { name: 'SavingLine', progress: 1.0 });
     };
 

diff --git a/packages/transition-frontend/src/components/forms/line/TransitLineEdit.tsx b/packages/transition-frontend/src/components/forms/line/TransitLineEdit.tsx
@@ -32,6 +32,8 @@ import SelectedObjectButtons from 'chaire-lib-frontend/lib/components/pageParts/
 import { SaveableObjectForm, SaveableObjectState } from 'chaire-lib-frontend/lib/components/forms/SaveableObjectForm';
 import AgencyCollection from 'transition-common/lib/services/agency/AgencyCollection';
 import Preferences from 'chaire-lib-common/lib/config/Preferences';
+import { EventManager } from 'chaire-lib-common/lib/services/events/EventManager';
+import { MapUpdateLayerEventType } from 'chaire-lib-frontend/lib/services/map/events/MapEventsCallbacks';
 
 interface LineFormProps extends WithTranslation {
     line: Line;
@@ -87,11 +89,10 @@ class TransitLineEdit extends SaveableObjectForm<Line, LineFormProps, LineFormSt
                 serviceLocator.selectedObjectsManager.deselect('line');
                 await serviceLocator.collectionManager.get('paths').loadFromServer(serviceLocator.socketEventManager);
                 serviceLocator.collectionManager.refresh('paths');
-                serviceLocator.eventManager.emit(
-                    'map.updateLayer',
-                    'transitPaths',
-                    serviceLocator.collectionManager.get('paths').toGeojson()
-                );
+                (serviceLocator.eventManager as EventManager).emitEvent<MapUpdateLayerEventType>('map.updateLayer', {
+                    layerName: 'transitPaths',
+                    data: serviceLocator.collectionManager.get('paths').toGeojson()
+                });
                 serviceLocator.collectionManager.refresh('lines');
                 serviceLocator.eventManager.emit('progress', { name: 'DeletingLine', progress: 1.0 });
             } else {
@@ -140,11 +141,10 @@ class TransitLineEdit extends SaveableObjectForm<Line, LineFormProps, LineFormSt
             serviceLocator.collectionManager.refresh('lines');
             serviceLocator.collectionManager.refresh('agencies');
             serviceLocator.collectionManager.refresh('paths');
-            serviceLocator.eventManager.emit(
-                'map.updateLayer',
-                'transitPaths',
-                serviceLocator.collectionManager.get('paths').toGeojson()
-            );
+            (serviceLocator.eventManager as EventManager).emitEvent<MapUpdateLayerEventType>('map.updateLayer', {
+                layerName: 'transitPaths',
+                data: serviceLocator.collectionManager.get('paths').toGeojson()
+            });
             serviceLocator.eventManager.emit('progress', { name: 'SavingLine', progress: 1.0 });
             serviceLocator.eventManager.emit('fullSizePanel.hide');
         } catch (error) {

diff --git a/packages/transition-frontend/src/components/forms/node/TransitNodeEdit.tsx b/packages/transition-frontend/src/components/forms/node/TransitNodeEdit.tsx
@@ -32,6 +32,8 @@ import InputStringFormatted from 'chaire-lib-frontend/lib/components/input/Input
 import SelectedObjectButtons from 'chaire-lib-frontend/lib/components/pageParts/SelectedObjectButtons';
 import NodeStatistics from './TransitNodeStatistics';
 import * as Status from 'chaire-lib-common/lib/utils/Status';
+import { EventManager } from 'chaire-lib-common/lib/services/events/EventManager';
+import { MapUpdateLayerEventType } from 'chaire-lib-frontend/lib/services/map/events/MapEventsCallbacks';
 
 interface NodeFormProps extends WithTranslation {
     node: Node;
@@ -174,9 +176,12 @@ class TransitNodeEdit extends SaveableObjectForm<Node, NodeFormProps, NodeFormSt
     }
 
     onDrag(coordinates) {
-        serviceLocator.eventManager.emit('map.updateLayer', 'transitNodesSelected', (oldGeojson) => {
-            oldGeojson.features[0].geometry.coordinates = coordinates;
-            return oldGeojson;
+        (serviceLocator.eventManager as EventManager).emitEvent<MapUpdateLayerEventType>('map.updateLayer', {
+            layerName: 'transitNodesSelected',
+            data: (oldGeojson: GeoJSON.FeatureCollection) => {
+                (oldGeojson.features[0].geometry as GeoJSON.Point).coordinates = coordinates;
+                return oldGeojson;
+            }
         });
     }
 

diff --git a/packages/transition-frontend/src/components/forms/node/TransitNodeImportForm.tsx b/packages/transition-frontend/src/components/forms/node/TransitNodeImportForm.tsx
@@ -24,11 +24,10 @@ const NodesImportForm: React.FunctionComponent<NodeImportFormProps & WithTransla
             .get('nodes')
             .loadFromServer(serviceLocator.socketEventManager, serviceLocator.collectionManager);
         serviceLocator.collectionManager.refresh('nodes');
-        serviceLocator.eventManager.emit(
-            'map.updateLayer',
-            'transitNodes',
-            serviceLocator.collectionManager.get('nodes').toGeojson()
-        );
+        serviceLocator.eventManager.emit('map.updateLayer', {
+            layerName: 'transitNodes',
+            data: serviceLocator.collectionManager.get('nodes').toGeojson()
+        });
         serviceLocator.eventManager.emit('transferableNodes.dirty');
         serviceLocator.eventManager.emit('progress', { name: 'Importing', progress: 1.0 });
         closeImporter();