mobility-toolbox-js 2.0.0 → 2.1.0

package/ol/layers/MapboxStyleLayer.test.js

@@ -1,262 +0,0 @@
-import OlMap from 'ol/Map';
-import View from 'ol/View';
-import gllib from 'maplibre-gl';
-import Layer from './Layer';
-import MaplibreLayer from './MaplibreLayer';
-import MapboxStyleLayer from './MapboxStyleLayer';
-
-let source;
-let layer;
-let map;
-let onClick;
-
-const styleLayer = {
-  id: 'layer',
-};
-
-describe('MapboxStyleLayer', () => {
-  beforeEach(() => {
-    onClick = jest.fn();
-    source = new MaplibreLayer({
-      name: 'Layer',
-      apiKey: false,
-    });
-    layer = new MapboxStyleLayer({
-      name: 'mapbox layer',
-      visible: true,
-      mapboxLayer: source,
-      styleLayer,
-      onClick,
-    });
-    map = new OlMap({
-      target: document.createElement('div'),
-      view: new View({ center: [0, 0] }),
-    });
-  });
-
-  afterEach(() => {
-    if (layer.map) {
-      layer.terminate(map);
-    }
-    if (source.map) {
-      source.terminate(map);
-    }
-  });
-
-  test('should be instanced.', () => {
-    expect(layer).toBeInstanceOf(MapboxStyleLayer);
-    expect(layer.styleLayers[0]).toBe(styleLayer);
-    expect(layer.clickCallbacks[0]).toBe(onClick);
-  });
-
-  test('should not initalized mapbox map.', () => {
-    layer.init();
-    expect(layer.mbMap).toBe();
-    layer.terminate();
-  });
-
-  test('should initalized mapbox map.', () => {
-    source.init(map);
-    layer.init(map);
-    expect(layer.mapboxLayer.mbMap).toBeInstanceOf(gllib.Map);
-    layer.terminate();
-    source.terminate();
-  });
-
-  test('should add onClick callback.', () => {
-    const onClick2 = jest.fn();
-    layer.onClick(onClick2);
-    expect(layer.clickCallbacks[1]).toBe(onClick2);
-  });
-
-  test('should called terminate on initalization.', () => {
-    const spy = jest.spyOn(layer, 'terminate');
-    layer.init();
-    expect(spy).toHaveBeenCalledTimes(1);
-    layer.terminate(map);
-  });
-
-  test('should return coordinates, features and a layer instance.', async () => {
-    source.init(map);
-    layer.init(map);
-    const data = await layer.getFeatureInfoAtCoordinate([50, 50]);
-    expect(data.coordinate).toEqual([50, 50]);
-    expect(data.features).toEqual([]);
-    expect(data.layer).toBeInstanceOf(MapboxStyleLayer);
-    layer.terminate(map);
-    source.terminate(map);
-  });
-
-  test('should call onClick callback', async () => {
-    const coordinate = [500, 500];
-    const features = [];
-    const evt = { type: 'singleclick', map, coordinate };
-    layer.init(map);
-    expect(onClick).toHaveBeenCalledTimes(0);
-    await map.dispatchEvent(evt);
-    expect(onClick).toHaveBeenCalledTimes(1);
-    expect(onClick).toHaveBeenCalledWith(features, layer, coordinate);
-    layer.terminate();
-  });
-
-  test('should call super class terminate function.', () => {
-    layer.init(map);
-    const spy = jest.spyOn(Layer.prototype, 'terminate');
-    layer.terminate(map);
-    expect(spy).toHaveBeenCalledTimes(1);
-    spy.mockRestore();
-  });
-
-  test('should call super class terminate if the mapboxLayer associated has been terminated before.', () => {
-    layer.init(map);
-    source.terminate(map);
-    const spy = jest.spyOn(Layer.prototype, 'terminate');
-    layer.terminate(map);
-    expect(spy).toHaveBeenCalledTimes(1);
-    spy.mockRestore();
-  });
-
-  test('should clone', () => {
-    const clone = layer.clone({ name: 'clone' });
-    expect(clone).not.toBe(layer);
-    expect(clone.name).toBe('clone');
-    expect(clone).toBeInstanceOf(MapboxStyleLayer);
-  });
-
-  test('should add layer on load', () => {
-    const style = { layers: [] };
-    layer.mapboxLayer.mbMap = {
-      getStyle: () => style,
-      getSource: () => ({}),
-      getLayer: () => null,
-      setLayoutProperty: () => null,
-      addLayer: (styleLayerr) => style.layers.push(styleLayerr),
-    };
-    layer.onLoad();
-    expect(style.layers[0]).toBe(styleLayer);
-  });
-
-  describe('should set disabled property to false on load', () => {
-    test('when layer uses styleLayer property', () => {
-      const styles = { layers: [] };
-      layer.mapboxLayer.mbMap = {
-        getStyle: () => styles,
-        getSource: () => ({}),
-        getLayer: () => null,
-        setLayoutProperty: () => null,
-        addLayer: (styleLayerr) => styles.layers.push(styleLayerr),
-      };
-      expect(layer).toBeInstanceOf(MapboxStyleLayer);
-      layer.onLoad();
-      expect(layer.disabled).toBe(false);
-    });
-  });
-
-  describe('should set disabled property to true on load', () => {
-    test('when layer uses styleLayersFilter property', () => {
-      const styles = { layers: [styleLayer] };
-      const layer2 = new MapboxStyleLayer({
-        name: 'mapbox layer',
-        mapboxLayer: source,
-        styleLayersFilter: () => false,
-      });
-      layer2.mapboxLayer.mbMap = {
-        getStyle: () => styles,
-        getSource: () => ({}),
-        getLayer: () => null,
-        setLayoutProperty: () => null,
-        addLayer: () => ({}),
-      };
-      layer2.onLoad();
-      expect(layer2.disabled).toBe(true);
-    });
-  });
-
-  describe('#getFeatureInfoAtCoordinate()', () => {
-    beforeEach(() => {
-      source.init(map);
-      source.mbMap.isStyleLoaded = jest.fn(() => true);
-      source.mbMap.getSource = jest.fn(() => true);
-    });
-    afterEach(() => {
-      source.mbMap.getSource.mockRestore();
-      source.mbMap.isStyleLoaded.mockRestore();
-    });
-
-    test('should request features on layers ids from styleLayers property', () => {
-      source.mbMap.getStyle = jest.fn(() => ({
-        layers: [{ id: 'foo' }, { id: 'layer' }, { id: 'bar' }],
-      }));
-      layer.init(map);
-      layer.mapboxLayer.getFeatureInfoAtCoordinate = jest.fn(() =>
-        Promise.resolve({ features: [] }),
-      );
-      layer.getFeatureInfoAtCoordinate([0, 0]).then(() => {});
-      expect(layer.mapboxLayer.getFeatureInfoAtCoordinate).toHaveBeenCalledWith(
-        [0, 0],
-        { layers: ['layer'], validate: false },
-      );
-      layer.mapboxLayer.getFeatureInfoAtCoordinate.mockRestore();
-      source.mbMap.getStyle.mockRestore();
-    });
-
-    test('should request features on layers ids from styleLayersFilter property', () => {
-      source.mbMap.getStyle = jest.fn(() => ({
-        layers: [{ id: 'foo' }, { id: 'layer' }, { id: 'bar' }, { id: 'foo2' }],
-      }));
-      const layer2 = new MapboxStyleLayer({
-        name: 'mapbox layer',
-        visible: true,
-        mapboxLayer: source,
-        styleLayer,
-        styleLayersFilter: ({ id }) => /foo/.test(id),
-      });
-      layer2.init(map);
-      layer2.mapboxLayer.getFeatureInfoAtCoordinate = jest.fn(() =>
-        Promise.resolve({ features: [] }),
-      );
-      layer2.getFeatureInfoAtCoordinate([0, 0]).then(() => {});
-      expect(
-        layer2.mapboxLayer.getFeatureInfoAtCoordinate,
-      ).toHaveBeenCalledWith([0, 0], {
-        layers: ['foo', 'foo2'],
-        validate: false,
-      });
-      layer2.mapboxLayer.getFeatureInfoAtCoordinate.mockRestore();
-      source.mbMap.getStyle.mockRestore();
-    });
-
-    test('should request features on layers ids from queryRenderedLayersFilter property', () => {
-      source.mbMap.getStyle = jest.fn(() => ({
-        layers: [
-          { id: 'foo' },
-          { id: 'bar2' },
-          { id: 'layer' },
-          { id: 'bar' },
-          { id: 'foo2' },
-        ],
-      }));
-      const layer2 = new MapboxStyleLayer({
-        name: 'mapbox layer',
-        visible: true,
-        mapboxLayer: source,
-        styleLayer,
-        styleLayersFilter: ({ id }) => /foo/.test(id),
-        queryRenderedLayersFilter: ({ id }) => /bar/.test(id),
-      });
-      layer2.init(map);
-      layer2.mapboxLayer.getFeatureInfoAtCoordinate = jest.fn(() =>
-        Promise.resolve({ features: [] }),
-      );
-      layer2.getFeatureInfoAtCoordinate([0, 0]).then(() => {});
-      expect(
-        layer2.mapboxLayer.getFeatureInfoAtCoordinate,
-      ).toHaveBeenCalledWith([0, 0], {
-        layers: ['bar2', 'bar'],
-        validate: false,
-      });
-      layer2.mapboxLayer.getFeatureInfoAtCoordinate.mockRestore();
-      source.mbMap.getStyle.mockRestore();
-    });
-  });
-});

package/ol/layers/RoutingLayer.test.js

@@ -1,49 +0,0 @@
-import fetch from 'jest-fetch-mock';
-import Map from 'ol/Map';
-import View from 'ol/View';
-import RoutingLayer from './RoutingLayer';
-
-let layer;
-let onClick;
-let olMap;
-
-describe('RoutingLayer', () => {
-  beforeEach(() => {
-    global.fetch = fetch;
-    fetch.resetMocks();
-
-    onClick = jest.fn();
-    layer = new RoutingLayer({
-      onClick,
-      apiKey: 'apiKey',
-    });
-
-    olMap = new Map({
-      view: new View({
-        center: [831634, 5933959],
-        zoom: 9,
-      }),
-    });
-  });
-
-  test('should be instanced.', () => {
-    expect(layer).toBeInstanceOf(RoutingLayer);
-    expect(layer.clickCallbacks[0]).toBe(onClick);
-  });
-
-  test('should called terminate on initalization.', () => {
-    const spy = jest.spyOn(layer, 'terminate');
-
-    fetch.mockResponseOnce(JSON.stringify(global.fetchTrajectoriesResponse));
-
-    layer.init(olMap);
-    expect(spy).toHaveBeenCalledTimes(1);
-  });
-
-  test('should clone', () => {
-    const clone = layer.clone({ name: 'clone' });
-    expect(clone).not.toBe(layer);
-    expect(clone.name).toBe('clone');
-    expect(clone).toBeInstanceOf(RoutingLayer);
-  });
-});

package/ol/layers/TralisLayer.js

@@ -1,359 +0,0 @@
-import GeoJSON from 'ol/format/GeoJSON';
-import { Layer as OLLayer, Group, Vector as VectorLayer } from 'ol/layer';
-import Source from 'ol/source/Source';
-import { composeCssTransform } from 'ol/transform';
-import { Vector as VectorSource } from 'ol/source';
-import Layer from './Layer';
-import mixin from '../../common/mixins/TralisLayerMixin';
-import { fullTrajectoryStyle } from '../styles';
-
-const format = new GeoJSON();
-
-/**
- * Responsible for loading and display data from a Tralis service.
- *
- * @example
- * import { TralisLayer } from 'mobility-toolbox-js/ol';
- *
- * const layer = new TralisLayer({
- *   url: [yourUrl],
- *   apiKey: [yourApiKey],
- * });
- *
- *
- * @see <a href="/api/class/src/api/tralis/TralisAPI%20js~TralisAPI%20html">TralisAPI</a>
- *
- * @extends {Layer}
- * @implements {TralisLayerInterface}
- */
-class TralisLayer extends mixin(Layer) {
-  /**
-   * Constructor.
-   *
-   * @param {Object} options
-   * @private
-   */
-  constructor(options = {}) {
-    // We use a group to be able to add custom vector layer in extended class.
-    // For example TrajservLayer use a vectorLayer to display the complete trajectory.
-    super({
-      ...options,
-    });
-
-    /** @ignore */
-    this.olLayer =
-      options.olLayer ||
-      new Group({
-        layers: [
-          new VectorLayer({
-            source: new VectorSource({ features: [] }),
-            style: options.fullTrajectoryStyle || fullTrajectoryStyle,
-          }),
-          new OLLayer({
-            source: new Source({}),
-            render: (frameState) => {
-              if (!this.tracker || !this.tracker.canvas) {
-                return null;
-              }
-
-              if (!this.container) {
-                this.container = document.createElement('div');
-                this.container.style.position = 'absolute';
-                this.container.style.width = '100%';
-                this.container.style.height = '100%';
-                this.transformContainer = document.createElement('div');
-                this.transformContainer.style.position = 'absolute';
-                this.transformContainer.style.width = '100%';
-                this.transformContainer.style.height = '100%';
-                this.container.appendChild(this.transformContainer);
-                this.tracker.canvas.style.position = 'absolute';
-                this.tracker.canvas.style.top = '0';
-                this.tracker.canvas.style.left = '0';
-                this.tracker.canvas.style.transformOrigin = 'top left';
-                this.transformContainer.appendChild(this.tracker.canvas);
-              }
-
-              if (this.renderedViewState) {
-                const { center, resolution, rotation } = frameState.viewState;
-                const {
-                  center: renderedCenter,
-                  resolution: renderedResolution,
-                  rotation: renderedRotation,
-                } = this.renderedViewState;
-
-                if (renderedResolution / resolution >= 3) {
-                  // Avoid having really big points when zooming fast.
-                  const { canvas } = this.tracker;
-                  const context = canvas.getContext('2d');
-                  context.clearRect(0, 0, canvas.width, canvas.height);
-                } else {
-                  const pixelCenterRendered =
-                    this.map.getPixelFromCoordinate(renderedCenter);
-                  const pixelCenter = this.map.getPixelFromCoordinate(center);
-                  this.transformContainer.style.transform = composeCssTransform(
-                    pixelCenterRendered[0] - pixelCenter[0],
-                    pixelCenterRendered[1] - pixelCenter[1],
-                    renderedResolution / resolution,
-                    renderedResolution / resolution,
-                    rotation - renderedRotation,
-                    0,
-                    0,
-                  );
-                }
-              }
-              return this.container;
-            },
-          }),
-        ],
-      });
-
-    // We store the layer used to highlight the full Trajectory
-    this.vectorLayer = this.olLayer.getLayers().item(0);
-
-    // Options the last render run did happen. If something changes
-    // we have to render again
-    /** @ignore */
-    this.renderState = {
-      center: [0, 0],
-      zoom: null,
-      rotation: 0,
-    };
-  }
-
-  init(map) {
-    super.init(map);
-    if (this.map) {
-      this.olListenersKeys.push(
-        this.map.on(['moveend', 'change:target'], (evt) => {
-          const view = this.map.getView();
-          if (view.getAnimating() || view.getInteracting()) {
-            return;
-          }
-          const zoom = view.getZoom();
-
-          // Update the interval between render updates
-          if (this.currentZoom !== zoom) {
-            this.onZoomEnd(evt);
-          }
-          this.currentZoom = zoom;
-
-          this.onMoveEnd(evt);
-        }),
-      );
-    }
-  }
-
-  /**
-   * Destroy the container of the tracker.
-   */
-  terminate() {
-    super.terminate();
-    this.container = null;
-  }
-
-  /**
-   * Detect in the canvas if there is data to query at a specific coordinate.
-   * @param {ol/coordinate~Coordinate}  coordinate The coordinate to test
-   * @returns
-   */
-  hasFeatureInfoAtCoordinate(coordinate) {
-    if (this.map && this.tracker && this.tracker.canvas) {
-      const context = this.tracker.canvas.getContext('2d');
-      const pixel = this.map.getPixelFromCoordinate(coordinate);
-      return !!context.getImageData(
-        pixel[0] * this.pixelRatio,
-        pixel[1] * this.pixelRatio,
-        1,
-        1,
-      ).data[3];
-    }
-    return false;
-  }
-
-  /**
-   * Render the trajectories using current map's size, resolution and rotation.
-   * @param {boolean} noInterpolate if true, renders the vehicles without interpolating theirs positions.
-   * @overrides
-   */
-  renderTrajectories(noInterpolate) {
-    const view = this.map.getView();
-    super.renderTrajectories(
-      {
-        size: this.map.getSize(),
-        center: this.map.getView().getCenter(),
-        extent: view.calculateExtent(),
-        resolution: view.getResolution(),
-        rotation: view.getRotation(),
-        zoom: view.getZoom(),
-        pixelRatio: this.pixelRatio,
-      },
-      noInterpolate,
-    );
-  }
-
-  /**
-   * Launch renderTrajectories. it avoids duplicating code in renderTrajectories methhod.
-   * @private
-   * @override
-   */
-  renderTrajectoriesInternal(viewState, noInterpolate) {
-    let isRendered = false;
-
-    const blockRendering =
-      this.map.getView().getAnimating() || this.map.getView().getInteracting();
-
-    // Don't render the map when the map is animating or interacting.
-    isRendered = blockRendering
-      ? false
-      : super.renderTrajectoriesInternal(viewState, noInterpolate);
-
-    // We update the current render state.
-    if (isRendered) {
-      this.renderedViewState = { ...viewState };
-
-      if (this.transformContainer) {
-        this.transformContainer.style.transform = '';
-      }
-    }
-  }
-
-  /**
-   * Return the delay in ms before the next rendering.
-   */
-  getRefreshTimeInMs() {
-    return super.getRefreshTimeInMs(this.map.getView().getZoom());
-  }
-
-  getFeatureInfoAtCoordinate(coordinate, options = {}) {
-    const resolution = this.map.getView().getResolution();
-    return super.getFeatureInfoAtCoordinate(coordinate, {
-      resolution,
-      ...options,
-    });
-  }
-
-  /**
-   * On move end we update the websocket with the new bbox.
-   *
-   * @param {ol/MapEvent~MapEvent} evt Moveend event
-   * @private
-   * @override
-   */
-  onMoveEnd() {
-    if (this.visible && this.isUpdateBboxOnMoveEnd) {
-      this.setBbox();
-    }
-
-    if (
-      this.visible &&
-      this.isUpdateBboxOnMoveEnd &&
-      this.isClickActive &&
-      this.selectedVehicleId
-    ) {
-      this.highlightTrajectory(this.selectedVehicleId);
-    }
-  }
-
-  /**
-   * Function called on moveend event only when the zoom has changed.
-   *
-   * @param {ol/MapEvent~MapEvent} evt Moveend event.
-   * @private
-   * @override
-   */
-  // eslint-disable-next-line no-unused-vars
-  onZoomEnd(evt) {
-    super.onZoomEnd(evt);
-  }
-
-  /**
-   * Update the cursor style when hovering a vehicle.
-   *
-   * @private
-   * @override
-   */
-  onFeatureHover(features, layer, coordinate) {
-    super.onFeatureHover(features, layer, coordinate);
-    this.map.getTargetElement().style.cursor = features.length
-      ? 'pointer'
-      : 'auto';
-  }
-
-  /**
-   * Display the complete trajectory of the vehicle.
-   *
-   * @private
-   * @override
-   */
-  onFeatureClick(features, layer, coordinate) {
-    super.onFeatureClick(features, layer, coordinate);
-    if (!features.length && this.vectorLayer) {
-      this.vectorLayer.getSource().clear();
-    }
-    if (this.selectedVehicleId) {
-      this.highlightTrajectory(this.selectedVehicleId);
-    }
-  }
-
-  /**
-   * Remove the trajectory form the list if necessary.
-   *
-   * @private
-   */
-  purgeTrajectory(trajectory, extent, zoom) {
-    return super.purgeTrajectory(
-      trajectory,
-      extent || this.map.getView().calculateExtent(),
-      zoom || this.map.getView().getZoom(),
-    );
-  }
-
-  /**
-   * Send the current bbox to the websocket
-   *
-   * @private
-   */
-  setBbox(extent, zoom) {
-    let newExtent = extent;
-    let newZoom = zoom;
-    if (!newExtent && this.isUpdateBboxOnMoveEnd) {
-      newExtent = extent || this.map.getView().calculateExtent();
-      newZoom = Math.floor(this.map.getView().getZoom());
-    }
-    super.setBbox(newExtent, newZoom);
-  }
-
-  /**
-   * Highlight the trajectory of journey.
-   * @private
-   */
-  highlightTrajectory(id) {
-    this.api
-      .getFullTrajectory(id, this.mode, this.generalizationLevel)
-      .then((fullTrajectory) => {
-        const vectorSource = this.vectorLayer.getSource();
-        vectorSource.clear();
-
-        if (
-          !fullTrajectory ||
-          !fullTrajectory.features ||
-          !fullTrajectory.features.length
-        ) {
-          return;
-        }
-        const features = format.readFeatures(fullTrajectory);
-        this.vectorLayer.getSource().addFeatures(features);
-      });
-  }
-
-  /**
-   * Create a copy of the TralisLayer.
-   * @param {Object} newOptions Options to override
-   * @return {TralisLayer} A TralisLayer
-   */
-  clone(newOptions) {
-    return new TralisLayer({ ...this.options, ...newOptions });
-  }
-}
-
-export default TralisLayer;