mobility-toolbox-js 3.0.1-beta.0 → 3.0.1-beta.2

package/ol/layers/RealtimeLayer.js

@@ -1,14 +1,14 @@
 import debounce from 'lodash.debounce';
 import GeoJSON from 'ol/format/GeoJSON';
-import { Vector as VectorLayer } from 'ol/layer';
 import Layer from 'ol/layer/Layer';
+import VectorLayer from 'ol/layer/Vector';
+import { unByKey } from 'ol/Observable';
 import { Vector as VectorSource } from 'ol/source';
 import Source from 'ol/source/Source';
-import RealtimeLayerMixin from '../../common/mixins/RealtimeLayerMixin';
-import MobilityLayerMixin from '../mixins/MobilityLayerMixin';
+import RealtimeEngine from '../../common/utils/RealtimeEngine';
 import RealtimeLayerRenderer from '../renderers/RealtimeLayerRenderer';
 import { fullTrajectoryStyle } from '../styles';
-/** @private */
+import defineDeprecatedProperties from '../utils/defineDeprecatedProperties';
 const format = new GeoJSON();
 /**
  * An OpenLayers layer able to display data from the [geOps Realtime API](https://developer.geops.io/apis/realtime/).
@@ -24,66 +24,104 @@ const format = new GeoJSON();
  *
  *
  * @see <a href="/api/class/src/api/RealtimeAPI%20js~RealtimeAPI%20html">RealtimeAPI</a>
+ * @see <a href="/example/ol-realtime">OpenLayers Realtime layer example</a>
+ *
  *
  * @extends {ol/layer/Layer~Layer}
  *
+ *
  * @classproperty {boolean} allowRenderWhenAnimating - Allow rendering of the layer when the map is animating.
  * @public
  */
-// @ts-expect-error
-class RealtimeLayer extends RealtimeLayerMixin(MobilityLayerMixin(Layer)) {
+class RealtimeLayer extends Layer {
+    get api() {
+        return this.engine.api;
+    }
+    set api(api) {
+        this.engine.api = api;
+    }
+    get canvas() {
+        return this.engine.canvas;
+    }
+    get filter() {
+        return this.engine.filter;
+    }
+    set filter(filter) {
+        this.engine.filter = filter;
+    }
+    get hoverVehicleId() {
+        return this.engine.hoverVehicleId;
+    }
+    set hoverVehicleId(id) {
+        this.engine.hoverVehicleId = id;
+    }
+    get mode() {
+        return this.engine.mode;
+    }
+    set mode(mode) {
+        this.engine.mode = mode;
+    }
+    get pixelRatio() {
+        return this.engine.pixelRatio;
+    }
+    get selectedVehicleId() {
+        return this.engine.selectedVehicleId;
+    }
+    set selectedVehicleId(id) {
+        this.engine.selectedVehicleId = id;
+    }
+    get sort() {
+        return this.engine.sort;
+    }
+    set sort(sort) {
+        this.engine.sort = sort;
+    }
+    get trajectories() {
+        return this.engine.trajectories;
+    }
     /**
      * Constructor.
      *
      * @param {RealtimeLayerOptions} options
      * @param {boolean} [options.allowRenderWhenAnimating=false] Allow rendering of the layer when the map is animating.
-     * @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 {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](https://developer.geops.io/apis/realtime/) url.
+     * @public
      */
     constructor(options) {
         // We use a group to be able to add custom vector layer in extended class.
         // For example TrajservLayer use a vectorLayer to display the complete trajectory.
         super(Object.assign({ source: new Source({}) }, options));
-        /** @private */
         this.allowRenderWhenAnimating = false;
-        /** @private */
+        this.maxNbFeaturesRequested = 100;
+        this.olEventsKeys = [];
+        // For backward compatibility with v2
+        defineDeprecatedProperties(this, options);
+        this.engine = new RealtimeEngine(Object.assign({ getViewState: this.getViewState.bind(this), onRender: this.onRealtimeEngineRender.bind(this) }, options));
         this.allowRenderWhenAnimating = !!options.allowRenderWhenAnimating;
         // We store the layer used to highlight the full Trajectory
-        /** @private */
         this.vectorLayer = new VectorLayer({
             source: new VectorSource({ features: [] }),
             style: (feature, resolution) => {
-                return (options.fullTrajectoryStyle || fullTrajectoryStyle)(feature, resolution, this.styleOptions);
+                return (options.fullTrajectoryStyle || fullTrajectoryStyle)(feature, resolution, this.engine.styleOptions);
             },
             updateWhileAnimating: this.allowRenderWhenAnimating,
             updateWhileInteracting: true,
         });
-        // Options the last render run did happen. If something changes
-        // we have to render again
-        /** @private */
-        this.renderState = {
-            center: [0, 0],
-            rotation: 0,
-            zoom: undefined,
-        };
-        /** @private */
         this.onZoomEndDebounced = debounce(this.onZoomEnd, 100);
-        /** @private */
         this.onMoveEndDebounced = debounce(this.onMoveEnd, 100);
     }
-    /** @private */
-    attachToMap(map) {
-        super.attachToMap(map);
-        if (this.map) {
+    attachToMap() {
+        this.engine.attachToMap();
+        const mapInternal = this.getMapInternal();
+        if (mapInternal) {
             // If the layer is visible we start  the rendering clock
             if (this.getVisible()) {
-                this.start();
+                this.engine.start();
             }
-            // @ts-expect-error  - bad ts check RealtimeLayer is a BaseLayer
-            const index = this.map.getLayers().getArray().indexOf(this);
-            this.map.getLayers().insertAt(index, this.vectorLayer);
-            this.olEventsKeys.push(...this.map.on(['moveend', 'change:target'], 
+            const index = mapInternal.getLayers().getArray().indexOf(this);
+            mapInternal.getLayers().insertAt(index, this.vectorLayer);
+            this.olEventsKeys.push(...mapInternal.on(['moveend', 'change:target'], 
             // @ts-expect-error  - bad ol definitions
             (evt) => {
                 const view = (evt.map || evt.target).getView();
@@ -95,15 +133,14 @@ class RealtimeLayer extends RealtimeLayerMixin(MobilityLayerMixin(Layer)) {
                 if (this.currentZoom !== zoom) {
                     this.onZoomEndDebounced(evt);
                 }
-                /** @private */
                 this.currentZoom = zoom;
                 this.onMoveEndDebounced(evt);
             }), this.on('change:visible', (evt) => {
                 if (evt.target.getVisible()) {
-                    this.start();
+                    this.engine.start();
                 }
                 else {
-                    this.stop();
+                    this.engine.stop();
                 }
             }), this.on('propertychange', (evt) => {
                 // We apply every property change event related to visiblity to the vectorlayer
@@ -115,53 +152,77 @@ class RealtimeLayer extends RealtimeLayerMixin(MobilityLayerMixin(Layer)) {
     }
     /**
      * Create a copy of the RealtimeLayer.
-     * @param {Object} newOptions Options to override
+     *
+     * @param {Object} newOptions Options to override. See constructor.
      * @return {RealtimeLayer} A RealtimeLayer
+     * @public
      */
     clone(newOptions) {
-        return new RealtimeLayer(Object.assign(Object.assign({}, this.options), newOptions));
+        return new RealtimeLayer(Object.assign(Object.assign({}, this.get('options')), newOptions));
     }
-    /**
-     * @private
-     */
     createRenderer() {
         return new RealtimeLayerRenderer(this);
     }
-    /**
-     * Render the trajectories using current map's size, resolution and rotation.
-     * @param {boolean} noInterpolate if true, renders the vehicles without interpolating theirs positions.
-     * @overrides
-     * @private
-     */
     /**
      * Destroy the container of the tracker.
-     * @private
      */
     detachFromMap() {
         var _a;
-        (_a = this.map) === null || _a === void 0 ? void 0 : _a.removeLayer(this.vectorLayer);
-        super.detachFromMap();
+        unByKey(this.olEventsKeys);
+        (_a = this.getMapInternal()) === null || _a === void 0 ? void 0 : _a.removeLayer(this.vectorLayer);
+        this.engine.detachFromMap();
     }
     /**
-     * Return the delay in ms before the next rendering.
-     * @private
+     * Get some informations about a trajectory.
+     *
+     * @param {RealtimeTrainId} id A vehicle's id.
+     * @returns
      */
-    getRefreshTimeInMs() {
-        var _a;
-        return super.getRefreshTimeInMs(((_a = this.map.getView()) === null || _a === void 0 ? void 0 : _a.getZoom()) || 0);
+    getTrajectoryInfos(id) {
+        var _a, _b;
+        // When a vehicle is selected, we request the complete stop sequence and the complete full trajectory.
+        // Then we combine them in one response and send them to inherited layers.
+        const promises = [
+            this.engine.api.getStopSequence(id),
+            this.engine.api.getFullTrajectory(id, this.engine.mode, this.engine.getGeneralizationLevelByZoom(Math.floor(((_b = (_a = this.getMapInternal()) === null || _a === void 0 ? void 0 : _a.getView()) === null || _b === void 0 ? void 0 : _b.getZoom()) || 0))),
+        ];
+        return Promise.all(promises).then(([stopSequence, fullTrajectory]) => {
+            const response = {
+                fullTrajectory,
+                stopSequence,
+            };
+            return response;
+        });
+    }
+    getVehicles(filterFunc) {
+        return this.engine.getVehicles(filterFunc);
+    }
+    getViewState() {
+        const mapInternal = this.getMapInternal();
+        if (!(mapInternal === null || mapInternal === void 0 ? void 0 : mapInternal.getView())) {
+            return {};
+        }
+        const view = mapInternal.getView();
+        return {
+            center: view.getCenter(),
+            extent: view.calculateExtent(),
+            pixelRatio: this.engine.pixelRatio,
+            resolution: view.getResolution(),
+            rotation: view.getRotation(),
+            size: mapInternal.getSize(),
+            visible: this.getVisible(),
+            zoom: view.getZoom(),
+        };
     }
     highlight(feature) {
-        this.highlightVehicle(feature === null || feature === void 0 ? void 0 : feature.get('train_id'));
+        const id = feature === null || feature === void 0 ? void 0 : feature.get('train_id');
+        if (this.hoverVehicleId !== id) {
+            this.hoverVehicleId = id;
+            this.engine.renderTrajectories(true);
+        }
     }
-    /**
-     * On move end we update the websocket with the new bbox.
-     *
-     * @private
-     * @override
-     */
     /**
      * Highlight the trajectory of journey.
-     * @private
      */
     highlightTrajectory(id) {
         var _a, _b, _c, _d;
@@ -169,8 +230,8 @@ class RealtimeLayer extends RealtimeLayerMixin(MobilityLayerMixin(Layer)) {
             (_b = (_a = this.vectorLayer) === null || _a === void 0 ? void 0 : _a.getSource()) === null || _b === void 0 ? void 0 : _b.clear(true);
             return Promise.resolve([]);
         }
-        return this.api
-            .getFullTrajectory(id, this.mode, this.getGeneralizationLevelByZoom(Math.floor(((_d = (_c = this.map) === null || _c === void 0 ? void 0 : _c.getView()) === null || _d === void 0 ? void 0 : _d.getZoom()) || 0)))
+        return this.engine.api
+            .getFullTrajectory(id, this.engine.mode, this.engine.getGeneralizationLevelByZoom(Math.floor(((_d = (_c = this.getMapInternal()) === null || _c === void 0 ? void 0 : _c.getView()) === null || _d === void 0 ? void 0 : _d.getZoom()) || 0)))
             .then((data) => {
             var _a, _b, _c, _d, _e;
             const fullTrajectory = data.content;
@@ -190,144 +251,72 @@ class RealtimeLayer extends RealtimeLayerMixin(MobilityLayerMixin(Layer)) {
             return [];
         });
     }
+    onMoveEnd() {
+        if (!this.engine.isUpdateBboxOnMoveEnd || !this.getVisible()) {
+            return;
+        }
+        this.engine.setBbox();
+    }
     /**
-     * Function called on moveend event only when the zoom has changed.
-     *
-     * @param {ol/MapEvent~MapEvent} evt Moveend event.
-     * @private
-     * @override
+     * Callback when the RealtimeEngine has rendered successfully.
      */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onMoveEnd(evt) {
-        if (!this.isUpdateBboxOnMoveEnd || !this.getVisible()) {
-            return;
+    onRealtimeEngineRender(renderState, viewState) {
+        this.renderedViewState = Object.assign({}, viewState);
+        // @ts-expect-error  - we are in the same class
+        const { container } = this.getRenderer();
+        if (container) {
+            container.style.transform = '';
         }
-        this.setBbox();
     }
-    // eslint-disable-next-line no-unused-vars
     onZoomEnd() {
-        super.onZoomEnd();
-        if (!this.isUpdateBboxOnMoveEnd || !this.getVisible()) {
+        this.engine.onZoomEnd();
+        if (!this.engine.isUpdateBboxOnMoveEnd || !this.getVisible()) {
             return;
         }
         if (this.selectedVehicleId) {
             this.highlightTrajectory(this.selectedVehicleId);
         }
     }
-    /**
-     * Remove the trajectory form the list if necessary.
-     *
-     * @private
-     */
-    purgeTrajectory(trajectory, extent, zoom) {
-        var _a;
-        const center = (_a = this.map.getView()) === null || _a === void 0 ? void 0 : _a.getCenter();
-        if (!extent && !center) {
-            // In that case the view is not zoomed yet so we can't calculate the extent of the map,
-            // it will trigger a js error on calculateExtent function.
-            return false;
+    select(feature) {
+        const id = feature === null || feature === void 0 ? void 0 : feature.get('train_id');
+        if (this.selectedVehicleId !== id) {
+            this.selectedVehicleId = id;
+            this.engine.renderTrajectories(true);
         }
-        return super.purgeTrajectory(trajectory, extent || this.map.getView().calculateExtent(), zoom || this.map.getView().getZoom() || 0);
-    }
-    // /**
-    //  * Update the cursor style when hovering a vehicle.
-    //  *
-    //  * @private
-    //  * @override
-    //  */
-    // onFeatureHover(
-    //   features: Feature[],
-    //   layer: RealtimeLayer,
-    //   coordinate: Coordinate,
-    // ) {
-    //   super.onFeatureHover(features, layer, coordinate);
-    //   this.map.getTargetElement().style.cursor = features.length
-    //     ? 'pointer'
-    //     : 'auto';
-    // }
-    // /**
-    //  * Display the complete trajectory of the vehicle.
-    //  *
-    //  * @private
-    //  * @override
-    //  */
-    // onFeatureClick(
-    //   features: Feature[],
-    //   layer: RealtimeLayer,
-    //   coordinate: Coordinate,
-    // ) {
-    //   super.onFeatureClick(features, layer, coordinate);
-    //   this.highlightTrajectory(this.selectedVehicleId);
-    // }
-    // @ts-expect-error
-    renderTrajectories(noInterpolate) {
-        if (!this.map) {
-            return;
+        this.highlightTrajectory(id);
+    }
+    setMapInternal(map) {
+        if (map) {
+            super.setMapInternal(map);
+            this.attachToMap();
         }
-        const view = this.map.getView();
-        // it could happen that the view is set but without center yet,
-        // so the calcualteExtent will trigger an error.
-        if (!(view === null || view === void 0 ? void 0 : view.getCenter())) {
-            return;
+        else {
+            this.detachFromMap();
+            super.setMapInternal(map);
         }
-        super.renderTrajectories({
-            center: view.getCenter(),
-            extent: view.calculateExtent(),
-            pixelRatio: this.pixelRatio,
-            resolution: view.getResolution(),
-            rotation: view.getRotation(),
-            size: this.map.getSize(),
-            zoom: view.getZoom(),
-        }, noInterpolate);
     }
-    /**
-     * Launch renderTrajectories. it avoids duplicating code in renderTrajectories methhod.
-     * @private
-     * @override
-     */
-    renderTrajectoriesInternal(viewState, noInterpolate) {
-        var _a;
-        if (!((_a = this.map) === null || _a === void 0 ? void 0 : _a.getView())) {
-            return false;
-        }
-        let isRendered = false;
-        const blockRendering = this.allowRenderWhenAnimating
-            ? false
-            : this.map.getView().getAnimating() ||
-                this.map.getView().getInteracting();
-        // Don't render the map when the map is animating or interacting.
-        isRendered = blockRendering
+    shouldRender() {
+        var _a, _b;
+        return this.allowRenderWhenAnimating
             ? false
-            : super.renderTrajectoriesInternal(viewState, noInterpolate);
-        // We update the current render state.
-        if (isRendered) {
-            /** @private */
-            this.renderedViewState = Object.assign({}, viewState);
-            // @ts-expect-error  - we are in the same class
-            const { container } = this.getRenderer();
-            if (container) {
-                container.style.transform = '';
-            }
-        }
-        return isRendered;
+            : ((_a = this.getMapInternal()) === null || _a === void 0 ? void 0 : _a.getView().getAnimating()) ||
+                ((_b = this.getMapInternal()) === null || _b === void 0 ? void 0 : _b.getView().getInteracting());
     }
-    select(feature) {
-        this.selectVehicle(feature === null || feature === void 0 ? void 0 : feature.get('train_id'));
-        this.highlightTrajectory(feature === null || feature === void 0 ? void 0 : feature.get('train_id'));
+    /**
+     * Start the rendering.
+     *
+     * @public
+     */
+    start() {
+        this.engine.start();
     }
     /**
-     * Send the current bbox to the websocket
+     * Stop the rendering.
      *
-     * @private
+     * @public
      */
-    setBbox(extent, zoom) {
-        var _a, _b, _c, _d;
-        const extentt = extent ||
-            ((_b = (_a = this.map) === null || _a === void 0 ? void 0 : _a.getView()) === null || _b === void 0 ? void 0 : _b.calculateExtent());
-        if (!extentt) {
-            return;
-        }
-        super.setBbox(extentt, zoom || ((_d = (_c = this.map) === null || _c === void 0 ? void 0 : _c.getView()) === null || _d === void 0 ? void 0 : _d.getZoom()) || 0);
+    stop() {
+        this.engine.stop();
     }
 }
 export default RealtimeLayer;

package/ol/layers/VectorLayer.d.ts

@@ -1,7 +1,6 @@
 import { Coordinate } from 'ol/coordinate';
 import { LayerGetFeatureInfoResponse } from '../../types';
-import { MobilityLayerOptions } from '../mixins/MobilityLayerMixin';
-import Layer from './Layer';
+import Layer, { MobilityLayerOptions } from './Layer';
 /**
  * @deprecated
  */

package/ol/layers/VectorLayer.js

@@ -7,19 +7,20 @@ class VectorLayer extends Layer {
      * @deprecated
      */
     clone(newOptions) {
-        return new VectorLayer(Object.assign(Object.assign({}, this.options), newOptions));
+        return new VectorLayer(Object.assign(Object.assign({}, this.get('options')), newOptions));
     }
     /**
      * @deprecated
      */
     getFeatureInfoAtCoordinate(coordinate) {
         let features = [];
-        if (this.map) {
-            const pixel = this.map.getPixelFromCoordinate(coordinate);
+        const mapInternal = this.getMapInternal();
+        if (mapInternal) {
+            const pixel = mapInternal.getPixelFromCoordinate(coordinate);
             features =
-                this.map.getFeaturesAtPixel(pixel, {
-                    hitTolerance: this.hitTolerance || 5,
-                    layerFilter: (l) => l === this.olLayer,
+                mapInternal.getFeaturesAtPixel(pixel, {
+                    hitTolerance: this.get('hitTolerance') || 5,
+                    layerFilter: (l) => l === this,
                 }) || [];
         }
         return Promise.resolve({

package/ol/renderers/MaplibreLayerRenderer.d.ts

@@ -0,0 +1,9 @@
+import { MapLibreLayerRenderer } from '@geoblocks/ol-maplibre-layer/lib';
+import { FrameState } from 'ol/Map';
+import { MaplibreLayer } from '../layers';
+export default class MaplibreLayerRenderer extends MapLibreLayerRenderer {
+    ignoreNextRender: boolean;
+    constructor(layer: MaplibreLayer);
+    renderFrame(frameState: FrameState): HTMLElement;
+    setIsReady(): void;
+}