mobility-toolbox-js 3.0.0-beta.31 → 3.0.0-beta.33

package/maplibre/layers/RealtimeLayer.d.ts

@@ -1,82 +1,8 @@
-import { RealtimeLayerMixinOptions } from '../../common/mixins/RealtimeLayerMixin';
+import { CanvasSourceSpecification, LayerSpecification } from 'maplibre-gl';
+import RealtimeEngine, { RealtimeEngineOptions } from '../../common/utils/RealtimeEngine';
 import Layer, { LayerOptions } from './Layer';
-import type { AnyMapGlMap, ViewState } from '../../types';
-import type { RealtimeTrajectory } from '../../api/typedefs';
-export type RealtimeLayerOptions = LayerOptions & RealtimeLayerMixinOptions;
-declare const RealtimeLayer_base: {
-    new (options: RealtimeLayerMixinOptions): {
-        [x: string]: any;
-        [x: symbol]: any;
-        api: import("..").RealtimeAPI;
-        bboxParameters?: Record<string, boolean | boolean[] | number | number[] | string | string[]>;
-        canvas?: import("../../types").AnyCanvas;
-        debounceRenderTrajectories: (viewState: ViewState, noInterpolate?: boolean) => void;
-        debug: boolean;
-        filter?: import("../../common/typedefs").FilterFunction;
-        format: import("ol/format").GeoJSON;
-        generalizationLevel?: import("../../types").RealtimeGeneralizationLevel;
-        generalizationLevelByZoom: import("../../types").RealtimeGeneralizationLevel[];
-        getGeneralizationLevelByZoom: (zoom: number) => import("../../types").RealtimeGeneralizationLevel;
-        getMotsByZoom: (zoom: number) => import("../../types").RealtimeMot[];
-        getRenderTimeIntervalByZoom: (zoom: number) => number;
-        hoverVehicleId?: import("../../types").RealtimeTrainId;
-        isUpdateBboxOnMoveEnd: boolean;
-        live?: boolean;
-        minZoomInterpolation: number;
-        mode: import("../../types").RealtimeMode;
-        mots?: import("../../types").RealtimeMot[];
-        motsByZoom: import("../../types").RealtimeMot[][];
-        onStart?: ((realtimeLayer: import("../../types").AnyLayer) => void) | undefined;
-        onStop?: ((realtimeLayer: import("../../types").AnyLayer) => void) | undefined;
-        pixelRatio?: number;
-        renderState?: import("../../types").RealtimeRenderState;
-        renderTimeIntervalByZoom: number[];
-        requestId?: number;
-        selectedVehicle: import("../../types").RealtimeTrajectory;
-        selectedVehicleId?: import("../../types").RealtimeTrainId;
-        sort?: import("../../common/typedefs").SortFunction;
-        speed?: number;
-        style?: import("../../types").RealtimeStyleFunction;
-        styleOptions?: import("../../types").RealtimeStyleOptions;
-        tenant: import("../../types").RealtimeTenant;
-        throttleRenderTrajectories: (viewState: ViewState, noInterpolate?: boolean) => void;
-        time?: Date;
-        trajectories?: Record<import("../../types").RealtimeTrainId, import("../../types").RealtimeTrajectory>;
-        updateTimeDelay?: number;
-        updateTimeInterval?: number;
-        useDebounce?: boolean;
-        useRequestAnimationFrame?: boolean;
-        useThrottle?: boolean;
-        visibilityRef: import("ol/events").EventsKey;
-        addTrajectory(trajectory: import("../../types").RealtimeTrajectory): void;
-        attachToMap(map: import("../../types").AnyMap): void;
-        defineProperties(options: RealtimeLayerMixinOptions): void;
-        detachFromMap(): void;
-        getFeatureInfoAtCoordinate(coordinate: import("ol/coordinate").Coordinate, options: import("../../types").LayerGetFeatureInfoOptions): Promise<import("../../types").LayerGetFeatureInfoResponse>;
-        getRefreshTimeInMs(zoom?: number | undefined): number;
-        getTrajectoryInfos(id: import("../../types").RealtimeTrainId): Promise<{
-            fullTrajectory: import("../../api/WebSocketAPI").WebSocketAPIMessageEventData<import("../../types").RealtimeStopSequence[]> | import("../../api/WebSocketAPI").WebSocketAPIMessageEventData<import("../../types").RealtimeFullTrajectory>;
-            stopSequence: import("../../api/WebSocketAPI").WebSocketAPIMessageEventData<import("../../types").RealtimeStopSequence[]> | import("../../api/WebSocketAPI").WebSocketAPIMessageEventData<import("../../types").RealtimeFullTrajectory>;
-        }>;
-        getVehicle(filterFc: import("../../common/typedefs").FilterFunction): import("../../types").RealtimeTrajectory[];
-        highlightVehicle(id: import("../../types").RealtimeTrainId): void;
-        onDeleteTrajectoryMessage(data: import("../../api/WebSocketAPI").WebSocketAPIMessageEventData<import("../../types").RealtimeTrainId>): void;
-        onDocumentVisibilityChange(): void;
-        onTrajectoryMessage(data: import("../../api/WebSocketAPI").WebSocketAPIMessageEventData<import("../../types").RealtimeTrajectory>): void;
-        onZoomEnd(): void;
-        purgeOutOfDateTrajectories(): void;
-        purgeTrajectory(trajectory: import("../../types").RealtimeTrajectory, extent: [number, number, number, number], zoom: number): boolean;
-        removeTrajectory(trajectoryOrId: import("../../types").RealtimeTrainId | import("../../types").RealtimeTrajectory): void;
-        renderTrajectories(viewState: undefined | ViewState, noInterpolate: boolean | undefined): void;
-        renderTrajectoriesInternal(viewState: ViewState, noInterpolate?: boolean): boolean;
-        selectVehicle(id: import("../../types").RealtimeTrainId): void;
-        setBbox(extent: [number, number, number, number], zoom: number): void;
-        start(): void;
-        startUpdateTime(): void;
-        stop(): void;
-        stopUpdateTime(): void;
-    };
-} & typeof Layer;
+import type { AnyCanvas, AnyMapGlMap } from '../../types';
+export type RealtimeLayerOptions = LayerOptions & RealtimeEngineOptions;
 /**
  * A Maplibre layer able to display data from the [geOps Realtime API](https://developer.geops.io/apis/realtime/).
  *
@@ -113,7 +39,10 @@ declare const RealtimeLayer_base: {
  s
  * @public
  */
-declare class RealtimeLayer extends RealtimeLayer_base {
+declare class RealtimeLayer extends Layer {
+    engine: RealtimeEngine;
+    layer: LayerSpecification;
+    source: CanvasSourceSpecification;
     /**
      * Constructor.
      *
@@ -129,15 +58,51 @@ declare class RealtimeLayer extends RealtimeLayer_base {
      * @param {string} [options.url="wss://api.geops.io/tracker-ws/v1/"] The geOps Realtime API url.
      */
     constructor(options?: {});
+    /**
+     * Return the current view state. Used by the RealtimeEngine.
+     * @private
+     */
+    getViewState(): {
+        center?: undefined;
+        extent?: undefined;
+        pixelRatio?: undefined;
+        resolution?: undefined;
+        rotation?: undefined;
+        size?: undefined;
+        visible?: undefined;
+        zoom?: undefined;
+    } | {
+        center: import("ol/coordinate").Coordinate;
+        extent: number[];
+        pixelRatio: number;
+        resolution: number;
+        rotation: number;
+        size: number[];
+        visible: boolean;
+        zoom: number;
+    };
     /**
      * Add sources, layers and listeners to the map.
      */
-    onAdd(map: AnyMapGlMap, gl: WebGLRenderingContext | WebGL2RenderingContext): void;
+    onAdd(map: AnyMapGlMap, gl: WebGL2RenderingContext | WebGLRenderingContext): void;
+    onLoad(): void;
+    /**
+     * Callback on 'move' event.
+     */
+    onMove(): void;
+    /**
+     * Callback on 'moveend' event.
+     */
+    onMoveEnd(): void;
+    /**
+     * Callback when the RealtimeEngine has rendered successfully.
+     */
+    onRealtimeEngineRender(): void;
     /**
      * Remove source, layers and listeners from the map.
      */
-    onRemove(map: AnyMapGlMap, gl: WebGLRenderingContext | WebGL2RenderingContext): void;
-    onLoad(): void;
+    onRemove(map: AnyMapGlMap, gl: WebGL2RenderingContext | WebGLRenderingContext): void;
+    onZoomEnd(): void;
     /**
      * Start updating vehicles position.
      *
@@ -150,32 +115,8 @@ declare class RealtimeLayer extends RealtimeLayer_base {
      * @public
      */
     stop(): void;
-    /**
-     * Render the trajectories using current map's size, resolution and rotation.
-     * @param {boolean} noInterpolate if true, renders the vehicles without interpolating theirs positions.
-     * @private
-     */
-    renderTrajectories(noInterpolate?: boolean): void;
-    /**
-     * Return the delay in ms before the next rendering.
-     */
-    getRefreshTimeInMs(): number;
-    /**
-     * Remove the trajectory form the list if necessary.
-     */
-    purgeTrajectory(trajectory: RealtimeTrajectory, extent: [number, number, number, number], zoom: number): boolean;
-    /**
-     * Send the current bbox to the websocket
-     */
-    setBbox(extent?: [number, number, number, number], zoom?: number): void;
-    renderTrajectoriesInternal(viewState: ViewState, noInterpolate?: boolean): boolean;
-    /**
-     * Callback on 'move' event.
-     */
-    onMove(): void;
-    /**
-     * Callback on 'moveend' event.
-     */
-    onMoveEnd(): void;
+    get canvas(): AnyCanvas | undefined;
+    get pixelRatio(): number | undefined;
+    set pixelRatio(pixelRatio: number | undefined);
 }
 export default RealtimeLayer;

package/maplibre/layers/RealtimeLayer.js

@@ -1,12 +1,10 @@
-// @ts-nocheck
-import { fromLonLat } from 'ol/proj';
-import { getWidth, getHeight } from 'ol/extent';
-import transformRotate from '@turf/transform-rotate';
 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';
 /**
  * A Maplibre layer able to display data from the [geOps Realtime API](https://developer.geops.io/apis/realtime/).
  *
@@ -43,7 +41,7 @@ import toMercatorExtent from '../../common/utils/toMercatorExtent';
  s
  * @public
  */
-class RealtimeLayer extends RealtimeLayerMixin(Layer) {
+class RealtimeLayer extends Layer {
     /**
      * Constructor.
      *
@@ -60,12 +58,13 @@ class RealtimeLayer extends RealtimeLayerMixin(Layer) {
      */
     constructor(options = {}) {
         var _a;
-        const canvas = document.createElement('canvas');
-        super(Object.assign({ canvas, id: 'realtime' }, options));
-        /** @private */
+        super(Object.assign({ id: 'realtime' }, options));
+        this.engine = new RealtimeEngine(Object.assign({ getViewState: this.getViewState.bind(this), onRender: this.onRealtimeEngineRender.bind(this) }, options));
         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: [
@@ -74,108 +73,49 @@ 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(', '),
+            id: this.id,
             loaded: true,
+            type: 'canvas',
         };
-        /** @private */
         this.layer = {
             id: `${this.id}-raster`,
-            type: 'raster',
-            source: this.id,
             layout: {
                 visibility: 'visible',
             },
             paint: {
-                'raster-opacity': 1,
                 'raster-fade-duration': 0,
+                'raster-opacity': 1,
                 'raster-resampling': 'nearest', // important otherwise it looks blurry
             },
+            source: this.id,
+            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() {
+        console.log(this);
         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,
@@ -191,60 +131,117 @@ 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.id))) {
+            (_b = this.map) === null || _b === void 0 ? void 0 : _b.addSource(this.id, 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);
             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.id)) {
+            map.removeSource(this.id);
+        }
+        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;
     }
 }
 export default RealtimeLayer;