mobility-toolbox-js 3.0.0-beta.3 → 3.0.0-beta.32

package/common/controls/StopFinderControlCommon.js

@@ -18,7 +18,7 @@ class StopFinderControlCommon {
      * @param {StopsSearchParams} [options.apiParams={ limit: 20 }] Request parameters. See [Stops service documentation](https://developer.geops.io/apis/5dcbd702a256d90001cf1361/).
      */
     constructor(options) {
-        const { apiParams, apiKey, url, placeholder } = options || {};
+        const { apiKey, apiParams, placeholder, url } = options || {};
         this.apiParams = Object.assign({ limit: 20 }, (apiParams || {}));
         this.placeholder = placeholder || 'Search for a stop...';
         const apiOptions = { apiKey };
@@ -30,26 +30,16 @@ class StopFinderControlCommon {
         this.createElement(options);
         this.options = options;
     }
-    render(featureCollection) {
-        const suggestions = (featureCollection === null || featureCollection === void 0 ? void 0 : featureCollection.features) || [];
-        if (!this.suggestionsElt) {
+    /**
+     * Clear the search field and close the control.
+     */
+    clear() {
+        if (!this.suggestionsElt || !this.inputElt || !this.clearElt) {
             return;
         }
-        this.suggestionsElt.style.display = suggestions.length ? 'block' : 'none';
+        this.inputElt.value = '';
         this.suggestionsElt.innerHTML = '';
-        suggestions.forEach((suggestion) => {
-            var _a, _b;
-            const suggElt = document.createElement('div');
-            suggElt.innerHTML = (_a = suggestion === null || suggestion === void 0 ? void 0 : suggestion.properties) === null || _a === void 0 ? void 0 : _a.name;
-            suggElt.onclick = (evt) => {
-                var _a, _b;
-                (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.onSuggestionClick) === null || _b === void 0 ? void 0 : _b.call(_a, suggestion, evt);
-            };
-            Object.assign(suggElt.style, {
-                padding: '5px 12px',
-            });
-            (_b = this.suggestionsElt) === null || _b === void 0 ? void 0 : _b.appendChild(suggElt);
-        });
+        this.clearElt.style.display = 'none';
     }
     createElement({ element }) {
         // Create input element
@@ -61,7 +51,7 @@ class StopFinderControlCommon {
             var _a;
             (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
             this.abortController = new AbortController();
-            // @ts-ignore
+            // @ts-expect-error - Improve ts
             this.search(evt.target.value, this.abortController);
         };
         Object.assign(this.inputElt.style, {
@@ -72,38 +62,48 @@ class StopFinderControlCommon {
         this.suggestionsElt = document.createElement('div');
         Object.assign(this.suggestionsElt.style, {
             backgroundColor: 'white',
-            overflowY: 'auto',
             cursor: 'pointer',
+            overflowY: 'auto',
         });
         element.appendChild(this.suggestionsElt);
         this.clearElt = document.createElement('div');
         Object.assign(this.clearElt.style, {
+            cursor: 'pointer',
             display: 'none',
+            fontSize: '200%',
+            padding: '0 10px',
             position: 'absolute',
             right: '0',
-            padding: '0 10px',
-            fontSize: '200%',
-            cursor: 'pointer',
         });
         this.clearElt.innerHTML = '×';
         this.clearElt.onclick = () => this.clear();
         element.appendChild(this.clearElt);
     }
-    /**
-     * Clear the search field and close the control.
-     */
-    clear() {
-        if (!this.suggestionsElt || !this.inputElt || !this.clearElt) {
+    render(featureCollection) {
+        const suggestions = (featureCollection === null || featureCollection === void 0 ? void 0 : featureCollection.features) || [];
+        if (!this.suggestionsElt) {
             return;
         }
-        this.inputElt.value = '';
+        this.suggestionsElt.style.display = suggestions.length ? 'block' : 'none';
         this.suggestionsElt.innerHTML = '';
-        this.clearElt.style.display = 'none';
+        suggestions.forEach((suggestion) => {
+            var _a, _b;
+            const suggElt = document.createElement('div');
+            suggElt.innerHTML = (_a = suggestion === null || suggestion === void 0 ? void 0 : suggestion.properties) === null || _a === void 0 ? void 0 : _a.name;
+            suggElt.onclick = (evt) => {
+                var _a, _b;
+                (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.onSuggestionClick) === null || _b === void 0 ? void 0 : _b.call(_a, suggestion, evt);
+            };
+            Object.assign(suggElt.style, {
+                padding: '5px 12px',
+            });
+            (_b = this.suggestionsElt) === null || _b === void 0 ? void 0 : _b.appendChild(suggElt);
+        });
     }
     /**
      * Launch a search.
      *
-     * @param {String} query The query to search for.
+     * @param {String} q The query to search for.
      * @param {AbortController} abortController Abort controller used to cancel the request.
      * @return {Promise<Array<GeoJSONFeature>>} An array of GeoJSON features with coordinates in [EPSG:4326](http://epsg.io/4326).
      */

package/common/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./styles";
+export * from "./utils";

package/common/index.js

@@ -1,2 +1,2 @@
-export * from './utils';
 export * from './styles';
+export * from './utils';

package/common/mixins/RealtimeLayerMixin.d.ts

@@ -0,0 +1,267 @@
+import { Coordinate } from 'ol/coordinate';
+import { EventsKey } from 'ol/events';
+import GeoJSON from 'ol/format/GeoJSON';
+import { Options } from 'ol/layer/Layer';
+import { RealtimeAPI } from '../../api';
+import { WebSocketAPIMessageEventData } from '../../api/WebSocketAPI';
+import { AnyCanvas, AnyLayer, AnyLayerable, AnyMap, AnyRealtimeLayer, LayerGetFeatureInfoOptions, LayerGetFeatureInfoResponse, RealtimeGeneralizationLevel, RealtimeMode, RealtimeMot, RealtimeRenderState, RealtimeStyleFunction, RealtimeStyleOptions, RealtimeTenant, RealtimeTrainId, RealtimeTrajectory, ViewState } from '../../types';
+import { FilterFunction, SortFunction } from '../typedefs';
+export type RealtimeLayerMixinOptions = {
+    api?: RealtimeAPI;
+    apiKey?: string;
+    bbox?: (number | string)[];
+    bboxParameters?: Record<string, boolean | boolean[] | number | number[] | string | string[]>;
+    buffer?: number[];
+    canvas?: HTMLCanvasElement;
+    debug?: boolean;
+    filter?: FilterFunction;
+    generalizationLevelByZoom?: RealtimeGeneralizationLevel[];
+    getGeneralizationLevelByZoom?: (zoom: number, generalizationLevelByZoom: RealtimeGeneralizationLevel[]) => RealtimeGeneralizationLevel;
+    getMotsByZoom?: (zoom: number, motsByZoom: RealtimeMot[][]) => RealtimeMot[];
+    getRenderTimeIntervalByZoom?: (zoom: number, renderTimeIntervalByZoom: number[]) => number;
+    hoverVehicleId?: RealtimeTrainId;
+    isUpdateBboxOnMoveEnd?: boolean;
+    live?: boolean;
+    minZoomInterpolation?: number;
+    mode?: RealtimeMode;
+    motsByZoom?: RealtimeMot[][];
+    onStart?: (realtimeLayer: AnyRealtimeLayer) => void;
+    onStop?: (realtimeLayer: AnyRealtimeLayer) => void;
+    pingIntervalMs?: number;
+    pixelRatio?: number;
+    prefix?: string;
+    renderTimeIntervalByZoom?: number[];
+    selectedVehicleId?: RealtimeTrainId;
+    sort?: SortFunction;
+    speed?: number;
+    style?: RealtimeStyleFunction;
+    styleOptions?: RealtimeStyleOptions;
+    tenant?: RealtimeTenant;
+    time?: number;
+    url?: string;
+    useDebounce?: boolean;
+    useRequestAnimationFrame?: boolean;
+    useThrottle?: boolean;
+} & Options;
+/**
+ * RealtimeLayerInterface.
+ * @private
+ */
+export declare class RealtimeLayerInterface {
+    /**
+     * Request the stopSequence and the fullTrajectory informations for a vehicle.
+     *
+     * @param {string} id The vehicle identifier (the  train_id property).
+     * @param {RealtimeMode} mode The mode to request. If not defined, the layer´s mode propetrty will be used.
+     * @return {Promise<{stopSequence: RealtimeStopSequence, fullTrajectory: RealtimeFullTrajectory>} A promise that will be resolved with the trajectory informations.
+     */
+    getTrajectoryInfos(id: string, mode: RealtimeMode): void;
+    /**
+     * Render the trajectories
+     */
+    renderTrajectories(): void;
+    /**
+     * Set the Realtime api's bbox.
+     *
+     * @param {Array<number>} extent  Extent to request, [minX, minY, maxX, maxY].
+     * @param {number} zoom  Zoom level to request. Must be an integer.
+     */
+    setBbox(extent: [number, number, number, number], zoom: number): void;
+    /**
+     * Start the clock.
+     */
+    start(): void;
+    /**
+     * Stop the clock.
+     */
+    stop(): void;
+}
+/**
+ * Mixin for RealtimeLayerInterface.
+ *
+ * @param {Class} Base A class to extend with {RealtimeLayerInterface} functionnalities.
+ * @return {Class}  A class that implements {RealtimeLayerInterface} class and extends Base;
+ * @private
+ */
+declare function RealtimeLayerMixin<T extends AnyLayerable>(Base: T): {
+    new (options: RealtimeLayerMixinOptions): {
+        [x: string]: any;
+        [x: symbol]: any;
+        api: RealtimeAPI;
+        bboxParameters?: Record<string, boolean | boolean[] | number | number[] | string | string[]>;
+        canvas?: AnyCanvas;
+        debounceRenderTrajectories: (viewState: ViewState, noInterpolate?: boolean) => void;
+        debug: boolean;
+        filter?: FilterFunction;
+        format: GeoJSON;
+        generalizationLevel?: RealtimeGeneralizationLevel;
+        generalizationLevelByZoom: RealtimeGeneralizationLevel[];
+        getGeneralizationLevelByZoom: (zoom: number) => RealtimeGeneralizationLevel;
+        getMotsByZoom: (zoom: number) => RealtimeMot[];
+        getRenderTimeIntervalByZoom: (zoom: number) => number;
+        hoverVehicleId?: RealtimeTrainId;
+        isUpdateBboxOnMoveEnd: boolean;
+        live?: boolean;
+        minZoomInterpolation: number;
+        mode: RealtimeMode;
+        mots?: RealtimeMot[];
+        motsByZoom: RealtimeMot[][];
+        onStart?: (realtimeLayer: AnyLayer) => void;
+        onStop?: (realtimeLayer: AnyLayer) => void;
+        pixelRatio?: number;
+        renderState?: RealtimeRenderState;
+        renderTimeIntervalByZoom: number[];
+        requestId?: number;
+        selectedVehicle: RealtimeTrajectory;
+        selectedVehicleId?: RealtimeTrainId;
+        sort?: SortFunction;
+        speed?: number;
+        style?: RealtimeStyleFunction;
+        styleOptions?: RealtimeStyleOptions;
+        tenant: RealtimeTenant;
+        throttleRenderTrajectories: (viewState: ViewState, noInterpolate?: boolean) => void;
+        time?: Date;
+        trajectories?: Record<RealtimeTrainId, RealtimeTrajectory>;
+        updateTimeDelay?: number;
+        updateTimeInterval?: number;
+        useDebounce?: boolean;
+        useRequestAnimationFrame?: boolean;
+        useThrottle?: boolean;
+        visibilityRef: EventsKey;
+        /**
+         * Add a trajectory.
+         * @param {RealtimeTrajectory} trajectory The trajectory to add.
+         * @private
+         */
+        addTrajectory(trajectory: RealtimeTrajectory): void;
+        attachToMap(map: AnyMap): void;
+        /**
+         * Define layer's properties.
+         *
+         * @private
+         */
+        defineProperties(options: RealtimeLayerMixinOptions): void;
+        detachFromMap(): void;
+        /**
+         * Request feature information for a given coordinate.
+         *
+         * @param {ol/coordinate~Coordinate} coordinate Coordinate.
+         * @param {Object} options Options See child classes to see which options are supported.
+         * @param {number} [options.resolution=1] The resolution of the map.
+         * @param {number} [options.nb=Infinity] The max number of vehicles to return.
+         * @return {Promise<FeatureInfo>} Promise with features, layer and coordinate.
+         */
+        getFeatureInfoAtCoordinate(coordinate: Coordinate, options: LayerGetFeatureInfoOptions): Promise<LayerGetFeatureInfoResponse>;
+        /**
+         * Get the duration before the next update depending on zoom level.
+         *
+         * @private
+         * @param {number} zoom
+         */
+        getRefreshTimeInMs(zoom?: number | undefined): number;
+        /**
+         * Request the stopSequence and the fullTrajectory informations for a vehicle.
+         *
+         * @param {string} id The vehicle identifier (the  train_id property).
+         * @return {Promise<{stopSequence: RealtimeStopSequence, fullTrajectory: RealtimeFullTrajectory>} A promise that will be resolved with the trajectory informations.
+         */
+        getTrajectoryInfos(id: RealtimeTrainId): Promise<{
+            fullTrajectory: WebSocketAPIMessageEventData<import("../../types").RealtimeStopSequence[]> | WebSocketAPIMessageEventData<import("../../types").RealtimeFullTrajectory>;
+            stopSequence: WebSocketAPIMessageEventData<import("../../types").RealtimeStopSequence[]> | WebSocketAPIMessageEventData<import("../../types").RealtimeFullTrajectory>;
+        }>;
+        /**
+         * Get vehicle.
+         * @param {function} filterFc A function use to filter results.
+         * @return {Array<Object>} Array of vehicle.
+         */
+        getVehicle(filterFc: FilterFunction): RealtimeTrajectory[];
+        highlightVehicle(id: RealtimeTrainId): void;
+        /**
+         * Callback on websocket's deleted_vehicles channel events.
+         * It removes the trajectory from the list.
+         *
+         * @private
+         * @override
+         */
+        onDeleteTrajectoryMessage(data: WebSocketAPIMessageEventData<RealtimeTrainId>): void;
+        onDocumentVisibilityChange(): void;
+        /**
+         * Callback on websocket's trajectory channel events.
+         * It adds a trajectory to the list.
+         *
+         * @private
+         */
+        onTrajectoryMessage(data: WebSocketAPIMessageEventData<RealtimeTrajectory>): void;
+        /**
+         * On zoomend we adjust the time interval of the update of vehicles positions.
+         *
+         * @param evt Event that triggered the function.
+         * @private
+         */
+        onZoomEnd(): void;
+        /**
+         * Remove all trajectories that are in the past.
+         */
+        purgeOutOfDateTrajectories(): void;
+        /**
+         * Determine if the trajectory is useless and should be removed from the list or not.
+         * By default, this function exclude vehicles:
+         *  - that have their trajectory outside the current extent and
+         *  - that aren't in the MOT list.
+         *
+         * @param {RealtimeTrajectory} trajectory
+         * @param {Array<number>} extent
+         * @param {number} zoom
+         * @return {boolean} if the trajectory must be displayed or not.
+         * @private
+         */
+        purgeTrajectory(trajectory: RealtimeTrajectory, extent: [number, number, number, number], zoom: number): boolean;
+        removeTrajectory(trajectoryOrId: RealtimeTrainId | RealtimeTrajectory): void;
+        /**
+         * Render the trajectories requesting an animation frame and cancelling the previous one.
+         * This function must be overrided by children to provide the correct parameters.
+         *
+         * @param {object} viewState The view state of the map.
+         * @param {number[2]} viewState.center Center coordinate of the map in mercator coordinate.
+         * @param {number[4]} viewState.extent Extent of the map in mercator coordinates.
+         * @param {number[2]} viewState.size Size ([width, height]) of the canvas to render.
+         * @param {number} [viewState.rotation = 0] Rotation of the map to render.
+         * @param {number} viewState.resolution Resolution of the map to render.
+         * @param {boolean} noInterpolate If true trajectories are not interpolated but
+         *   drawn at the last known coordinate. Use this for performance optimization
+         *   during map navigation.
+         * @private
+         */
+        renderTrajectories(viewState: undefined | ViewState, noInterpolate: boolean | undefined): void;
+        /**
+         * Launch renderTrajectories. it avoids duplicating code in renderTrajectories method.
+         *
+         * @param {object} viewState The view state of the map.
+         * @param {number[2]} viewState.center Center coordinate of the map in mercator coordinate.
+         * @param {number[4]} viewState.extent Extent of the map in mercator coordinates.
+         * @param {number[2]} viewState.size Size ([width, height]) of the canvas to render.
+         * @param {number} [viewState.rotation = 0] Rotation of the map to render.
+         * @param {number} viewState.resolution Resolution of the map to render.
+         * @param {boolean} noInterpolate If true trajectories are not interpolated but
+         *   drawn at the last known coordinate. Use this for performance optimization
+         *   during map navigation.
+         * @private
+         */
+        renderTrajectoriesInternal(viewState: ViewState, noInterpolate?: boolean): boolean;
+        selectVehicle(id: RealtimeTrainId): void;
+        setBbox(extent: [number, number, number, number], zoom: number): void;
+        start(): void;
+        /**
+         * Start the clock.
+         * @private
+         */
+        startUpdateTime(): void;
+        stop(): void;
+        /**
+         * Stop the clock.
+         * @private
+         */
+        stopUpdateTime(): void;
+    };
+} & T;
+export default RealtimeLayerMixin;