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

package/common/controls/Control.test.js

@@ -1,21 +1,18 @@
-import Control from './Control';
-
-describe('Control', () => {
-  test('should be activated by default', () => {
+import Control from "./Control";
+describe("Control", () => {
+  test("should be activated by default", () => {
     const control = new Control();
     expect(control.active).toBe(true);
   });
-
-  test('should not be activated if set to false in the options', () => {
+  test("should not be activated if set to false in the options", () => {
     const control = new Control({ active: false });
     expect(control.active).toBe(false);
   });
-
-  test('should call activate/deactivate when active is set to true/false', () => {
+  test("should call activate/deactivate when active is set to true/false", () => {
     const control = new Control();
-    const spy1 = jest.spyOn(control, 'activate');
-    const spy2 = jest.spyOn(control, 'deactivate');
-    const spy3 = jest.spyOn(control, 'render');
+    const spy1 = jest.spyOn(control, "activate");
+    const spy2 = jest.spyOn(control, "deactivate");
+    const spy3 = jest.spyOn(control, "render");
     control.active = false;
     expect(spy1).toBeCalledTimes(0);
     expect(spy2).toBeCalledTimes(1);
@@ -25,74 +22,66 @@ describe('Control', () => {
     expect(spy2).toBeCalledTimes(2);
     expect(spy3).toBeCalledTimes(2);
   });
-
-  test('should append/remove the element to the map container when map is set', () => {
-    const element = document.createElement('div');
-    const target = document.createElement('div');
+  test("should append/remove the element to the map container when map is set", () => {
+    const element = document.createElement("div");
+    const target = document.createElement("div");
     const control = new Control({
-      element,
+      element
     });
-    const spy1 = jest.spyOn(control, 'activate');
-    const spy2 = jest.spyOn(control, 'deactivate');
-    const spy3 = jest.spyOn(control, 'render');
+    const spy1 = jest.spyOn(control, "activate");
+    const spy2 = jest.spyOn(control, "deactivate");
+    const spy3 = jest.spyOn(control, "render");
     control.map = {
       getContainer() {
         return target;
-      },
+      }
     };
     expect(target.childNodes[0]).toBe(element);
     expect(spy1).toBeCalledTimes(1);
     expect(spy2).toBeCalledTimes(2);
     expect(spy3).toBeCalledTimes(1);
-
-    control.map = null;
+    control.detachFromMap();
     expect(target.childNodes[0]).toBe();
     expect(spy1).toBeCalledTimes(1);
     expect(spy2).toBeCalledTimes(3);
     expect(spy3).toBeCalledTimes(2);
   });
-
-  test('should append/remove the element to the target property when map is set', () => {
-    const element = document.createElement('div');
-    const target = document.createElement('div');
+  test("should append/remove the element to the target property when map is set", () => {
+    const element = document.createElement("div");
+    const target = document.createElement("div");
     const control = new Control({
       target,
-      element,
+      element
     });
-    const spy1 = jest.spyOn(control, 'activate');
-    const spy2 = jest.spyOn(control, 'deactivate');
-    const spy3 = jest.spyOn(control, 'render');
+    const spy1 = jest.spyOn(control, "activate");
+    const spy2 = jest.spyOn(control, "deactivate");
+    const spy3 = jest.spyOn(control, "render");
     control.map = {};
     expect(target.childNodes[0]).toBe(element);
     expect(spy1).toBeCalledTimes(1);
     expect(spy2).toBeCalledTimes(2);
     expect(spy3).toBeCalledTimes(1);
-
-    control.map = null;
+    control.detachFromMap();
     expect(target.childNodes[0]).toBe();
     expect(spy1).toBeCalledTimes(1);
     expect(spy2).toBeCalledTimes(3);
     expect(spy3).toBeCalledTimes(2);
   });
-
-  test('set a custom render method', () => {
+  test("set a custom render method", () => {
     const spy = jest.fn();
-    // eslint-disable-next-line no-unused-vars
     const control = new Control({
-      render: spy,
+      render: spy
     });
     expect(spy).toBeCalledTimes(1);
   });
-
-  test('pass function params to custom render method', () => {
+  test("pass function params to custom render method", () => {
     const spy = jest.fn();
-    // eslint-disable-next-line no-unused-vars
     const control = new Control({
-      render: spy,
+      render: spy
     });
-    control.render('foo', 'bar');
+    control.render("foo", "bar");
     expect(spy).toBeCalledTimes(2);
-    expect(spy.mock.calls[1][0]).toBe('foo');
-    expect(spy.mock.calls[1][1]).toBe('bar');
+    expect(spy.mock.calls[1][0]).toBe("foo");
+    expect(spy.mock.calls[1][1]).toBe("bar");
   });
 });

package/common/index.js

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

package/common/layers/Layer.js

@@ -1,78 +1,22 @@
-import Observable from 'ol/Observable';
-import { v4 as uuid } from 'uuid';
-
-/**
- * A class representing a layer to display on map.
- *
- * @example
- * const layer = new Layer({
- *   name: 'myLayer',
- * });
- *
- * @classproperty {string} name - Name of the layer
- * @classproperty {string} key - Identifier of the layer. Must be unique.
- * @classproperty {string[]} copyrights - Array of copyrights.
- * @classproperty {boolean} isBaseLayer - Define if the layer is a base layer. Read-only.
- * @classproperty {boolean} isQueryable - Define if the layer can be queried. If false, it will set isHoverActive and isClickActive to false. Read-only.
- * @classproperty {boolean} isClickActive - If true feature information will be queried on user click event. See inherited layers for more informations. Read-only.
- * @classproperty {boolean} isHoverActive - If true feature information will be queried on pointer move event. See inherited layers for more informations. Read-only.
- * @classproperty {boolean} isMobilityLayer - Custom property for duck typing since `instanceof` is not working when the instance was created on different bundles. Read-only.
- * @classproperty {Layer[]} children - List of children.
- * @classproperty {boolean} visible - Define if the layer is visible or not.
- * @classproperty {number} hitTolerance - Hit-detection tolerance in css pixels. Pixels inside the radius around the given position will be checked for features.
- * @classproperty {Object} properties - Custom properties.
- * @classproperty {ol/Map~Map|mapboxgl.Map} map - The map where the layer is displayed.
- */
+import Observable from "ol/Observable";
+import { v4 as uuid } from "uuid";
 export default class Layer extends Observable {
-  /**
-   * Constructor
-   *
-   * @param {Object} options
-   * @param {string} [options.name=uuid()] Layer name. Default use a generated uuid.
-   * @param {string} [options.key=uuid().toLowerCase()] Layer key, will use options.name.toLowerCase() if not specified.
-   * @param {string[]} [options.copyrights=undefined] Array of copyrights.
-   * @param {Array<Layer>} [options.children=[]] Sublayers.
-   * @param {Object} [options.properties={}] Application-specific layer properties.
-   * @param {boolean} [options.visible=true] If true this layer is visible on the map.
-   * @param {boolean} [options.isBaseLayer=false] If true this layer is a baseLayer.
-   * @param {boolean} [options.isQueryable=true] Define if the layer can be queried. If false, it will also set isHoverActive and isClickActive to false. Read-only.
-   * @param {boolean} [options.isClickActive=true] If true feature information will be queried on click event. See inherited layers for more informations. Read-only.
-   * @param {boolean} [options.isHoverActive=true] If true feature information will be queried on pointer move event. See inherited layers for more informations. Read-only.
-   * @param {number} [options.hitTolerance=5] Hit-detection tolerance in css pixels. Pixels inside the radius around the given position will be checked for features.
-   */
   constructor(options = {}) {
     super();
     this.defineProperties(options);
-
-    // Add mouse event callbacks
     const { onClick, onHover } = options;
-
     if (onHover) {
       this.onHover(onHover);
     }
-
     if (onClick) {
       this.onClick(onClick);
     }
-
-    // This if is very important if you remove it you break the copyright control.
     if (options.copyrights) {
-      /** @ignore */
       this.copyrights = options.copyrights;
     }
-
-    /** @ignore */
     this.onUserClickCallback = this.onUserClickCallback.bind(this);
-
-    /** @ignore */
     this.onUserMoveCallback = this.onUserMoveCallback.bind(this);
   }
-
-  /**
-   * Define layer's properties.
-   *
-   * @ignore
-   */
   defineProperties(options) {
     const {
       name,
@@ -84,321 +28,186 @@ export default class Layer extends Observable {
       isQueryable,
       isClickActive,
       isHoverActive,
-      hitTolerance,
+      hitTolerance
     } = {
       isQueryable: true,
       isClickActive: true,
       isHoverActive: true,
-      ...options,
+      ...options
     };
     const uid = uuid();
     const dfltName = name || uid;
     Object.defineProperties(this, {
-      // options is used for clone function.
       options: {
-        value: options,
+        value: options
       },
       name: {
-        value: dfltName,
+        value: dfltName
       },
       key: {
-        value: key || dfltName.toLowerCase(),
+        value: key || dfltName.toLowerCase()
       },
       isBaseLayer: {
-        value: !!isBaseLayer,
+        value: !!isBaseLayer
       },
       isQueryable: {
         value: !!isQueryable,
-        writable: true,
+        writable: true
       },
       isClickActive: {
         value: !!isQueryable && !!isClickActive,
-        writable: true,
+        writable: true
       },
       isHoverActive: {
         value: !!isQueryable && !!isHoverActive,
-        writable: true,
+        writable: true
       },
       hitTolerance: {
         value: hitTolerance || 5,
-        writable: true,
+        writable: true
       },
-      // Custom property for duck typing since `instanceof` is not working
-      // when the instance was created on different bundles.
       isMobilityLayer: {
-        value: true,
+        value: true
       },
       children: {
         value: children || [],
-        writable: true,
+        writable: true
       },
       copyrights: {
-        get: () => this.get('copyrights'),
+        get: () => this.get("copyrights"),
         set: (newCopyrights) => {
-          const arrValue = !Array.isArray(newCopyrights)
-            ? [newCopyrights]
-            : newCopyrights;
-          this.set('copyrights', arrValue);
-        },
+          const arrValue = !Array.isArray(newCopyrights) ? [newCopyrights] : newCopyrights;
+          this.set("copyrights", arrValue);
+        }
       },
       visible: {
-        value: visible === undefined ? true : visible,
-        writable: true,
+        value: visible === void 0 ? true : visible,
+        writable: true
       },
       properties: {
-        value: { ...(properties || {}) },
+        value: { ...properties || {} }
       },
       map: {
-        writable: true,
+        writable: true
       },
-      /**
-       * Callback function when a user click on a feature.
-       */
       clickCallbacks: {
-        value: [],
+        value: []
       },
-      /**
-       * Callback function when a user hover on a feature.
-       */
       hoverCallbacks: {
-        value: [],
-      },
+        value: []
+      }
     });
   }
-
-  /**
-   * Initialize the layer with the map passed in parameters.
-   *
-   * @param {ol/Map~Map|mapboxgl.Map} map A map.
-   */
-  init(map) {
-    this.terminate();
-    /** @ignore */
+  attachToMap(map) {
+    this.detachFromMap();
     this.map = map;
   }
-
-  /**
-   * Terminate what was initialized in init function. Remove layer, events...
-   */
-  // eslint-disable-next-line class-methods-use-this
-  terminate() {}
-
-  /**
-   * Get a layer property.
-   *
-   * @param {string} name Property name.
-   * @return {property} Property
-   */
+  detachFromMap() {
+  }
   get(name) {
     return this.properties[name];
   }
-
-  /**
-   * Set a layer property.
-   *
-   * @param {string} name Property name.
-   * @param {string} value Value.
-   */
   set(name, value) {
     if (value !== this.properties[name]) {
       this.properties[name] = value;
       this.dispatchEvent({
         type: `change:${name}`,
-        target: this,
+        target: this
       });
     }
   }
-
-  /**
-   * Change the visibility of the layer
-   *
-   * @param {boolean} visible Defines the visibility of the layer
-   * @param {boolean} [stopPropagationDown]
-   * @param {boolean} [stopPropagationUp]
-   * @param {boolean} [stopPropagationSiblings]
-   */
-  setVisible(
-    visible,
-    stopPropagationDown = false,
-    stopPropagationUp = false,
-    stopPropagationSiblings = false,
-  ) {
+  setVisible(visible, stopPropagationDown = false, stopPropagationUp = false, stopPropagationSiblings = false) {
     if (visible === this.visible) {
       return;
     }
-
-    /** @ignore */
     this.visible = visible;
-
     this.dispatchEvent({
-      type: 'change:visible',
+      type: "change:visible",
       target: this,
       stopPropagationDown,
       stopPropagationUp,
-      stopPropagationSiblings,
+      stopPropagationSiblings
     });
   }
-
-  /**
-   * Returns an array with visible child layers
-   *
-   * @return {Layer[]} Visible children
-   */
   getVisibleChildren() {
     return this.children.filter((child) => child.visible);
   }
-
-  /**
-   * Checks whether the layer has child layers with visible set to True
-   *
-   * @return {boolean} True if the layer has visible child layers
-   * @deprecated
-   */
   hasVisibleChildren() {
     return !!this.children.find((child) => child.visible === true);
   }
-
-  /**
-   * Request feature information for a given coordinate.
-   * This function must be implemented by inheriting layers.
-   *
-   * @param {ol/coordinate~Coordinate} coordinate Coordinate.
-   * @param {Object} options Some options. See child classes to see which are supported.
-   * @return {Promise<FeatureInfo>} An empty response.
-   */
-  // eslint-disable-next-line no-unused-vars
   getFeatureInfoAtCoordinate(coordinate, options) {
-    // eslint-disable-next-line no-console
-    console.error(
-      'getFeatureInfoAtCoordinate must be implemented by inheriting layers',
-      this.key,
-    );
-
-    // No response so we modify the properties accordingly, to avoid spaming the console.
+    console.error("getFeatureInfoAtCoordinate must be implemented by inheriting layers", this.key);
     this.isQueryable = false;
-    // this.isClickActive = false;
-    // this.isHoverActive = false;
-
-    // This layer returns no feature info.
-    // The function is implemented by inheriting layers.
     return Promise.resolve({
       layer: this,
       features: [],
-      coordinate,
+      coordinate
     });
   }
-
-  /**
-   * Listens to click events on the layer.
-   * @param {function} callback Callback function, called with the clicked
-   *   features,
-   *   the layer instance and the click event.
-   */
   onClick(callback) {
-    if (typeof callback === 'function') {
+    if (typeof callback === "function") {
       if (!this.clickCallbacks.includes(callback)) {
         this.clickCallbacks.push(callback);
       }
     } else {
-      throw new Error('onClick callback must be of type function:', callback);
+      throw new Error("onClick callback must be of type function:", callback);
     }
   }
-
-  /**
-   * Unlistens to click events on the layer.
-   * @param {function} callback Callback function, called with the clicked
-   *   features,
-   *   the layer instance and the click event.
-   */
   unClick(callback) {
-    if (typeof callback === 'function') {
+    if (typeof callback === "function") {
       const idx = this.clickCallbacks.indexOf(callback);
       if (idx > -1) {
         this.clickCallbacks.splice(idx, 1);
       }
     }
   }
-
-  /**
-   * Function triggered when the user click the map.
-   * @private
-   */
   onUserClickCallback(evt) {
     const emptyFeatureInfo = {
       features: [],
       layer: this,
       coordinate: evt.coordinate,
-      event: evt,
+      event: evt
     };
-
     if (!this.isClickActive || !this.clickCallbacks.length) {
       return Promise.resolve(emptyFeatureInfo);
     }
-
-    return this.getFeatureInfoAtCoordinate(evt.coordinate)
-      .then((featureInfo) => {
-        const { features, layer, coordinate } = featureInfo;
-        this.clickCallbacks.forEach((callback) =>
-          callback(features, layer, coordinate),
-        );
-        return featureInfo;
-      })
-      .catch(() => emptyFeatureInfo);
+    return this.getFeatureInfoAtCoordinate(evt.coordinate).then((featureInfo) => {
+      const { features, layer, coordinate } = featureInfo;
+      this.clickCallbacks.forEach((callback) => callback(features, layer, coordinate));
+      return featureInfo;
+    }).catch(() => emptyFeatureInfo);
   }
-
-  /**
-   * Listens to hover events on the layer.
-   * @param {function} callback Callback function, called with the clicked
-   *   features, the layer instance and the click event.
-   */
   onHover(callback) {
-    if (typeof callback === 'function') {
+    if (typeof callback === "function") {
       if (!this.hoverCallbacks.includes(callback)) {
         this.hoverCallbacks.push(callback);
       }
     } else {
-      throw new Error('callback must be of type function.');
+      throw new Error("callback must be of type function.");
     }
   }
-
-  /**
-   * Unlistens to hover events on the layer.
-   * @param {function} callback Callback function, called with the hovered
-   *   features, the layer instance and the click event.
-   */
   unHover(callback) {
-    if (typeof callback === 'function') {
+    if (typeof callback === "function") {
       const idx = this.hoverCallbacks.indexOf(callback);
       if (idx > -1) {
         this.hoverCallbacks.splice(idx, 1);
       }
     }
   }
-
-  /**
-   * Function triggered when the user move the cursor.
-   * @private
-   */
   onUserMoveCallback(evt) {
     const emptyFeatureInfo = {
       features: [],
       layer: this,
       coordinate: evt.coordinate,
-      event: evt,
+      event: evt
     };
-
     if (!this.isHoverActive || !this.hoverCallbacks.length) {
       return Promise.resolve(emptyFeatureInfo);
     }
-
-    return this.getFeatureInfoAtCoordinate(evt.coordinate)
-      .then((featureInfo) => {
-        const { features, layer, coordinate } = featureInfo;
-        this.hoverCallbacks.forEach((callback) =>
-          callback(features, layer, coordinate),
-        );
-        return featureInfo;
-      })
-      .catch(() => emptyFeatureInfo);
+    return this.getFeatureInfoAtCoordinate(evt.coordinate).then((featureInfo) => {
+      const { features, layer, coordinate } = featureInfo;
+      this.hoverCallbacks.forEach((callback) => callback(features, layer, coordinate));
+      return featureInfo;
+    }).catch(() => emptyFeatureInfo);
   }
 }