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

package/ol/layers/RealtimeLayer.js

@@ -1,17 +1,17 @@
-import GeoJSON from 'ol/format/GeoJSON';
-import { Vector as VectorLayer } from 'ol/layer';
-import Source from 'ol/source/Source';
-import { Vector as VectorSource } from 'ol/source';
 import debounce from 'lodash.debounce';
+import GeoJSON from 'ol/format/GeoJSON';
 import Layer from 'ol/layer/Layer';
-import RealtimeLayerMixin from '../../common/mixins/RealtimeLayerMixin';
-import { fullTrajectoryStyle } from '../styles';
-import MobilityLayerMixin from '../mixins/MobilityLayerMixin';
+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 RealtimeEngine from '../../common/utils/RealtimeEngine';
 import RealtimeLayerRenderer from '../renderers/RealtimeLayerRenderer';
-/** @private */
+import { fullTrajectoryStyle } from '../styles';
+import defineDeprecatedProperties from '../utils/defineDeprecatedProperties';
 const format = new GeoJSON();
 /**
- * Responsible for loading and display data from the geOps realtime API.
+ * An OpenLayers layer able to display data from the [geOps Realtime API](https://developer.geops.io/apis/realtime/).
  *
  * @example
  * import { RealtimeLayer } from 'mobility-toolbox-js/ol';
@@ -24,76 +24,108 @@ 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-ignore
-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({
-            updateWhileAnimating: this.allowRenderWhenAnimating,
-            updateWhileInteracting: true,
             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],
-            zoom: undefined,
-            rotation: 0,
-        };
-        /** @private */
         this.onZoomEndDebounced = debounce(this.onZoomEnd, 100);
-        /** @private */
         this.onMoveEndDebounced = debounce(this.onMoveEnd, 100);
     }
-    /**
-     * @private
-     */
-    createRenderer() {
-        return new RealtimeLayerRenderer(this);
-    }
-    /** @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.visible) {
-                this.start();
+            if (this.getVisible()) {
+                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.olListenersKeys.push(...this.map.on(['moveend', 'change:target'], 
-            // @ts-expect-error - bad ol definitions
+            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();
-                if (view.getAnimating() || view.getInteracting()) {
+                if (!view || (view === null || view === void 0 ? void 0 : view.getAnimating()) || (view === null || view === void 0 ? void 0 : view.getInteracting())) {
                     return;
                 }
                 const zoom = view.getZoom();
@@ -101,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.visible) {
-                    this.start();
+                if (evt.target.getVisible()) {
+                    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
@@ -119,206 +150,173 @@ class RealtimeLayer extends RealtimeLayerMixin(MobilityLayerMixin(Layer)) {
             }));
         }
     }
+    /**
+     * Create a copy of the RealtimeLayer.
+     *
+     * @param {Object} newOptions Options to override. See constructor.
+     * @return {RealtimeLayer} A RealtimeLayer
+     * @public
+     */
+    clone(newOptions) {
+        return new RealtimeLayer(Object.assign(Object.assign({}, this.get('options')), newOptions));
+    }
+    createRenderer() {
+        return new RealtimeLayerRenderer(this);
+    }
     /**
      * 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();
     }
     /**
-     * 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
+     * Get some informations about a trajectory.
+     *
+     * @param {RealtimeTrainId} id A vehicle's id.
+     * @returns
      */
-    // @ts-ignore
-    renderTrajectories(noInterpolate) {
-        if (!this.map) {
-            return;
-        }
-        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.getCenter()) {
-            return;
+    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 {};
         }
-        super.renderTrajectories({
-            size: this.map.getSize(),
+        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(),
-            pixelRatio: this.pixelRatio,
-        }, noInterpolate);
-    }
-    /**
-     * Launch renderTrajectories. it avoids duplicating code in renderTrajectories methhod.
-     * @private
-     * @override
-     */
-    renderTrajectoriesInternal(viewState, noInterpolate) {
-        if (!this.map) {
-            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
-            ? 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;
-    }
-    /**
-     * Return the delay in ms before the next rendering.
-     * @private
-     */
-    getRefreshTimeInMs() {
-        return super.getRefreshTimeInMs(this.map.getView().getZoom());
-    }
-    /**
-     * On move end we update the websocket with the new bbox.
-     *
-     * @private
-     * @override
-     */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onMoveEnd(evt) {
-        if (!this.isUpdateBboxOnMoveEnd || !this.visible) {
-            return;
-        }
-        this.setBbox();
-    }
-    /**
-     * Function called on moveend event only when the zoom has changed.
-     *
-     * @param {ol/MapEvent~MapEvent} evt Moveend event.
-     * @private
-     * @override
-     */
-    // eslint-disable-next-line no-unused-vars
-    onZoomEnd() {
-        super.onZoomEnd();
-        if (!this.isUpdateBboxOnMoveEnd || !this.visible) {
-            return;
-        }
-        if (this.selectedVehicleId) {
-            this.highlightTrajectory(this.selectedVehicleId);
-        }
+        };
     }
     highlight(feature) {
-        this.highlightVehicle(feature === null || feature === void 0 ? void 0 : feature.get('train_id'));
-    }
-    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'));
-    }
-    // /**
-    //  * 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);
-    // }
-    /**
-     * Remove the trajectory form the list if necessary.
-     *
-     * @private
-     */
-    purgeTrajectory(trajectory, extent, zoom) {
-        const center = this.map.getView().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;
+        const id = feature === null || feature === void 0 ? void 0 : feature.get('train_id');
+        if (this.hoverVehicleId !== id) {
+            this.hoverVehicleId = id;
+            this.engine.renderTrajectories(true);
         }
-        return super.purgeTrajectory(trajectory, extent || this.map.getView().calculateExtent(), zoom || this.map.getView().getZoom() || 0);
-    }
-    /**
-     * Send the current bbox to the websocket
-     *
-     * @private
-     */
-    setBbox(extent, zoom) {
-        super.setBbox(extent ||
-            this.map.getView().calculateExtent(), zoom || this.map.getView().getZoom() || 0);
     }
     /**
      * Highlight the trajectory of journey.
-     * @private
      */
     highlightTrajectory(id) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         if (!id) {
-            this.vectorLayer.getSource().clear(true);
+            (_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(((_b = (_a = this.map) === null || _a === void 0 ? void 0 : _a.getView()) === null || _b === void 0 ? void 0 : _b.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;
+            var _a, _b, _c, _d, _e;
             const fullTrajectory = data.content;
             if (!((_a = fullTrajectory === null || fullTrajectory === void 0 ? void 0 : fullTrajectory.features) === null || _a === void 0 ? void 0 : _a.length)) {
                 return [];
             }
             const features = format.readFeatures(fullTrajectory);
-            this.vectorLayer.getSource().clear(true);
+            (_c = (_b = this.vectorLayer) === null || _b === void 0 ? void 0 : _b.getSource()) === null || _c === void 0 ? void 0 : _c.clear(true);
             if (features.length) {
-                this.vectorLayer.getSource().addFeatures(features);
+                (_e = (_d = this.vectorLayer) === null || _d === void 0 ? void 0 : _d.getSource()) === null || _e === void 0 ? void 0 : _e.addFeatures(features);
             }
             return features;
         })
             .catch(() => {
-            this.vectorLayer.getSource().clear(true);
+            var _a, _b;
+            (_b = (_a = this.vectorLayer) === null || _a === void 0 ? void 0 : _a.getSource()) === null || _b === void 0 ? void 0 : _b.clear(true);
             return [];
         });
     }
+    onMoveEnd() {
+        if (!this.engine.isUpdateBboxOnMoveEnd || !this.getVisible()) {
+            return;
+        }
+        this.engine.setBbox();
+    }
     /**
-     * Create a copy of the RealtimeLayer.
-     * @param {Object} newOptions Options to override
-     * @return {RealtimeLayer} A RealtimeLayer
+     * Callback when the RealtimeEngine has rendered successfully.
      */
-    clone(newOptions) {
-        return new RealtimeLayer(Object.assign(Object.assign({}, this.options), newOptions));
+    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 = '';
+        }
+    }
+    onZoomEnd() {
+        this.engine.onZoomEnd();
+        if (!this.engine.isUpdateBboxOnMoveEnd || !this.getVisible()) {
+            return;
+        }
+        if (this.selectedVehicleId) {
+            this.highlightTrajectory(this.selectedVehicleId);
+        }
+    }
+    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);
+        }
+        this.highlightTrajectory(id);
+    }
+    setMapInternal(map) {
+        if (map) {
+            super.setMapInternal(map);
+            this.attachToMap();
+        }
+        else {
+            this.detachFromMap();
+            super.setMapInternal(map);
+        }
+    }
+    shouldRender() {
+        var _a, _b;
+        return this.allowRenderWhenAnimating
+            ? false
+            : ((_a = this.getMapInternal()) === null || _a === void 0 ? void 0 : _a.getView().getAnimating()) ||
+                ((_b = this.getMapInternal()) === null || _b === void 0 ? void 0 : _b.getView().getInteracting());
+    }
+    /**
+     * Start the rendering.
+     *
+     * @public
+     */
+    start() {
+        this.engine.start();
+    }
+    /**
+     * Stop the rendering.
+     *
+     * @public
+     */
+    stop() {
+        this.engine.stop();
     }
 }
 export default RealtimeLayer;

package/ol/layers/VectorLayer.d.ts

@@ -0,0 +1,17 @@
+import { Coordinate } from 'ol/coordinate';
+import { LayerGetFeatureInfoResponse } from '../../types';
+import Layer, { MobilityLayerOptions } from './Layer';
+/**
+ * @deprecated
+ */
+declare class VectorLayer extends Layer {
+    /**
+     * @deprecated
+     */
+    clone(newOptions: MobilityLayerOptions): VectorLayer;
+    /**
+     * @deprecated
+     */
+    getFeatureInfoAtCoordinate(coordinate: Coordinate): Promise<LayerGetFeatureInfoResponse>;
+}
+export default VectorLayer;

package/ol/layers/VectorLayer.js

@@ -0,0 +1,33 @@
+import Layer from './Layer';
+/**
+ * @deprecated
+ */
+class VectorLayer extends Layer {
+    /**
+     * @deprecated
+     */
+    clone(newOptions) {
+        return new VectorLayer(Object.assign(Object.assign({}, this.get('options')), newOptions));
+    }
+    /**
+     * @deprecated
+     */
+    getFeatureInfoAtCoordinate(coordinate) {
+        let features = [];
+        const mapInternal = this.getMapInternal();
+        if (mapInternal) {
+            const pixel = mapInternal.getPixelFromCoordinate(coordinate);
+            features =
+                mapInternal.getFeaturesAtPixel(pixel, {
+                    hitTolerance: this.get('hitTolerance') || 5,
+                    layerFilter: (l) => l === this,
+                }) || [];
+        }
+        return Promise.resolve({
+            coordinate,
+            features,
+            layer: this,
+        });
+    }
+}
+export default VectorLayer;

package/ol/layers/index.d.ts

@@ -1,3 +1,5 @@
 export { default as MaplibreLayer } from "./MaplibreLayer";
 export { default as MaplibreStyleLayer } from "./MaplibreStyleLayer";
 export { default as RealtimeLayer } from "./RealtimeLayer";
+export { default as Layer } from "./Layer";
+export { default as VectorLayer } from "./VectorLayer";

package/ol/layers/index.js

@@ -1,3 +1,6 @@
 export { default as MaplibreLayer } from './MaplibreLayer';
 export { default as MaplibreStyleLayer } from './MaplibreStyleLayer';
 export { default as RealtimeLayer } from './RealtimeLayer';
+// Deprecated export
+export { default as Layer } from './Layer';
+export { default as VectorLayer } from './VectorLayer';

package/ol/renderers/MaplibreLayerRenderer.d.ts

@@ -1,20 +0,0 @@
-import { FrameState } from 'ol/Map';
-import LayerRenderer from 'ol/renderer/Layer';
-import { Coordinate } from 'ol/coordinate';
-import { FeatureCallback } from 'ol/renderer/vector';
-import { Feature } from 'ol';
-import { Geometry } from 'ol/geom';
-import { Pixel } from 'ol/pixel';
-import type MaplibreLayer from '../layers/MaplibreLayer';
-/**
- * This class is a renderer for Maplibre Layer to be able to use the native ol
- * functionnalities like map.getFeaturesAtPixel or map.hasFeatureAtPixel.
- * @private
- */
-export default class MaplibreLayerRenderer extends LayerRenderer<MaplibreLayer> {
-    getFeaturesAtCoordinate(coordinate: Coordinate | undefined, hitTolerance?: number): Feature<Geometry>[];
-    prepareFrame(): boolean;
-    renderFrame(frameState: FrameState): HTMLElement | null;
-    getFeatures(pixel: Pixel): Promise<Feature<Geometry>[]>;
-    forEachFeatureAtCoordinate<Feature>(coordinate: Coordinate, frameState: FrameState, hitTolerance: number, callback: FeatureCallback<Feature>): Feature | undefined;
-}