mobility-toolbox-js 2.3.9 → 2.3.10

package/src/ol/controls/snapshots/RoutingControlStation1.json

@@ -0,0 +1,60 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {
+        "uid": "a4dca961d199ff76",
+        "name": "Z\u00fcrich HB",
+        "country_code": "CH",
+        "rank": null,
+        "translated_names": [],
+        "mot": {
+          "bus": false,
+          "rail": true,
+          "tram": false,
+          "ferry": false,
+          "subway": false,
+          "gondola": false,
+          "cable_car": false,
+          "funicular": false
+        },
+        "platforms": {
+          "rail": [
+            "3",
+            "4",
+            "5",
+            "6",
+            "7",
+            "8",
+            "9",
+            "10",
+            "11",
+            "12",
+            "13",
+            "14",
+            "15",
+            "16",
+            "17",
+            "18",
+            "21",
+            "22",
+            "31",
+            "32",
+            "33",
+            "34",
+            "41",
+            "42",
+            "43",
+            "44"
+          ]
+        },
+        "ifopt": null,
+        "ident_source": "sbb",
+        "id": "8503000",
+        "code": "ZUE"
+      },
+      "geometry": { "type": "Point", "coordinates": [8.540212, 47.378177] }
+    }
+  ]
+}

package/src/ol/controls/snapshots/RoutingControlStation2.json

@@ -0,0 +1,49 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {
+        "uid": "e3666f03cba06b2b",
+        "name": "Luzern",
+        "country_code": "CH",
+        "rank": null,
+        "translated_names": [],
+        "mot": {
+          "bus": false,
+          "rail": true,
+          "tram": false,
+          "ferry": false,
+          "subway": false,
+          "gondola": false,
+          "cable_car": false,
+          "funicular": false
+        },
+        "platforms": {
+          "rail": [
+            "1",
+            "2",
+            "3",
+            "4",
+            "5",
+            "6",
+            "7",
+            "8",
+            "9",
+            "10",
+            "11",
+            "12",
+            "13",
+            "14",
+            "15"
+          ]
+        },
+        "ifopt": null,
+        "ident_source": "sbb",
+        "id": "8505000",
+        "code": "LZ"
+      },
+      "geometry": { "type": "Point", "coordinates": [8.310183, 47.050178] }
+    }
+  ]
+}

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

@@ -0,0 +1,212 @@
+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', () => {
+  beforeEach(() => {
+    map = new Map({});
+    olLayer = new VectorLayer({ source: new VectorSource() });
+  });
+
+  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 });
+    expect(layer.visible).toBe(true);
+  });
+
+  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 });
+    layer.visible = false;
+    expect(layer.visible).toBe(false);
+  });
+
+  test('should visibility stay unchanged', () => {
+    const layer = new Layer({ name: 'Layer', visible: false, olLayer });
+    layer.visible = 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 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, 'detachFromMap');
+    layer.attachToMap(map);
+    expect(spy).toHaveBeenCalledTimes(1);
+    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.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] }),
+    });
+    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 () => {
+    global.console.error = jest.fn();
+    const layer = new Layer({ name: 'Layer', olLayer });
+    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.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.visible = false;
+    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 () => {
+    global.console.error = jest.fn();
+    const layer = new Layer({ name: 'Layer', olLayer, 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.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.visible = true;
+    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.detachFromMap()', async () => {
+    global.console.error = jest.fn();
+    const layer = new Layer({ name: 'Layer', olLayer, 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.dispatchEvent({
+      type: 'pointermove',
+      map,
+      coordinate: [0, 0],
+    });
+    await map.dispatchEvent({
+      type: 'singleclick',
+      map,
+      coordinate: [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(map);
+    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);
+    expect(spy3).toHaveBeenCalledTimes(0);
+    expect(spy4).toHaveBeenCalledTimes(0);
+    global.console.error.mockRestore();
+  });
+
+  test('should clone', () => {
+    const layer = new Layer({
+      name: 'Layer',
+      copyrights: ['bar'],
+      olLayer: new Group({ layers: [olLayer] }),
+    });
+    const clone = layer.clone({ name: 'clone' });
+    expect(clone).not.toBe(layer);
+    expect(clone.name).toBe('clone');
+    expect(clone).toBeInstanceOf(Layer);
+  });
+});

package/src/ol/layers/Layer.ts

@@ -0,0 +1,252 @@
+import { Map } from 'ol';
+import { EventsKey } from 'ol/events';
+import LayerGroup from 'ol/layer/Group';
+import OlLayer from 'ol/layer/Layer';
+import { unByKey } from 'ol/Observable';
+import LayerCommon from '../../common/layers/LayerCommon';
+import type { LayerCommonOptions } from '../../common/layers/LayerCommon';
+import userInteractionsMixin from '../../common/mixins/UserInteractionsLayerMixin';
+import type { UserInteractionCallback } from '../../types';
+
+export type OlLayerOptions = LayerCommonOptions & {
+  olLayer?: OlLayer;
+};
+
+/**
+ * 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 {LayerCommon}
+ */
+class Layer extends userInteractionsMixin(LayerCommon) {
+  olLayer?: OlLayer | LayerGroup;
+
+  olListenersKeys!: EventsKey[];
+
+  /* LayerCommon */
+
+  options!: OlLayerOptions;
+
+  visible!: boolean;
+
+  copyrights!: string[];
+
+  map?: Map;
+
+  singleClickListenerKey!: EventsKey;
+
+  pointerMoveListenerKey!: EventsKey;
+
+  /* userInteractionsMixin */
+
+  userInteractions?: boolean;
+
+  userClickInteractions?: boolean;
+
+  userHoverInteractions?: boolean;
+
+  userClickCallbacks?: UserInteractionCallback[];
+
+  userHoverCallbacks?: UserInteractionCallback[];
+
+  onUserClickCallback!: () => void;
+
+  onUserMoveCallback!: () => void;
+
+  /**
+   * Constructor.
+   *
+   * @param {LayerCommonOptions} 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.
+   */
+  constructor(options: OlLayerOptions) {
+    super(options);
+
+    this.olLayer?.setVisible(this.visible);
+  }
+
+  /**
+   * Define layer's properties.
+   *
+   * @private
+   */
+  defineProperties(options: OlLayerOptions) {
+    super.defineProperties(options);
+    Object.defineProperties(this, {
+      olLayer: { value: options.olLayer, writable: true },
+      olListenersKeys: {
+        value: [],
+      },
+    });
+  }
+
+  /**
+   * Initialize the layer and listen to feature clicks.
+   * @param {ol/Map~Map} map
+   */
+  attachToMap(map: Map) {
+    super.attachToMap(map);
+
+    if (!this.map) {
+      return;
+    }
+
+    // Make sure the visiblity is correct
+    this.olLayer?.setVisible(this.visible);
+
+    if (
+      this.olLayer &&
+      !this.map?.getLayers()?.getArray()?.includes(this.olLayer)
+    ) {
+      this.map.addLayer(this.olLayer);
+    }
+
+    this.olListenersKeys.push(
+      // @ts-ignore
+      this.on('change:visible', () => {
+        if (this.olLayer) {
+          this.olLayer.setVisible(this.visible);
+        }
+      }),
+    );
+
+    this.olListenersKeys.push(
+      // @ts-ignore
+      this.on('change:minZoom', () => {
+        if (this.olLayer && this.get('minZoom')) {
+          this.olLayer.setMinZoom(this.get('minZoom'));
+        }
+      }),
+    );
+
+    this.olListenersKeys.push(
+      // @ts-ignore
+      this.on('change:maxZoom', () => {
+        if (this.olLayer && this.get('maxZoom')) {
+          this.olLayer.setMaxZoom(this.get('maxZoom'));
+        }
+      }),
+    );
+
+    this.olListenersKeys.push(
+      this.map.getLayers().on('remove', (evt) => {
+        if (evt.element === this.olLayer) {
+          this.detachFromMap();
+        }
+      }),
+    );
+
+    this.toggleVisibleListeners();
+    this.olListenersKeys.push(
+      // @ts-ignore
+      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 as unknown as LayerGroup).getLayers) {
+        (this.olLayer as unknown as LayerGroup)
+          .getLayers()
+          .getArray()
+          .forEach((layer) => {
+            // @ts-ignore
+            if (layer.getSource) {
+              // @ts-ignore
+              layer.getSource()?.setAttributions(attributions);
+            }
+          });
+
+        // @ts-ignore
+      } else if (this.olLayer.getSource) {
+        // @ts-ignore
+        this.olLayer.getSource()?.setAttributions(attributions);
+      }
+    }
+  }
+
+  /**
+   * Terminate what was initialized in init function. Remove layer, events...
+   */
+  detachFromMap() {
+    this.deactivateUserInteractions();
+    unByKey(this.olListenersKeys);
+
+    if (
+      this.olLayer &&
+      this.map?.getLayers()?.getArray()?.includes(this.olLayer)
+    ) {
+      this.map.removeLayer(this.olLayer);
+    }
+
+    super.detachFromMap();
+  }
+
+  activateUserInteractions() {
+    this.deactivateUserInteractions();
+    if (
+      this.map &&
+      this.userInteractions &&
+      this.userClickInteractions &&
+      this.userClickCallbacks?.length
+    ) {
+      this.singleClickListenerKey = this.map.on(
+        'singleclick',
+        this.onUserClickCallback,
+      );
+      this.olListenersKeys.push(this.singleClickListenerKey);
+    }
+    if (
+      this.map &&
+      this.userInteractions &&
+      this.userHoverInteractions &&
+      this.userHoverCallbacks?.length
+    ) {
+      this.pointerMoveListenerKey = this.map.on(
+        'pointermove',
+        this.onUserMoveCallback,
+      );
+    }
+  }
+
+  deactivateUserInteractions() {
+    unByKey([this.pointerMoveListenerKey, this.singleClickListenerKey]);
+  }
+
+  /**
+   * Toggle listeners needed when a layer is avisible or not.
+   * @private
+   */
+  toggleVisibleListeners() {
+    if (this.visible) {
+      this.activateUserInteractions();
+    } else {
+      this.deactivateUserInteractions();
+    }
+  }
+
+  /**
+   * Create a copy of the Layer.
+   * @param {Object} newOptions Options to override
+   * @return {Layer} A Layer
+   */
+  clone(newOptions: OlLayerOptions) {
+    return new Layer({ ...this.options, ...newOptions });
+  }
+}
+export default Layer;