mobility-toolbox-js 2.3.10 → 2.4.0

package/src/common/controls/ControlCommon.ts

@@ -1,194 +0,0 @@
-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

@@ -1,41 +0,0 @@
-/* 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

@@ -1,192 +0,0 @@
-/* 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

@@ -1,158 +0,0 @@
-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();
-      });
-    });
-  });
-});