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

package/ol/layers/TralisLayer.js

@@ -0,0 +1,185 @@
+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();
+class TralisLayer extends mixin(Layer) {
+  constructor(options = {}) {
+    super({
+      ...options
+    });
+    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) {
+                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;
+          }
+        })
+      ]
+    });
+    this.vectorLayer = this.olLayer.getLayers().item(0);
+    this.renderState = {
+      center: [0, 0],
+      zoom: null,
+      rotation: 0
+    };
+  }
+  attachToMap(map) {
+    super.attachToMap(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();
+        if (this.currentZoom !== zoom) {
+          this.onZoomEnd(evt);
+        }
+        this.currentZoom = zoom;
+        this.onMoveEnd(evt);
+      }));
+    }
+  }
+  detachFromMap() {
+    super.detachFromMap();
+    this.container = null;
+  }
+  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;
+  }
+  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);
+  }
+  renderTrajectoriesInternal(viewState, noInterpolate) {
+    let isRendered = false;
+    const blockRendering = this.map.getView().getAnimating() || this.map.getView().getInteracting();
+    isRendered = blockRendering ? false : super.renderTrajectoriesInternal(viewState, noInterpolate);
+    if (isRendered) {
+      this.renderedViewState = { ...viewState };
+      if (this.transformContainer) {
+        this.transformContainer.style.transform = "";
+      }
+    }
+  }
+  getRefreshTimeInMs() {
+    return super.getRefreshTimeInMs(this.map.getView().getZoom());
+  }
+  getFeatureInfoAtCoordinate(coordinate, options = {}) {
+    const resolution = this.map.getView().getResolution();
+    return super.getFeatureInfoAtCoordinate(coordinate, {
+      resolution,
+      ...options
+    });
+  }
+  onMoveEnd() {
+    if (this.visible && this.isUpdateBboxOnMoveEnd) {
+      this.setBbox();
+    }
+    if (this.visible && this.isUpdateBboxOnMoveEnd && this.isClickActive && this.selectedVehicleId) {
+      this.highlightTrajectory(this.selectedVehicleId);
+    }
+  }
+  onZoomEnd(evt) {
+    super.onZoomEnd(evt);
+  }
+  onFeatureHover(features, layer, coordinate) {
+    super.onFeatureHover(features, layer, coordinate);
+    this.map.getTargetElement().style.cursor = features.length ? "pointer" : "auto";
+  }
+  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);
+    }
+  }
+  purgeTrajectory(trajectory, extent, zoom) {
+    return super.purgeTrajectory(trajectory, extent || this.map.getView().calculateExtent(), zoom || this.map.getView().getZoom());
+  }
+  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);
+  }
+  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);
+    });
+  }
+  clone(newOptions) {
+    return new TralisLayer({ ...this.options, ...newOptions });
+  }
+}
+export default TralisLayer;

package/ol/layers/TralisLayer.test.js

@@ -0,0 +1,79 @@
+import fetch from "jest-fetch-mock";
+import Map from "ol/Map";
+import View from "ol/View";
+import WS from "jest-websocket-mock";
+import TralisLayer from "./TralisLayer";
+let layer;
+let onClick;
+let olMap;
+let server;
+describe("TralisLayer", () => {
+  beforeEach(() => {
+    server = new WS("ws://localhost:1234");
+    global.fetch = fetch;
+    fetch.resetMocks();
+    onClick = jest.fn();
+    layer = new TralisLayer({
+      url: "ws://localhost:1234",
+      apiKey: "apiKey",
+      onClick
+    });
+    olMap = new Map({
+      view: new View({
+        center: [831634, 5933959],
+        zoom: 9
+      })
+    });
+  });
+  afterEach(() => {
+    server.close();
+    WS.clean();
+  });
+  test("should be instanced.", () => {
+    expect(layer).toBeInstanceOf(TralisLayer);
+    expect(layer.clickCallbacks[0]).toBe(onClick);
+  });
+  test("should called terminate on initalization.", () => {
+    const spy = jest.spyOn(layer, "detachFromMap");
+    fetch.mockResponseOnce(JSON.stringify(global.fetchTrajectoriesResponse));
+    layer.attachToMap(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(TralisLayer);
+  });
+  test("should use the sort function.", () => {
+    const fn = () => true;
+    const laye = new TralisLayer({
+      url: "ws://localhost:1234",
+      apiKey: "apiKey",
+      sort: fn
+    });
+    expect(laye).toBeInstanceOf(TralisLayer);
+    expect(laye.sort).toBe(fn);
+  });
+  test("should use filter function.", () => {
+    const fn = () => true;
+    const laye = new TralisLayer({
+      url: "ws://localhost:1234",
+      apiKey: "apiKey",
+      filter: fn
+    });
+    expect(laye).toBeInstanceOf(TralisLayer);
+    expect(laye.filter).toBe(fn);
+  });
+  test("should override filter function if operator, tripNumber, regexPublishedLineName is set.", () => {
+    const fn = () => true;
+    const laye = new TralisLayer({
+      url: "ws://localhost:1234",
+      apiKey: "apiKey",
+      filter: fn,
+      publishedLineName: ".*"
+    });
+    expect(laye).toBeInstanceOf(TralisLayer);
+    expect(laye.filter).not.toBe(fn);
+  });
+});

package/ol/layers/VectorLayer.js

@@ -0,0 +1,22 @@
+import Layer from "./Layer";
+class VectorLayer extends Layer {
+  getFeatureInfoAtCoordinate(coordinate) {
+    let features = [];
+    if (this.map) {
+      const pixel = this.map.getPixelFromCoordinate(coordinate);
+      features = this.map.getFeaturesAtPixel(pixel, {
+        layerFilter: (l) => l === this.olLayer,
+        hitTolerance: this.hitTolerance
+      });
+    }
+    return Promise.resolve({
+      features,
+      layer: this,
+      coordinate
+    });
+  }
+  clone(newOptions) {
+    return new VectorLayer({ ...this.options, ...newOptions });
+  }
+}
+export default VectorLayer;

package/{src/ol → ol}/layers/VectorLayer.test.js

@@ -1,80 +1,70 @@
-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';
-
+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]),
+  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]),
-      }),
-    ],
-  }),
+        attribute: "foo",
+        geometry: new Point([50, 50])
+      })
+    ]
+  })
 });
-
 let layer;
 let map;
 let onClick;
-
-describe('VectorLayer', () => {
+describe("VectorLayer", () => {
   beforeEach(() => {
     onClick = jest.fn();
     layer = new VectorLayer({
-      name: 'Layer',
+      name: "Layer",
       olLayer,
-      onClick,
+      onClick
     });
     map = new Map({
       view: new View({ resolution: 5 }),
-      target: document.body,
+      target: document.body
     });
   });
-
-  test('should be instanced.', () => {
+  test("should be instanced.", () => {
     expect(layer).toBeInstanceOf(VectorLayer);
     expect(layer.clickCallbacks[0]).toBe(onClick);
     expect(layer.hitTolerance).toBe(5);
   });
-
-  test('should add onClick callback.', () => {
+  test("should add onClick callback.", () => {
     const onClick2 = jest.fn();
     layer.onClick(onClick2);
     expect(layer.clickCallbacks[1]).toBe(onClick2);
   });
-
-  test('should onClick throw error.', () => {
+  test("should onClick throw error.", () => {
     expect(() => {
-      layer.onClick('not of type function');
+      layer.onClick("not of type function");
     }).toThrow(Error);
   });
-
-  test('should called terminate on initalization.', () => {
-    const spy = jest.spyOn(layer, 'terminate');
-    layer.init();
+  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 () => {
+  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.init(map);
+    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);
@@ -88,11 +78,10 @@ describe('VectorLayer', () => {
     expect(onClick).toHaveBeenCalledTimes(1);
     expect(onClick).toHaveBeenCalledWith(features, layer, coordinate);
   });
-
-  test('should clone', () => {
-    const clone = layer.clone({ name: 'clone' });
+  test("should 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(VectorLayer);
   });
 });

package/ol/layers/WMSLayer.js

@@ -0,0 +1,38 @@
+import GeoJSON from "ol/format/GeoJSON";
+import Layer from "./Layer";
+class WMSLayer extends Layer {
+  constructor(options = {}) {
+    super(options);
+    this.abortController = new AbortController();
+    this.format = new GeoJSON();
+  }
+  getFeatureInfoUrl(coord) {
+    const projection = this.map.getView().getProjection();
+    const resolution = this.map.getView().getResolution();
+    if (this.olLayer.getSource().getFeatureInfoUrl) {
+      return this.olLayer.getSource().getFeatureInfoUrl(coord, resolution, projection, {
+        info_format: "application/json",
+        query_layers: this.olLayer.getSource().getParams().layers
+      });
+    }
+    return false;
+  }
+  getFeatureInfoAtCoordinate(coordinate) {
+    this.abortController.abort();
+    this.abortController = new AbortController();
+    const { signal } = this.abortController;
+    return fetch(this.getFeatureInfoUrl(coordinate), { signal }).then((resp) => resp.json()).then((r) => r.features).then((data) => ({
+      layer: this,
+      coordinate,
+      features: data.map((d) => this.format.readFeature(d))
+    })).catch(() => Promise.resolve({
+      features: [],
+      coordinate,
+      layer: this
+    }));
+  }
+  clone(newOptions) {
+    return new WMSLayer({ ...this.options, ...newOptions });
+  }
+}
+export default WMSLayer;

package/ol/layers/WMSLayer.test.js

@@ -0,0 +1,76 @@
+import OLView from "ol/View";
+import ImageLayer from "ol/layer/Image";
+import ImageWMS from "ol/source/ImageWMS";
+import fetch from "jest-fetch-mock";
+import qs from "query-string";
+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: "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 = qs.parse(fetch.mock.calls[0][0].split("?")[1]);
+    expect(params.REQUEST).toBe("GetFeatureInfo");
+    expect(params.I).toBe("50");
+    expect(params.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("#onClick", () => {
+    const f = () => {
+    };
+    const f2 = () => {
+    };
+    layer.onClick(f);
+    expect(layer.clickCallbacks[0]).toBe(f);
+    expect(layer.clickCallbacks.length).toBe(1);
+    layer.onClick(f);
+    expect(layer.clickCallbacks.length).toBe(1);
+    layer.onClick(f2);
+    expect(layer.clickCallbacks.length).toBe(2);
+  });
+  test("should onClick throw error.", () => {
+    expect(() => {
+      layer.onClick("not of type function");
+    }).toThrow(Error);
+  });
+  test("should clone", () => {
+    const clone = layer.clone({ name: "clone" });
+    expect(clone).not.toBe(layer);
+    expect(clone.name).toBe("clone");
+    expect(clone).toBeInstanceOf(WMSLayer);
+  });
+});

package/ol/layers/index.js

@@ -0,0 +1,8 @@
+export { default as Layer } from "./Layer";
+export { default as MapboxLayer } from "./MapboxLayer";
+export { default as MaplibreLayer } from "./MaplibreLayer";
+export { default as MapboxStyleLayer } from "./MapboxStyleLayer";
+export { default as RoutingLayer } from "./RoutingLayer";
+export { default as TralisLayer } from "./TralisLayer";
+export { default as VectorLayer } from "./VectorLayer";
+export { default as WMSLayer } from "./WMSLayer";

package/{src/ol → ol}/styles/fullTrajectoryDelayStyle.js

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

package/ol/styles/fullTrajectoryStyle.js

@@ -0,0 +1,43 @@
+import { Style, Fill, Stroke, Circle } from "ol/style";
+import { getBgColor } from "../../common/trackerConfig";
+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) => {
+  let lineColor = "#ffffff";
+  const type = feature.get("type");
+  let stroke = feature.get("stroke");
+  if (stroke && stroke[0] !== "#") {
+    stroke = `#${stroke}`;
+  }
+  lineColor = stroke || getBgColor(type);
+  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/ol/styles/index.js

@@ -0,0 +1,2 @@
+export { default as fullTrajectoryStyle } from "./fullTrajectoryStyle";
+export { default as fullTrajectoryDelayStyle } from "./fullTrajectoryDelayStyle";