mobility-toolbox-js 2.3.9 → 2.3.10

package/src/ol/layers/RoutingLayer.ts

@@ -0,0 +1,113 @@
+import { Circle, Fill, Stroke, Style } from 'ol/style';
+import { Vector as VectorSource } from 'ol/source';
+import { Vector } from 'ol/layer';
+import type { StyleFunction, StyleLike } from 'ol/style/Style';
+import type { FeatureLike } from 'ol/Feature';
+import { Geometry } from 'ol/geom';
+import Feature from 'ol/Feature';
+import Layer from './Layer';
+import type { OlLayerOptions } from './Layer';
+
+export type OlRoutingLayerOptions = OlLayerOptions & {
+  olLayer?: Vector<VectorSource<Feature<Geometry>>>;
+  style?: StyleLike;
+};
+
+/** @private */
+const circleStyle = new Circle({
+  radius: 6,
+  fill: new Fill({
+    color: [255, 0, 0, 1],
+  }),
+  stroke: new Stroke({
+    color: [0, 0, 0, 1],
+    width: 1,
+  }),
+});
+
+/** @private */
+const blackBorder = new Style({
+  stroke: new Stroke({
+    color: [0, 0, 0, 1],
+    width: 5,
+  }),
+});
+
+/** @private */
+const redLine = new Style({
+  image: circleStyle,
+  stroke: new Stroke({
+    color: [255, 0, 0, 1],
+    width: 3,
+  }),
+});
+
+/** @private */
+const dashedRedLine = new Style({
+  image: circleStyle,
+  stroke: new Stroke({
+    color: [255, 0, 0, 1],
+    width: 3,
+    lineDash: [1, 10],
+  }),
+});
+
+/** @private */
+const defaultStyleFunction: StyleFunction = (
+  feature: FeatureLike,
+  resolution: number,
+) => {
+  const minResolution = feature.get('minResolution');
+  const maxResolution = feature.get('maxResolution');
+  const inRange = resolution <= minResolution && resolution > maxResolution;
+
+  if (minResolution && maxResolution && !inRange) {
+    return [];
+  }
+  const mot = feature.get('mot');
+
+  if (mot !== 'foot') {
+    return [blackBorder, redLine];
+  }
+
+  return [dashedRedLine];
+};
+
+/**
+ * A class use to display vector data.
+ *
+ * @classproperty {ol/Map~Map} map - The map where the layer is displayed.
+ * @extends {Layer}
+ */
+class RoutingLayer extends Layer {
+  olLayer?: Vector<VectorSource<Feature<Geometry>>>;
+
+  options: OlRoutingLayerOptions = {};
+
+  /**
+   * Constructor.
+   * @param {Object} [options]
+   * @param {ol/style/Style~StyleLike} [options.style] Style to be used for routes, uses (ol/StyleLike) [https://openlayers.org/en/latest/apidoc/module-ol_style_Style.html#~StyleLike] instances
+   */
+  constructor(options: OlRoutingLayerOptions) {
+    super(options);
+
+    this.olLayer =
+      options.olLayer ||
+      new Vector({
+        source: new VectorSource(),
+        style: options.style || defaultStyleFunction,
+      });
+  }
+
+  /**
+   * Create a copy of the RoutingLayer.
+   * @param {Object} newOptions Options to override
+   * @return {RoutingLayer} A RoutingLayer
+   */
+  clone(newOptions: OlRoutingLayerOptions) {
+    return new RoutingLayer({ ...this.options, ...newOptions });
+  }
+}
+
+export default RoutingLayer;

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

@@ -0,0 +1,87 @@
+import OLVectorLayer from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
+import View from 'ol/View';
+import Feature from 'ol/Feature';
+import Point from 'ol/geom/Point';
+import Map from 'ol/Map';
+import VectorLayer from './VectorLayer';
+
+const feature1 = new Feature({
+  attribute: 'bar',
+  geometry: new Point([500, 500]),
+});
+const olLayer = new OLVectorLayer({
+  source: new VectorSource({
+    features: [
+      feature1,
+      new Feature({
+        attribute: 'foo',
+        geometry: new Point([50, 50]),
+      }),
+    ],
+  }),
+});
+
+let layer;
+let map;
+let onClick;
+
+describe('VectorLayer', () => {
+  beforeEach(() => {
+    onClick = jest.fn();
+    layer = new VectorLayer({
+      name: 'Layer',
+      olLayer,
+      onClick,
+    });
+    map = new Map({
+      view: new View({ resolution: 5 }),
+      target: document.body,
+    });
+  });
+
+  test('should be instanced.', () => {
+    expect(layer).toBeInstanceOf(VectorLayer);
+    expect(layer.hitTolerance).toBe(5);
+  });
+
+  test('should called terminate on initalization.', () => {
+    const spy = jest.spyOn(layer, 'detachFromMap');
+    layer.attachToMap();
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  test('should call getFeatureInfoAtCoordinate on click then the callback', async () => {
+    const coordinate = [500, 500];
+    const px = [10, 10];
+    const features = [feature1];
+    const evt = { type: 'singleclick', map, coordinate };
+    const spy = jest.spyOn(layer, 'getFeatureInfoAtCoordinate');
+    const spy2 = jest.spyOn(map, 'getPixelFromCoordinate').mockReturnValue(px);
+    const spy3 = jest
+      .spyOn(map, 'getFeaturesAtPixel')
+      .mockReturnValue(features);
+    layer.attachToMap(map);
+    expect(onClick).toHaveBeenCalledTimes(0);
+    await map.dispatchEvent(evt);
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith(coordinate);
+    expect(spy2).toHaveBeenCalledTimes(1);
+    expect(spy2).toHaveBeenCalledWith(coordinate);
+    expect(spy3).toHaveBeenCalledTimes(1);
+    expect(spy3.mock.calls[0][0]).toBe(px);
+    expect(spy3.mock.calls[0][1].layerFilter(layer.olLayer)).toBe(true);
+    expect(spy3.mock.calls[0][1].layerFilter({})).toBe(false);
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(onClick.mock.calls[0][0]).toBe(features);
+    expect(onClick.mock.calls[0][1]).toBe(layer);
+    expect(onClick.mock.calls[0][2]).toBe(coordinate);
+  });
+
+  test('should clone', () => {
+    const clone = layer.clone({ name: 'clone' });
+    expect(clone).not.toBe(layer);
+    expect(clone.name).toBe('clone');
+    expect(clone).toBeInstanceOf(VectorLayer);
+  });
+});

package/src/ol/layers/VectorLayer.ts

@@ -0,0 +1,48 @@
+import { Feature } from 'ol';
+import { Coordinate } from 'ol/coordinate';
+import { LayerGetFeatureInfoResponse } from '../../types';
+import Layer, { OlLayerOptions } from './Layer';
+
+/**
+ * A class use to display vector data.
+ *
+ * @classproperty {ol/Map~Map} map - The map where the layer is displayed.
+ * @extends {Layer}
+ */
+class VectorLayer extends Layer {
+  /**
+   * Request feature information for a given coordinate.
+   * @param {ol/coordinate~Coordinate} coordinate the coordinate to request the information at.
+   * @return {Promise<FeatureInfo>} Promise with features, layer and coordinate.
+   */
+  getFeatureInfoAtCoordinate(
+    coordinate: Coordinate,
+  ): Promise<LayerGetFeatureInfoResponse> {
+    let features: Feature[] = [];
+
+    if (this.map) {
+      const pixel = this.map.getPixelFromCoordinate(coordinate);
+      features = this.map.getFeaturesAtPixel(pixel, {
+        layerFilter: (l) => l === this.olLayer,
+        hitTolerance: this.hitTolerance,
+      }) as Feature[];
+    }
+
+    return Promise.resolve({
+      features,
+      layer: this,
+      coordinate,
+    });
+  }
+
+  /**
+   * Create a copy of the VectorLayer.
+   * @param {Object} newOptions Options to override
+   * @return {VectorLayer} A VectorLayer
+   */
+  clone(newOptions: OlLayerOptions) {
+    return new VectorLayer({ ...this.options, ...newOptions });
+  }
+}
+
+export default VectorLayer;

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

@@ -0,0 +1,65 @@
+import OLView from 'ol/View';
+import ImageLayer from 'ol/layer/Image';
+import ImageWMS from 'ol/source/ImageWMS';
+import fetch from 'jest-fetch-mock';
+import Map from 'ol/Map';
+import WMSLayer from './WMSLayer';
+
+describe('WMSLayer', () => {
+  let map;
+  let layer;
+  beforeEach(() => {
+    map = new Map({
+      view: new OLView({ resolution: 5 }),
+      target: document.body,
+    });
+
+    layer = new WMSLayer({
+      olLayer: new ImageLayer({
+        source: new ImageWMS({
+          url: 'http://dummy',
+          params: { LAYERS: 'layers' },
+        }),
+      }),
+    });
+    layer.attachToMap(map);
+    fetch.mockResponseOnce(JSON.stringify({ features: [] }));
+    global.fetch = fetch;
+  });
+
+  afterEach(() => {
+    layer.detachFromMap();
+  });
+
+  test('should initialize.', () => {
+    expect(layer).toBeInstanceOf(WMSLayer);
+  });
+
+  test('should called terminate on initalization.', () => {
+    const spy = jest.spyOn(layer, 'detachFromMap');
+    layer.attachToMap();
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  test('should return a promise resolving features.', async () => {
+    const data = await layer.getFeatureInfoAtCoordinate([50, 50]);
+    const params = new URL(fetch.mock.calls[0][0]).searchParams;
+    expect(params.get('REQUEST')).toBe('GetFeatureInfo');
+    expect(params.get('I')).toBe('50');
+    expect(params.get('J')).toBe('50');
+    expect(data.features).toEqual([]);
+  });
+
+  test('should return a layer instance and a coordinate.', async () => {
+    const data = await layer.getFeatureInfoAtCoordinate([50, 50]);
+    expect(data.coordinate).toEqual([50, 50]);
+    expect(data.layer).toBeInstanceOf(WMSLayer);
+  });
+
+  test('should clone', () => {
+    const clone = layer.clone({ name: 'clone' });
+    expect(clone).not.toBe(layer);
+    expect(clone.name).toBe('clone');
+    expect(clone).toBeInstanceOf(WMSLayer);
+  });
+});

package/src/ol/layers/WMSLayer.ts

@@ -0,0 +1,114 @@
+import { Feature } from 'ol';
+import { Coordinate } from 'ol/coordinate';
+import GeoJSON from 'ol/format/GeoJSON';
+import ImageLayer from 'ol/layer/Image';
+import TileLayer from 'ol/layer/Tile';
+import { ImageWMS, TileWMS } from 'ol/source';
+import { LayerGetFeatureInfoResponse } from '../../types';
+import Layer, { OlLayerOptions } from './Layer';
+
+/**
+ * Class use to display a WMS layer.
+ *
+ * @classproperty {ol/Map~Map} map - The map where the layer is displayed.
+ * @extends {Layer}
+ */
+class WMSLayer extends Layer {
+  abortController?: AbortController;
+
+  format: GeoJSON;
+
+  olLayer?: TileLayer<TileWMS> | ImageLayer<ImageWMS>;
+
+  /**
+   * @override
+   */
+  constructor(options: OlLayerOptions) {
+    super(options);
+
+    /** @private */
+    this.abortController = new AbortController();
+    /** @private */
+    this.format = new GeoJSON();
+  }
+
+  /**
+   * Get features infos' Url.
+   * @param {ol/coordinate~Coordinate} coord
+   * @return {ol/layer/Layer~Layer}
+   */
+  getFeatureInfoUrl(coord: Coordinate): string | undefined {
+    if (!this.map) {
+      return;
+    }
+
+    const projection = this.map.getView().getProjection();
+    const resolution = this.map.getView().getResolution();
+
+    if (
+      resolution &&
+      projection &&
+      this.olLayer?.getSource()?.getFeatureInfoUrl
+    ) {
+      // eslint-disable-next-line consistent-return
+      return this.olLayer
+        ?.getSource()
+        ?.getFeatureInfoUrl(coord, resolution, projection, {
+          info_format: 'application/json',
+          query_layers: this.olLayer?.getSource()?.getParams().layers,
+        });
+    }
+  }
+
+  /**
+   * Request feature information for a given coordinate.
+   * @param {ol/coordinate~Coordinate} coordinate to request the information at.
+   * @return {Promise<FeatureInfo>} Promise with features, layer and coordinate.
+   */
+  getFeatureInfoAtCoordinate(
+    coordinate: Coordinate,
+  ): Promise<LayerGetFeatureInfoResponse> {
+    this.abortController?.abort();
+    this.abortController = new AbortController();
+    const { signal } = this.abortController;
+    const url = this.getFeatureInfoUrl(coordinate);
+    if (!url) {
+      // eslint-disable-next-line no-console
+      console.error('No url for the WMS layer.');
+      // resolve an empty feature array something fails
+      return Promise.resolve({
+        features: [],
+        coordinate,
+        layer: this,
+      });
+    }
+
+    return fetch(url, { signal })
+      .then((resp) => resp.json())
+      .then((r) => r.features)
+      .then((data) => ({
+        layer: this,
+        coordinate,
+        features: data.map((d: Feature) => this.format.readFeature(d)),
+      }))
+      .catch(() =>
+        // resolve an empty feature array something fails
+        Promise.resolve({
+          features: [],
+          coordinate,
+          layer: this,
+        }),
+      );
+  }
+
+  /**
+   * Create a copy of the WMSLayer.
+   * @param {Object} newOptions Options to override
+   * @return {WMSLayer} A WMSLayer
+   */
+  clone(newOptions: OlLayerOptions) {
+    return new WMSLayer({ ...this.options, ...newOptions });
+  }
+}
+
+export default WMSLayer;

package/src/ol/styles/fullTrajectoryDelayStyle.ts

@@ -0,0 +1,37 @@
+import { Style, Fill, Stroke, Circle } from 'ol/style';
+
+/** @private */
+const stroke = new Style({
+  zIndex: 2,
+  image: new Circle({
+    radius: 5,
+    fill: new Fill({
+      color: '#000000',
+    }),
+  }),
+  stroke: new Stroke({
+    color: '#000000',
+    width: 6,
+  }),
+});
+
+/** @private */
+const fill = new Style({
+  zIndex: 3,
+  image: new Circle({
+    radius: 4,
+    fill: new Fill({
+      color: '#a0a0a0',
+    }),
+  }),
+  stroke: new Stroke({
+    color: '#a0a0a0',
+    width: 4,
+  }),
+});
+
+const fullTrajectoryDelaystyle = (): Style[] => {
+  return [stroke, fill];
+};
+
+export default fullTrajectoryDelaystyle;

package/src/ol/styles/fullTrajectoryStyle.ts

@@ -0,0 +1,56 @@
+import type { FeatureLike } from 'ol/Feature';
+import { Style, Fill, Stroke, Circle } from 'ol/style';
+
+/** @private */
+const borderStyle = new Style({
+  zIndex: 2,
+  image: new Circle({
+    radius: 5,
+    fill: new Fill({
+      color: '#000000',
+    }),
+  }),
+  stroke: new Stroke({
+    color: '#000000',
+    width: 6,
+  }),
+});
+
+const fullTrajectorystyle = (
+  feature: FeatureLike,
+  resolution: number,
+  options: any,
+): Style[] => {
+  let lineColor = '#ffffff'; // white
+
+  const type = feature.get('type');
+  let stroke = feature.get('stroke');
+
+  if (stroke && stroke[0] !== '#') {
+    stroke = `#${stroke}`;
+  }
+
+  lineColor = stroke || options?.getBgColor(type);
+
+  // Don't allow white lines, use red instead.
+  lineColor = /#ffffff/i.test(lineColor) ? '#ff0000' : lineColor;
+
+  const style = [
+    borderStyle,
+    new Style({
+      zIndex: 3,
+      image: new Circle({
+        radius: 4,
+        fill: new Fill({
+          color: lineColor,
+        }),
+      }),
+      stroke: new Stroke({
+        color: lineColor,
+        width: 4,
+      }),
+    }),
+  ];
+  return style;
+};
+export default fullTrajectorystyle;

package/{setupTests.js → src/setupTests.js}

@@ -5,22 +5,27 @@ import fetchTrajectoriesResponse from '../data/fetchTrajectories.json';
 import fetchTrajectoryStationsResponse from '../data/fetchTrajectoryStations.json';
 import stopsSearchResponse from '../data/stopsSearch.json';
 import fetchRouteResponse from '../data/fetchRoute.json';
+
 global.fetchTrajectoryByIdResponse = fetchTrajectoryByIdResponse;
 global.fetchTrajectoriesResponse = fetchTrajectoriesResponse;
 global.fetchTrajectoryStationsResponse = fetchTrajectoryStationsResponse;
 global.stopsSearchResponse = stopsSearchResponse;
 global.fetchRouteResponse = fetchRouteResponse;
+
 global.URL.createObjectURL = jest.fn(() => 'fooblob');
+
 window.OffscreenCanvas = () => {
-    return document.createElement('canvas');
+  return document.createElement('canvas');
 };
+
 /* eslint-disable */
 class ResizeObserver {
-    constructor(onResize) {
-        ResizeObserver.onResize = onResize;
-    }
-    observe() { }
-    unobserve() { }
-    disconnect() { }
+  constructor(onResize) {
+    ResizeObserver.onResize = onResize;
+  }
+  observe() {}
+  unobserve() {}
+  disconnect() {}
 }
+
 window.ResizeObserver = ResizeObserver;

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "outDir": "./build",
+    "allowJs": true,
+    "target": "es6",
+    "strict": true,
+    // Generate d.ts files
+    "declaration": true,
+    // This compiler run should
+    // only output d.ts files
+    // "emitDeclarationOnly": true,
+    // go to js file when using IDE functions like
+    // "Go to Definition" in VSCode
+    "declarationMap": true,
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "lib": ["es6", "dom"]
+  },
+  "allowSyntheticDefaultImports": true,
+  "include": ["./src/**/*"],
+  "exclude": ["./node_modules/**/*", "./node_modules/*"]
+}