mobility-toolbox-js 3.0.0-beta.10 → 3.0.0-beta.12

package/ol/layers/MaplibreStyleLayer.js

@@ -268,6 +268,34 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
             this.disabled = !styles.length;
         }
     }
+    /**
+     * Set the feature state of the features.
+     * @param {Array<ol/Feature~Feature>} features
+     * @param {{[key:string]:boolean}} state The feature state
+     * @public
+     */
+    setFeatureState(features, state) {
+        var _a;
+        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.maplibreMap) || !features.length) {
+            return;
+        }
+        const { maplibreMap } = this.maplibreLayer;
+        features.forEach((feature) => {
+            const { source, sourceLayer } = feature.get(VECTOR_TILE_FEATURE_PROPERTY) || {};
+            if ((!source && !sourceLayer) || !feature.getId()) {
+                if (!feature.getId()) {
+                    // eslint-disable-next-line no-console
+                    console.warn("No feature's id found. To use the feature state functionnality, tiles must be generated with --generate-ids. See https://github.com/Maplibre/tippecanoe#adding-calculated-attributes.", feature.getId(), feature.getProperties());
+                }
+                return;
+            }
+            maplibreMap.setFeatureState({
+                id: feature.getId(),
+                source,
+                sourceLayer,
+            }, state);
+        });
+    }
     /**
      * Request feature information for a given coordinate.
      * @param {ol/coordinate~Coordinate} coordinate Coordinate to request the information at.
@@ -275,6 +303,8 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
      */
     getFeatureInfoAtCoordinate(coordinate) {
         var _a;
+        // eslint-disable-next-line no-console
+        console.warn(`Deprecated. getFeatureInfoAtCoordinate([layer], coordinate) from ol package instead.`);
         if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.maplibreMap)) {
             return Promise.resolve({ coordinate, features: [], layer: this });
         }
@@ -342,26 +372,9 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
      * @private
      */
     setHoverState(features, state) {
-        var _a;
-        if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.maplibreMap) || !features.length) {
-            return;
-        }
-        const { maplibreMap } = this.maplibreLayer;
-        features.forEach((feature) => {
-            const { source, sourceLayer } = feature.get(VECTOR_TILE_FEATURE_PROPERTY) || {};
-            if ((!source && !sourceLayer) || !feature.getId()) {
-                if (!feature.getId()) {
-                    // eslint-disable-next-line no-console
-                    console.warn("No feature's id found. To use the feature state functionnality, tiles must be generated with --generate-ids. See https://github.com/Maplibre/tippecanoe#adding-calculated-attributes.", feature.getId(), feature.getProperties());
-                }
-                return;
-            }
-            maplibreMap.setFeatureState({
-                id: feature.getId(),
-                source,
-                sourceLayer,
-            }, { hover: state });
-        });
+        // eslint-disable-next-line no-console
+        console.warn(`Deprecated. Use layer.setFeatureState(features, {hover: ${state}}) instead.`);
+        this.setFeatureState(features, { hover: state });
     }
     /**
      * Select a list of features.
@@ -369,6 +382,8 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
      * @private
      */
     select(features = []) {
+        // eslint-disable-next-line no-console
+        console.warn(`Deprecated. Use layer.setFeatureState(features, {selected: true}) instead.`);
         this.setHoverState(this.selectedFeatures || [], false);
         this.selectedFeatures = features;
         this.setHoverState(this.selectedFeatures || [], true);
@@ -380,6 +395,8 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
      */
     highlight(features = []) {
         var _a;
+        // eslint-disable-next-line no-console
+        console.warn(`Deprecated. Use layer.setFeatureState(features, {highlighted: true}) instead.`);
         // Filter out selected features
         const filtered = ((_a = this.highlightedFeatures) === null || _a === void 0 ? void 0 : _a.filter((feature) => !(this.selectedFeatures || [])
             .map((feat) => feat.getId())
@@ -392,8 +409,6 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
     }
     /**
      * Apply visibility to style layers that fits the styleLayersFilter function.
-     *
-     * @private
      */
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     applyLayoutVisibility(evt) {

package/ol/layers/RealtimeLayer.d.ts

@@ -5,8 +5,7 @@ import { Map, MapEvent } from 'ol';
 import { ObjectEvent } from 'ol/Object';
 import Layer from 'ol/layer/Layer';
 import { RealtimeLayerMixinOptions } from '../../common/mixins/RealtimeLayerMixin';
-import { RealtimeFullTrajectory, RealtimeTrainId, ViewState } from '../../types';
-import { RealtimeTrajectory } from '../../api/typedefs';
+import { RealtimeFullTrajectory, RealtimeTrainId, RealtimeTrajectory, ViewState } from '../../types';
 import { WebSocketAPIMessageEventData } from '../../api/WebSocketAPI';
 import RealtimeLayerRenderer from '../renderers/RealtimeLayerRenderer';
 export type RealtimeLayerOptions = RealtimeLayerMixinOptions & {
@@ -18,7 +17,7 @@ declare const RealtimeLayer_base: {
         [x: string]: any;
         debug: boolean;
         trajectories?: {
-            [key: string]: GeoJSONFeature;
+            [key: string]: RealtimeTrajectory;
         } | undefined;
         canvas?: import("../../types").AnyCanvas | undefined;
         mode: import("../../types").RealtimeMode;
@@ -26,7 +25,7 @@ declare const RealtimeLayer_base: {
         tenant: string;
         bboxParameters?: {
             [index: string]: string | number | boolean | string[] | number[] | boolean[];
-        } | undefined;
+        } | undefined; /** @private */
         time?: Date | undefined;
         live?: boolean | undefined;
         speed?: number | undefined;
@@ -48,12 +47,16 @@ declare const RealtimeLayer_base: {
         generalizationLevel?: import("../../types").RealtimeGeneralizationLevel | undefined;
         generalizationLevelByZoom: import("../../types").RealtimeGeneralizationLevel[];
         renderTimeIntervalByZoom: number[];
+        /**
+         * Destroy the container of the tracker.
+         * @private
+         */
         format: GeoJSON<typeof Feature>;
         requestId?: number | undefined;
         updateTimeInterval?: number | undefined;
         updateTimeDelay?: number | undefined;
         visibilityRef: import("ol/events").EventsKey;
-        selectedVehicle: GeoJSONFeature;
+        selectedVehicle: RealtimeTrajectory;
         getMotsByZoom: (zoom: number) => import("../../types").RealtimeMot[];
         getGeneralizationLevelByZoom: (zoom: number) => import("../../types").RealtimeGeneralizationLevel;
         getRenderTimeIntervalByZoom: (zoom: number) => number;
@@ -72,19 +75,19 @@ declare const RealtimeLayer_base: {
         renderTrajectories(viewState: ViewState | undefined, noInterpolate: boolean | undefined): void;
         setBbox(extent: [number, number, number, number], zoom: number): void;
         getRefreshTimeInMs(zoom?: number | undefined): number;
-        getVehicle(filterFc: Function): GeoJSONFeature[];
+        getVehicle(filterFc: Function): RealtimeTrajectory[];
         getFeatureInfoAtCoordinate(coordinate: import("ol/coordinate").Coordinate, options: import("../../types").LayerGetFeatureInfoOptions): Promise<import("../../types").LayerGetFeatureInfoResponse>;
         getTrajectoryInfos(id: string): Promise<{
-            stopSequence: WebSocketAPIMessageEventData<RealtimeFullTrajectory> | WebSocketAPIMessageEventData<GeoJSONFeature[]>;
-            fullTrajectory: WebSocketAPIMessageEventData<RealtimeFullTrajectory> | WebSocketAPIMessageEventData<GeoJSONFeature[]>;
+            stopSequence: WebSocketAPIMessageEventData<RealtimeFullTrajectory> | WebSocketAPIMessageEventData<import("../../types").RealtimeStopSequence[]>;
+            fullTrajectory: WebSocketAPIMessageEventData<RealtimeFullTrajectory> | WebSocketAPIMessageEventData<import("../../types").RealtimeStopSequence[]>;
         }>;
         purgeOutOfDateTrajectories(): void;
-        purgeTrajectory(trajectory: GeoJSONFeature, extent: [number, number, number, number], zoom: number): boolean;
-        addTrajectory(trajectory: GeoJSONFeature): void;
-        removeTrajectory(trajectoryOrId: any): void;
+        purgeTrajectory(trajectory: RealtimeTrajectory, extent: [number, number, number, number], zoom: number): boolean;
+        addTrajectory(trajectory: RealtimeTrajectory): void;
+        removeTrajectory(trajectoryOrId: string | RealtimeTrajectory): void;
         onZoomEnd(): void;
         onDocumentVisibilityChange(): void;
-        onTrajectoryMessage(data: WebSocketAPIMessageEventData<GeoJSONFeature>): void;
+        onTrajectoryMessage(data: WebSocketAPIMessageEventData<RealtimeTrajectory>): void;
         onDeleteTrajectoryMessage(data: WebSocketAPIMessageEventData<string>): void;
         highlightVehicle(id: string): void;
         selectVehicle(id: string): void;
@@ -180,7 +183,7 @@ declare const RealtimeLayer_base: {
     };
 } & typeof Layer;
 /**
- * Responsible for loading and display data from the geOps realtime API.
+ * An OpenLayers layer able to display data from the [geOps Realtime API](https://developer.geops.io/apis/realtime/).
  *
  * @example
  * import { RealtimeLayer } from 'mobility-toolbox-js/ol';
@@ -208,7 +211,7 @@ declare class RealtimeLayer extends RealtimeLayer_base {
      * @param {RealtimeLayerOptions} options
      * @param {boolean} [options.allowRenderWhenAnimating=false] Allow rendering of the layer when the map is animating.
      * @param {string} options.apiKey Access key for [geOps apis](https://developer.geops.io/).
-     * @param {string} [options.url="wss://api.geops.io/tracker-ws/v1/"] The geOps realtime API url.
+     * @param {string} [options.url="wss://api.geops.io/tracker-ws/v1/"] The geOps Realtime API url.
      *
      */
     constructor(options: RealtimeLayerOptions);

package/ol/layers/RealtimeLayer.js

@@ -11,7 +11,7 @@ import RealtimeLayerRenderer from '../renderers/RealtimeLayerRenderer';
 /** @private */
 const format = new GeoJSON();
 /**
- * Responsible for loading and display data from the geOps realtime API.
+ * An OpenLayers layer able to display data from the [geOps Realtime API](https://developer.geops.io/apis/realtime/).
  *
  * @example
  * import { RealtimeLayer } from 'mobility-toolbox-js/ol';
@@ -38,7 +38,7 @@ class RealtimeLayer extends RealtimeLayerMixin(MobilityLayerMixin(Layer)) {
      * @param {RealtimeLayerOptions} options
      * @param {boolean} [options.allowRenderWhenAnimating=false] Allow rendering of the layer when the map is animating.
      * @param {string} options.apiKey Access key for [geOps apis](https://developer.geops.io/).
-     * @param {string} [options.url="wss://api.geops.io/tracker-ws/v1/"] The geOps realtime API url.
+     * @param {string} [options.url="wss://api.geops.io/tracker-ws/v1/"] The geOps Realtime API url.
      *
      */
     constructor(options) {

package/ol/layers/index.d.ts

@@ -1,3 +1,4 @@
 export { default as MaplibreLayer } from "./MaplibreLayer";
 export { default as MaplibreStyleLayer } from "./MaplibreStyleLayer";
 export { default as RealtimeLayer } from "./RealtimeLayer";
+export { default as Layer } from "./Layer";

package/ol/layers/index.js

@@ -1,3 +1,4 @@
 export { default as MaplibreLayer } from './MaplibreLayer';
 export { default as MaplibreStyleLayer } from './MaplibreStyleLayer';
 export { default as RealtimeLayer } from './RealtimeLayer';
+export { default as Layer } from './Layer';

package/ol/renderers/RealtimeLayerRenderer.js

@@ -100,7 +100,10 @@ export default class RealtimeLayerRenderer extends CanvasLayerRenderer {
         const vehicles = [];
         for (let i = 0; i < trajectories.length; i += 1) {
             const trajectory = trajectories[i];
-            if (trajectory.properties.coordinate &&
+            if (
+            // @ts-expect-error coordinate is added by the RealtimeLayer
+            trajectory.properties.coordinate &&
+                // @ts-expect-error coordinate is added by the RealtimeLayer
                 containsCoordinate(ext, trajectory.properties.coordinate)) {
                 vehicles.push(trajectories[i]);
             }

package/package.json

@@ -2,9 +2,8 @@
   "name": "mobility-toolbox-js",
   "license": "MIT",
   "description": "Toolbox for JavaScript applications in the domains of mobility and logistics.",
-  "version": "3.0.0-beta.10",
+  "version": "3.0.0-beta.12",
   "homepage": "https://mobility-toolbox-js.geops.io/",
-  "module": "index.js",
   "exports": {
     ".": "./index.js",
     "./api": "./api/index.js",
@@ -24,10 +23,10 @@
     "ol": ">=7"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.24.3",
+    "@babel/preset-env": "^7.24.5",
     "@babel/preset-typescript": "^7.24.1",
-    "@commitlint/cli": "19.2.1",
-    "@commitlint/config-conventional": "19.1.0",
+    "@commitlint/cli": "19.3.0",
+    "@commitlint/config-conventional": "19.2.2",
     "@types/geojson": "7946.0.14",
     "@types/lodash.debounce": "4.0.9",
     "@types/lodash.throttle": "4.1.9",
@@ -35,10 +34,10 @@
     "@types/offscreencanvas": "2019.7.3",
     "@types/topojson": "3.2.6",
     "@types/uuid": "9.0.8",
-    "@typescript-eslint/eslint-plugin": "7.4.0",
-    "@typescript-eslint/parser": "7.4.0",
-    "cypress": "13.7.1",
-    "esbuild": "0.20.2",
+    "@typescript-eslint/eslint-plugin": "7.8.0",
+    "@typescript-eslint/parser": "7.8.0",
+    "cypress": "13.8.1",
+    "esbuild": "0.21.1",
     "esdoc": "1.1.0",
     "esdoc-ecmascript-proposal-plugin": "1.0.0",
     "esdoc-publish-html-plugin": "1.1.2",
@@ -48,7 +47,7 @@
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "18.0.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-cypress": "2.15.1",
+    "eslint-plugin-cypress": "3.2.0",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-prettier": "5.1.3",
@@ -64,9 +63,9 @@
     "jest-transformer-svg": "2.0.2",
     "jest-websocket-mock": "2.5.0",
     "lint-staged": "15.2.2",
-    "maplibre-gl": "4.1.2",
+    "maplibre-gl": "4.2.0",
     "mock-socket": "9.3.1",
-    "next": "14.1.4",
+    "next": "14.2.3",
     "next-transpile-modules": "10.0.1",
     "ol": "9.1.0",
     "openapi-typescript": "6.7.5",
@@ -75,11 +74,11 @@
     "sort-json": "2.0.1",
     "standard-version": "9.5.0",
     "start-server-and-test": "2.0.3",
-    "stylelint": "16.3.1",
+    "stylelint": "16.5.0",
     "stylelint-config-recommended-scss": "14.0.0",
     "stylelint-config-standard": "36.0.0",
-    "stylelint-scss": "6.2.1",
-    "typescript": "5.4.3"
+    "stylelint-scss": "6.3.0",
+    "typescript": "5.4.5"
   },
   "scripts": {
     "apidoc": "esdoc && cp apidoc/index.json doc/src/components/Esdoc",

package/ol/layers/MapGlLayer.js

@@ -1,144 +0,0 @@
-import Source from 'ol/source/Source';
-import BaseEvent from 'ol/events/Event';
-import Layer from 'ol/layer/Layer';
-import debounce from 'lodash.debounce';
-import { getUrlWithParams, getMapGlCopyrights } from '../../common/utils';
-import MobilityLayerMixin from '../mixins/MobilityLayerMixin';
-/**
- * Common class for Maplibre and Maplibre and potential other fork from Maplibre.
- * It's used to share code between Maplibre and Maplibre layers without importing both libs.
- * @private
- */
-class MapGlLayer extends MobilityLayerMixin(Layer) {
-    get apiKey() {
-        return this.get('apiKey');
-    }
-    set apiKey(newValue) {
-        this.set('apiKey', newValue);
-    }
-    get apiKeyName() {
-        return this.get('apiKeyName');
-    }
-    set apiKeyName(newValue) {
-        this.set('apiKeyName', newValue);
-    }
-    get style() {
-        return this.get('style');
-    }
-    set style(newValue) {
-        this.set('style', newValue);
-    }
-    get url() {
-        return this.get('url');
-    }
-    set url(newValue) {
-        this.set('url', newValue);
-    }
-    get queryRenderedFeaturesOptions() {
-        return this.get('queryRenderedFeaturesOptions');
-    }
-    set queryRenderedFeaturesOptions(newValue) {
-        this.set('queryRenderedFeaturesOptions', newValue);
-    }
-    constructor(options) {
-        super(Object.assign(Object.assign({ source: new Source({
-                attributions: () => {
-                    return (this.mbMap && getMapGlCopyrights(this.mbMap)) || [];
-                },
-            }), apiKeyName: 'key', style: 'travic_v2', url: 'https://maps.geops.io' }, (options || {})), { 
-            // @ts-expect-error mapOptions must be saved by the mixin in this.options
-            mapOptions: Object.assign({ interactive: false, trackResize: false, attributionControl: false }, ((options === null || options === void 0 ? void 0 : options.mapOptions) || {})), queryRenderedFeaturesOptions: Object.assign({}, ((options === null || options === void 0 ? void 0 : options.queryRenderedFeaturesOptions) || {})) }));
-    }
-    /**
-     * Initialize the layer and listen to feature clicks.
-     * @param {ol/Map~Map} map
-     */
-    attachToMap(map) {
-        super.attachToMap(map);
-        this.loadMbMap();
-        const updateMbMapDebounced = debounce(this.updateMbMap.bind(this), 150);
-        this.olListenersKeys.push(this.on('propertychange', (evt) => {
-            if (/(apiKey|apiKeyName|url|style)/.test(evt.key)) {
-                updateMbMapDebounced();
-            }
-        }));
-    }
-    /**
-     * Terminate what was initialized in init function. Remove layer, events...
-     */
-    detachFromMap() {
-        if (this.mbMap) {
-            // Some asynchrone repaints are triggered even if the mbMap has been removed,
-            // to avoid display of errors we set an empty function.
-            this.mbMap.triggerRepaint = () => { };
-            this.mbMap.remove();
-            this.mbMap = undefined;
-        }
-        this.loaded = false;
-        super.detachFromMap();
-    }
-    /**
-     * Create the Maplibre map.
-     * @private
-     */
-    loadMbMap() {
-        var _a, _b, _c;
-        this.loaded = false;
-        this.olListenersKeys.push(
-        // @ts-ignore
-        (_a = this.map) === null || _a === void 0 ? void 0 : _a.on('change:target', this.loadMbMap.bind(this)));
-        if (!((_b = this.map) === null || _b === void 0 ? void 0 : _b.getTargetElement())) {
-            return;
-        }
-        if (!this.visible) {
-            // On next change of visibility we load the map
-            this.olListenersKeys.push(
-            // @ts-ignore
-            this.once('change:visible', this.loadMbMap.bind(this)));
-            return;
-        }
-        const container = document.createElement('div');
-        container.style.position = 'absolute';
-        container.style.width = '100%';
-        container.style.height = '100%';
-        /**
-         * A Maplibre map
-         * @type {maplibregl.Map}
-         */
-        this.mbMap = this.createMap(Object.assign({ style: this.getStyle(), container }, (((_c = this.options) === null || _c === void 0 ? void 0 : _c.mapOptions) || {})));
-        this.mbMap.on('sourcedata', () => {
-            var _a;
-            (_a = this.getSource()) === null || _a === void 0 ? void 0 : _a.refresh(); // Refresh attribution
-        });
-        this.mbMap.once('load', () => {
-            this.loaded = true;
-            this.dispatchEvent(new BaseEvent('load'));
-        });
-    }
-    getStyle() {
-        // If the style is a complete style object, use it directly.
-        if (this.style &&
-            typeof this.style === 'object' &&
-            this.style.name &&
-            this.style.version) {
-            return this.style;
-        }
-        // If the url set is already a complete style url, use it directly.
-        if (this.url.includes('style.json')) {
-            return this.url;
-        }
-        /// Otherwise build the complete style url.
-        return getUrlWithParams(`${this.url}/styles/${this.style}/style.json`, {
-            [this.apiKeyName]: this.apiKey,
-        }).toString();
-    }
-    // eslint-disable-next-line class-methods-use-this, @typescript-eslint/no-unused-vars
-    createMap(options) {
-        throw new Error('createMap must be implemented in child class');
-    }
-    updateMbMap() {
-        var _a;
-        (_a = this.mbMap) === null || _a === void 0 ? void 0 : _a.setStyle(this.getStyle(), { diff: false });
-    }
-}
-export default MapGlLayer;