mobility-toolbox-js 2.0.0-beta.34 → 2.0.0-beta.37

package/ol/layers/RealtimeLayer.js

@@ -1,41 +1,13 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var GeoJSON_1 = require("ol/format/GeoJSON");
-var layer_1 = require("ol/layer");
-var Source_1 = require("ol/source/Source");
-var transform_1 = require("ol/transform");
-var source_1 = require("ol/source");
-var Layer_1 = require("./Layer");
-var RealtimeLayerMixin_1 = require("../../common/mixins/RealtimeLayerMixin");
-var styles_1 = require("../styles");
+import GeoJSON from 'ol/format/GeoJSON';
+import { Layer as OLLayer, Group, Vector as VectorLayer } from 'ol/layer';
+import Source from 'ol/source/Source';
+import { composeCssTransform } from 'ol/transform';
+import { Vector as VectorSource } from 'ol/source';
+import Layer from './Layer';
+import mixin from '../../common/mixins/RealtimeLayerMixin';
+import { fullTrajectoryStyle } from '../styles';
 /** @private */
-var format = new GeoJSON_1.default();
+const format = new GeoJSON();
 /**
  * Responsible for loading and display data from a Realtime service.
  *
@@ -54,128 +26,123 @@ var format = new GeoJSON_1.default();
  * @implements {UserInteractionsLayerInterface}
  * @implements {RealtimeLayerInterface}
  */
-var RealtimeLayer = /** @class */ (function (_super) {
-    __extends(RealtimeLayer, _super);
+class RealtimeLayer extends mixin(Layer) {
     /**
      * Constructor.
      *
      * @param {Object} options
      * @private
      */
-    function RealtimeLayer(options) {
-        if (options === void 0) { options = {}; }
-        var _this = 
+    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.call(this, __assign({}, options)) || this;
+        super(Object.assign({}, options));
         /** @ignore */
-        _this.olLayer =
+        this.olLayer =
             options.olLayer ||
-                new layer_1.Group({
+                new Group({
                     layers: [
-                        new layer_1.Vector({
-                            source: new source_1.Vector({ features: [] }),
-                            style: function (feature, resolution) {
-                                return (options.fullTrajectoryStyle || styles_1.fullTrajectoryStyle)(feature, resolution, _this.styleOptions);
+                        new VectorLayer({
+                            source: new VectorSource({ features: [] }),
+                            style: (feature, resolution) => {
+                                return (options.fullTrajectoryStyle || fullTrajectoryStyle)(feature, resolution, this.styleOptions);
                             },
                         }),
-                        new layer_1.Layer({
-                            source: new Source_1.default({}),
-                            render: function (frameState) {
-                                if (!_this.container) {
-                                    _this.container = document.createElement('div');
-                                    _this.container.style.position = 'absolute';
-                                    _this.container.style.width = '100%';
-                                    _this.container.style.height = '100%';
-                                    _this.transformContainer = document.createElement('div');
-                                    _this.transformContainer.style.position = 'absolute';
-                                    _this.transformContainer.style.width = '100%';
-                                    _this.transformContainer.style.height = '100%';
-                                    _this.container.appendChild(_this.transformContainer);
-                                    _this.canvas.style.position = 'absolute';
-                                    _this.canvas.style.top = '0';
-                                    _this.canvas.style.left = '0';
-                                    _this.canvas.style.transformOrigin = 'top left';
-                                    _this.transformContainer.appendChild(_this.canvas);
+                        new OLLayer({
+                            source: new Source({}),
+                            render: (frameState) => {
+                                if (!this.container) {
+                                    this.container = document.createElement('div');
+                                    this.container.style.position = 'absolute';
+                                    this.container.style.width = '100%';
+                                    this.container.style.height = '100%';
+                                    this.transformContainer = document.createElement('div');
+                                    this.transformContainer.style.position = 'absolute';
+                                    this.transformContainer.style.width = '100%';
+                                    this.transformContainer.style.height = '100%';
+                                    this.container.appendChild(this.transformContainer);
+                                    this.canvas.style.position = 'absolute';
+                                    this.canvas.style.top = '0';
+                                    this.canvas.style.left = '0';
+                                    this.canvas.style.transformOrigin = 'top left';
+                                    this.transformContainer.appendChild(this.canvas);
                                 }
-                                if (_this.renderedViewState) {
-                                    var _a = frameState.viewState, center = _a.center, resolution = _a.resolution, rotation = _a.rotation;
-                                    var _b = _this.renderedViewState, renderedCenter = _b.center, renderedResolution = _b.resolution, renderedRotation = _b.rotation;
+                                if (this.renderedViewState) {
+                                    const { center, resolution, rotation } = frameState.viewState;
+                                    const { center: renderedCenter, resolution: renderedResolution, rotation: renderedRotation, } = this.renderedViewState;
                                     if (renderedResolution / resolution >= 3) {
                                         // Avoid having really big points when zooming fast.
-                                        var context = _this.canvas.getContext('2d');
-                                        context.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
+                                        const context = this.canvas.getContext('2d');
+                                        context.clearRect(0, 0, this.canvas.width, this.canvas.height);
                                     }
                                     else {
-                                        var pixelCenterRendered = _this.map.getPixelFromCoordinate(renderedCenter);
-                                        var pixelCenter = _this.map.getPixelFromCoordinate(center);
-                                        _this.transformContainer.style.transform = (0, transform_1.composeCssTransform)(pixelCenterRendered[0] - pixelCenter[0], pixelCenterRendered[1] - pixelCenter[1], renderedResolution / resolution, renderedResolution / resolution, rotation - renderedRotation, 0, 0);
+                                        const pixelCenterRendered = this.map.getPixelFromCoordinate(renderedCenter);
+                                        const pixelCenter = this.map.getPixelFromCoordinate(center);
+                                        this.transformContainer.style.transform = composeCssTransform(pixelCenterRendered[0] - pixelCenter[0], pixelCenterRendered[1] - pixelCenter[1], renderedResolution / resolution, renderedResolution / resolution, rotation - renderedRotation, 0, 0);
                                     }
                                 }
-                                return _this.container;
+                                return this.container;
                             },
                         }),
                     ],
                 });
         // We store the layer used to highlight the full Trajectory
-        _this.vectorLayer = _this.olLayer.getLayers().item(0);
+        this.vectorLayer = this.olLayer.getLayers().item(0);
         // Options the last render run did happen. If something changes
         // we have to render again
         /** @ignore */
-        _this.renderState = {
+        this.renderState = {
             center: [0, 0],
             zoom: null,
             rotation: 0,
         };
-        return _this;
     }
-    RealtimeLayer.prototype.attachToMap = function (map) {
-        var _this = this;
-        _super.prototype.attachToMap.call(this, map);
+    attachToMap(map) {
+        super.attachToMap(map);
         if (this.map) {
-            this.olListenersKeys.push(this.map.on(['moveend', 'change:target'], function (evt) {
-                var view = _this.map.getView();
+            this.olListenersKeys.push(this.map.on(['moveend', 'change:target'], (evt) => {
+                const view = this.map.getView();
                 if (view.getAnimating() || view.getInteracting()) {
                     return;
                 }
-                var zoom = view.getZoom();
+                const zoom = view.getZoom();
                 // Update the interval between render updates
-                if (_this.currentZoom !== zoom) {
-                    _this.onZoomEnd(evt);
+                if (this.currentZoom !== zoom) {
+                    this.onZoomEnd(evt);
                 }
-                _this.currentZoom = zoom;
-                _this.onMoveEnd(evt);
+                this.currentZoom = zoom;
+                this.onMoveEnd(evt);
             }));
         }
-    };
+    }
     /**
      * Destroy the container of the tracker.
      */
-    RealtimeLayer.prototype.detachFromMap = function () {
-        _super.prototype.detachFromMap.call(this);
+    detachFromMap() {
+        super.detachFromMap();
         this.container = null;
-    };
+    }
     /**
      * Detect in the canvas if there is data to query at a specific coordinate.
      * @param {ol/coordinate~Coordinate}  coordinate The coordinate to test
      * @returns
      */
-    RealtimeLayer.prototype.hasFeatureInfoAtCoordinate = function (coordinate) {
+    hasFeatureInfoAtCoordinate(coordinate) {
         if (this.map && this.canvas) {
-            var context = this.canvas.getContext('2d');
-            var pixel = this.map.getPixelFromCoordinate(coordinate);
+            const context = this.canvas.getContext('2d');
+            const pixel = this.map.getPixelFromCoordinate(coordinate);
             return !!context.getImageData(pixel[0] * this.pixelRatio, pixel[1] * this.pixelRatio, 1, 1).data[3];
         }
         return false;
-    };
+    }
     /**
      * Render the trajectories using current map's size, resolution and rotation.
      * @param {boolean} noInterpolate if true, renders the vehicles without interpolating theirs positions.
      * @overrides
      */
-    RealtimeLayer.prototype.renderTrajectories = function (noInterpolate) {
-        var view = this.map.getView();
-        _super.prototype.renderTrajectories.call(this, {
+    renderTrajectories(noInterpolate) {
+        const view = this.map.getView();
+        super.renderTrajectories({
             size: this.map.getSize(),
             center: this.map.getView().getCenter(),
             extent: view.calculateExtent(),
@@ -184,49 +151,48 @@ var RealtimeLayer = /** @class */ (function (_super) {
             zoom: view.getZoom(),
             pixelRatio: this.pixelRatio,
         }, noInterpolate);
-    };
+    }
     /**
      * Launch renderTrajectories. it avoids duplicating code in renderTrajectories methhod.
      * @private
      * @override
      */
-    RealtimeLayer.prototype.renderTrajectoriesInternal = function (viewState, noInterpolate) {
+    renderTrajectoriesInternal(viewState, noInterpolate) {
         if (!this.map) {
             return false;
         }
-        var isRendered = false;
-        var blockRendering = this.map.getView().getAnimating() || this.map.getView().getInteracting();
+        let isRendered = false;
+        const blockRendering = this.map.getView().getAnimating() || this.map.getView().getInteracting();
         // Don't render the map when the map is animating or interacting.
         isRendered = blockRendering
             ? false
-            : _super.prototype.renderTrajectoriesInternal.call(this, viewState, noInterpolate);
+            : super.renderTrajectoriesInternal(viewState, noInterpolate);
         // We update the current render state.
         if (isRendered) {
-            this.renderedViewState = __assign({}, viewState);
+            this.renderedViewState = Object.assign({}, viewState);
             if (this.transformContainer) {
                 this.transformContainer.style.transform = '';
             }
         }
         return isRendered;
-    };
+    }
     /**
      * Return the delay in ms before the next rendering.
      */
-    RealtimeLayer.prototype.getRefreshTimeInMs = function () {
-        return _super.prototype.getRefreshTimeInMs.call(this, this.map.getView().getZoom());
-    };
-    RealtimeLayer.prototype.getFeatureInfoAtCoordinate = function (coordinate, options) {
-        if (options === void 0) { options = {}; }
-        var resolution = this.map.getView().getResolution();
-        return _super.prototype.getFeatureInfoAtCoordinate.call(this, coordinate, __assign({ resolution: resolution }, options));
-    };
+    getRefreshTimeInMs() {
+        return super.getRefreshTimeInMs(this.map.getView().getZoom());
+    }
+    getFeatureInfoAtCoordinate(coordinate, options = {}) {
+        const resolution = this.map.getView().getResolution();
+        return super.getFeatureInfoAtCoordinate(coordinate, Object.assign({ resolution }, options));
+    }
     /**
      * On move end we update the websocket with the new bbox.
      *
      * @private
      * @override
      */
-    RealtimeLayer.prototype.onMoveEnd = function () {
+    onMoveEnd() {
         if (this.visible && this.isUpdateBboxOnMoveEnd) {
             this.setBbox();
         }
@@ -236,7 +202,7 @@ var RealtimeLayer = /** @class */ (function (_super) {
             this.selectedVehicleId) {
             this.highlightTrajectory(this.selectedVehicleId);
         }
-    };
+    }
     /**
      * Function called on moveend event only when the zoom has changed.
      *
@@ -245,86 +211,84 @@ var RealtimeLayer = /** @class */ (function (_super) {
      * @override
      */
     // eslint-disable-next-line no-unused-vars
-    RealtimeLayer.prototype.onZoomEnd = function (evt) {
-        _super.prototype.onZoomEnd.call(this, evt);
-    };
+    onZoomEnd(evt) {
+        super.onZoomEnd(evt);
+    }
     /**
      * Update the cursor style when hovering a vehicle.
      *
      * @private
      * @override
      */
-    RealtimeLayer.prototype.onFeatureHover = function (features, layer, coordinate) {
-        _super.prototype.onFeatureHover.call(this, features, layer, coordinate);
+    onFeatureHover(features, layer, coordinate) {
+        super.onFeatureHover(features, layer, coordinate);
         this.map.getTargetElement().style.cursor = features.length
             ? 'pointer'
             : 'auto';
-    };
+    }
     /**
      * Display the complete trajectory of the vehicle.
      *
      * @private
      * @override
      */
-    RealtimeLayer.prototype.onFeatureClick = function (features, layer, coordinate) {
-        _super.prototype.onFeatureClick.call(this, features, layer, coordinate);
+    onFeatureClick(features, layer, coordinate) {
+        super.onFeatureClick(features, layer, coordinate);
         if (!features.length && this.vectorLayer) {
             this.vectorLayer.getSource().clear();
         }
         if (this.selectedVehicleId) {
             this.highlightTrajectory(this.selectedVehicleId);
         }
-    };
+    }
     /**
      * Remove the trajectory form the list if necessary.
      *
      * @private
      */
-    RealtimeLayer.prototype.purgeTrajectory = function (trajectory, extent, zoom) {
-        return _super.prototype.purgeTrajectory.call(this, trajectory, extent || this.map.getView().calculateExtent(), zoom || this.map.getView().getZoom());
-    };
+    purgeTrajectory(trajectory, extent, zoom) {
+        return super.purgeTrajectory(trajectory, extent || this.map.getView().calculateExtent(), zoom || this.map.getView().getZoom());
+    }
     /**
      * Send the current bbox to the websocket
      *
      * @private
      */
-    RealtimeLayer.prototype.setBbox = function (extent, zoom) {
-        var newExtent = extent;
-        var newZoom = zoom;
+    setBbox(extent, zoom) {
+        let newExtent = extent;
+        let newZoom = zoom;
         if (!newExtent && this.isUpdateBboxOnMoveEnd) {
             newExtent = extent || this.map.getView().calculateExtent();
             newZoom = Math.floor(this.map.getView().getZoom());
         }
-        _super.prototype.setBbox.call(this, newExtent, newZoom);
-    };
+        super.setBbox(newExtent, newZoom);
+    }
     /**
      * Highlight the trajectory of journey.
      * @private
      */
-    RealtimeLayer.prototype.highlightTrajectory = function (id) {
-        var _this = this;
+    highlightTrajectory(id) {
         this.api
             .getFullTrajectory(id, this.mode, this.generalizationLevel)
-            .then(function (fullTrajectory) {
-            var vectorSource = _this.vectorLayer.getSource();
+            .then((fullTrajectory) => {
+            const vectorSource = this.vectorLayer.getSource();
             vectorSource.clear();
             if (!fullTrajectory ||
                 !fullTrajectory.features ||
                 !fullTrajectory.features.length) {
                 return;
             }
-            var features = format.readFeatures(fullTrajectory);
-            _this.vectorLayer.getSource().addFeatures(features);
+            const features = format.readFeatures(fullTrajectory);
+            this.vectorLayer.getSource().addFeatures(features);
         });
-    };
+    }
     /**
      * Create a copy of the RealtimeLayer.
      * @param {Object} newOptions Options to override
      * @return {RealtimeLayer} A RealtimeLayer
      */
-    RealtimeLayer.prototype.clone = function (newOptions) {
-        return new RealtimeLayer(__assign(__assign({}, this.options), newOptions));
-    };
-    return RealtimeLayer;
-}((0, RealtimeLayerMixin_1.default)(Layer_1.default)));
-exports.default = RealtimeLayer;
+    clone(newOptions) {
+        return new RealtimeLayer(Object.assign(Object.assign({}, this.options), newOptions));
+    }
+}
+export default RealtimeLayer;

package/ol/layers/RealtimeLayer.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=RealtimeLayer.test.d.ts.map

package/ol/layers/RealtimeLayer.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RealtimeLayer.test.d.ts","sourceRoot":"","sources":["../../../src/ol/layers/RealtimeLayer.test.js"],"names":[],"mappings":""}

package/ol/layers/RealtimeLayer.test.js

@@ -0,0 +1,71 @@
+import fetch from 'jest-fetch-mock';
+import Map from 'ol/Map';
+import View from 'ol/View';
+import WS from 'jest-websocket-mock';
+import RealtimeLayer from './RealtimeLayer';
+// create a WS instance, listening on port 1234 on localhost
+let layer;
+let onClick;
+let olMap;
+let server;
+describe('RealtimeLayer', () => {
+    beforeEach(() => {
+        server = new WS('ws://localhost:1234');
+        global.fetch = fetch;
+        fetch.resetMocks();
+        onClick = jest.fn();
+        layer = new RealtimeLayer({
+            url: 'ws://localhost:1234',
+            apiKey: 'apiKey',
+            onClick,
+        });
+        olMap = new Map({
+            view: new View({
+                center: [831634, 5933959],
+                zoom: 9,
+            }),
+        });
+    });
+    afterEach(() => {
+        // ...or gracefully close the connection
+        server.close();
+        // The WS class also has a static "clean" method to gracefully close all open connections,
+        // particularly useful to reset the environment between test runs.
+        WS.clean();
+    });
+    test('should be instanced.', () => {
+        expect(layer).toBeInstanceOf(RealtimeLayer);
+    });
+    test('should called terminate on initalization.', () => {
+        const spy = jest.spyOn(layer, 'detachFromMap');
+        fetch.mockResponseOnce(JSON.stringify(global.fetchTrajectoriesResponse));
+        layer.attachToMap(olMap);
+        expect(spy).toHaveBeenCalledTimes(1);
+    });
+    test('should clone', () => {
+        const clone = layer.clone({ name: 'clone' });
+        expect(clone).not.toBe(layer);
+        expect(clone.name).toBe('clone');
+        expect(clone).toBeInstanceOf(RealtimeLayer);
+    });
+    test('should use the sort function.', () => {
+        const fn = () => true;
+        const laye = new RealtimeLayer({
+            url: 'ws://localhost:1234',
+            apiKey: 'apiKey',
+            sort: fn,
+        });
+        expect(laye).toBeInstanceOf(RealtimeLayer);
+        expect(laye.sort).toBe(fn);
+    });
+    test('should use filter function.', () => {
+        const fn = () => true;
+        const laye = new RealtimeLayer({
+            url: 'ws://localhost:1234',
+            apiKey: 'apiKey',
+            filter: fn, // reverse the array
+        });
+        expect(laye).toBeInstanceOf(RealtimeLayer);
+        expect(laye.filter).toBe(fn);
+    });
+});

package/ol/layers/RoutingLayer.d.ts

@@ -11,14 +11,14 @@ declare class RoutingLayer extends Layer {
      * @param {Object} [options]
      * @param {ol/style/Style~StyleLike} [options.style] Style to be used for routes, uses (ol/StyleLike) [https://openlayers.org/en/latest/apidoc/module-ol_style_Style.html#~StyleLike] instances
      */
-    constructor(options?: any);
+    constructor(options?: Object | undefined);
     olLayer: any;
     /**
      * Create a copy of the RoutingLayer.
      * @param {Object} newOptions Options to override
      * @return {RoutingLayer} A RoutingLayer
      */
-    clone(newOptions: any): RoutingLayer;
+    clone(newOptions: Object): RoutingLayer;
 }
 import Layer from "./Layer";
 //# sourceMappingURL=RoutingLayer.d.ts.map

package/ol/layers/RoutingLayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RoutingLayer.d.ts","sourceRoot":"","sources":["../../../src/ol/layers/RoutingLayer.js"],"names":[],"mappings":";AA8DA;;;;;GAKG;AACH;IACE;;;;OAIG;IACH,2BASC;IANC,aAKI;IAGN;;;;OAIG;IACH,wBAFY,YAAY,CAIvB;CACF"}
+{"version":3,"file":"RoutingLayer.d.ts","sourceRoot":"","sources":["../../../src/ol/layers/RoutingLayer.js"],"names":[],"mappings":";AA8DA;;;;;GAKG;AACH;IACE;;;;OAIG;IACH,0CASC;IANC,aAKI;IAGN;;;;OAIG;IACH,kBAHW,MAAM,GACL,YAAY,CAIvB;CACF"}