mobility-toolbox-js 2.3.9 → 2.3.10

package/src/common/utils/sortByDelay.ts

@@ -0,0 +1,29 @@
+import type { RealtimeTrajectory } from '../../api/typedefs';
+
+/** @private */
+const sortByDelay = (
+  traj1: RealtimeTrajectory,
+  traj2: RealtimeTrajectory,
+): number => {
+  const props1 = traj1.properties;
+  const props2 = traj2.properties;
+
+  if (props1.delay === null && props2.delay !== null) {
+    return 1;
+  }
+  if (props2.delay === null && props1.delay !== null) {
+    return -1;
+  }
+
+  // We put cancelled train inbetween green and yellow trains
+  // >=180000ms corresponds to yellow train
+  if (props1.cancelled && !props2.cancelled) {
+    return props2.delay < 180000 ? -1 : 1;
+  }
+  if (props2.cancelled && !props1.cancelled) {
+    return props1.delay < 180000 ? 1 : -1;
+  }
+  return props2.delay - props1.delay;
+};
+
+export default sortByDelay;

package/src/common/utils/timeUtils.test.js

@@ -0,0 +1,16 @@
+import { getUTCDateString, getUTCTimeString } from './timeUtils';
+
+describe('timeUtils', () => {
+  test('getUTCDateString should be correct.', () => {
+    expect(getUTCDateString(new Date(2020, 5, 30))).toBe('20200630');
+    expect(
+      getUTCDateString(new Date('January 1, 2021 00:15:30 GMT+2:00')),
+    ).toBe('20201231');
+  });
+
+  test('getUTCTimeString should be correct.', () => {
+    expect(getUTCTimeString(new Date(2020, 5, 30, 11, 5, 1, 123))).toBe(
+      '11:5:1.123',
+    );
+  });
+});

package/src/common/utils/timeUtils.ts

@@ -0,0 +1,45 @@
+/**
+ * Get a Date object as UTC date string .
+ * ex: 2019 09 01
+ * @private
+ */
+export const getUTCDateString = (now = new Date()): string => {
+  let month = (now.getUTCMonth() + 1).toString();
+  month = month.length === 1 ? `0${month}` : month;
+  let day = now.getUTCDate().toString();
+  day = day.length === 1 ? `0${day}` : day;
+
+  return [now.getUTCFullYear(), month, day].join('');
+};
+
+/**
+ * Get the UTC time string of Date object.
+ * ex: 09:05:01.123
+ * @private
+ */
+export const getUTCTimeString = (date: Date): string =>
+  [
+    date.getUTCHours(),
+    date.getUTCMinutes(),
+    `${date.getUTCSeconds()}.${date.getUTCMilliseconds()}`,
+  ].join(':');
+
+/**
+ * Returns a string representation of a number, with a zero if the number is lower than 10.
+ * @private
+ */
+export const pad = (integer: number): string =>
+  integer < 10 ? `0${integer}` : `${integer}`;
+
+/**
+ * Returns a 'hh:mm' string from a time in ms.
+ * @param {Number} timeInMs Time in milliseconds.
+ * @private
+ */
+export const getHoursAndMinutes = (timeInMs: number): string => {
+  if (!timeInMs || timeInMs <= 0) {
+    return '';
+  }
+  const date = new Date(timeInMs);
+  return `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+};

package/{iife.js → src/iife.js}

@@ -1,5 +1,7 @@
 import mbt from './index';
+
 if (typeof window !== 'undefined') {
-    window.mbt = mbt;
+  window.mbt = mbt;
 }
+
 export default mbt;

package/src/index.js

@@ -0,0 +1,10 @@
+import * as ol from './ol';
+import * as mapbox from './mapbox';
+
+export * as ol from './ol';
+export * as mapbox from './mapbox';
+
+export default {
+  ol,
+  mapbox,
+};

package/{mapbox/controls/CopyrightControl.js → src/mapbox/controls/CopyrightControl.ts}

@@ -1,5 +1,6 @@
 import CopyrightControlCommon from '../../common/controls/CopyrightControlCommon';
 import { getMapboxMapCopyrights } from '../../common/utils';
+
 /**
  * Display layer's copyrights.
  *
@@ -21,28 +22,32 @@ import { getMapboxMapCopyrights } from '../../common/utils';
  * @extends {CopyrightControlCommon}
  */
 class CopyrightControl extends CopyrightControlCommon {
-    constructor(options) {
-        super(options);
-        this.render = this.render.bind(this);
+  constructor(options: any) {
+    super(options);
+    this.render = this.render.bind(this);
+  }
+
+  activate() {
+    super.activate();
+    if (this.map) {
+      this.map.on('sourcedata', this.render);
+      this.map.on('styledata', this.render);
+      this.map.on('idle', this.render);
     }
-    activate() {
-        super.activate();
-        if (this.map) {
-            this.map.on('sourcedata', this.render);
-            this.map.on('styledata', this.render);
-            this.map.on('idle', this.render);
-        }
-    }
-    deactivate() {
-        if (this.map) {
-            this.map.off('sourcedata', this.render);
-            this.map.off('styledata', this.render);
-            this.map.off('idle', this.render);
-        }
-        super.deactivate();
-    }
-    getCopyrights() {
-        return getMapboxMapCopyrights(this.map);
+  }
+
+  deactivate() {
+    if (this.map) {
+      this.map.off('sourcedata', this.render);
+      this.map.off('styledata', this.render);
+      this.map.off('idle', this.render);
     }
+    super.deactivate();
+  }
+
+  getCopyrights() {
+    return getMapboxMapCopyrights(this.map);
+  }
 }
+
 export default CopyrightControl;

package/src/mapbox/layers/Layer.test.js

@@ -0,0 +1,217 @@
+import { Map } from 'maplibre-gl';
+import { toLonLat } from 'ol/proj';
+import Layer from './Layer';
+
+let map;
+let mapElement;
+
+describe('Layer', () => {
+  beforeEach(() => {
+    mapElement = document.createElement('div');
+    const { style } = mapElement;
+    style.position = 'absolute';
+    style.left = '0px';
+    style.top = '0px';
+    style.width = '400px';
+    style.height = '400px';
+    mapElement.setAttribute('id', 'map');
+    document.body.appendChild(mapElement);
+    map = new Map({
+      container: document.getElementById('map'),
+      style: `path/to/style`,
+      center: toLonLat([831634, 5933959]),
+      zoom: 9,
+    });
+  });
+
+  afterEach(() => {
+    document.body.removeChild(mapElement);
+  });
+
+  test('should initialize.', () => {
+    const layer = new Layer({ name: 'Layer' });
+    expect(layer).toBeInstanceOf(Layer);
+  });
+
+  test('should be visible by default.', () => {
+    const layer = new Layer({ name: 'Layer' });
+    expect(layer.visible).toBe(true);
+  });
+
+  test('should be invisible if defined.', () => {
+    const layer = new Layer({ name: 'Layer', visible: false });
+    expect(layer.visible).toBe(false);
+  });
+
+  test('should be invisible if set.', () => {
+    const layer = new Layer({ name: 'Layer' });
+    layer.visible = false;
+    expect(layer.visible).toBe(false);
+  });
+
+  test('should visibility stay unchanged', () => {
+    const layer = new Layer({ name: 'Layer', visible: false });
+    layer.visible = false;
+    expect(layer.visible).toBe(false);
+  });
+
+  test('should return its name.', () => {
+    const layer = new Layer({ name: 'Layer', visible: false });
+    expect(layer.name).toEqual('Layer');
+  });
+
+  test('should call terminate on initialization.', () => {
+    const layer = new Layer({ name: 'Layer' });
+    const spy = jest.spyOn(layer, 'detachFromMap');
+    layer.attachToMap(map);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  test('should listen for click/hover events when layer is visible by default then should not when hidden.', async () => {
+    global.console.error = jest.fn();
+    const layer = new Layer({ name: 'Layer' });
+    expect(layer.visible).toBe(true);
+    const spy = jest.fn();
+    const spy2 = jest.fn();
+    layer.onHover(spy);
+    layer.onClick(spy2);
+    layer.attachToMap(map);
+    expect(spy).toHaveBeenCalledTimes(0);
+    expect(spy2).toHaveBeenCalledTimes(0);
+
+    await map.fire('mousemove', {
+      type: 'mousemove',
+      lngLat: { toArray: () => [0, 0] },
+      coordinate: [0, 0],
+    });
+    await map.fire('click', {
+      type: 'click',
+      lngLat: { toArray: () => [0, 0] },
+    });
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy2).toHaveBeenCalledTimes(1);
+    spy.mockReset();
+    spy2.mockReset();
+
+    layer.visible = false;
+    await map.fire('mousemove', {
+      type: 'mousemove',
+      lngLat: { toArray: () => [0, 0] },
+    });
+    await map.fire('click', {
+      type: 'click',
+      lngLat: { toArray: () => [0, 0] },
+    });
+    expect(spy).toHaveBeenCalledTimes(0);
+    expect(spy2).toHaveBeenCalledTimes(0);
+    global.console.error.mockRestore();
+  });
+
+  test('should not listen for click/hover events when layer is not visible by default then should not when visible.', async () => {
+    global.console.error = jest.fn();
+    const layer = new Layer({ name: 'Layer', visible: false });
+    expect(layer.visible).toBe(false);
+    const spy = jest.fn();
+    const spy2 = jest.fn();
+    layer.onHover(spy);
+    layer.onClick(spy2);
+    layer.attachToMap(map);
+    expect(spy).toHaveBeenCalledTimes(0);
+    expect(spy2).toHaveBeenCalledTimes(0);
+
+    await map.fire('mousemove', {
+      type: 'mousemove',
+      lngLat: { toArray: () => [0, 0] },
+      coordinate: [0, 0],
+    });
+    await map.fire('click', {
+      type: 'click',
+      lngLat: { toArray: () => [0, 0] },
+    });
+    expect(spy).toHaveBeenCalledTimes(0);
+    expect(spy2).toHaveBeenCalledTimes(0);
+    spy.mockReset();
+    spy2.mockReset();
+
+    layer.visible = true;
+    await map.fire('mousemove', {
+      type: 'mousemove',
+      lngLat: { toArray: () => [0, 0] },
+      coordinate: [0, 0],
+    });
+    await map.fire('click', {
+      type: 'click',
+      lngLat: { toArray: () => [0, 0] },
+    });
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy2).toHaveBeenCalledTimes(1);
+    global.console.error.mockRestore();
+  });
+
+  test('should not listen for click/hover events  after layer.detachFromMap()', async () => {
+    global.console.error = jest.fn();
+    const layer = new Layer({ name: 'Layer', visible: true });
+    expect(layer.visible).toBe(true);
+    const spy = jest.fn();
+    const spy2 = jest.fn();
+    const spy3 = jest.fn();
+    const spy4 = jest.fn();
+    layer.onHover(spy);
+    layer.onClick(spy2);
+    layer.attachToMap(map);
+
+    // Test event after attached to map
+    layer.onHover(spy3);
+    layer.onClick(spy4);
+
+    expect(spy).toHaveBeenCalledTimes(0);
+    expect(spy2).toHaveBeenCalledTimes(0);
+    expect(spy3).toHaveBeenCalledTimes(0);
+    expect(spy4).toHaveBeenCalledTimes(0);
+
+    await map.fire('mousemove', {
+      type: 'mousemove',
+      lngLat: { toArray: () => [0, 0] },
+      coordinate: [0, 0],
+    });
+    await map.fire('click', {
+      type: 'click',
+      lngLat: { toArray: () => [0, 0] },
+    });
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy2).toHaveBeenCalledTimes(1);
+    expect(spy3).toHaveBeenCalledTimes(1);
+    expect(spy4).toHaveBeenCalledTimes(1);
+    spy.mockReset();
+    spy2.mockReset();
+    spy3.mockReset();
+    spy4.mockReset();
+
+    layer.detachFromMap();
+    await map.fire('mousemove', {
+      type: 'mousemove',
+      lngLat: { toArray: () => [0, 0] },
+      coordinate: [0, 0],
+    });
+    await map.fire('click', {
+      type: 'click',
+      lngLat: { toArray: () => [0, 0] },
+    });
+    expect(spy).toHaveBeenCalledTimes(0);
+    expect(spy2).toHaveBeenCalledTimes(0);
+    expect(spy3).toHaveBeenCalledTimes(0);
+    expect(spy4).toHaveBeenCalledTimes(0);
+    global.console.error.mockRestore();
+  });
+
+  test('should clone', () => {
+    const layer = new Layer({
+      name: 'Layer',
+      copyrights: ['bar'],
+    });
+    const clone = layer.clone({ name: 'clone' });
+    expect(clone).not.toBe(layer);
+    expect(clone.name).toBe('clone');
+    expect(clone).toBeInstanceOf(Layer);
+  });
+});

package/src/mapbox/layers/Layer.ts

@@ -0,0 +1,144 @@
+import { EventsKey } from 'ol/events';
+import { unByKey } from 'ol/Observable';
+import { transformExtent } from 'ol/proj';
+import LayerCommon, {
+  LayerCommonOptions,
+} from '../../common/layers/LayerCommon';
+import userInteractionsMixin from '../../common/mixins/UserInteractionsLayerMixin';
+import { AnyMapboxMap, UserInteractionCallback } from '../../types';
+
+/**
+ * A class representing a layer to display on an OpenLayers map.
+ *
+ * @example
+ * import { Layer } from 'mobility-toolbox-js/ol';
+ *
+ * const layer = new Layer({
+ *   olLayer: ...,
+ * });
+ *
+ * @see <a href="/example/ol-map">Map example</a>
+ *
+ * @classproperty {ol/Map~Map} map - The map where the layer is displayed.
+ * @extends {Layer}
+ */
+class Layer extends userInteractionsMixin(LayerCommon) {
+  options!: LayerCommonOptions;
+
+  onChangeVisibleKey?: EventsKey;
+
+  /* userInteractionsMixin */
+
+  userInteractions?: boolean;
+
+  userClickInteractions?: boolean;
+
+  userHoverInteractions?: boolean;
+
+  userClickCallbacks?: UserInteractionCallback[];
+
+  userHoverCallbacks?: UserInteractionCallback[];
+
+  onUserClickCallback!: () => void;
+
+  onUserMoveCallback!: () => void;
+
+  /**
+   * Initialize the layer and listen to user events.
+   * @param {mapboxgl.Map|maplibregl.Map} map
+   */
+  attachToMap(map: AnyMapboxMap) {
+    super.attachToMap(map);
+
+    if (!this.map) {
+      return;
+    }
+
+    if (this.userInteractions) {
+      this.toggleVisibleListeners();
+      this.onChangeVisibleKey = this.on(
+        // @ts-ignore
+        'change:visible',
+        this.toggleVisibleListeners,
+      );
+    }
+  }
+
+  detachFromMap() {
+    if (this.map) {
+      this.deactivateUserInteractions();
+      // @ts-ignore
+      unByKey(this.onChangeVisibleKey);
+    }
+    super.detachFromMap();
+  }
+
+  activateUserInteractions() {
+    this.deactivateUserInteractions();
+    if (
+      this.map &&
+      this.userInteractions &&
+      this.userClickInteractions &&
+      this.userClickCallbacks?.length
+    ) {
+      this.map.on('click', this.onUserClickCallback);
+    }
+
+    if (
+      this.map &&
+      this.userInteractions &&
+      this.userHoverInteractions &&
+      this.userHoverCallbacks?.length
+    ) {
+      this.map.on('mousemove', this.onUserMoveCallback);
+    }
+  }
+
+  deactivateUserInteractions() {
+    if (this.map) {
+      this.map.off('mousemove', this.onUserMoveCallback);
+      this.map.off('click', this.onUserClickCallback);
+    }
+  }
+
+  /**
+   * Toggle listeners needed when a layer is avisible or not.
+   * @private
+   */
+  toggleVisibleListeners() {
+    if (this.visible) {
+      this.activateUserInteractions();
+    } else {
+      this.deactivateUserInteractions();
+    }
+  }
+
+  /**
+   * Returns the current extent in mercator coordinates.
+   */
+  getMercatorExtent() {
+    const bounds = this.map.getBounds().toArray();
+    return transformExtent(
+      [...bounds[0], ...bounds[1]],
+      'EPSG:4326',
+      'EPSG:3857',
+    );
+  }
+
+  /**
+   * Returns the equivalent zoom in Openlayers.
+   */
+  getOlZoom() {
+    return this.map.getZoom() + 1;
+  }
+
+  /**
+   * Create a copy of the Layer.
+   * @param {Object} newOptions Options to override
+   * @return {Layer} A Layer
+   */
+  clone(newOptions: LayerCommonOptions) {
+    return new Layer({ ...this.options, ...newOptions });
+  }
+}
+export default Layer;

package/src/mapbox/layers/RealtimeLayer.test.js

@@ -0,0 +1,13 @@
+import RealtimeLayer from './RealtimeLayer';
+
+let layer;
+
+describe('RealtimeLayer', () => {
+  beforeEach(() => {
+    layer = new RealtimeLayer();
+  });
+
+  test('should be instanced.', () => {
+    expect(layer).toBeInstanceOf(RealtimeLayer);
+  });
+});