mobility-toolbox-js 2.0.0 → 2.0.1-beta.13

package/common/Tracker.js

@@ -1,43 +1,10 @@
-/* eslint-disable no-param-reassign */
-import { compose, apply, create } from 'ol/transform';
-import getVehiclePosition from './utils/getVehiclePosition';
-
-/**
- * Tracker. This class stores and allows to draw trajectories on a canvas.
- * @class
- * @param {Object} options
- * @private
- */
+import { compose, apply, create } from "ol/transform";
+import getVehiclePosition from "./utils/getVehiclePosition";
 export default class Tracker {
-  /**
-   * @private
-   */
   constructor(options) {
-    /**
-     * Function use to style the features displayed.
-     * @type {function}
-     */
     this.style = options.style;
-
-    // we draw directly on the canvas since openlayers is too slow.
-    /**
-     * HTML <canvas> element.
-     * @type {Canvas}
-     */
-    this.canvas = options.canvas || document.createElement('canvas');
+    this.canvas = options.canvas || document.createElement("canvas");
   }
-
-  /**
-   * Draw all the trajectories available to the canvas.
-   * @param {ViewState} trajectories An array of trajectories.
-   * @param {ViewState} viewState The view state of the map.
-   * @param {boolean} options.hoverVehicleId The id of the vehicle to highlight.
-   * @param {boolean} options.selectedVehicleId The id of the vehicle to select.
-   * @param {boolean} options.noInterpolate If true trajectories are not interpolated but
-   *   drawn at the last known coordinate. Use this for performance optimization
-   *   during map navigation.
-   * @private
-   */
   renderTrajectories(trajectories, viewState, options) {
     const {
       time = Date.now(),
@@ -45,44 +12,25 @@ export default class Tracker {
       center,
       resolution,
       rotation = 0,
-      pixelRatio,
+      pixelRatio
     } = viewState;
     const {
       noInterpolate = false,
       hoverVehicleId,
-      selectedVehicleId,
+      selectedVehicleId
     } = options;
-
     const { canvas } = this;
-    const context = canvas.getContext('2d');
+    const context = canvas.getContext("2d");
     context.clearRect(0, 0, canvas.width, canvas.height);
-
     const [width, height] = size;
-    if (
-      width &&
-      height &&
-      (canvas.width !== width || canvas.height !== height)
-    ) {
+    if (width && height && (canvas.width !== width || canvas.height !== height)) {
       [canvas.width, canvas.height] = [width * pixelRatio, height * pixelRatio];
     }
-
-    const coordinateToPixelTransform = compose(
-      create(),
-      size[0] / 2,
-      size[1] / 2,
-      1 / resolution,
-      -1 / resolution,
-      -rotation,
-      -center[0],
-      -center[1],
-    );
-
-    // Offscreen canvas has not style attribute
+    const coordinateToPixelTransform = compose(create(), size[0] / 2, size[1] / 2, 1 / resolution, -1 / resolution, -rotation, -center[0], -center[1]);
     if (canvas.style) {
       canvas.style.width = `${canvas.width / pixelRatio}px`;
       canvas.style.height = `${canvas.height / pixelRatio}px`;
     }
-
     let hoverVehicleImg;
     let hoverVehiclePx;
     let hoverVehicleWidth;
@@ -92,106 +40,54 @@ export default class Tracker {
     let selectedVehicleWidth;
     let selectedVehicleHeight;
     let nbRendered = 0;
-
     for (let i = trajectories.length - 1; i >= 0; i -= 1) {
       const trajectory = trajectories[i];
-
-      // We simplify the trajectory object
       const { train_id: id, timeOffset } = trajectory.properties;
-      // We set the rotation and the timeFraction of the trajectory (used by tralis).
-      // if rotation === null that seems there is no rotation available.
-      const { coord, rotation: rotationIcon } = getVehiclePosition(
-        time - (timeOffset || 0),
-        trajectory,
-        noInterpolate,
-      );
-
-      // We store  the current vehicle position to the trajectory.
+      const { coord, rotation: rotationIcon } = getVehiclePosition(time - (timeOffset || 0), trajectory, noInterpolate);
       trajectories[i].properties.coordinate = coord;
       trajectories[i].properties.rotation = rotationIcon;
-
       if (!coord) {
-        // eslint-disable-next-line no-continue
         continue;
       }
-
       let px = apply(coordinateToPixelTransform, [...coord]);
       if (!px) {
-        // eslint-disable-next-line no-continue
         continue;
       }
-
       px = px.map((p) => p * pixelRatio);
-
-      if (
-        px[0] < 0 ||
-        px[0] > canvas.width ||
-        px[1] < 0 ||
-        px[1] > canvas.height
-      ) {
-        // eslint-disable-next-line no-continue
+      if (px[0] < 0 || px[0] > canvas.width || px[1] < 0 || px[1] > canvas.height) {
         continue;
       }
-
       const vehicleImg = this.style(trajectory, viewState, options);
       if (!vehicleImg) {
-        // eslint-disable-next-line no-continue
         continue;
       }
-
       nbRendered += 1;
-
       const imgWidth = vehicleImg.width;
       const imgHeight = vehicleImg.height;
-
       if (hoverVehicleId !== id && selectedVehicleId !== id) {
-        context.drawImage(
-          vehicleImg,
-          px[0] - imgWidth / 2,
-          px[1] - imgHeight / 2,
-          imgWidth,
-          imgHeight,
-        );
+        context.drawImage(vehicleImg, px[0] - imgWidth / 2, px[1] - imgHeight / 2, imgWidth, imgHeight);
       }
-
       if (hoverVehicleId && hoverVehicleId === id) {
-        // Store the canvas to draw it at the end
         hoverVehicleImg = vehicleImg;
         hoverVehiclePx = px;
         hoverVehicleWidth = imgWidth;
         hoverVehicleHeight = imgHeight;
       }
-
       if (selectedVehicleId && selectedVehicleId === id) {
-        // Store the canvas to draw it at the end
         selectedVehicleImg = vehicleImg;
         selectedVehiclePx = px;
         selectedVehicleWidth = imgWidth;
         selectedVehicleHeight = imgHeight;
       }
     }
-
     if (selectedVehicleImg) {
-      context.drawImage(
-        selectedVehicleImg,
-        selectedVehiclePx[0] - selectedVehicleWidth / 2,
-        selectedVehiclePx[1] - selectedVehicleHeight / 2,
-        selectedVehicleWidth,
-        selectedVehicleHeight,
-      );
+      context.drawImage(selectedVehicleImg, selectedVehiclePx[0] - selectedVehicleWidth / 2, selectedVehiclePx[1] - selectedVehicleHeight / 2, selectedVehicleWidth, selectedVehicleHeight);
     }
-
     if (hoverVehicleImg) {
-      context.drawImage(
-        hoverVehicleImg,
-        hoverVehiclePx[0] - hoverVehicleWidth / 2,
-        hoverVehiclePx[1] - hoverVehicleHeight / 2,
-        hoverVehicleWidth,
-        hoverVehicleHeight,
-      );
+      context.drawImage(hoverVehicleImg, hoverVehiclePx[0] - hoverVehicleWidth / 2, hoverVehiclePx[1] - hoverVehicleHeight / 2, hoverVehicleWidth, hoverVehicleHeight);
     }
     return {
-      nbTrajectoriesRendered: nbRendered,
+      nbTrajectoriesRendered: nbRendered
     };
   }
 }

package/common/api/HttpAPI.js

@@ -0,0 +1,30 @@
+import qs from "query-string";
+import BaseObject from "ol/Object";
+class HttpApi extends BaseObject {
+  constructor(options = {}) {
+    super();
+    this.url = options.url;
+    this.apiKey = options.apiKey;
+  }
+  fetch(path, params, config) {
+    const urlParams = { ...params || {}, key: this.apiKey };
+    const clone = { ...urlParams };
+    Object.keys(urlParams).forEach((key) => (clone[key] === void 0 || clone[key] === null) && delete clone[key]);
+    if (!this.apiKey) {
+      return Promise.reject(new Error(`No apiKey defined for request to ${this.url}`));
+    }
+    return fetch(`${this.url}${path || ""}?${qs.stringify(clone)}`, config).then((response) => {
+      try {
+        return response.json().then((data) => {
+          if (data.error) {
+            throw new Error(data.error);
+          }
+          return data;
+        });
+      } catch (err) {
+        return Promise.reject(new Error(err));
+      }
+    });
+  }
+}
+export default HttpApi;

package/common/api/HttpAPI.test.js

@@ -0,0 +1,50 @@
+import fetch from "jest-fetch-mock";
+import API from "./HttpAPI";
+let api;
+describe("HttpAPI", () => {
+  beforeEach(() => {
+    global.fetch = fetch;
+    fetch.resetMocks();
+    api = new API({ url: "https://foo.ch", apiKey: "apiKey" });
+  });
+  describe("#fetch", () => {
+    test("should success", () => {
+      fetch.mockResponseOnce(JSON.stringify({ foo: "bar" }));
+      return api.fetch("/path", {
+        q: "Bern",
+        fooUndefined: void 0,
+        fooNull: null,
+        fooEmpty: ""
+      }).then((response) => {
+        expect(fetch.mock.calls[0][0]).toEqual("https://foo.ch/path?fooEmpty=&key=apiKey&q=Bern");
+        expect(response).toEqual({ foo: "bar" });
+      });
+    });
+    describe("should display error message", () => {
+      test("reject error", (done) => {
+        fetch.mockRejectOnce(new Error("Fake error message"));
+        return api.fetch().catch((err) => {
+          expect(err.name).toEqual("Error");
+          expect(err.message).toEqual("Fake error message");
+          done();
+        });
+      });
+      test("if the response is invalid json", (done) => {
+        fetch.mockResponseOnce("invalid json");
+        api.fetch().catch((err) => {
+          expect(err.name).toEqual("FetchError");
+          expect(err.message).toEqual("invalid json response body at  reason: Unexpected token i in JSON at position 0");
+          done();
+        });
+      });
+      test("if the response contains an error message", (done) => {
+        fetch.mockResponseOnce('{"error":"foo2"}');
+        api.fetch().catch((err) => {
+          expect(err.name).toEqual("Error");
+          expect(err.message).toEqual("foo2");
+          done();
+        });
+      });
+    });
+  });
+});

package/common/api/WebSocketAPI.js

@@ -0,0 +1,175 @@
+class WebSocketApi {
+  constructor() {
+    this.defineProperties();
+  }
+  defineProperties() {
+    Object.defineProperties(this, {
+      closed: {
+        get: () => !!(this.websocket && this.websocket.readyState === this.websocket.CLOSED)
+      },
+      closing: {
+        get: () => !!(this.websocket && this.websocket.readyState === this.websocket.CLOSING)
+      },
+      connecting: {
+        get: () => !!(this.websocket && this.websocket.readyState === this.websocket.CONNECTING)
+      },
+      open: {
+        get: () => !!(this.websocket && this.websocket.readyState === this.websocket.OPEN)
+      },
+      messagesOnOpen: {
+        value: [],
+        writable: true
+      },
+      subscriptions: {
+        value: [],
+        writable: true
+      },
+      subscribed: {
+        value: {},
+        writable: true
+      }
+    });
+  }
+  static getRequestString(method, params) {
+    let reqStr = `${method} ${params.channel}`;
+    reqStr += params.args ? ` ${params.args}` : "";
+    reqStr += params.id ? ` ${params.id}` : "";
+    return reqStr.trim();
+  }
+  connect(url, onOpen = () => {
+  }) {
+    if (this.websocket && !this.closed) {
+      this.websocket.close();
+    }
+    this.websocket = new WebSocket(url);
+    if (!this.open) {
+      this.websocket.addEventListener("open", () => {
+        onOpen();
+        this.subscribePreviousSubscriptions();
+      });
+    } else {
+      onOpen();
+      this.subscribePreviousSubscriptions();
+    }
+  }
+  close() {
+    if (this.websocket) {
+      this.websocket.onclose = null;
+      this.websocket.close();
+      this.websocket = null;
+      this.messagesOnOpen = [];
+    }
+  }
+  send(message) {
+    if (!this.websocket) {
+      return;
+    }
+    const send = () => {
+      this.websocket.send(message);
+    };
+    if (!this.open) {
+      if (!this.messagesOnOpen.includes(message)) {
+        this.messagesOnOpen.push(message);
+        this.websocket.addEventListener("open", () => {
+          this.messagesOnOpen = [];
+          send();
+        });
+        this.websocket.addEventListener("close", () => {
+          this.messagesOnOpen = [];
+        });
+      }
+    } else if (!this.messagesOnOpen.includes(message)) {
+      send();
+    }
+  }
+  listen(params, cb, errorCb) {
+    this.unlisten(params, cb);
+    const onMessage = (evt) => {
+      let data = {};
+      try {
+        data = JSON.parse(evt.data);
+      } catch (err) {
+        console.error("WebSocket: unable to parse JSON data", err, evt.data);
+      }
+      let source = params.channel;
+      source += params.args ? ` ${params.args}` : "";
+      const contents = data.source === "buffer" ? data.content : [data];
+      contents.forEach((content) => {
+        if (content?.source === source && (!params.id || params.id === data.client_reference)) {
+          cb(content);
+        }
+      });
+    };
+    if (this.websocket) {
+      this.websocket.addEventListener("message", onMessage);
+      if (errorCb) {
+        this.websocket.addEventListener("error", errorCb);
+        this.websocket.addEventListener("close", errorCb);
+      }
+    }
+    return { onMessageCb: onMessage, onErrorCb: errorCb };
+  }
+  unlisten(params, cb) {
+    if (!this.websocket) {
+      return;
+    }
+    this.subscriptions.filter((s) => s.params.channel === params.channel && (!cb || s.cb === cb)).forEach(({ onMessageCb, onErrorCb }) => {
+      if (this.websocket) {
+        this.websocket.removeEventListener("message", onMessageCb);
+        if (onErrorCb) {
+          this.websocket.removeEventListener("error", onErrorCb);
+          this.websocket.removeEventListener("close", onErrorCb);
+        }
+      }
+    });
+  }
+  get(params, cb, errorCb) {
+    const reqStr = WebSocketApi.getRequestString("GET", params);
+    this.send(reqStr);
+    this.listen(params, cb, errorCb);
+  }
+  subscribe(params, cb, errorCb, quiet = false) {
+    const { onMessageCb, onErrorCb } = this.listen(params, cb, errorCb);
+    const reqStr = WebSocketApi.getRequestString("", params);
+    const index = this.subscriptions.findIndex((subcr) => params.channel === subcr.params.channel && cb === subcr.cb);
+    const newSubscr = { params, cb, errorCb, onMessageCb, onErrorCb, quiet };
+    if (index > -1) {
+      this.subscriptions[index] = newSubscr;
+    } else {
+      this.subscriptions.push(newSubscr);
+    }
+    if (!this.subscribed[reqStr]) {
+      if (!newSubscr.quiet) {
+        this.send(`GET ${reqStr}`);
+        this.send(`SUB ${reqStr}`);
+      }
+      this.subscribed[reqStr] = true;
+    }
+  }
+  unsubscribe(source, cb) {
+    const toRemove = this.subscriptions.filter((s) => s.params.channel === source && (!cb || s.cb === cb));
+    toRemove.forEach(({ onMessageCb, onErrorCb }) => {
+      if (this.websocket) {
+        this.websocket.removeEventListener("message", onMessageCb);
+        if (onErrorCb) {
+          this.websocket.removeEventListener("error", onErrorCb);
+          this.websocket.removeEventListener("close", onErrorCb);
+        }
+      }
+    });
+    this.subscriptions = this.subscriptions.filter((s) => s.params.channel !== source || cb && s.cb !== cb);
+    if (source && this.subscribed[source] && !this.subscriptions.find((s) => s.params.channel === source) && toRemove.find((subscr) => !subscr.quiet)) {
+      this.send(`DEL ${source}`);
+      this.subscribed[source] = false;
+    }
+  }
+  subscribePreviousSubscriptions() {
+    Object.keys(this.subscribed).forEach((key) => {
+      this.subscribed[key] = false;
+    });
+    [...this.subscriptions].forEach((s) => {
+      this.subscribe(s.params, s.cb, s.errorCb, s.quiet);
+    });
+  }
+}
+export default WebSocketApi;