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

package/mapbox/layers/Layer.test.js

@@ -0,0 +1,182 @@
+import { Map } from "maplibre-gl";
+import { toLonLat } from "ol/proj";
+import Layer from "./Layer";
+let map;
+let mapElement;
+describe("Layer", () => {
+  beforeEach(() => {
+    mapElement = document.createElement("div");
+    const { style } = mapElement;
+    style.position = "absolute";
+    style.left = "0px";
+    style.top = "0px";
+    style.width = "400px";
+    style.height = "400px";
+    mapElement.setAttribute("id", "map");
+    document.body.appendChild(mapElement);
+    map = new Map({
+      container: document.getElementById("map"),
+      style: `path/to/style`,
+      center: toLonLat([831634, 5933959]),
+      zoom: 9
+    });
+  });
+  afterEach(() => {
+    document.body.removeChild(mapElement);
+  });
+  test("should initialize.", () => {
+    const layer = new Layer({ name: "Layer" });
+    expect(layer).toBeInstanceOf(Layer);
+  });
+  test("should be visible by default.", () => {
+    const layer = new Layer({ name: "Layer" });
+    expect(layer.visible).toBe(true);
+  });
+  test("should be invisible if defined.", () => {
+    const layer = new Layer({ name: "Layer", visible: false });
+    expect(layer.visible).toBe(false);
+  });
+  test("should be invisible if set.", () => {
+    const layer = new Layer({ name: "Layer" });
+    layer.setVisible(false);
+    expect(layer.visible).toBe(false);
+  });
+  test("should visibility stay unchanged", () => {
+    const layer = new Layer({ name: "Layer", visible: false });
+    layer.setVisible(false);
+    expect(layer.visible).toBe(false);
+  });
+  test("should return its name.", () => {
+    const layer = new Layer({ name: "Layer", visible: false });
+    expect(layer.name).toEqual("Layer");
+  });
+  test("should call terminate on initialization.", () => {
+    const layer = new Layer({ name: "Layer" });
+    const spy = jest.spyOn(layer, "detachFromMap");
+    layer.attachToMap(map);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  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" });
+    expect(layer.visible).toBe(true);
+    const spy = jest.fn();
+    const spy2 = jest.fn();
+    layer.attachToMap(map);
+    layer.onHover(spy);
+    layer.onClick(spy2);
+    expect(spy).toHaveBeenCalledTimes(0);
+    expect(spy2).toHaveBeenCalledTimes(0);
+    await map.fire("mousemove", {
+      type: "mousemove",
+      lngLat: { toArray: () => [0, 0] },
+      coordinate: [0, 0]
+    });
+    await map.fire("click", {
+      type: "click",
+      lngLat: { toArray: () => [0, 0] }
+    });
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy2).toHaveBeenCalledTimes(1);
+    spy.mockReset();
+    spy2.mockReset();
+    layer.setVisible(false);
+    await map.fire("mousemove", {
+      type: "mousemove",
+      lngLat: { toArray: () => [0, 0] }
+    });
+    await map.fire("click", {
+      type: "click",
+      lngLat: { toArray: () => [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", visible: false });
+    expect(layer.visible).toBe(false);
+    const spy = jest.fn();
+    const spy2 = jest.fn();
+    layer.attachToMap(map);
+    layer.onHover(spy);
+    layer.onClick(spy2);
+    expect(spy).toHaveBeenCalledTimes(0);
+    expect(spy2).toHaveBeenCalledTimes(0);
+    await map.fire("mousemove", {
+      type: "mousemove",
+      lngLat: { toArray: () => [0, 0] },
+      coordinate: [0, 0]
+    });
+    await map.fire("click", {
+      type: "click",
+      lngLat: { toArray: () => [0, 0] }
+    });
+    expect(spy).toHaveBeenCalledTimes(0);
+    expect(spy2).toHaveBeenCalledTimes(0);
+    spy.mockReset();
+    spy2.mockReset();
+    layer.setVisible(true);
+    await map.fire("mousemove", {
+      type: "mousemove",
+      lngLat: { toArray: () => [0, 0] },
+      coordinate: [0, 0]
+    });
+    await map.fire("click", {
+      type: "click",
+      lngLat: { toArray: () => [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", visible: true });
+    expect(layer.visible).toBe(true);
+    const spy = jest.fn();
+    const spy2 = jest.fn();
+    layer.attachToMap(map);
+    layer.onHover(spy);
+    layer.onClick(spy2);
+    expect(spy).toHaveBeenCalledTimes(0);
+    expect(spy2).toHaveBeenCalledTimes(0);
+    await map.fire("mousemove", {
+      type: "mousemove",
+      lngLat: { toArray: () => [0, 0] },
+      coordinate: [0, 0]
+    });
+    await map.fire("click", {
+      type: "click",
+      lngLat: { toArray: () => [0, 0] }
+    });
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy2).toHaveBeenCalledTimes(1);
+    spy.mockReset();
+    spy2.mockReset();
+    layer.detachFromMap(map);
+    await map.fire("mousemove", {
+      type: "mousemove",
+      lngLat: { toArray: () => [0, 0] },
+      coordinate: [0, 0]
+    });
+    await map.fire("click", {
+      type: "click",
+      lngLat: { toArray: () => [0, 0] }
+    });
+    expect(spy).toHaveBeenCalledTimes(0);
+    expect(spy2).toHaveBeenCalledTimes(0);
+    global.console.error.mockRestore();
+  });
+  test("should clone", () => {
+    const layer = new Layer({
+      name: "Layer",
+      copyrights: ["bar"]
+    });
+    const clone = layer.clone({ name: "clone" });
+    expect(clone).not.toBe(layer);
+    expect(clone.name).toBe("clone");
+    expect(clone).toBeInstanceOf(Layer);
+  });
+});

package/mapbox/layers/TralisLayer.js

@@ -0,0 +1,182 @@
+import { fromLonLat } from "ol/proj";
+import { unByKey } from "ol/Observable";
+import { getWidth, getHeight } from "ol/extent";
+import transformRotate from "@turf/transform-rotate";
+import { point } from "@turf/helpers";
+import mixin from "../../common/mixins/TralisLayerMixin";
+import Layer from "./Layer";
+import { getSourceCoordinates, getMercatorResolution } from "../utils";
+class TralisLayer extends mixin(Layer) {
+  constructor(options = {}) {
+    super({
+      ...options
+    });
+    this.onLoad = this.onLoad.bind(this);
+    this.onMove = this.onMove.bind(this);
+    this.onMoveEnd = this.onMoveEnd.bind(this);
+    this.onZoomEnd = this.onZoomEnd.bind(this);
+    this.onVisibilityChange = this.onVisibilityChange.bind(this);
+  }
+  attachToMap(map, beforeId) {
+    if (!map) {
+      return;
+    }
+    const canvas = map.getCanvas();
+    super.attachToMap(map, {
+      width: canvas.width / this.pixelRatio,
+      height: canvas.height / this.pixelRatio
+    });
+    this.source = {
+      type: "canvas",
+      canvas: this.tracker.canvas,
+      coordinates: getSourceCoordinates(map, this.pixelRatio),
+      animate: true,
+      attribution: this.copyrights && this.copyrights.join(", ")
+    };
+    this.beforeId = beforeId;
+    this.layer = {
+      id: this.key,
+      type: "raster",
+      source: this.key,
+      layout: {
+        visibility: this.visible ? "visible" : "none"
+      },
+      paint: {
+        "raster-opacity": 1,
+        "raster-fade-duration": 0,
+        "raster-resampling": "nearest"
+      }
+    };
+    if (map.isStyleLoaded()) {
+      this.onLoad();
+    }
+    this.map.on("load", this.onLoad);
+    this.listeners = [this.on("change:visible", this.onVisibilityChange)];
+  }
+  detachFromMap() {
+    if (this.map) {
+      this.map.off("load", this.onLoad);
+      this.listeners.forEach((listener) => {
+        unByKey(listener);
+      });
+      if (this.map.getLayer(this.key)) {
+        this.map.removeLayer(this.key);
+      }
+      if (this.map.getSource(this.key)) {
+        this.map.removeSource(this.key);
+      }
+    }
+    super.detachFromMap();
+  }
+  start() {
+    super.start();
+    this.map.on("move", this.onMove);
+    this.map.on("moveend", this.onMoveEnd);
+    this.map.on("zoomend", this.onZoomEnd);
+  }
+  stop() {
+    super.stop();
+    if (this.map) {
+      this.map.off("move", this.onMove);
+      this.map.off("moveend", this.onMoveEnd);
+      this.map.off("zoomend", this.onZoomEnd);
+    }
+  }
+  onLoad() {
+    if (!this.map.getSource(this.key)) {
+      this.map.addSource(this.key, this.source);
+    }
+    if (!this.map.getLayer(this.key)) {
+      this.map.addLayer(this.layer, this.beforeId);
+    }
+  }
+  onUserClickCallback(evt) {
+    super.onUserClickCallback({
+      coordinate: fromLonLat(evt.lngLat.toArray()),
+      ...evt
+    });
+  }
+  onUserMoveCallback(evt) {
+    super.onUserMoveCallback({
+      coordinate: fromLonLat(evt.lngLat.toArray()),
+      ...evt
+    });
+  }
+  renderTrajectories(noInterpolate) {
+    const { width, height } = this.map.getCanvas();
+    const center = this.map.getCenter();
+    const leftBottom = this.map.unproject({
+      x: 0,
+      y: height / this.pixelRatio
+    });
+    const rightTop = this.map.unproject({ x: width / this.pixelRatio, y: 0 });
+    const coord0 = transformRotate(point([leftBottom.lng, leftBottom.lat]), -this.map.getBearing(), {
+      pivot: [center.lng, center.lat]
+    }).geometry.coordinates;
+    const coord1 = transformRotate(point([rightTop.lng, rightTop.lat]), -this.map.getBearing(), {
+      pivot: [center.lng, center.lat]
+    }).geometry.coordinates;
+    const bounds = [...fromLonLat(coord0), ...fromLonLat(coord1)];
+    const xResolution = getWidth(bounds) / (width / this.pixelRatio);
+    const yResolution = getHeight(bounds) / (height / this.pixelRatio);
+    const res = Math.max(xResolution, yResolution);
+    const viewState = {
+      size: [width / this.pixelRatio, height / this.pixelRatio],
+      center: fromLonLat([center.lng, center.lat]),
+      extent: bounds,
+      resolution: res,
+      zoom: this.map.getZoom(),
+      rotation: -(this.map.getBearing() * Math.PI) / 180,
+      pixelRatio: this.pixelRatio
+    };
+    super.renderTrajectories(viewState, noInterpolate);
+  }
+  getRefreshTimeInMs() {
+    return super.getRefreshTimeInMs(this.map.getZoom());
+  }
+  getFeatureInfoAtCoordinate(coordinate, options = {}) {
+    const resolution = getMercatorResolution(this.map);
+    return super.getFeatureInfoAtCoordinate(coordinate, {
+      resolution,
+      ...options
+    });
+  }
+  onVisibilityChange() {
+    if (this.visible && !this.map.getLayer(this.key)) {
+      this.map.addLayer(this.layer, this.beforeId);
+    } else if (this.map.getLayer(this.key)) {
+      this.map.removeLayer(this.key);
+    }
+  }
+  purgeTrajectory(trajectory, extent, zoom) {
+    return super.purgeTrajectory(trajectory, extent || this.getMercatorExtent(), zoom || Math.floor(this.map.getZoom() + 1));
+  }
+  setBbox(extent, zoom) {
+    let newExtent = extent;
+    let newZoom = zoom;
+    if (!newExtent && this.isUpdateBboxOnMoveEnd) {
+      newExtent = extent || this.getMercatorExtent();
+      newZoom = Math.floor(this.getOlZoom());
+    }
+    super.setBbox(newExtent, newZoom);
+  }
+  onMove() {
+    const extent = getSourceCoordinates(this.map, this.pixelRatio);
+    const source = this.map.getSource(this.key);
+    if (source) {
+      source.setCoordinates(extent);
+    }
+    this.renderTrajectories();
+  }
+  onMoveEnd() {
+    this.renderTrajectories();
+    if (this.visible && this.isUpdateBboxOnMoveEnd) {
+      this.setBbox();
+    }
+  }
+  onFeatureHover(features, layer, coordinate) {
+    super.onFeatureHover(features, layer, coordinate);
+    this.map.getCanvasContainer().style.cursor = features.length ? "pointer" : "auto";
+  }
+}
+export default TralisLayer;

package/{src/mapbox → mapbox}/layers/TralisLayer.test.js

@@ -1,33 +1,31 @@
-import TralisLayer from './TralisLayer';
-
+import TralisLayer from "./TralisLayer";
 let layer;
 let onClick;
-
-describe('TralisLayer', () => {
+describe("TralisLayer", () => {
   beforeEach(() => {
     onClick = jest.fn();
     layer = new TralisLayer({
-      onClick,
+      onClick
     });
   });
-
-  test('should be instanced.', () => {
+  test("should be instanced.", () => {
     expect(layer).toBeInstanceOf(TralisLayer);
     expect(layer.clickCallbacks[0]).toBe(onClick);
   });
-
-  test('#onClick', () => {
-    const f = () => {};
+  test("#onClick", () => {
+    const f = () => {
+    };
     layer.onClick(f);
     expect(layer.clickCallbacks[1]).toBe(f);
     expect(layer.clickCallbacks.length).toBe(2);
     layer.onClick(f);
     expect(layer.clickCallbacks.length).toBe(2);
   });
-
-  test('#unClick', () => {
-    const foo = () => {};
-    const bar = () => {};
+  test("#unClick", () => {
+    const foo = () => {
+    };
+    const bar = () => {
+    };
     layer.onClick(foo);
     layer.onClick(bar);
     expect(layer.clickCallbacks[1]).toBe(foo);

package/mapbox/layers/index.js

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

package/{src/mapbox → mapbox}/utils.js

@@ -1,11 +1,5 @@
-import { getWidth, getHeight } from 'ol/extent';
-import { fromLonLat } from 'ol/proj';
-
-/**
- * Get the current resolution of a Mapbox map.
- * @param {mapboxgl.Map} map A map object.
- * @private
- */
+import { getWidth, getHeight } from "ol/extent";
+import { fromLonLat } from "ol/proj";
 export const getMercatorResolution = (map) => {
   const bounds = map.getBounds().toArray();
   const a = fromLonLat(bounds[0]);
@@ -16,31 +10,23 @@ export const getMercatorResolution = (map) => {
   const yResolution = getHeight(extent) / height;
   return Math.max(xResolution, yResolution);
 };
-
-/**
- * Get the canvas source coordinates of the current map's extent.
- * @param {mapboxgl.Map} map A map object.
- * @private
- */
 export const getSourceCoordinates = (map, pixelRatio) => {
-  // Requesting getBounds is not enough when we rotate the map, so we request manually each corner.
   const { width, height } = map.getCanvas();
   const leftTop = map.unproject({ x: 0, y: 0 });
-  const leftBottom = map.unproject({ x: 0, y: height / pixelRatio }); // southWest
+  const leftBottom = map.unproject({ x: 0, y: height / pixelRatio });
   const rightBottom = map.unproject({
     x: width / pixelRatio,
-    y: height / pixelRatio,
+    y: height / pixelRatio
   });
-  const rightTop = map.unproject({ x: width / pixelRatio, y: 0 }); // north east
+  const rightTop = map.unproject({ x: width / pixelRatio, y: 0 });
   return [
     [leftTop.lng, leftTop.lat],
     [rightTop.lng, rightTop.lat],
     [rightBottom.lng, rightBottom.lat],
-    [leftBottom.lng, leftBottom.lat],
+    [leftBottom.lng, leftBottom.lat]
   ];
 };
-
 export default {
   getMercatorResolution,
-  getSourceCoordinates,
+  getSourceCoordinates
 };