mobility-toolbox-js 2.3.9 → 2.3.10

package/src/common/controls/ControlCommon.ts

@@ -0,0 +1,194 @@
+import type { Map as OlMap } from 'ol';
+import BaseObject from 'ol/Object';
+import type { AnyMap, AnyMapboxMap } from '../../types';
+
+export type ControlCommonOptions = {
+  active?: Boolean;
+  element?: HTMLElement;
+  target?: HTMLElement;
+  render?: () => void;
+};
+
+/**
+ * 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 ControlCommon extends BaseObject {
+  active: Boolean;
+
+  map?: AnyMap;
+
+  target?: HTMLElement;
+
+  element?: HTMLElement;
+
+  /**
+   * 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: ControlCommonOptions = {}) {
+    super(options);
+    this.defineProperties(options);
+
+    const { active } = {
+      active: options.active !== false,
+      ...options,
+    };
+
+    /**
+     * @private
+     */
+    this.active = active;
+  }
+
+  /**
+   * Define control's properties.
+   *
+   * @private
+   * @private
+   */
+  defineProperties(options: ControlCommonOptions) {
+    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 as OlMap).getTargetElement &&
+                (this.map as OlMap).getTargetElement()) ||
+              ((this.map as AnyMapboxMap).getContainer &&
+                (this.map as AnyMapboxMap).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: {
+        /** @private */
+        value: render || this.render,
+        writable: true,
+      },
+    });
+  }
+
+  /**
+   * Attach the control to the map. Add events, html element ...
+   */
+  attachToMap(map: AnyMap) {
+    this.map = map;
+  }
+
+  /**
+   * Detach the control From the map. Remove events, html element ..
+   */
+  detachFromMap() {
+    this.map = undefined;
+  }
+
+  /**
+   * 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() {
+    // eslint-disable-next-line no-console
+    console.error(
+      'The function deactivate() must be implemented in subclasses',
+    );
+  }
+
+  /**
+   * The default render function. It renders content in the HTML element.
+   * To be defined in inherited classes.
+   *
+   * @private
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  render(options?: any) {
+    // eslint-disable-next-line no-console
+    console.error('The function render() must be implemented in subclasses');
+  }
+
+  /**
+   * 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() {
+    // eslint-disable-next-line no-console
+    console.error(
+      'The function createDefaultElement() must be implemented in subclasses',
+    );
+  }
+}
+
+export default ControlCommon;

package/src/common/controls/CopyrightControlCommon.ts

@@ -0,0 +1,41 @@
+/* eslint-disable max-classes-per-file */
+import ControlCommon from './ControlCommon';
+
+/**
+ * A class representing a copyright control to display on map.
+ * This class only draw an html element, with an empty string in it.
+ * Use subclasses to use it in an ol or mapbox map.
+ */
+class CopyrightControlCommon extends ControlCommon {
+  render() {
+    if (!this.element) {
+      return;
+    }
+    this.element.innerHTML = this.active
+      ? this.getCopyrights().join(' | ')
+      : '';
+  }
+
+  createDefaultElement() {
+    this.element = document.createElement('div');
+    this.element.id = 'mbt-copyright';
+    Object.assign(this.element.style, {
+      position: 'absolute',
+      bottom: 0,
+      right: 0,
+      fontSize: '.8rem',
+      padding: '0 10px',
+    });
+  }
+
+  getCopyrights() {
+    // eslint-disable-next-line no-console
+    console.error(
+      'The getCopyrights() function must be implemented in subclasses.',
+      this,
+    );
+    return [] as string[];
+  }
+}
+
+export default CopyrightControlCommon;

package/src/common/controls/StopFinderControlCommon.ts

@@ -0,0 +1,192 @@
+/* eslint-disable no-empty-function */
+/* eslint-disable no-useless-constructor */
+/* eslint-disable class-methods-use-this */
+/* eslint-disable max-classes-per-file */
+import { FeatureCollection } from '@turf/helpers';
+import { Feature } from 'geojson';
+import { StopsAPI } from '../../api';
+import { StopsAPIOptions } from '../../api/StopsAPI';
+import { StopsParameters } from '../../types';
+import ControlCommon, { ControlCommonOptions } from './ControlCommon';
+
+export type StopFinderControlCommonOptions = ControlCommonOptions &
+  StopsAPIOptions & {
+    placeholder?: string;
+    apiParams: StopsParameters;
+  };
+
+/**
+ * A class representing a stop finder control to display on map.
+ * This class only draw the html elements.
+ * The geographic logic must be implemented by subclasses.
+ */
+class StopFinderControlCommon extends ControlCommon {
+  apiParams: StopsParameters;
+
+  placeholder: string;
+
+  api: StopsAPI;
+
+  abortController?: AbortController;
+
+  suggestionsElt?: HTMLElement;
+
+  inputElt?: HTMLInputElement;
+
+  clearElt?: HTMLDivElement;
+
+  /**
+   * Constructor.
+   *
+   * @param {Object} options Map options
+   * @param {string} options.apiKey Access key for [geOps services](https://developer.geops.io/). See StopsAPI.
+   * @param {string} [options.url='https://api.geops.io/tracker/v1'] Stops service url. See StopsAPI.
+   * @param {string} [options.placeholder='Search for a stop...'] Input field placeholder.
+   * @param {StopsSearchParams} [options.apiParams={ limit: 20 }] Request parameters. See [Stops service documentation](https://developer.geops.io/apis/5dcbd702a256d90001cf1361/).
+   */
+  constructor(options: StopFinderControlCommonOptions) {
+    super(options);
+    const { apiParams, apiKey, url, placeholder } = options || {};
+
+    this.apiParams = { limit: 20, ...(apiParams || {}) };
+    this.placeholder = placeholder || 'Search for a stop...';
+
+    const apiOptions: { apiKey?: string; url?: string } = { apiKey };
+    if (url) {
+      apiOptions.url = url;
+    }
+    this.api = new StopsAPI(apiOptions);
+    this.abortController = new AbortController();
+  }
+
+  deactivate() {}
+
+  render(featureCollection?: FeatureCollection) {
+    const suggestions = featureCollection?.features || [];
+    if (!this.suggestionsElt) {
+      return;
+    }
+
+    this.suggestionsElt.style.display = suggestions.length ? 'block' : 'none';
+
+    this.suggestionsElt.innerHTML = '';
+
+    suggestions.forEach((suggestion) => {
+      const suggElt = document.createElement('div');
+      suggElt.innerHTML = suggestion?.properties?.name;
+      suggElt.onclick = () => {
+        // @ts-ignore
+        this.onSuggestionClick(suggestion);
+      };
+      Object.assign(suggElt.style, {
+        padding: '5px 12px',
+      });
+      this.suggestionsElt?.appendChild(suggElt);
+    });
+  }
+
+  createDefaultElement() {
+    /**
+     * Define a default element.
+     */
+    this.element = document.createElement('div');
+    this.element.id = 'mbt-search';
+    Object.assign(this.element.style, {
+      position: 'absolute',
+      top: 0,
+      left: '50px',
+      margin: '10px',
+      display: 'flex',
+      flexDirection: 'column',
+      width: '320px',
+    });
+
+    // Create input element
+    this.inputElt = document.createElement('input');
+    this.inputElt.type = 'text';
+    this.inputElt.placeholder = this.placeholder;
+    this.inputElt.autocomplete = 'off';
+    this.inputElt.onkeyup = (evt) => {
+      this.abortController?.abort();
+      this.abortController = new AbortController();
+      // @ts-ignore
+      this.search(evt.target.value, this.abortController);
+    };
+    Object.assign(this.inputElt.style, {
+      padding: '10px 30px 10px 10px',
+    });
+    this.element.appendChild(this.inputElt);
+
+    // Create suggestions list element
+    this.suggestionsElt = document.createElement('div');
+    Object.assign(this.suggestionsElt.style, {
+      backgroundColor: 'white',
+      overflowY: 'auto',
+      cursor: 'pointer',
+    });
+    this.element.appendChild(this.suggestionsElt);
+
+    this.clearElt = document.createElement('div');
+    Object.assign(this.clearElt.style, {
+      display: 'none',
+      position: 'absolute',
+      right: '0',
+      padding: '0 10px',
+      fontSize: '200%',
+      cursor: 'pointer',
+    });
+    this.clearElt.innerHTML = '×';
+    this.clearElt.onclick = () => this.clear();
+    this.element.appendChild(this.clearElt);
+  }
+
+  /**
+   * Launch a search.
+   *
+   * @param {String} query The query to search for.
+   * @param {AbortController} abortController Abort controller used to cancel the request.
+   * @return {Promise<Array<GeoJSONFeature>>} An array of GeoJSON features with coordinates in [EPSG:4326](http://epsg.io/4326).
+   */
+  search(q: string, abortController: AbortController) {
+    if (q !== undefined || q !== null) {
+      this.apiParams.q = q;
+    }
+
+    if (this.clearElt) {
+      this.clearElt.style.display = 'block';
+    }
+
+    return this.api
+      .search(
+        this.apiParams,
+        abortController && { signal: abortController.signal },
+      )
+      .then((data) => {
+        this.render(data as FeatureCollection);
+      })
+      .catch(() => {
+        this.render();
+      });
+  }
+
+  /**
+   * To be defined in inherited class
+   */
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+  onSuggestionClick(suggestion: Feature) {}
+
+  /**
+   * Clear the search field and close the control.
+   */
+  clear() {
+    if (!this.suggestionsElt || !this.inputElt || !this.clearElt) {
+      return;
+    }
+
+    this.inputElt.value = '';
+    this.suggestionsElt.innerHTML = '';
+    this.clearElt.style.display = 'none';
+  }
+}
+
+export default StopFinderControlCommon;

package/src/common/layers/LayerCommon.test.js

@@ -0,0 +1,158 @@
+import VectorLayer from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
+import Layer from './LayerCommon';
+
+const olLayer = new VectorLayer({ source: new VectorSource() });
+
+describe('Layer', () => {
+  test('should initialize.', () => {
+    const layer = new Layer({ name: 'Layer', olLayer });
+    expect(layer).toBeInstanceOf(Layer);
+  });
+
+  test('should define default properties.', () => {
+    const options = {
+      name: 'Layer',
+      key: 'Layerkey',
+      olLayer,
+    };
+    const layer = new Layer(options);
+
+    expect(layer).toBeInstanceOf(Layer);
+    expect(layer.options).toEqual(options);
+    expect(layer.name).toEqual(options.name);
+    expect(layer.key).toEqual('Layerkey');
+    expect(layer.hitTolerance).toBe(5);
+    expect(layer.copyrights).toEqual([]);
+    expect(layer.visible).toBe(true);
+    expect(layer.properties).toEqual({});
+    expect(layer.map).toBe(undefined);
+    expect(layer.group).toBe(undefined);
+  });
+
+  test('should be visible by default.', () => {
+    const layer = new Layer();
+    expect(layer.visible).toBe(true);
+  });
+
+  test('should be hidden using constructor.', () => {
+    const layer = new Layer({ visible: false });
+    expect(layer.visible).toBe(false);
+  });
+
+  test('should be hidden using setter.', () => {
+    const layer = new Layer();
+    layer.visible = false;
+    expect(layer.visible).toBe(false);
+  });
+
+  test('should visibility stay unchanged', () => {
+    const layer = new Layer();
+    layer.visible = false;
+    expect(layer.visible).toBe(false);
+  });
+
+  test('should return its name.', () => {
+    const layer = new Layer({ name: 'Layer' });
+    expect(layer.name).toEqual('Layer');
+  });
+
+  test('should called detachFromMap on initialization.', () => {
+    const layer = new Layer();
+    const spy = jest.spyOn(layer, 'detachFromMap');
+    layer.attachToMap();
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  test('should properties correctly set and get.', () => {
+    const layer = new Layer({
+      name: 'Layer',
+      olLayer,
+      properties: {
+        abc: 'foo',
+      },
+    });
+    expect(layer).toBeInstanceOf(Layer);
+    expect(layer.get('abc')).toEqual('foo');
+
+    layer.set('abc', 'bar');
+    expect(layer.get('abc')).toEqual('bar');
+  });
+
+  test('should set children', () => {
+    const layer = new Layer({
+      children: [new Layer(), new Layer()],
+    });
+    expect(layer.children.length).toBe(2);
+    expect(layer.children[0].parent).toBe(layer);
+    expect(layer.children[1].parent).toBe(layer);
+  });
+
+  test('should initialize copyrights property.', () => {
+    const layer = new Layer({
+      name: 'Layer',
+      olLayer,
+      copyrights: ['&copy: copyright', 'another copyright'],
+    });
+
+    expect(layer.copyrights[0]).toEqual('&copy: copyright');
+  });
+
+  test('should set and get copyright property.', () => {
+    const layer = new Layer({
+      name: 'Layer',
+      olLayer,
+    });
+    expect(layer).toBeInstanceOf(Layer);
+    expect(layer.copyright).toEqual(undefined);
+
+    layer.copyright = '© OSM Contributors';
+    expect(layer.copyright).toEqual('© OSM Contributors');
+  });
+
+  describe('#attachToMap()', () => {
+    test('should set map.', () => {
+      const layer = new Layer({
+        name: 'Layer',
+        olLayer,
+      });
+
+      expect(layer.map).toBe(undefined);
+      const obj = {};
+      layer.attachToMap(obj);
+      expect(layer.map).toBe(obj);
+    });
+
+    test('should call terminate.', () => {
+      const layer = new Layer({
+        name: 'Layer',
+        olLayer,
+      });
+      const spy = jest.spyOn(layer, 'detachFromMap');
+      layer.attachToMap();
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('#getFeatureInfoAtCoordinate()', () => {
+    test('return an empty fetaureInfo object and display an error message', (done) => {
+      // eslint-disable-next-line no-console
+      console.error = jest.fn();
+      const layer = new Layer({
+        name: 'Layer',
+        olLayer,
+      });
+      const coord = [0, 0];
+      layer.getFeatureInfoAtCoordinate(coord).then((featureInfo) => {
+        expect(featureInfo.features).toEqual([]);
+        expect(featureInfo.layer).toEqual(layer);
+        expect(featureInfo.coordinate).toEqual(coord);
+        // eslint-disable-next-line no-console
+        expect(console.error).toHaveBeenCalledTimes(1);
+        done();
+        // eslint-disable-next-line no-console
+        console.error.mockRestore();
+      });
+    });
+  });
+});