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

package/ol/layers/Layer.js

@@ -1,156 +1,67 @@
-import { unByKey } from 'ol/Observable';
-import Group from 'ol/layer/Group';
-import LayerCommon from '../../common/layers/Layer';
-
-/**
- * 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}
- */
+import { unByKey } from "ol/Observable";
+import Group from "ol/layer/Group";
+import LayerCommon from "../../common/layers/Layer";
 class Layer extends LayerCommon {
-  /**
-   * Constructor.
-   *
-   * @param {Object} options
-   * @param {ol/layer/Layer~Layer} options.olLayer The layer (required).
-   * @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.copyright=undefined] Copyright-Statement.
-   * @param {Array<Layer>} [options.children=[]] Sublayers.
-   * @param {Object} [options.properties={}] Application-specific layer properties.
-   * @param {boolean} [options.visible=true] If true this layer is the currently visible layer on the map.
-   * @param {boolean} [options.isBaseLayer=false] If true this layer is a baseLayer.
-   * @param {boolean} [options.isQueryable=true] If true feature information can be queried by the react-spatial LayerService. Default is true.
-   * @param {boolean} [options.isClickActive=true] If true feature information will be queried on 'singleclick' event. All results will be passed to function registered using `onClick` function. Default is true.
-   */
   constructor(options) {
     super(options);
-
     if (this.olLayer) {
       this.olLayer.setVisible(this.visible);
     }
   }
-
-  /**
-   * Define layer's properties.
-   *
-   * @ignore
-   */
   defineProperties(options) {
     super.defineProperties(options);
     Object.defineProperties(this, {
       olLayer: { value: options.olLayer, writable: true },
       olListenersKeys: {
-        value: [],
-      },
+        value: []
+      }
     });
   }
-
-  /**
-   * Initialize the layer and listen to feature clicks.
-   * @param {ol/Map~Map} map
-   */
-  init(map) {
-    super.init(map);
-
+  attachToMap(map) {
+    super.attachToMap(map);
     if (!this.map) {
       return;
     }
-
     if (this.map && this.olLayer) {
       this.map.addLayer(this.olLayer);
     }
-
-    this.olListenersKeys.push(
-      this.map.getLayers().on('remove', (evt) => {
-        if (evt.element === this.olLayer) {
-          this.terminate();
-        }
-      }),
-    );
-
+    this.olListenersKeys.push(this.map.getLayers().on("remove", (evt) => {
+      if (evt.element === this.olLayer) {
+        this.detachFromMap();
+      }
+    }));
     if (this.isClickActive || this.isHoverActive) {
       this.toggleVisibleListeners();
-      this.olListenersKeys.push(
-        this.on('change:visible', this.toggleVisibleListeners),
-      );
+      this.olListenersKeys.push(this.on("change:visible", this.toggleVisibleListeners));
     }
-
-    // We set the copyright to the source used by the layer.
     if (this.copyrights && this.olLayer) {
       const attributions = this.copyrights || [];
       if (this.olLayer instanceof Group) {
-        this.olLayer
-          .getLayers()
-          .getArray()
-          .forEach((layer) => {
-            layer.getSource().setAttributions(attributions);
-          });
+        this.olLayer.getLayers().getArray().forEach((layer) => {
+          layer.getSource().setAttributions(attributions);
+        });
       } else if (this.olLayer.getSource) {
         this.olLayer.getSource().setAttributions(attributions);
       }
     }
   }
-
-  /**
-   * Terminate what was initialized in init function. Remove layer, events...
-   */
-  terminate() {
+  detachFromMap() {
     unByKey(this.olListenersKeys);
-
     if (this.map && this.olLayer) {
       this.map.removeLayer(this.olLayer);
     }
-
-    super.terminate();
+    super.detachFromMap();
   }
-
-  /**
-   * 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;
     }
-
-    super.setVisible(
-      visible,
-      stopPropagationDown,
-      stopPropagationUp,
-      stopPropagationSiblings,
-    );
-
+    super.setVisible(visible, stopPropagationDown, stopPropagationUp, stopPropagationSiblings);
     if (this.olLayer) {
       this.olLayer.setVisible(this.visible);
     }
   }
-
-  /**
-   * Toggle listeners needed when a layer is avisible or not.
-   * @private
-   */
   toggleVisibleListeners() {
-    // Remove previous event
     if (this.isClickListenerKey && this.isHoverListenerKey) {
       [this.isClickListenerKey, this.isHoverListenerKey].forEach((key) => {
         const index = this.olListenersKeys.indexOf(key);
@@ -160,32 +71,16 @@ class Layer extends LayerCommon {
         unByKey([this.isHoverListenerKey, this.isClickListenerKey]);
       });
     }
-
     if (this.visible) {
       if (this.isClickActive) {
-        this.isClickListenerKey = this.map.on(
-          'singleclick',
-          this.onUserClickCallback,
-        );
+        this.isClickListenerKey = this.map.on("singleclick", this.onUserClickCallback);
       }
       if (this.isHoverActive) {
-        this.isHoverListenerKey = this.map.on(
-          'pointermove',
-          this.onUserMoveCallback,
-        );
+        this.isHoverListenerKey = this.map.on("pointermove", this.onUserMoveCallback);
       }
-      this.olListenersKeys.push(
-        this.isClickListenerKey,
-        this.isHoverListenerKey,
-      );
+      this.olListenersKeys.push(this.isClickListenerKey, this.isHoverListenerKey);
     }
   }
-
-  /**
-   * Create a copy of the Layer.
-   * @param {Object} newOptions Options to override
-   * @return {Layer} A Layer
-   */
   clone(newOptions) {
     return new Layer({ ...this.options, ...newOptions });
   }

package/ol/layers/Layer.test.js

@@ -1,197 +1,174 @@
-import VectorLayer from 'ol/layer/Vector';
-import VectorSource from 'ol/source/Vector';
-import Map from 'ol/Map';
-import Group from 'ol/layer/Group';
-import Layer from './Layer';
-
+import VectorLayer from "ol/layer/Vector";
+import VectorSource from "ol/source/Vector";
+import Map from "ol/Map";
+import Group from "ol/layer/Group";
+import Layer from "./Layer";
 let olLayer;
 let map;
-
-describe('Layer', () => {
+describe("Layer", () => {
   beforeEach(() => {
     map = new Map({});
     olLayer = new VectorLayer({ source: new VectorSource() });
   });
-
-  test('should initialize.', () => {
-    const layer = new Layer({ name: 'Layer', olLayer });
+  test("should initialize.", () => {
+    const layer = new Layer({ name: "Layer", olLayer });
     expect(layer).toBeInstanceOf(Layer);
   });
-
-  test('should be visible by default.', () => {
-    const layer = new Layer({ name: 'Layer', olLayer });
+  test("should be visible by default.", () => {
+    const layer = new Layer({ name: "Layer", olLayer });
     expect(layer.visible).toBe(true);
   });
-
-  test('should be invisible if defined.', () => {
-    const layer = new Layer({ name: 'Layer', visible: false, olLayer });
+  test("should be invisible if defined.", () => {
+    const layer = new Layer({ name: "Layer", visible: false, olLayer });
     expect(layer.visible).toBe(false);
   });
-
-  test('should be invisible if set.', () => {
-    const layer = new Layer({ name: 'Layer', olLayer });
+  test("should be invisible if set.", () => {
+    const layer = new Layer({ name: "Layer", olLayer });
     layer.setVisible(false);
     expect(layer.visible).toBe(false);
   });
-
-  test('should visibility stay unchanged', () => {
-    const layer = new Layer({ name: 'Layer', visible: false, olLayer });
+  test("should visibility stay unchanged", () => {
+    const layer = new Layer({ name: "Layer", visible: false, olLayer });
     layer.setVisible(false);
     expect(layer.visible).toBe(false);
   });
-
-  test('should return its name.', () => {
-    const layer = new Layer({ name: 'Layer', visible: false, olLayer });
-    expect(layer.name).toEqual('Layer');
+  test("should return its name.", () => {
+    const layer = new Layer({ name: "Layer", visible: false, olLayer });
+    expect(layer.name).toEqual("Layer");
   });
-
-  test('should call terminate on initialization.', () => {
-    const layer = new Layer({ name: 'Layer', olLayer });
-    const spy = jest.spyOn(layer, 'terminate');
-    layer.init();
+  test("should call terminate on initialization.", () => {
+    const layer = new Layer({ name: "Layer", olLayer });
+    const spy = jest.spyOn(layer, "detachFromMap");
+    layer.attachToMap();
     expect(spy).toHaveBeenCalledTimes(1);
   });
-
-  test('should remove the layer when we call terminate.', () => {
-    const layer = new Layer({ name: 'Layer', olLayer });
-    const spy = jest.spyOn(layer, 'terminate');
-    layer.init(map);
+  test("should remove the layer when we call terminate.", () => {
+    const layer = new Layer({ name: "Layer", olLayer });
+    const spy = jest.spyOn(layer, "detachFromMap");
+    layer.attachToMap(map);
     expect(spy).toHaveBeenCalledTimes(1);
-    layer.terminate(map);
+    layer.detachFromMap(map);
     expect(spy).toHaveBeenCalledTimes(2);
   });
-
-  test('should manage copyrights as string.', () => {
-    const spy = jest.spyOn(VectorSource.prototype, 'setAttributions');
-    const layer = new Layer({ name: 'Layer', copyrights: 'foo', olLayer });
-    layer.init(map);
-    expect(spy).toHaveBeenCalledWith(['foo']);
-  });
-
-  test('should manage copyrights as array.', () => {
-    const spy = jest.spyOn(VectorSource.prototype, 'setAttributions');
-    const layer = new Layer({ name: 'Layer', copyrights: ['bar'], olLayer });
-    layer.init(map);
-    expect(spy).toHaveBeenCalledWith(['bar']);
-  });
-
-  test('should set attributions for Group.', () => {
-    const spy = jest.spyOn(VectorSource.prototype, 'setAttributions');
+  test("should manage copyrights as string.", () => {
+    const spy = jest.spyOn(VectorSource.prototype, "setAttributions");
+    const layer = new Layer({ name: "Layer", copyrights: "foo", olLayer });
+    layer.attachToMap(map);
+    expect(spy).toHaveBeenCalledWith(["foo"]);
+  });
+  test("should manage copyrights as array.", () => {
+    const spy = jest.spyOn(VectorSource.prototype, "setAttributions");
+    const layer = new Layer({ name: "Layer", copyrights: ["bar"], olLayer });
+    layer.attachToMap(map);
+    expect(spy).toHaveBeenCalledWith(["bar"]);
+  });
+  test("should set attributions for Group.", () => {
+    const spy = jest.spyOn(VectorSource.prototype, "setAttributions");
     const layer = new Layer({
-      name: 'Layer',
-      copyrights: ['bar'],
-      olLayer: new Group({ layers: [olLayer] }),
+      name: "Layer",
+      copyrights: ["bar"],
+      olLayer: new Group({ layers: [olLayer] })
     });
-    layer.init(map);
-    expect(spy).toHaveBeenCalledWith(['bar']);
+    layer.attachToMap(map);
+    expect(spy).toHaveBeenCalledWith(["bar"]);
   });
-
-  test('should listen for click/hover events when layer is visible by default then should not when hidden.', async () => {
+  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', olLayer });
+    const layer = new Layer({ name: "Layer", olLayer });
     expect(layer.visible).toBe(true);
     const spy = jest.fn();
     const spy2 = jest.fn();
-    layer.init(map);
+    layer.attachToMap(map);
     layer.onHover(spy);
     layer.onClick(spy2);
     expect(spy).toHaveBeenCalledTimes(0);
     expect(spy2).toHaveBeenCalledTimes(0);
-
-    await map.dispatchEvent({ type: 'pointermove', map, coordinate: [0, 0] });
-    await map.dispatchEvent({ type: 'singleclick', map, coordinate: [0, 0] });
+    await map.dispatchEvent({ type: "pointermove", map, coordinate: [0, 0] });
+    await map.dispatchEvent({ type: "singleclick", map, coordinate: [0, 0] });
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy2).toHaveBeenCalledTimes(1);
     spy.mockReset();
     spy2.mockReset();
-
     layer.setVisible(false);
-    await map.dispatchEvent({ type: 'pointermove', map, coordinate: [0, 0] });
-    await map.dispatchEvent({ type: 'singleclick', map, coordinate: [0, 0] });
+    await map.dispatchEvent({ type: "pointermove", map, coordinate: [0, 0] });
+    await map.dispatchEvent({ type: "singleclick", map, coordinate: [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 () => {
+  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', olLayer, visible: false });
+    const layer = new Layer({ name: "Layer", olLayer, visible: false });
     expect(layer.visible).toBe(false);
     const spy = jest.fn();
     const spy2 = jest.fn();
-    layer.init(map);
+    layer.attachToMap(map);
     layer.onHover(spy);
     layer.onClick(spy2);
     expect(spy).toHaveBeenCalledTimes(0);
     expect(spy2).toHaveBeenCalledTimes(0);
-
-    await map.dispatchEvent({ type: 'pointermove', map, coordinate: [0, 0] });
-    await map.dispatchEvent({ type: 'singleclick', map, coordinate: [0, 0] });
+    await map.dispatchEvent({ type: "pointermove", map, coordinate: [0, 0] });
+    await map.dispatchEvent({ type: "singleclick", map, coordinate: [0, 0] });
     expect(spy).toHaveBeenCalledTimes(0);
     expect(spy2).toHaveBeenCalledTimes(0);
     spy.mockReset();
     spy2.mockReset();
-
     layer.setVisible(true);
-    await map.dispatchEvent({ type: 'pointermove', map, coordinate: [0, 0] });
-    await map.dispatchEvent({ type: 'singleclick', map, coordinate: [0, 0] });
+    await map.dispatchEvent({ type: "pointermove", map, coordinate: [0, 0] });
+    await map.dispatchEvent({ type: "singleclick", map, coordinate: [0, 0] });
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy2).toHaveBeenCalledTimes(1);
     global.console.error.mockRestore();
   });
-
-  test('should not listen for click/hover events  after layer.terminate()', async () => {
+  test("should not listen for click/hover events  after layer.detachFromMap()", async () => {
     global.console.error = jest.fn();
-    const layer = new Layer({ name: 'Layer', olLayer, visible: true });
+    const layer = new Layer({ name: "Layer", olLayer, visible: true });
     expect(layer.visible).toBe(true);
     const spy = jest.fn();
     const spy2 = jest.fn();
-    layer.init(map);
+    layer.attachToMap(map);
     layer.onHover(spy);
     layer.onClick(spy2);
     expect(spy).toHaveBeenCalledTimes(0);
     expect(spy2).toHaveBeenCalledTimes(0);
-
     await map.dispatchEvent({
-      type: 'pointermove',
+      type: "pointermove",
       map,
-      coordinate: [0, 0],
+      coordinate: [0, 0]
     });
     await map.dispatchEvent({
-      type: 'singleclick',
+      type: "singleclick",
       map,
-      coordinate: [0, 0],
+      coordinate: [0, 0]
     });
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy2).toHaveBeenCalledTimes(1);
     spy.mockReset();
     spy2.mockReset();
-
-    layer.terminate(map);
+    layer.detachFromMap(map);
     await map.dispatchEvent({
-      type: 'pointermove',
+      type: "pointermove",
       map,
-      coordinate: [0, 0],
+      coordinate: [0, 0]
     });
     await map.dispatchEvent({
-      type: 'singleclick',
+      type: "singleclick",
       map,
-      coordinate: [0, 0],
+      coordinate: [0, 0]
     });
     expect(spy).toHaveBeenCalledTimes(0);
     expect(spy2).toHaveBeenCalledTimes(0);
     global.console.error.mockRestore();
   });
-
-  test('should clone', () => {
+  test("should clone", () => {
     const layer = new Layer({
-      name: 'Layer',
-      copyrights: ['bar'],
-      olLayer: new Group({ layers: [olLayer] }),
+      name: "Layer",
+      copyrights: ["bar"],
+      olLayer: new Group({ layers: [olLayer] })
     });
-    const clone = layer.clone({ name: 'clone' });
+    const clone = layer.clone({ name: "clone" });
     expect(clone).not.toBe(layer);
-    expect(clone.name).toBe('clone');
+    expect(clone.name).toBe("clone");
     expect(clone).toBeInstanceOf(Layer);
   });
 });