mobility-toolbox-js 1.3.11-beta.2 → 1.3.13-beta.2

package/api/tralis/TralisAPI.js

@@ -395,7 +395,7 @@ class TralisAPI {
    * @param {function(response: { content: Vehicle })} onMessage Function called on each message of the channel.
    */
   subscribeDeletedVehicles(mode, onMessage) {
-    this.unsubscribeDeletedVehicles();
+    this.unsubscribeDeletedVehicles(onMessage);
     this.subscribe(
       `deleted_vehicles${getModeSuffix(mode, TralisModes)}`,
       onMessage,

package/common/Tracker.js

@@ -30,8 +30,8 @@ export default class Tracker {
     this.renderedTrajectories = [];
 
     /**
-     * Array of ol events key, returned by on() or once().
-     * @type {Array<key>}
+     * Active interpolation calcultion or not. If false, the train will not move until we receive the next message for the websocket.
+     * @type {boolean}
      */
     this.interpolate = !!opts.interpolate;
 
@@ -45,13 +45,13 @@ export default class Tracker {
      * Id of the trajectory which is hovered.
      * @type {string}
      */
-    this.hoverVehicleId = null;
+    this.hoverVehicleId = opts.hoverVehicleId;
 
     /**
      * Id of the trajectory which is selected.
      * @type {string}
      */
-    this.selectedVehicleId = null;
+    this.selectedVehicleId = opts.selectedVehicleId;
 
     /**
      * Scale the vehicle icons with this value.
@@ -59,6 +59,24 @@ export default class Tracker {
      */
     this.iconScale = opts.iconScale;
 
+    /**
+     * Function use to filter the features displayed.
+     * @type {function}
+     */
+    this.filter = opts.filter;
+
+    /**
+     * Function use to sort the features displayed.
+     * @type {function}
+     */
+    this.sort = opts.sort;
+
+    /**
+     * Function use to style the features displayed.
+     * @type {function}
+     */
+    this.style = opts.style;
+
     // we draw directly on the canvas since openlayers is too slow.
     /**
      * HTML <canvas> element.
@@ -139,24 +157,20 @@ export default class Tracker {
   /**
    * Set the filter for tracker features.
    * @param {function} filter Filter function.
+   * @private
+   * @deprecated Set the property this.filter directly.
    */
   setFilter(filter) {
-    /**
-     * Current filter function.
-     * @type {function}
-     */
     this.filter = filter;
   }
 
   /**
    * Set the sort for tracker features.
    * @param {function} sort Sort function.
+   * @private
+   * @deprecated Set the property this.sort directly.
    */
   setSort(sort) {
-    /**
-     * The sort function for tracker features.
-     * @type {function}
-     */
     this.sort = sort;
   }
 
@@ -164,6 +178,7 @@ export default class Tracker {
    * Set the id of the trajectory which is hovered.
    * @param {string} id Id of a vehicle.
    * @private
+   * @deprecated Set the property this.hoverVehicleId directly.
    */
   setHoverVehicleId(id) {
     if (id !== this.hoverVehicleId) {
@@ -175,6 +190,7 @@ export default class Tracker {
    * Set the id of the trajectory which is selected.
    * @param {string} id Id of a vehicle.
    * @private
+   * @deprecated Set the property this.selectedVehicleId directly.
    */
   setSelectedVehicleId(id) {
     if (id !== this.selectedVehicleId) {
@@ -185,6 +201,8 @@ export default class Tracker {
   /**
    * set the scale of the vehicle icons.
    * @param {number} iconScale Scale value.
+   * @private
+   * @deprecated Set the property this.iconScale directly.
    */
   setIconScale(iconScale) {
     this.iconScale = iconScale;
@@ -192,14 +210,12 @@ export default class Tracker {
 
   /**
    * Set the tracker style.
-   * @param {function} s OpenLayers style function.
+   * @param {function} style OpenLayers style function.
+   * @private
+   * @deprecated Set the property this.style directly.
    */
-  setStyle(s) {
-    /**
-     * Style function.
-     * @type {function}
-     */
-    this.style = s;
+  setStyle(style) {
+    this.style = style;
   }
 
   /**

package/common/mixins/SearchMixin.js

@@ -54,6 +54,7 @@ const SearchMixin = (Base) =>
         apiOptions.url = url;
       }
       this.api = new StopsAPI(apiOptions);
+      this.abortController = new AbortController();
     }
 
     render(suggestions = []) {
@@ -101,7 +102,9 @@ const SearchMixin = (Base) =>
       this.inputElt.placeholder = this.placeholder;
       this.inputElt.autoComplete = 'off';
       this.inputElt.onkeyup = (evt) => {
-        this.search(evt.target.value);
+        this.abortController.abort();
+        this.abortController = new AbortController();
+        this.search(evt.target.value, this.abortController);
       };
       Object.assign(this.inputElt.style, {
         padding: '10px 30px 10px 10px',

package/common/mixins/TrackerLayerMixin.js

@@ -124,8 +124,33 @@ const TrackerLayerMixin = (Base) =>
         isHoverActive: true,
         ...options,
       };
+
+      // Tracker options use to build the tracker.
+      const {
+        interpolate,
+        hoverVehicleId,
+        selectedVehicleId,
+        filter,
+        sort,
+      } = options;
+      const initTrackerOptions = {
+        interpolate,
+        hoverVehicleId,
+        selectedVehicleId,
+        filter,
+        sort,
+        style,
+      };
+      Object.keys(initTrackerOptions).forEach(
+        (key) =>
+          initTrackerOptions[key] === undefined &&
+          delete initTrackerOptions[key],
+      );
+
       let cuurSpeed = speed || 1;
+
       super.defineProperties(options);
+
       Object.defineProperties(this, {
         isTrackerLayer: { value: true },
         isHoverActive: {
@@ -144,17 +169,17 @@ const TrackerLayerMixin = (Base) =>
         },
         filter: {
           get: () => this.tracker.filter,
-          set: (filter) => {
+          set: (newFilter) => {
             if (this.tracker) {
-              this.tracker.setFilter(filter);
+              this.tracker.filter = newFilter;
             }
           },
         },
         sort: {
           get: () => this.tracker.sort,
-          set: (sort) => {
+          set: (newSort) => {
             if (this.sort) {
-              this.tracker.setSort(sort);
+              this.tracker.sort = newSort;
             }
           },
         },
@@ -200,8 +225,8 @@ const TrackerLayerMixin = (Base) =>
           get: () => {
             return this.tracker.hoverVehicleId;
           },
-          set: (hoverVehicleId) => {
-            this.tracker.hoverVehicleId = hoverVehicleId;
+          set: (newHoverVehicleId) => {
+            this.tracker.hoverVehicleId = newHoverVehicleId;
           },
         },
 
@@ -212,11 +237,19 @@ const TrackerLayerMixin = (Base) =>
           get: () => {
             return this.tracker.selectedVehicleId;
           },
-          set: (selectedVehicleId) => {
-            this.tracker.selectedVehicleId = selectedVehicleId;
+          set: (newSelectedVehicleId) => {
+            this.tracker.selectedVehicleId = newSelectedVehicleId;
           },
         },
 
+        /**
+         * Options used by the constructor of the Tracker class.
+         */
+        initTrackerOptions: {
+          value: initTrackerOptions,
+          writable: false,
+        },
+
         /**
          * If true, encapsulates the renderTrajectories calls in a requestAnimationFrame
          */
@@ -231,14 +264,25 @@ const TrackerLayerMixin = (Base) =>
      * Initalize the Tracker.
      * @param {ol/Map~Map} map
      * @param {Object} options
-     * @param {Number} [options.width] Canvas's width.
-     * @param {Number} [options.height] Canvas's height.
+     * @param {number} [options.width] Canvas's width.
+     * @param {number} [options.height] Canvas's height.
+     * @param {bool} [options.interpolate] Convert an EPSG:3857 coordinate to a canvas pixel (origin top-left).
+     * @param {string} [options.hoverVehicleId] Id of the trajectory which is hovered.
+     * @param {string} [options.selectedVehicleId] Id of the trajectory which is selected.
+     * @param {number} [options.iconScale] Scale the vehicle icons with this value.
      * @param {function} [options.getPixelFromCoordinate] Convert an EPSG:3857 coordinate to a canvas pixel (origin top-left).
+     * @param {function} [options.filter] Function use to filter the features displayed.
+     * @param {function} [options.sort] Function use to sort the features displayed.
+     * @param {function} [options.style] Function use to style the features displayed.
      */
-    init(map, options) {
+    init(map, options = {}) {
       super.init(map);
-      this.tracker = new Tracker(options);
-      this.tracker.setStyle((props, r) => this.style(props, r));
+
+      this.tracker = new Tracker({
+        style: (props, r) => this.style(props, r),
+        ...this.initTrackerOptions,
+        ...options,
+      });
 
       if (this.visible) {
         this.start();
@@ -270,8 +314,8 @@ const TrackerLayerMixin = (Base) =>
      * Start the clock.
      *
      * @param {Array<Number>} size Map's size: [width, height].
-     * @param {Number} zoom Map's zoom level.
-     * @param {Number} resolution Map's resolution.
+     * @param {number} zoom Map's zoom level.
+     * @param {number} resolution Map's resolution.
      */
     start(size, zoom, resolution) {
       this.stop();