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

package/src/common/Tracker.js

@@ -1,197 +0,0 @@
-/* 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
- */
-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');
-  }
-
-  /**
-   * 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(),
-      size = [],
-      center,
-      resolution,
-      rotation = 0,
-      pixelRatio,
-    } = viewState;
-    const {
-      noInterpolate = false,
-      hoverVehicleId,
-      selectedVehicleId,
-    } = options;
-
-    const { canvas } = this;
-    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)
-    ) {
-      [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
-    if (canvas.style) {
-      canvas.style.width = `${canvas.width / pixelRatio}px`;
-      canvas.style.height = `${canvas.height / pixelRatio}px`;
-    }
-
-    let hoverVehicleImg;
-    let hoverVehiclePx;
-    let hoverVehicleWidth;
-    let hoverVehicleHeight;
-    let selectedVehicleImg;
-    let selectedVehiclePx;
-    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.
-      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
-        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,
-        );
-      }
-
-      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,
-      );
-    }
-
-    if (hoverVehicleImg) {
-      context.drawImage(
-        hoverVehicleImg,
-        hoverVehiclePx[0] - hoverVehicleWidth / 2,
-        hoverVehiclePx[1] - hoverVehicleHeight / 2,
-        hoverVehicleWidth,
-        hoverVehicleHeight,
-      );
-    }
-    return {
-      nbTrajectoriesRendered: nbRendered,
-    };
-  }
-}

package/src/common/api/api.js

@@ -1,64 +0,0 @@
-import qs from 'query-string';
-import BaseObject from 'ol/Object';
-
-/**
- * Common class to access to a geOps api.
- *
- * @example
- * import { API } from 'mobility-toolbox-js/api';
- *
- * const api = new API({
- *   url: [yourUrl],
- *   apiKey: [yourApiKey]
- * });
- *
- * @classproperty {string} url Url of the service.
- * @classproperty {string} apiKey Api key to access the service.
- */
-class API extends BaseObject {
-  constructor(options = {}) {
-    super();
-    /** @ignore */
-    this.url = options.url;
-
-    /** @ignore */
-    this.apiKey = options.apiKey;
-  }
-
-  /**
-   * Append the apiKey before sending the request.
-   * @ignore
-   */
-  fetch(path, params, config) {
-    // Clean requets parameters, removing undefined and null values.
-    const urlParams = { ...(params || {}), key: this.apiKey };
-    const clone = { ...urlParams };
-    Object.keys(urlParams).forEach(
-      (key) =>
-        (clone[key] === undefined || clone[key] === null) && delete clone[key],
-    );
-    if (!this.apiKey) {
-      // eslint-disable-next-line no-console
-      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 API;

package/src/common/api/api.test.js

@@ -1,68 +0,0 @@
-import fetch from 'jest-fetch-mock';
-import API from './api';
-
-let api;
-
-describe('API', () => {
-  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: undefined,
-          fooNull: null,
-          fooEmpty: '',
-        })
-        .then((response) => {
-          // Correct url
-          expect(fetch.mock.calls[0][0]).toEqual(
-            'https://foo.ch/path?fooEmpty=&key=apiKey&q=Bern',
-          );
-
-          // Correct search result
-          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/src/common/controls/Control.js

@@ -1,146 +0,0 @@
-import BaseObject from 'ol/Object';
-
-/**
- * A class representing a control to display on map.
- *
- * @example
- * const control = new Control();
- *
- * @classproperty {ol/Map~Map|mapboxgl.Map} map - The map which the control refers to.
- * @classproperty {boolean} active - Active the control.
- * @classproperty {HTMLElement} element - The HTML element used to render the control.
- * @classproperty {HTMLElement} target - The HTML element where to render the element property. Default is the map's element. Read only.
- */
-class Control extends BaseObject {
-  /**
-   * Constructor
-   *
-   * @param {Object} [options] Control options.
-   * @param {boolean} [options.active = true] Whether the control is active or not.
-   * @param {HTMLElement} [options.element] The HTML element used to render the control.
-   * @param {HTMLElement} [options.target] The HTML element where to render the element property. Default is the map's element.
-   * @param {function} [options.render] Render function called whenever the control needs to be rerendered.
-   */
-  constructor(options = {}) {
-    super(options);
-    this.defineProperties(options);
-
-    const { active } = {
-      active: options.active !== false,
-      ...options,
-    };
-
-    /**
-     * @ignore
-     */
-    this.active = active;
-  }
-
-  /**
-   * Define control's properties.
-   *
-   * @private
-   */
-  defineProperties(options) {
-    const { target, element, render } = {
-      ...options,
-    };
-
-    Object.defineProperties(this, {
-      active: {
-        get: () => this.get('active'),
-        set: (newActive) => {
-          this.set('active', newActive);
-          if (newActive) {
-            this.activate();
-          } else {
-            this.deactivate();
-          }
-          this.render();
-        },
-      },
-      map: {
-        get: () => this.get('map'),
-        set: (map) => {
-          // Remove previous node.
-          if (this.map && this.element && this.element.parentNode) {
-            this.element.parentNode.removeChild(this.element);
-          }
-
-          // Clean listeners
-          this.deactivate();
-
-          this.set('map', map);
-
-          if (this.map) {
-            // Add new node
-            const targett =
-              this.target ||
-              (this.map.getTargetElement && this.map.getTargetElement()) ||
-              (this.map.getContainer && this.map.getContainer());
-
-            if (!this.element) {
-              this.createDefaultElement();
-            }
-
-            if (this.element) {
-              targett.appendChild(this.element);
-            }
-
-            // Add listeners
-            if (this.active) {
-              this.activate();
-            }
-          }
-          this.render();
-        },
-      },
-      target: {
-        value: target,
-      },
-      element: {
-        value: element,
-        writable: true,
-      },
-      render: {
-        /** @ignore */
-        value: render || this.render,
-        writable: true,
-      },
-    });
-  }
-
-  /**
-   * Add listeners then renders the control.
-   * To be defined in inherited classes.
-   */
-  activate() {
-    this.deactivate();
-  }
-
-  /**
-   * Remove listeners added by activate() function then renders the control.
-   * To be defined in inherited classes.
-   */
-  // eslint-disable-next-line class-methods-use-this
-  deactivate() {}
-
-  /**
-   * The default render function. It renders content in the HTML element.
-   * To be defined in inherited classes.
-   *
-   * @private
-   */
-  render() {}
-
-  /**
-   * The default element to display if this.element is not defined.
-   * To be defined in inherited classes.
-   *
-   * @private
-   */
-  // eslint-disable-next-line class-methods-use-this
-  createDefaultElement() {}
-}
-
-export default Control;

package/src/common/index.js

@@ -1,5 +0,0 @@
-export { default as Tracker } from './Tracker';
-export * as trackerConfig from './trackerConfig';
-
-export * from './utils';
-export * from './styles';