mobility-toolbox-js 2.0.0-beta.1 → 2.0.0

package/ol/layers/TralisLayer.js

@@ -1,8 +1,11 @@
 import GeoJSON from 'ol/format/GeoJSON';
-import { Style, Fill, Stroke, Circle } from 'ol/style';
-import TrackerLayer from './TrackerLayer';
+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 { getBgColor } from '../../common/trackerConfig';
+import { fullTrajectoryStyle } from '../styles';
 
 const format = new GeoJSON();
 
@@ -20,36 +23,213 @@ const format = new GeoJSON();
  *
  * @see <a href="/api/class/src/api/tralis/TralisAPI%20js~TralisAPI%20html">TralisAPI</a>
  *
- * @extends {TrackerLayer}
+ * @extends {Layer}
  * @implements {TralisLayerInterface}
  */
-class TralisLayer extends mixin(TrackerLayer) {
+class TralisLayer extends mixin(Layer) {
   /**
-   * Remove the trajectory form the list if necessary.
+   * Constructor.
    *
+   * @param {Object} options
    * @private
    */
-  purgeTrajectory(trajectory, extent, zoom) {
-    return super.purgeTrajectory(
-      trajectory,
-      extent || this.map.getView().calculateExtent(),
-      zoom || this.map.getView().getZoom(),
+  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,
     );
   }
 
   /**
-   * Send the current bbox to the websocket
-   *
+   * Launch renderTrajectories. it avoids duplicating code in renderTrajectories methhod.
    * @private
+   * @override
    */
-  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());
+  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 = '';
+      }
     }
-    super.setBbox(newExtent, newZoom);
+  }
+
+  /**
+   * 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,
+    });
   }
 
   /**
@@ -59,9 +239,7 @@ class TralisLayer extends mixin(TrackerLayer) {
    * @private
    * @override
    */
-  onMoveEnd(evt) {
-    super.onMoveEnd(evt);
-
+  onMoveEnd() {
     if (this.visible && this.isUpdateBboxOnMoveEnd) {
       this.setBbox();
     }
@@ -77,19 +255,74 @@ class TralisLayer extends mixin(TrackerLayer) {
   }
 
   /**
-   * Callback when user clicks on the map.
-   * It sets the layer's selectedVehicleId property with the current selected vehicle's id.
+   * 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
@@ -108,58 +341,7 @@ class TralisLayer extends mixin(TrackerLayer) {
         ) {
           return;
         }
-
-        let lineColor = '#ffffff'; // white
-
-        if (this.useDelayStyle) {
-          lineColor = '#a0a0a0'; // grey
-        } else {
-          const props = fullTrajectory.features[0].properties;
-          const { type } = props;
-          let { stroke } = props;
-
-          if (stroke && stroke[0] !== '#') {
-            stroke = `#${stroke}`;
-          }
-
-          lineColor = stroke || getBgColor(type);
-
-          // Don't allow white lines, use red instead.
-          lineColor = /#ffffff/i.test(lineColor) ? '#ff0000' : lineColor;
-        }
-        const style = [
-          new Style({
-            zIndex: 2,
-            image: new Circle({
-              radius: 5,
-              fill: new Fill({
-                color: '#000000',
-              }),
-            }),
-            stroke: new Stroke({
-              color: '#000000',
-              width: 6,
-            }),
-          }),
-          new Style({
-            zIndex: 3,
-            image: new Circle({
-              radius: 4,
-              fill: new Fill({
-                color: lineColor,
-              }),
-            }),
-            stroke: new Stroke({
-              color: lineColor,
-              width: 4,
-            }),
-          }),
-        ];
-        this.vectorLayer.setStyle(style);
         const features = format.readFeatures(fullTrajectory);
-        features.forEach((feature) => {
-          feature.setStyle(style);
-        });
         this.vectorLayer.getSource().addFeatures(features);
       });
   }

package/ol/layers/TralisLayer.test.js

@@ -10,7 +10,7 @@ let onClick;
 let olMap;
 let server;
 
-describe('TrajservLayer', () => {
+describe('TralisLayer', () => {
   beforeEach(() => {
     server = new WS('ws://localhost:1234');
     global.fetch = fetch;
@@ -69,63 +69,17 @@ describe('TrajservLayer', () => {
       sort: fn,
     });
     expect(laye).toBeInstanceOf(TralisLayer);
-    expect(laye.useDelayStyle).toBe(false);
     expect(laye.sort).toBe(fn);
   });
 
-  test.only('should set a default sort function if useDelayStyle is used.', () => {
-    const laye = new TralisLayer({
-      url: 'ws://localhost:1234',
-      apiKey: 'apiKey',
-      useDelayStyle: true,
-    });
-    expect(laye).toBeInstanceOf(TralisLayer);
-    expect(laye.useDelayStyle).toBe(true);
-    expect(laye.sort).toBeDefined();
-    const red = { properties: { delay: 1000000 } };
-    const yellow = { properties: { delay: 180000 } };
-    const green2 = { properties: { delay: 178990 } };
-    const green = { properties: { delay: 0 } };
-    const gray = { properties: { delay: null } };
-    const cancelled = { properties: { cancelled: true, delay: 3000000 } };
-
-    const trajectories = [gray, green, yellow, red, green2, cancelled];
-    trajectories.sort(laye.sort);
-    expect(trajectories).toEqual([red, yellow, cancelled, green2, green, gray]);
-  });
-
-  test('should override the default sort function when useDelayStyle is used.', () => {
-    const laye = new TralisLayer({
-      url: 'ws://localhost:1234',
-      apiKey: 'apiKey',
-      useDelayStyle: true,
-      sort: () => -1, // reverse the array
-    });
-    expect(laye).toBeInstanceOf(TralisLayer);
-    expect(laye.useDelayStyle).toBe(true);
-    expect(laye.sort).toBeDefined();
-    const red = { delay: 1000000 };
-    const yellow = { delay: 180000 };
-    const green2 = { delay: 178990 };
-    const green = { delay: 0 };
-    const gray = { delay: null };
-    const cancelled = { cancelled: true, delay: 3000000 };
-
-    const trajectories = [gray, green, yellow, red, green2, cancelled];
-    trajectories.sort(laye.sort);
-    expect(trajectories).toEqual([cancelled, green2, red, yellow, green, gray]);
-  });
-
   test('should use filter function.', () => {
     const fn = () => true;
     const laye = new TralisLayer({
       url: 'ws://localhost:1234',
       apiKey: 'apiKey',
-      useDelayStyle: true,
       filter: fn, // reverse the array
     });
     expect(laye).toBeInstanceOf(TralisLayer);
-    expect(laye.useDelayStyle).toBe(true);
     expect(laye.filter).toBe(fn);
   });
 
@@ -134,12 +88,10 @@ describe('TrajservLayer', () => {
     const laye = new TralisLayer({
       url: 'ws://localhost:1234',
       apiKey: 'apiKey',
-      useDelayStyle: true,
       filter: fn, // reverse the array
       publishedLineName: '.*',
     });
     expect(laye).toBeInstanceOf(TralisLayer);
-    expect(laye.useDelayStyle).toBe(true);
     expect(laye.filter).not.toBe(fn);
   });
 });

package/ol/layers/VectorLayer.test.js

@@ -3,7 +3,7 @@ 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 '../Map';
+import Map from 'ol/Map';
 import VectorLayer from './VectorLayer';
 
 const feature1 = new Feature({

package/ol/layers/WMSLayer.test.js

@@ -3,7 +3,7 @@ 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 '../Map';
+import Map from 'ol/Map';
 import WMSLayer from './WMSLayer';
 
 describe('WMSLayer', () => {
@@ -23,11 +23,15 @@ describe('WMSLayer', () => {
         }),
       }),
     });
-    map.addLayer(layer);
+    layer.init(map);
     fetch.mockResponseOnce(JSON.stringify({ features: [] }));
     global.fetch = fetch;
   });
 
+  afterEach(() => {
+    layer.terminate();
+  });
+
   test('should initialize.', () => {
     expect(layer).toBeInstanceOf(WMSLayer);
   });

package/ol/styles/fullTrajectoryDelayStyle.js

@@ -0,0 +1,35 @@
+import { Style, Fill, Stroke, Circle } from 'ol/style';
+
+const stroke = new Style({
+  zIndex: 2,
+  image: new Circle({
+    radius: 5,
+    fill: new Fill({
+      color: '#000000',
+    }),
+  }),
+  stroke: new Stroke({
+    color: '#000000',
+    width: 6,
+  }),
+});
+
+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 = () => {
+  return [stroke, fill];
+};
+
+export default fullTrajectoryDelaystyle;

package/ol/styles/fullTrajectoryStyle.js

@@ -0,0 +1,51 @@
+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'; // white
+
+  const type = feature.get('type');
+  let stroke = feature.get('stroke');
+
+  if (stroke && stroke[0] !== '#') {
+    stroke = `#${stroke}`;
+  }
+
+  lineColor = stroke || 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/ol/styles/index.js

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

package/package.json

@@ -2,7 +2,7 @@
   "name": "mobility-toolbox-js",
   "license": "MIT",
   "description": "Toolbox for JavaScript applications in the domains of mobility and logistics.",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0",
   "main": "index.js",
   "module": "module.js",
   "dependencies": {
@@ -18,9 +18,9 @@
     "path": "^0.12.7",
     "prop-types": "15.8.1",
     "query-string": "7.1.0",
-    "react": "17.0.2",
+    "react": "18",
     "react-app-polyfill": "^1.0.6",
-    "react-dom": "17.0.2",
+    "react-dom": "18",
     "react-icons": "4.3.1",
     "react-markdown": "8.0.0",
     "react-router-dom": "6",
@@ -32,7 +32,8 @@
     "uuid": "8.3.2"
   },
   "peerDependencies": {
-    "maplibre-gl": "^2",
+    "mapbox-gl": "^1",
+    "maplibre-gl": "^1",
     "ol": "^6"
   },
   "devDependencies": {
@@ -41,6 +42,8 @@
     "@babel/plugin-transform-runtime": "7.16.10",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "7.16.7",
+    "@commitlint/cli": "17.0.2",
+    "@commitlint/config-conventional": "17.0.2",
     "@neutrinojs/copy": "9.5.0",
     "@neutrinojs/jest": "^9.5.0",
     "@neutrinojs/library": "9.5.0",
@@ -63,13 +66,14 @@
     "eslint-plugin-react": "7.28.0",
     "eslint-plugin-react-hooks": "4.3.0",
     "fixpack": "3.0.6",
-    "husky": "7.0.4",
+    "husky": "8.0.1",
     "jest": "26.6.3",
     "jest-canvas-mock": "2.3.1",
     "jest-fetch-mock": "3.0.3",
     "jest-serializer-html": "7.1.0",
     "jest-websocket-mock": "2.3.0",
     "lint-staged": "12.3.3",
+    "mapbox-gl": "1.13.2",
     "maplibre-gl": "2.1.9",
     "mock-socket": "9.1.2",
     "neutrino": "9.5.0",
@@ -80,6 +84,7 @@
     "sass": "1.52.2",
     "sass-loader": "8.0.2",
     "sort-json": "2.0.0",
+    "standard-version": "9.5.0",
     "start-server-and-test": "1.14.0",
     "stylelint": "14.3.0",
     "stylelint-config-recommended-scss": "5.0.2",
@@ -104,8 +109,11 @@
     "lib:dev": "REACT_APP_LIB_MODE=1  webpack --mode development",
     "link2": "cmdToAdd=$(node ./scripts/read-pkg-json.js add) && $cmdToAdd && yarn build && cmdToRemove=$(node ./scripts/read-pkg-json.js remove) && $cmdToRemove && cd build && yarn link",
     "lint": "eslint 'src/**/*.js' && stylelint 'src/**/*.css' 'src/**/*.scss'",
-    "publish:beta": "HUSKY=0 yarn publish:public --tag beta",
-    "publish:public": "HUSKY=0 yarn version && git push origin HEAD && yarn build && cd build && HUSKY=0 yarn publish",
+    "publish:beta": "HUSKY=0 yarn release -- --prerelease beta --skip.changelog && git push origin HEAD && yarn run build && cd build && git push --tags && HUSKY=0 yarn publish --tag beta",
+    "publish:beta:dryrun": "yarn release -- --prerelease beta --dry-run --skip.changelog",
+    "publish:public": "yarn release && git push origin HEAD && yarn run build && cd build && git push --tags && yarn publish",
+    "publish:public:dryrun": "yarn release --dry-run",
+    "release": "standard-version",
     "start": "yarn doc && webpack-dev-server --mode development --open",
     "start:examples": "webpack-dev-server --mode development --open",
     "test": "REACT_APP_LIB_MODE=1 jest",
@@ -167,7 +175,7 @@
     "./module": "./module.js",
     "./api": "./api/index.js",
     "./common/trackerConfig": "./common/trackerConfig.js",
-    "./common/utils": "./common/utils/index.js",
+    "./utils": "./common/utils/index.js",
     "./mapbox": "./mapbox/index.js",
     "./ol": "./ol/index.js"
   },