mobility-toolbox-js 1.6.0-beta.2 → 1.6.0-beta.6

package/api/tralis/TralisAPI.js

@@ -75,11 +75,14 @@ class TralisAPI {
     /** @ignore */
     this.prefix = options.prefix || '';
 
-    this.isUpdateBboxOnMoveEnd = options.isUpateBboxOnMoveEnd || false;
+    this.isUpdateBboxOnMoveEnd = options.isUpdateBboxOnMoveEnd || false;
 
     /** @ignore */
     this.conn = new WebSocketConnector(wsUrl);
 
+    this.conn.isSUBAllow = !this.isUpdateBboxOnMoveEnd;
+    this.conn.isDELAllow = !this.isUpdateBboxOnMoveEnd;
+
     if (!this.isUpdateBboxOnMoveEnd) {
       this.conn.setProjection(options.projection || 'epsg:3857');
 

package/api/tralis/WebSocketConnector.js

@@ -11,6 +11,9 @@ class WebSocketConnector {
     this.subscriptions = [];
     this.connect(url);
 
+    this.isSUBAllow = false;
+    this.isDELAllow = false;
+
     // keep websocket alive
     setInterval(() => {
       this.send('PING');
@@ -52,13 +55,13 @@ class WebSocketConnector {
     //   this.setProjection(this.currentProj);
     // }
 
-    // [...this.subscriptions].forEach((s) => {
-    //   this.subscribe(s.params, s.cb, s.errorCb, s.quiet);
-    // });
+    [...this.subscriptions].forEach((s) => {
+      this.subscribe(s.params, s.cb, s.errorCb, s.quiet);
+    });
 
-    // if (this.currentBbox) {
-    //   this.setBbox(this.currentBbox);
-    // }
+    if (this.currentBbox) {
+      this.setBbox(this.currentBbox);
+    }
 
     // reconnect on close
     this.websocket.onclose = () => {
@@ -205,8 +208,10 @@ class WebSocketConnector {
       // if (!newSubscr.quiet) {
       this.send(`GET ${reqStr}`);
 
-      // this.send(`SUB ${reqStr}`);
-      // }
+      if (this.isSUBAllow) {
+        this.send(`SUB ${reqStr}`);
+      }
+
       this.subscribed[reqStr] = true;
     }
   }
@@ -240,7 +245,9 @@ class WebSocketConnector {
       this.subscribed[source] &&
       !this.subscriptions.find((s) => s.params.channel === source)
     ) {
-      this.send(`DEL ${source}`);
+      if (this.isDELAllow) {
+        this.send(`DEL ${source}`);
+      }
       this.subscribed[source] = false;
     }
   }

package/common/layers/Layer.js

@@ -13,7 +13,9 @@ import { v4 as uuid } from 'uuid';
  * @classproperty {string} key - Identifier of the layer. Must be unique.
  * @classproperty {string[]} copyrights - Array of copyrights.
  * @classproperty {boolean} isBaseLayer - Define if the layer is a base layer. Read-only.
- * @classproperty {boolean} isQueryable - Define if the layer can be queried. Read-only.
+ * @classproperty {boolean} isQueryable - Define if the layer can be queried. If false, it will set isHoverActive and isClickActive to false. Read-only.
+ * @classproperty {boolean} isClickActive - If true feature information will be queried on user click event. See inherited layers for more informations. Read-only.
+ * @classproperty {boolean} isHoverActive - If true feature information will be queried on pointer move event. See inherited layers for more informations. Read-only.
  * @classproperty {boolean} isReactSpatialLayer - Custom property for duck typing since `instanceof` is not working when the instance was created on different bundles. Read-only.
  * @classproperty {Layer[]} children - List of children.
  * @classproperty {boolean} visible - Define if the layer is visible or not.
@@ -33,9 +35,9 @@ export default class Layer extends Observable {
    * @param {Object} [options.properties={}] Application-specific layer properties.
    * @param {boolean} [options.visible=true] If true this layer is visible on the map.
    * @param {boolean} [options.isBaseLayer=false] If true this layer is a baseLayer.
-   * @param {boolean} [options.isQueryable=true] If true this layer can be queried.
-   * @param {boolean} [options.isClickActive=true] If true feature information will be queried on click event. See inherited layers for more informations.
-   * @param {boolean} [options.isHoverActive=true] If true feature information will be queried on pointer move event. See inherited layers for more informations.
+   * @param {boolean} [options.isQueryable=true] Define if the layer can be queried. If false, it will also set isHoverActive and isClickActive to false. Read-only.
+   * @param {boolean} [options.isClickActive=true] If true feature information will be queried on click event. See inherited layers for more informations. Read-only.
+   * @param {boolean} [options.isHoverActive=true] If true feature information will be queried on pointer move event. See inherited layers for more informations. Read-only.
    * @param {number} [options.hitTolerance=5] Hit-detection tolerance in css pixels. Pixels inside the radius around the given position will be checked for features.
    */
   constructor(options = {}) {
@@ -109,10 +111,10 @@ export default class Layer extends Observable {
         value: !!isQueryable,
       },
       isClickActive: {
-        value: !!isClickActive,
+        value: !!isQueryable && !!isClickActive,
       },
       isHoverActive: {
-        value: !!isHoverActive,
+        value: !!isQueryable && !!isHoverActive,
       },
       hitTolerance: {
         value: hitTolerance || 5,
@@ -307,6 +309,7 @@ export default class Layer extends Observable {
     // eslint-disable-next-line no-console
     console.error(
       'getFeatureInfoAtCoordinate must be implemented by inheriting layers',
+      this.key,
     );
 
     // This layer returns no feature info.
@@ -427,7 +430,7 @@ export default class Layer extends Observable {
       .then((featureInfo) => {
         const { features, layer, coordinate } = featureInfo;
         this.hoverCallbacks.forEach((callback) =>
-          callback({ features, layer, coordinate }),
+          callback(features, layer, coordinate),
         );
         return featureInfo;
       })

package/common/layers/Layer.test.js

@@ -63,6 +63,21 @@ describe('Layer', () => {
     expect(layer.name).toEqual('Layer');
   });
 
+  test('should set isClickActive and isHoverActive to false if isQueryable is set to false.', () => {
+    const options = {
+      name: 'Layer',
+      isQueryable: false,
+      isClickActive: true,
+      isHoverActive: true,
+      olLayer,
+    };
+    const layer = new Layer(options);
+    expect(layer).toBeInstanceOf(Layer);
+    expect(layer.isQueryable).toBe(false);
+    expect(layer.isClickActive).toBe(false);
+    expect(layer.isHoverActive).toBe(false);
+  });
+
   test('should called terminate on initialization.', () => {
     const layer = new Layer({ name: 'Layer', olLayer });
     const spy = jest.spyOn(layer, 'terminate');
@@ -465,7 +480,13 @@ describe('Layer', () => {
         expect(spy).toHaveBeenCalledWith(evt.coordinate);
         expect(featureInfo).toBe(goodFeatureInfo);
         expect(fn).toHaveBeenCalledTimes(1);
+        expect(fn.mock.calls[0][0]).toBe(goodFeatureInfo.features);
+        expect(fn.mock.calls[0][1]).toBe(goodFeatureInfo.layer);
+        expect(fn.mock.calls[0][2]).toBe(goodFeatureInfo.coordinate);
         expect(fn2).toHaveBeenCalledTimes(1);
+        expect(fn2.mock.calls[0][0]).toBe(goodFeatureInfo.features);
+        expect(fn2.mock.calls[0][1]).toBe(goodFeatureInfo.layer);
+        expect(fn2.mock.calls[0][2]).toBe(goodFeatureInfo.coordinate);
         done();
       });
     });
@@ -599,7 +620,13 @@ describe('Layer', () => {
         expect(spy).toHaveBeenCalledWith(evt.coordinate);
         expect(featureInfo).toBe(goodFeatureInfo);
         expect(fn).toHaveBeenCalledTimes(1);
+        expect(fn.mock.calls[0][0]).toBe(goodFeatureInfo.features);
+        expect(fn.mock.calls[0][1]).toBe(goodFeatureInfo.layer);
+        expect(fn.mock.calls[0][2]).toBe(goodFeatureInfo.coordinate);
         expect(fn2).toHaveBeenCalledTimes(1);
+        expect(fn2.mock.calls[0][0]).toBe(goodFeatureInfo.features);
+        expect(fn2.mock.calls[0][1]).toBe(goodFeatureInfo.layer);
+        expect(fn2.mock.calls[0][2]).toBe(goodFeatureInfo.coordinate);
         done();
       });
     });

package/common/mixins/TrajservLayerMixin.js

@@ -302,7 +302,6 @@ const TrajservLayerMixin = (TrackerLayer) =>
     }
 
     stop() {
-      this.journeyId = null;
       this.stopUpdateTrajectories();
       this.abortFetchTrajectories();
       super.stop();
@@ -314,10 +313,8 @@ const TrajservLayerMixin = (TrackerLayer) =>
      * @private
      * @override
      */
-    onFeatureHover(featureInfo) {
-      const {
-        features: [feature],
-      } = featureInfo;
+    onFeatureHover(features, layer, coordinate) {
+      const [feature] = features;
       let id = null;
       if (feature) {
         id = feature.get('id');
@@ -327,7 +324,7 @@ const TrajservLayerMixin = (TrackerLayer) =>
         this.hoverVehicleId = id;
         this.renderTrajectories();
       }
-      super.onFeatureHover(featureInfo);
+      super.onFeatureHover(features, layer, coordinate);
     }
 
     /**
@@ -336,20 +333,78 @@ const TrajservLayerMixin = (TrackerLayer) =>
      * @private
      * @override
      */
-    onFeatureClick(featureInfo) {
-      const {
-        features: [feature],
-      } = featureInfo;
+    onFeatureClick(features, layer, coordinate) {
+      const [feature] = features;
       if (feature) {
         /** @ignore */
         this.selectedVehicleId = feature.get('id');
         /** @ignore */
         this.journeyId = feature.get('journeyIdentifier');
-        this.updateTrajectoryStations(this.selectedVehicleId);
+        this.highlightTrajectory();
       } else {
         this.selectedVehicleId = null;
+        this.journeyId = null;
       }
-      super.onFeatureClick(featureInfo);
+      super.onFeatureClick(features, layer, coordinate);
+    }
+
+    /**
+     * Highlight the trajectory of journey.
+     * @private
+     */
+    highlightTrajectory() {
+      const { selectedVehicleId, journeyId } = this;
+      const promises = [
+        // Fetch stations information with a trajectory id.
+        this.api.fetchTrajectoryStations(
+          this.getParams({
+            id: selectedVehicleId,
+            time: getUTCTimeString(new Date()),
+          }),
+        ),
+        // Full trajectory.
+        this.api.fetchTrajectoryById(
+          this.getParams({
+            id: journeyId,
+            time: getUTCTimeString(new Date()),
+          }),
+        ),
+      ];
+
+      Promise.all(promises)
+        .then(([trajStations, fullTraj]) => {
+          const stationsCoords = [];
+          if (trajStations) {
+            trajStations.stations.forEach((station) => {
+              stationsCoords.push(station.coordinates);
+            });
+          }
+
+          if (fullTraj) {
+            const { p: multiLine, t, c: color } = fullTraj;
+            const lineCoords = [];
+            multiLine.forEach((line) => {
+              line.forEach((point) => {
+                lineCoords.push([point.x, point.y]);
+              });
+            });
+
+            const lineColor = color ? `#${color}` : getBgColor(t);
+            // Don't allow white lines, use red instead.
+            const vehiculeColor = /#ffffff/i.test(lineColor)
+              ? '#ff0000'
+              : lineColor;
+
+            this.drawFullTrajectory(
+              stationsCoords,
+              lineCoords,
+              this.useDelayStyle ? '#a0a0a0' : vehiculeColor,
+            );
+          }
+        })
+        .catch(() => {
+          this.drawFullTrajectory();
+        });
     }
 
     updateFilters() {
@@ -370,14 +425,6 @@ const TrajservLayerMixin = (TrackerLayer) =>
       }
     }
 
-    updateTrajectoryStations(trajId) {
-      const params = this.getParams({
-        id: trajId,
-        time: getUTCTimeString(new Date()),
-      });
-      return this.api.fetchTrajectoryStations(params);
-    }
-
     getParams(extraParams = {}) {
       // The 5 seconds more are used as a buffer if the request takes too long.
       const requestIntervalInMs = (this.requestIntervalSeconds + 5) * 1000;
@@ -464,6 +511,16 @@ const TrajservLayerMixin = (TrackerLayer) =>
         });
     }
 
+    /**
+     * Draw the trajectory as a line with points for each stop.
+     *
+     * @param {Array} stationsCoords Array of station coordinates in EPSG:4326.
+     * @param {Array<ol/coordinate~Coordinate>} lineCoords A list of coordinates in EPSG:3857.
+     * @param {string} color The color of the line.
+     * @private
+     */
+    drawFullTrajectory(stationsCoords, lineCoords, color) {}
+
     /**
      * Define the style of the vehicle.
      *

package/common/mixins/TralisLayerMixin.js

@@ -128,10 +128,8 @@ const TralisLayerMixin = (TrackerLayer) =>
      * @private
      * @override
      */
-    onFeatureHover(featureInfo) {
-      const {
-        features: [feature],
-      } = featureInfo;
+    onFeatureHover(features, layer, coordinate) {
+      const [feature] = features;
       let id = null;
       if (feature) {
         id = feature.get('train_id');
@@ -141,7 +139,7 @@ const TralisLayerMixin = (TrackerLayer) =>
         this.hoverVehicleId = id;
         this.renderTrajectories();
       }
-      super.onFeatureHover(featureInfo);
+      super.onFeatureHover(features, layer, coordinate);
     }
 
     /**
@@ -150,17 +148,16 @@ const TralisLayerMixin = (TrackerLayer) =>
      * @private
      * @override
      */
-    onFeatureClick(featureInfo) {
-      const {
-        features: [feature],
-      } = featureInfo;
+    onFeatureClick(features, layer, coordinate) {
+      const [feature] = features;
       if (feature) {
         /** @ignore */
         this.selectedVehicleId = feature.get('train_id');
+        this.highlightTrajectory();
       } else {
         this.selectedVehicleId = null;
       }
-      super.onFeatureClick(featureInfo);
+      super.onFeatureClick(features, layer, coordinate);
     }
 
     onMessage(data) {
@@ -197,6 +194,38 @@ const TralisLayerMixin = (TrackerLayer) =>
       }
     }
 
+    /**
+     * 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.
+     *
+     * @private
+     * @override
+     */
+    highlightTrajectory() {
+      // 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.api.getStopSequence(this.selectedVehicleId, this.mode),
+        this.api.getFullTrajectory(this.selectedVehicleId, this.mode),
+      ];
+
+      return Promise.all(promises).then(([stopSequence, fullTrajectory]) => {
+        console.log(
+          `stopSequence for ${this.selectedVehicleId}:`,
+          stopSequence,
+        );
+        console.log(
+          `fullTrajectory for ${this.selectedVehicleId}:`,
+          fullTrajectory,
+        );
+        const response = {
+          stopSequence,
+          fullTrajectory,
+        };
+        return response;
+      });
+    }
+
     addTrajectory(id, traj, addOnTop) {
       const idx = this.trajectories.findIndex((t) => t.train_id === id);
       const { time_intervals: timeIntervals } = traj;

package/common/utils/index.js

@@ -1,3 +1,4 @@
 export { default as getMapboxStyleUrl } from './getMapboxStyleUrl';
 export { default as getMapboxMapCopyrights } from './getMapboxMapCopyrights';
 export { default as removeDuplicate } from './removeDuplicate';
+export { default as trackerStyle } from './trackerStyle';

package/common/utils/trackerStyle.js

@@ -0,0 +1,183 @@
+import {
+  getRadius,
+  getBgColor,
+  getDelayColor,
+  getDelayText,
+  getTextColor,
+  getTextSize,
+} from '../trackerConfig';
+
+const styleCache = {};
+
+const style = (trajectory, viewState, trackerLayer) => {
+  const {
+    hoverVehicleId,
+    selectedVehicleId,
+    useDelayStyle,
+    delayOutlineColor,
+    delayDisplay,
+  } = trackerLayer;
+
+  const { zoom, pixelRatio } = viewState;
+
+  let { line = {} } = trajectory;
+
+  const {
+    id,
+    delay,
+    type = 'Rail',
+    cancelled = false,
+    operatorProvidesRealtime = 'no',
+  } = trajectory;
+
+  if (!line) {
+    line = {};
+  }
+
+  const { name = 'I', color = '000000' } = line;
+  let { text_color: textColor } = line;
+  if (!textColor) {
+    textColor = '#ffffff';
+  }
+  const z = Math.min(Math.floor(zoom || 1), 16);
+  const hover = hoverVehicleId === id;
+  const selected = selectedVehicleId === id;
+  let key = `${z}${type}${name}${operatorProvidesRealtime}${delay}${hover}${selected}${cancelled}`;
+
+  // Calcul the radius of the circle
+  let radius = getRadius(type, z) * pixelRatio;
+  const isDisplayStrokeAndDelay = radius >= 7 * pixelRatio;
+  if (hover || selected) {
+    radius = isDisplayStrokeAndDelay
+      ? radius + 5 * pixelRatio
+      : 14 * pixelRatio;
+  }
+  const mustDrawText = radius > 10 * pixelRatio;
+
+  // Optimize the cache key, very important in high zoom level
+  if (!mustDrawText) {
+    key = `${z}${type}${color}${operatorProvidesRealtime}${delay}${hover}${selected}${cancelled}`;
+  }
+
+  if (!styleCache[key]) {
+    if (radius === 0) {
+      styleCache[key] = null;
+      return null;
+    }
+
+    const margin = 1 * pixelRatio;
+    const radiusDelay = radius + 2;
+    const markerSize = radius * 2;
+
+    const canvas = document.createElement('canvas');
+    // add space for delay information
+    canvas.width = radiusDelay * 2 + margin * 2 + 100 * pixelRatio;
+    canvas.height = radiusDelay * 2 + margin * 2 + 100 * pixelRatio;
+    const ctx = canvas.getContext('2d');
+    const origin = canvas.width / 2;
+
+    if (isDisplayStrokeAndDelay && delay !== null) {
+      // Draw circle delay background
+      ctx.save();
+      ctx.beginPath();
+      ctx.arc(origin, origin, radiusDelay, 0, 2 * Math.PI, false);
+      ctx.fillStyle = getDelayColor(delay, cancelled);
+      ctx.filter = 'blur(1px)';
+      ctx.fill();
+      ctx.restore();
+    }
+
+    // Show delay if feature is hovered or if delay is above 5mins.
+    if (
+      isDisplayStrokeAndDelay &&
+      (hover || delay >= delayDisplay || cancelled)
+    ) {
+      // Draw delay text
+      ctx.save();
+      ctx.textAlign = 'left';
+      ctx.textBaseline = 'middle';
+      ctx.font = `bold ${Math.max(
+        cancelled ? 19 : 14,
+        Math.min(cancelled ? 19 : 17, radius * 1.2),
+      )}px arial, sans-serif`;
+      ctx.fillStyle = getDelayColor(delay, cancelled, true);
+
+      ctx.strokeStyle = delayOutlineColor;
+      ctx.lineWidth = 1.5 * pixelRatio;
+      const delayText = getDelayText(delay, cancelled);
+      ctx.strokeText(delayText, origin + radiusDelay + margin, origin);
+      ctx.fillText(delayText, origin + radiusDelay + margin, origin);
+      ctx.restore();
+    }
+
+    // Draw colored circle with black border
+    let circleFillColor;
+    if (useDelayStyle) {
+      circleFillColor = getDelayColor(delay, cancelled);
+    } else {
+      circleFillColor = `#${color}` || getBgColor(type);
+    }
+
+    ctx.save();
+    if (isDisplayStrokeAndDelay || hover || selected) {
+      ctx.lineWidth = 1 * pixelRatio;
+      ctx.strokeStyle = '#000000';
+    }
+    ctx.fillStyle = circleFillColor;
+    ctx.beginPath();
+    ctx.arc(origin, origin, radius, 0, 2 * Math.PI, false);
+    ctx.fill();
+    // Dashed outline if a provider provides realtime but we don't use it.
+    if (
+      isDisplayStrokeAndDelay &&
+      useDelayStyle &&
+      delay === null &&
+      operatorProvidesRealtime === 'yes'
+    ) {
+      ctx.setLineDash([5, 3]);
+    }
+    if (isDisplayStrokeAndDelay || hover || selected) {
+      ctx.stroke();
+    }
+    ctx.restore();
+
+    // Draw text in the circle
+    if (mustDrawText) {
+      const fontSize = Math.max(radius, 10 * pixelRatio);
+      const textSize = getTextSize(ctx, markerSize, name, fontSize);
+
+      // Draw a stroke to the text only if a provider provides realtime but we don't use it.
+      if (
+        useDelayStyle &&
+        delay === null &&
+        operatorProvidesRealtime === 'yes'
+      ) {
+        ctx.save();
+        ctx.textBaseline = 'middle';
+        ctx.textAlign = 'center';
+        ctx.font = `bold ${textSize + 2}px Arial`;
+        ctx.strokeStyle = circleFillColor;
+        ctx.strokeText(name, origin, origin);
+        ctx.restore();
+      }
+
+      // Draw a text
+      ctx.save();
+      ctx.textBaseline = 'middle';
+      ctx.textAlign = 'center';
+      ctx.fillStyle = !useDelayStyle
+        ? textColor || getTextColor(type)
+        : '#000000';
+      ctx.font = `bold ${textSize}px Arial`;
+      ctx.strokeStyle = circleFillColor;
+      ctx.strokeText(name, origin, origin);
+      ctx.fillText(name, origin, origin);
+      ctx.restore();
+    }
+
+    styleCache[key] = canvas;
+  }
+
+  return styleCache[key];
+};
+export default style;