mobility-toolbox-js 3.0.0-beta.8 → 3.0.0

package/maplibre/layers/RealtimeLayer.js

@@ -1,47 +1,86 @@
-// @ts-nocheck
-import { fromLonLat } from 'ol/proj';
-import { getWidth, getHeight } from 'ol/extent';
-import transformRotate from '@turf/transform-rotate';
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _RealtimeLayer_internalId;
 import { point } from '@turf/helpers';
-import RealtimeLayerMixin from '../../common/mixins/RealtimeLayerMixin';
-import Layer from './Layer';
+import transformRotate from '@turf/transform-rotate';
+import { getHeight, getWidth } from 'ol/extent';
+import { fromLonLat } from 'ol/proj';
+import RealtimeEngine from '../../common/utils/RealtimeEngine';
 import { getSourceCoordinates } from '../utils';
-import toMercatorExtent from '../../common/utils/toMercatorExtent';
+import Layer from './Layer';
 /**
- * Responsible for loading and display data from a geOps realtime API.
+ * A Maplibre layer able to display data from the [geOps Realtime API](https://developer.geops.io/apis/realtime/).
  *
  * @example
- * import { RealtimeLayer } from 'mobility-toolbox-js/Maplibre';
+ * import { Map } from 'maplibre-gl';
+ * import { RealtimeLayer } from 'mobility-toolbox-js/maplibre';
  *
+ * // Define the map
+ * const map = new Map({ ... });
+ *
+ * // Define your layer map
  * const layer = new RealtimeLayer({
  *   apiKey: "yourApiKey"
  *   // url: "wss://api.geops.io/tracker-ws/v1/",
  * });
  *
+ * // Add the layer to your map *
+ * map.on('load', () => {
+ *   map.addLayer(layer);
+ * });
+ *
  *
  * @see <a href="/api/class/src/api/RealtimeAPI%20js~RealtimeAPI%20html">RealtimeAPI</a>
+ * @see <a href="/example/mb-realtime>MapLibre Realtime layer example</a>
  *
- * @implements {maplibregl.CustomLayer}
+ * @implements {maplibregl.CustomLayerInterface}
  * @extends {maplibregl.Evented}
+ * @classproperty {function} filter - Filter out a train. This function must be fast, it is executed for every trajectory on every render frame.
+ * @classproperty {RealtimeMode} mode - The realtime mode to use.
+ * @classproperty {RealtimeMot[]} mots - Filter trains by its mode of transportation. It filters trains on backend side.
+ * @classproperty {RealtimeTenant} tenant - Filter trains by its tenant. It filters trains on backend side.
+ * @classproperty {function} sort - Sort trains. This function must be fast, it is executed on every render frame.
+ * @classproperty {function} style - Function to style the vehicles.
+ s
  * @public
  */
-class RealtimeLayer extends RealtimeLayerMixin(Layer) {
+class RealtimeLayer extends Layer {
     /**
      * Constructor.
      *
      * @param {RealtimeLayerOptions} options
      * @param {string} options.apiKey Access key for [geOps apis](https://developer.geops.io/).
-     * @param {string} [options.url="wss://api.geops.io/tracker-ws/v1/"] The geOps realtime API url.
-     *
+     * @param {FilterFunction} options.filter Filter out a train. This function must be fast, it is executed for every trajectory on every render frame.
+     * @param {getMotsByZoomFunction} options.getMotsByZoom Returns for each zoom level the list of MOTs to display. It filters trains on backend side.
+     * @param {number} [options.minZoomInterpolation=8] Minimal zoom level where to start to interpolate train positions.
+     * @param {RealtimeMode} [options.mode='topographic'] The realtime mode to use.
+     * @param {SortFunction} options.sort Sort trains. This function must be fast, it is executed on every render frame.
+     * @param {RealtimeStyleFunction} options.style Function to style the vehicles.
+     * @param {RealtimeTenant} options.tenant Filter trains by its tenant. It filters trains on backend side.
+     * @param {string} [options.url="wss://api.geops.io/tracker-ws/v1/"] The geOps Realtime API url.
      */
     constructor(options = {}) {
         var _a;
-        const canvas = document.createElement('canvas');
-        super(Object.assign({ canvas }, options));
-        /** @private */
+        const id = (options === null || options === void 0 ? void 0 : options.id) || 'realtime';
+        super(Object.assign(Object.assign({}, options), { id: 'realtime-custom-' + id }));
+        _RealtimeLayer_internalId.set(this, void 0);
+        __classPrivateFieldSet(this, _RealtimeLayer_internalId, id, "f");
+        this.engine = new RealtimeEngine(Object.assign({ getViewState: this.getViewState.bind(this), onRender: this.onRealtimeEngineRender.bind(this) }, options));
+        this.sourceId = __classPrivateFieldGet(this, _RealtimeLayer_internalId, "f");
         this.source = {
-            id: this.id,
-            type: 'canvas',
+            // Set to true if the canvas source is animated. If the canvas is static, animate should be set to false to improve performance.
+            animate: true,
+            // @ts-expect-error bad type definition
+            attribution: (_a = options.attribution) === null || _a === void 0 ? void 0 : _a.join(', '),
             canvas: this.canvas,
             // Set a default coordinates, it will be overrides on next data update
             coordinates: [
@@ -50,108 +89,47 @@ class RealtimeLayer extends RealtimeLayerMixin(Layer) {
                 [2, 2],
                 [0, 0],
             ],
-            // Set to true if the canvas source is animated. If the canvas is static, animate should be set to false to improve performance.
-            animate: true,
-            attribution: (_a = options.attribution) === null || _a === void 0 ? void 0 : _a.join(', '),
             loaded: true,
+            type: 'canvas',
         };
-        /** @private */
         this.layer = {
-            id: `${this.id}-raster`,
-            type: 'raster',
-            source: this.id,
+            id: __classPrivateFieldGet(this, _RealtimeLayer_internalId, "f"),
             layout: {
                 visibility: 'visible',
             },
             paint: {
-                'raster-opacity': 1,
                 'raster-fade-duration': 0,
+                'raster-opacity': 1,
                 'raster-resampling': 'nearest', // important otherwise it looks blurry
             },
+            source: this.sourceId,
+            type: 'raster',
         };
-        /** @private */
         this.onLoad = this.onLoad.bind(this);
-        /** @private */
         this.onMove = this.onMove.bind(this);
-        /** @private */
         this.onMoveEnd = this.onMoveEnd.bind(this);
-        /** @private */
         this.onZoomEnd = this.onZoomEnd.bind(this);
     }
     /**
-     * Add sources, layers and listeners to the map.
-     */
-    onAdd(map, gl) {
-        super.onAdd(map, gl);
-        if (map.isStyleLoaded()) {
-            this.onLoad();
-        }
-        map.on('load', this.onLoad);
-    }
-    /**
-     * Remove source, layers and listeners from the map.
-     */
-    onRemove(map, gl) {
-        map.off('load', this.onLoad);
-        if (map.getLayer(this.layer.id)) {
-            map.removeLayer(this.layer.id);
-        }
-        if (map.getSource(this.id)) {
-            map.removeSource(this.id);
-        }
-        super.onRemove(map, gl);
-    }
-    onLoad() {
-        if (!this.map.getSource(this.id)) {
-            this.map.addSource(this.id, this.source);
-        }
-        if (!this.map.getLayer(this.layer.id)) {
-            this.map.addLayer(this.layer, this.id);
-        }
-        this.start();
-    }
-    /**
-     * Start updating vehicles position.
-     *
-     * @public
-     */
-    start() {
-        super.start();
-        this.map.on('move', this.onMove);
-        this.map.on('moveend', this.onMoveEnd);
-        this.map.on('zoomend', this.onZoomEnd);
-    }
-    /**
-     * Stop updating vehicles position.
-     *
-     * @public
-     */
-    stop() {
-        var _a, _b, _c;
-        super.stop();
-        (_a = this.map) === null || _a === void 0 ? void 0 : _a.off('move', this.onMove);
-        (_b = this.map) === null || _b === void 0 ? void 0 : _b.off('moveend', this.onMoveEnd);
-        (_c = this.map) === null || _c === void 0 ? void 0 : _c.off('zoomend', this.onZoomEnd);
-    }
-    /**
-     * Render the trajectories using current map's size, resolution and rotation.
-     * @param {boolean} noInterpolate if true, renders the vehicles without interpolating theirs positions.
+     * Return the current view state. Used by the RealtimeEngine.
      * @private
      */
-    renderTrajectories(noInterpolate = false) {
+    getViewState() {
         if (!this.map) {
-            return;
+            return {};
         }
         if (!this.pixelRatio) {
             this.pixelRatio = 1;
         }
-        const { width, height } = this.map.getCanvas();
+        const { height, width } = this.map.getCanvas();
         const center = this.map.getCenter();
         // We use turf here to have good transform.
+        // @ts-expect-error bad type definition
         const leftBottom = this.map.unproject({
             x: 0,
             y: height / this.pixelRatio,
         }); // southWest
+        // @ts-expect-error bad type definition
         const rightTop = this.map.unproject({
             x: width / this.pixelRatio,
             y: 0,
@@ -167,60 +145,118 @@ class RealtimeLayer extends RealtimeLayerMixin(Layer) {
         const yResolution = getHeight(bounds) / (height / this.pixelRatio);
         const res = Math.max(xResolution, yResolution);
         // Coordinate of trajectories are in mercator so we have to pass the proper resolution and center in mercator.
-        const viewState = {
-            size: [width / this.pixelRatio, height / this.pixelRatio],
+        return {
             center: fromLonLat([center.lng, center.lat]),
             extent: bounds,
+            pixelRatio: this.pixelRatio,
             resolution: res,
-            zoom: this.map.getZoom() - 1,
             rotation: -(this.map.getBearing() * Math.PI) / 180,
-            pixelRatio: this.pixelRatio,
+            size: [width / this.pixelRatio, height / this.pixelRatio],
+            visible: true,
+            zoom: this.map.getZoom() - 1,
         };
-        super.renderTrajectories(viewState, noInterpolate);
     }
     /**
-     * Return the delay in ms before the next rendering.
+     * Add sources, layers and listeners to the map.
      */
-    getRefreshTimeInMs() {
-        return super.getRefreshTimeInMs(this.map.getZoom());
+    onAdd(map, gl) {
+        super.onAdd(map, gl);
+        this.engine.attachToMap();
+        if (map.isStyleLoaded()) {
+            this.onLoad();
+        }
+        map.on('load', this.onLoad);
+    }
+    onLoad() {
+        var _a, _b, _c, _d;
+        if (!((_a = this.map) === null || _a === void 0 ? void 0 : _a.getSource(this.sourceId))) {
+            (_b = this.map) === null || _b === void 0 ? void 0 : _b.addSource(this.sourceId, this.source);
+        }
+        if (!((_c = this.map) === null || _c === void 0 ? void 0 : _c.getLayer(this.layer.id))) {
+            (_d = this.map) === null || _d === void 0 ? void 0 : _d.addLayer(this.layer, this.id);
+        }
+        this.start();
     }
     /**
-     * Remove the trajectory form the list if necessary.
+     * Callback on 'move' event.
      */
-    purgeTrajectory(trajectory, extent, zoom) {
-        return super.purgeTrajectory(trajectory, extent || toMercatorExtent(this.map.getBounds()), zoom || Math.floor(this.map.getZoom() - 1));
+    onMove() {
+        this.engine.renderTrajectories();
     }
     /**
-     * Send the current bbox to the websocket
+     * Callback on 'moveend' event.
      */
-    setBbox(extent, zoom) {
-        super.setBbox(extent || toMercatorExtent(this.map.getBounds()), zoom || this.map.getZoom() - 1);
+    onMoveEnd() {
+        this.engine.renderTrajectories();
+        if (this.engine.isUpdateBboxOnMoveEnd) {
+            this.engine.setBbox();
+        }
     }
-    renderTrajectoriesInternal(viewState, noInterpolate = false) {
-        const render = super.renderTrajectoriesInternal(viewState, noInterpolate);
-        if (render && this.map.style) {
+    /**
+     * Callback when the RealtimeEngine has rendered successfully.
+     */
+    onRealtimeEngineRender() {
+        var _a;
+        if ((_a = this.map) === null || _a === void 0 ? void 0 : _a.style) {
             const extent = getSourceCoordinates(this.map, this.pixelRatio);
-            const source = this.map.getSource(this.id);
+            const source = this.map.getSource(this.sourceId);
             if (source) {
+                // @ts-expect-error bad type definition
                 source.setCoordinates(extent);
             }
         }
-        return render;
     }
     /**
-     * Callback on 'move' event.
+     * Remove source, layers and listeners from the map.
      */
-    onMove() {
-        this.renderTrajectories();
+    onRemove(map, gl) {
+        this.engine.detachFromMap();
+        this.stop();
+        map.off('load', this.onLoad);
+        if (map.getLayer(this.layer.id)) {
+            map.removeLayer(this.layer.id);
+        }
+        if (map.getSource(this.sourceId)) {
+            map.removeSource(this.sourceId);
+        }
+        super.onRemove(map, gl);
+    }
+    onZoomEnd() {
+        this.engine.onZoomEnd();
     }
     /**
-     * Callback on 'moveend' event.
+     * Start updating vehicles position.
+     *
+     * @public
      */
-    onMoveEnd() {
-        this.renderTrajectories();
-        if (this.isUpdateBboxOnMoveEnd) {
-            this.setBbox();
-        }
+    start() {
+        var _a, _b, _c;
+        this.engine.start();
+        (_a = this.map) === null || _a === void 0 ? void 0 : _a.on('move', this.onMove);
+        (_b = this.map) === null || _b === void 0 ? void 0 : _b.on('moveend', this.onMoveEnd);
+        (_c = this.map) === null || _c === void 0 ? void 0 : _c.on('zoomend', this.onZoomEnd);
+    }
+    /**
+     * Stop updating vehicles position.
+     *
+     * @public
+     */
+    stop() {
+        var _a, _b, _c;
+        this.engine.stop();
+        (_a = this.map) === null || _a === void 0 ? void 0 : _a.off('move', this.onMove);
+        (_b = this.map) === null || _b === void 0 ? void 0 : _b.off('moveend', this.onMoveEnd);
+        (_c = this.map) === null || _c === void 0 ? void 0 : _c.off('zoomend', this.onZoomEnd);
+    }
+    get canvas() {
+        return this.engine.canvas;
+    }
+    get pixelRatio() {
+        return this.engine.pixelRatio || 1;
+    }
+    set pixelRatio(pixelRatio) {
+        this.engine.pixelRatio = pixelRatio || 1;
     }
 }
+_RealtimeLayer_internalId = new WeakMap();
 export default RealtimeLayer;

package/maplibre/layers/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Layer } from "./Layer";
+export { default as RealtimeLayer } from "./RealtimeLayer";

package/maplibre/utils/getMercatorResolution.d.ts

@@ -0,0 +1,7 @@
+import { AnyMapGlMap } from '../../types';
+/**
+ * Get the current resolution of a Maplibre map.
+ * @param {maplibregl.Map} map A map object.
+ */
+declare const getMercatorResolution: (map: AnyMapGlMap) => number;
+export default getMercatorResolution;

package/maplibre/utils/getSourceCoordinates.d.ts

@@ -0,0 +1,8 @@
+import { AnyMapGlMap } from '../../types';
+/**
+ * Get the canvas source coordinates of the current map's extent.
+ * @param {maplibregl.Map} map A map object.
+ * @param {number} [pixelRatio=1] The pixel ratio.
+ */
+export declare const getSourceCoordinates: (map: AnyMapGlMap, pixelRatio?: number) => number[][];
+export default getSourceCoordinates;

package/maplibre/utils/getSourceCoordinates.js

@@ -1,20 +1,21 @@
 /**
  * Get the canvas source coordinates of the current map's extent.
  * @param {maplibregl.Map} map A map object.
+ * @param {number} [pixelRatio=1] The pixel ratio.
  */
 export const getSourceCoordinates = (map, pixelRatio = 1) => {
     // Requesting getBounds is not enough when we rotate the map, so we request manually each corner.
-    const { width, height } = map.getCanvas();
-    // @ts-ignore
+    const { height, width } = map.getCanvas();
+    // @ts-expect-error - to fix
     const leftTop = map.unproject({ x: 0, y: 0 });
-    // @ts-ignore
+    // @ts-expect-error - to fix
     const leftBottom = map.unproject({ x: 0, y: height / pixelRatio }); // southWest
-    // @ts-ignore
+    // @ts-expect-error - to fix
     const rightBottom = map.unproject({
         x: width / pixelRatio,
         y: height / pixelRatio,
     });
-    // @ts-ignore
+    // @ts-expect-error - to fix
     const rightTop = map.unproject({ x: width / pixelRatio, y: 0 }); // north east
     return [
         [leftTop.lng, leftTop.lat],

package/maplibre/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { default as getSourceCoordinates } from "./getSourceCoordinates";
+export { default as getMercatorResolution } from "./getMercatorResolution";