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

package/ol/layers/TralisLayer.js

@@ -1,290 +1,151 @@
-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';
-
+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,
+      ...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,
-                  );
-                }
+    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;
-            },
-          }),
-        ],
-      });
-
-    // We store the layer used to highlight the full Trajectory
+            }
+            return this.container;
+          }
+        })
+      ]
+    });
     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,
+      rotation: 0
     };
   }
-
-  init(map) {
-    super.init(map);
+  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();
-
-          // Update the interval between render updates
-          if (this.currentZoom !== zoom) {
-            this.onZoomEnd(evt);
-          }
-          this.currentZoom = zoom;
-
-          this.onMoveEnd(evt);
-        }),
-      );
+      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);
+      }));
     }
   }
-
-  /**
-   * Destroy the container of the tracker.
-   */
-  terminate() {
-    super.terminate();
+  detachFromMap() {
+    super.detachFromMap();
     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 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 !!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,
-    );
+    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.
+    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 = '';
+        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,
+      ...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
-    ) {
+    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';
+    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) {
@@ -294,25 +155,9 @@ class TralisLayer extends mixin(Layer) {
       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(),
-    );
+    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;
@@ -322,38 +167,19 @@ class TralisLayer extends mixin(Layer) {
     }
     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);
-      });
+    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;

package/ol/layers/TralisLayer.test.js

@@ -1,95 +1,77 @@
-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';
-
-// create a WS instance, listening on port 1234 on localhost
+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', () => {
+describe("TralisLayer", () => {
   beforeEach(() => {
-    server = new WS('ws://localhost:1234');
+    server = new WS("ws://localhost:1234");
     global.fetch = fetch;
     fetch.resetMocks();
-
     onClick = jest.fn();
     layer = new TralisLayer({
-      url: 'ws://localhost:1234',
-      apiKey: 'apiKey',
-      onClick,
+      url: "ws://localhost:1234",
+      apiKey: "apiKey",
+      onClick
     });
-
     olMap = new Map({
       view: new View({
         center: [831634, 5933959],
-        zoom: 9,
-      }),
+        zoom: 9
+      })
     });
   });
-
   afterEach(() => {
-    // ...or gracefully close the connection
     server.close();
-
-    // The WS class also has a static "clean" method to gracefully close all open connections,
-    // particularly useful to reset the environment between test runs.
     WS.clean();
   });
-
-  test('should be instanced.', () => {
+  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, 'terminate');
-
+  test("should called terminate on initalization.", () => {
+    const spy = jest.spyOn(layer, "detachFromMap");
     fetch.mockResponseOnce(JSON.stringify(global.fetchTrajectoriesResponse));
-
-    layer.init(olMap);
+    layer.attachToMap(olMap);
     expect(spy).toHaveBeenCalledTimes(1);
   });
-
-  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(TralisLayer);
   });
-
-  test('should use the sort function.', () => {
+  test("should use the sort function.", () => {
     const fn = () => true;
     const laye = new TralisLayer({
-      url: 'ws://localhost:1234',
-      apiKey: 'apiKey',
-      sort: fn,
+      url: "ws://localhost:1234",
+      apiKey: "apiKey",
+      sort: fn
     });
     expect(laye).toBeInstanceOf(TralisLayer);
     expect(laye.sort).toBe(fn);
   });
-
-  test('should use filter function.', () => {
+  test("should use filter function.", () => {
     const fn = () => true;
     const laye = new TralisLayer({
-      url: 'ws://localhost:1234',
-      apiKey: 'apiKey',
-      filter: fn, // reverse the array
+      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.', () => {
+  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, // reverse the array
-      publishedLineName: '.*',
+      url: "ws://localhost:1234",
+      apiKey: "apiKey",
+      filter: fn,
+      publishedLineName: ".*"
     });
     expect(laye).toBeInstanceOf(TralisLayer);
     expect(laye.filter).not.toBe(fn);

package/ol/layers/VectorLayer.js

@@ -1,43 +1,22 @@
-import Layer from './Layer';
-
-/**
- * A class use to display vector data.
- *
- * @classproperty {ol/Map~Map} map - The map where the layer is displayed.
- * @extends {Layer}
- */
+import Layer from "./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) {
     let features = [];
-
     if (this.map) {
       const pixel = this.map.getPixelFromCoordinate(coordinate);
       features = this.map.getFeaturesAtPixel(pixel, {
         layerFilter: (l) => l === this.olLayer,
-        hitTolerance: this.hitTolerance,
+        hitTolerance: this.hitTolerance
       });
     }
-
     return Promise.resolve({
       features,
       layer: this,
-      coordinate,
+      coordinate
     });
   }
-
-  /**
-   * Create a copy of the VectorLayer.
-   * @param {Object} newOptions Options to override
-   * @return {VectorLayer} A VectorLayer
-   */
   clone(newOptions) {
     return new VectorLayer({ ...this.options, ...newOptions });
   }
 }
-
 export default VectorLayer;