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

package/ol/layers/RealtimeLayer.js

@@ -1,187 +1,330 @@
-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";
-const format = new GeoJSON();
-class RealtimeLayer extends mixin(Layer) {
-  constructor(options = {}) {
-    super({
-      ...options
-    });
-    this.olLayer = options.olLayer || new Group({
-      layers: [
-        new VectorLayer({
-          source: new VectorSource({ features: [] }),
-          style: (feature, resolution) => {
-            return (options.fullTrajectoryStyle || fullTrajectoryStyle)(feature, resolution, this.styleOptions);
-          }
-        }),
-        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) {
-              const { center, resolution, rotation } = frameState.viewState;
-              const {
-                center: renderedCenter,
-                resolution: renderedResolution,
-                rotation: renderedRotation
-              } = this.renderedViewState;
-              if (renderedResolution / resolution >= 3) {
-                const context = this.canvas.getContext("2d");
-                context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-              } else {
-                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);
-              }
+"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");
+/** @private */
+var format = new GeoJSON_1.default();
+/**
+ * Responsible for loading and display data from a Realtime service.
+ *
+ * @example
+ * import { RealtimeLayer } from 'mobility-toolbox-js/ol';
+ *
+ * const layer = new RealtimeLayer({
+ *   url: [yourUrl],
+ *   apiKey: [yourApiKey],
+ * });
+ *
+ *
+ * @see <a href="/api/class/src/api/RealtimeAPI%20js~RealtimeAPI%20html">RealtimeAPI</a>
+ *
+ * @extends {Layer}
+ * @implements {UserInteractionsLayerInterface}
+ * @implements {RealtimeLayerInterface}
+ */
+var RealtimeLayer = /** @class */ (function (_super) {
+    __extends(RealtimeLayer, _super);
+    /**
+     * Constructor.
+     *
+     * @param {Object} options
+     * @private
+     */
+    function RealtimeLayer(options) {
+        if (options === void 0) { options = {}; }
+        var _this = 
+        // 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;
+        /** @ignore */
+        _this.olLayer =
+            options.olLayer ||
+                new layer_1.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 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);
+                                }
+                                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 (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);
+                                    }
+                                    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);
+                                    }
+                                }
+                                return _this.container;
+                            },
+                        }),
+                    ],
+                });
+        // We store the layer used to highlight the full Trajectory
+        _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 = {
+            center: [0, 0],
+            zoom: null,
+            rotation: 0,
+        };
+        return _this;
+    }
+    RealtimeLayer.prototype.attachToMap = function (map) {
+        var _this = this;
+        _super.prototype.attachToMap.call(this, map);
+        if (this.map) {
+            this.olListenersKeys.push(this.map.on(['moveend', 'change:target'], function (evt) {
+                var view = _this.map.getView();
+                if (view.getAnimating() || view.getInteracting()) {
+                    return;
+                }
+                var zoom = view.getZoom();
+                // Update the interval between render updates
+                if (_this.currentZoom !== zoom) {
+                    _this.onZoomEnd(evt);
+                }
+                _this.currentZoom = zoom;
+                _this.onMoveEnd(evt);
+            }));
+        }
+    };
+    /**
+     * Destroy the container of the tracker.
+     */
+    RealtimeLayer.prototype.detachFromMap = function () {
+        _super.prototype.detachFromMap.call(this);
+        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) {
+        if (this.map && this.canvas) {
+            var context = this.canvas.getContext('2d');
+            var 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, {
+            size: this.map.getSize(),
+            center: this.map.getView().getCenter(),
+            extent: view.calculateExtent(),
+            resolution: view.getResolution(),
+            rotation: view.getRotation(),
+            zoom: view.getZoom(),
+            pixelRatio: this.pixelRatio,
+        }, noInterpolate);
+    };
+    /**
+     * Launch renderTrajectories. it avoids duplicating code in renderTrajectories methhod.
+     * @private
+     * @override
+     */
+    RealtimeLayer.prototype.renderTrajectoriesInternal = function (viewState, noInterpolate) {
+        if (!this.map) {
+            return false;
+        }
+        var isRendered = false;
+        var 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);
+        // We update the current render state.
+        if (isRendered) {
+            this.renderedViewState = __assign({}, viewState);
+            if (this.transformContainer) {
+                this.transformContainer.style.transform = '';
             }
-            return this.container;
-          }
-        })
-      ]
-    });
-    this.vectorLayer = this.olLayer.getLayers().item(0);
-    this.renderState = {
-      center: [0, 0],
-      zoom: null,
-      rotation: 0
-    };
-  }
-  attachToMap(map) {
-    super.attachToMap(map);
-    if (this.map) {
-      this.olListenersKeys.push(this.map.on(["moveend", "change:target"], (evt) => {
-        const view = this.map.getView();
-        if (view.getAnimating() || view.getInteracting()) {
-          return;
         }
-        const zoom = view.getZoom();
-        if (this.currentZoom !== zoom) {
-          this.onZoomEnd(evt);
+        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));
+    };
+    /**
+     * On move end we update the websocket with the new bbox.
+     *
+     * @private
+     * @override
+     */
+    RealtimeLayer.prototype.onMoveEnd = function () {
+        if (this.visible && this.isUpdateBboxOnMoveEnd) {
+            this.setBbox();
         }
-        this.currentZoom = zoom;
-        this.onMoveEnd(evt);
-      }));
-    }
-  }
-  detachFromMap() {
-    super.detachFromMap();
-    this.container = null;
-  }
-  hasFeatureInfoAtCoordinate(coordinate) {
-    if (this.map && this.canvas) {
-      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;
-  }
-  renderTrajectories(noInterpolate) {
-    const view = this.map.getView();
-    super.renderTrajectories({
-      size: this.map.getSize(),
-      center: this.map.getView().getCenter(),
-      extent: view.calculateExtent(),
-      resolution: view.getResolution(),
-      rotation: view.getRotation(),
-      zoom: view.getZoom(),
-      pixelRatio: this.pixelRatio
-    }, noInterpolate);
-  }
-  renderTrajectoriesInternal(viewState, noInterpolate) {
-    if (!this.map) {
-      return false;
-    }
-    let isRendered = false;
-    const blockRendering = this.map.getView().getAnimating() || this.map.getView().getInteracting();
-    isRendered = blockRendering ? false : super.renderTrajectoriesInternal(viewState, noInterpolate);
-    if (isRendered) {
-      this.renderedViewState = { ...viewState };
-      if (this.transformContainer) {
-        this.transformContainer.style.transform = "";
-      }
-    }
-    return isRendered;
-  }
-  getRefreshTimeInMs() {
-    return super.getRefreshTimeInMs(this.map.getView().getZoom());
-  }
-  getFeatureInfoAtCoordinate(coordinate, options = {}) {
-    const resolution = this.map.getView().getResolution();
-    return super.getFeatureInfoAtCoordinate(coordinate, {
-      resolution,
-      ...options
-    });
-  }
-  onMoveEnd() {
-    if (this.visible && this.isUpdateBboxOnMoveEnd) {
-      this.setBbox();
-    }
-    if (this.visible && this.isUpdateBboxOnMoveEnd && this.userClickInteractions && this.selectedVehicleId) {
-      this.highlightTrajectory(this.selectedVehicleId);
-    }
-  }
-  onZoomEnd(evt) {
-    super.onZoomEnd(evt);
-  }
-  onFeatureHover(features, layer, coordinate) {
-    super.onFeatureHover(features, layer, coordinate);
-    this.map.getTargetElement().style.cursor = features.length ? "pointer" : "auto";
-  }
-  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);
-    }
-  }
-  purgeTrajectory(trajectory, extent, zoom) {
-    return super.purgeTrajectory(trajectory, extent || this.map.getView().calculateExtent(), zoom || this.map.getView().getZoom());
-  }
-  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.setBbox(newExtent, newZoom);
-  }
-  highlightTrajectory(id) {
-    this.api.getFullTrajectory(id, this.mode, this.generalizationLevel).then((fullTrajectory) => {
-      const vectorSource = this.vectorLayer.getSource();
-      vectorSource.clear();
-      if (!fullTrajectory || !fullTrajectory.features || !fullTrajectory.features.length) {
-        return;
-      }
-      const features = format.readFeatures(fullTrajectory);
-      this.vectorLayer.getSource().addFeatures(features);
-    });
-  }
-  clone(newOptions) {
-    return new RealtimeLayer({ ...this.options, ...newOptions });
-  }
-}
-export default RealtimeLayer;
+        if (this.visible &&
+            this.isUpdateBboxOnMoveEnd &&
+            this.userClickInteractions &&
+            this.selectedVehicleId) {
+            this.highlightTrajectory(this.selectedVehicleId);
+        }
+    };
+    /**
+     * 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
+    RealtimeLayer.prototype.onZoomEnd = function (evt) {
+        _super.prototype.onZoomEnd.call(this, 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);
+        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);
+        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());
+    };
+    /**
+     * Send the current bbox to the websocket
+     *
+     * @private
+     */
+    RealtimeLayer.prototype.setBbox = function (extent, zoom) {
+        var newExtent = extent;
+        var 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);
+    };
+    /**
+     * Highlight the trajectory of journey.
+     * @private
+     */
+    RealtimeLayer.prototype.highlightTrajectory = function (id) {
+        var _this = this;
+        this.api
+            .getFullTrajectory(id, this.mode, this.generalizationLevel)
+            .then(function (fullTrajectory) {
+            var vectorSource = _this.vectorLayer.getSource();
+            vectorSource.clear();
+            if (!fullTrajectory ||
+                !fullTrajectory.features ||
+                !fullTrajectory.features.length) {
+                return;
+            }
+            var 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;

package/ol/layers/RoutingLayer.d.ts

@@ -0,0 +1,24 @@
+export default RoutingLayer;
+/**
+ * A class use to display vector data.
+ *
+ * @classproperty {ol/Map~Map} map - The map where the layer is displayed.
+ * @extends {Layer}
+ */
+declare class RoutingLayer extends Layer {
+    /**
+     * Constructor.
+     * @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);
+    olLayer: any;
+    /**
+     * Create a copy of the RoutingLayer.
+     * @param {Object} newOptions Options to override
+     * @return {RoutingLayer} A RoutingLayer
+     */
+    clone(newOptions: any): RoutingLayer;
+}
+import Layer from "./Layer";
+//# sourceMappingURL=RoutingLayer.d.ts.map

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

@@ -0,0 +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"}