mobility-toolbox-js 3.0.1-beta.0 → 3.0.1-beta.2

package/ol/renderers/MaplibreLayerRenderer.js

@@ -1,142 +1,40 @@
-"use strict";
-// /* eslint-disable no-underscore-dangle */
-// import { FrameState } from 'ol/Map';
-// import { toDegrees } from 'ol/math';
-// import { toLonLat } from 'ol/proj';
-// import LayerRenderer from 'ol/renderer/Layer';
-// import GeoJSON from 'ol/format/GeoJSON';
-// import { Coordinate } from 'ol/coordinate';
-// import { FeatureCallback } from 'ol/renderer/vector';
-// import { Feature } from 'ol';
-// import { Geometry } from 'ol/geom';
-// import { Pixel } from 'ol/pixel';
-// import { Map } from 'maplibre-gl';
-// import { VECTOR_TILE_FEATURE_PROPERTY } from '../../common';
-// import type MaplibreLayer from '../layers/MaplibreLayer';
+import { MapLibreLayerRenderer } from '@geoblocks/ol-maplibre-layer/lib';
 // /**
-//  * @private
-//  */
-// const formats: {
-//   [key: string]: GeoJSON;
-// } = {
-//   'EPSG:3857': new GeoJSON({
-//     featureProjection: 'EPSG:3857',
-//   }),
-// };
-// /**
-//  * This class is a renderer for Maplibre Layer to be able to use the native ol
+//  * This class is usea renderer for Maplibre Layer to be able to use the native ol
 //  * functionnalities like map.getFeaturesAtPixel or map.hasFeatureAtPixel.
 //  * @private
 //  */
 // // @ts-expect-error
-// export default class MaplibreLayerRenderer extends LayerRenderer<MaplibreLayer> {
-//   getFeaturesAtCoordinate(
-//     coordinate: Coordinate | undefined,
-//     hitTolerance: number = 5,
-//   ): Feature<Geometry>[] {
-//     if (!coordinate) {
-//       return [];
-//     }
-//     const layer = this.getLayer();
-//     const map = layer.getMapInternal();
-//     const { mbMap } = layer;
-//     const projection =
-//       map?.getView()?.getProjection()?.getCode() || 'EPSG:3857';
-//     let features: Feature[] = [];
-//     if (!formats[projection]) {
-//       formats[projection] = new GeoJSON({
-//         featureProjection: projection,
-//       });
-//     }
-//     if (mbMap?.isStyleLoaded()) {
-//       const pixel =
-//         coordinate && mbMap.project(toLonLat(coordinate) as [number, number]);
-//       if (pixel?.x && pixel?.y) {
-//         let pixels: [[number, number], [number, number]] | [number, number] = [
-//           pixel.x,
-//           pixel.y,
-//         ];
-//         if (hitTolerance) {
-//           const [x, y] = pixels as [number, number];
-//           pixels = [
-//             [x - hitTolerance, y - hitTolerance],
-//             [x + hitTolerance, y + hitTolerance],
-//           ];
-//         }
-//         // At this point we get GeoJSON Maplibre feature, we transform it to an OpenLayers
-//         // feature to be consistent with other layers.
-//         features = (mbMap as Map)
-//           .queryRenderedFeatures(
-//             pixels,
-//             layer.queryRenderedFeaturesOptions || {},
-//           )
-//           .map((feature) => {
-//             const olFeature = formats[projection].readFeature(
-//               feature,
-//             ) as Feature;
-//             if (olFeature) {
-//               // We save the original Maplibre feature to avoid losing informations
-//               // potentially needed for other functionnality like highlighting
-//               // (id, layer id, source, sourceLayer ...)
-//               // @ts-expect-error
-//               olFeature.set(VECTOR_TILE_FEATURE_PROPERTY, feature);
-//             }
-//             return olFeature;
-//           });
-//       }
-//     }
-//     return features;
-//   }
-//   // eslint-disable-next-line class-methods-use-this
-//   override prepareFrame() {
-//     return true;
-//   }
-//   override renderFrame(frameState: FrameState) {
-//     const layer = this.getLayer();
-//     const { map, mbMap } = layer;
-//     if (!layer || !map || !mbMap) {
-//       return null;
-//     }
-//     const canvas = mbMap.getCanvas();
-//     const { viewState } = frameState;
-//     const opacity = layer.getOpacity() || 1;
-//     canvas.style.opacity = `${opacity}`;
-//     // adjust view parameters in Maplibre
-//     mbMap.jumpTo({
-//       center: toLonLat(viewState.center) as [number, number],
-//       zoom: viewState.zoom - 1,
-//       bearing: toDegrees(-viewState.rotation),
-//     });
-//     if (!canvas.isConnected) {
-//       // The canvas is not connected to the DOM, request a map rendering at the next animation frame
-//       // to set the canvas size.
-//       map.render();
-//     } else if (
-//       canvas.width !== frameState.size[0] ||
-//       canvas.height !== frameState.size[1]
-//     ) {
-//       mbMap.resize();
-//     }
-//     mbMap.redraw();
-//     return mbMap.getContainer();
-//   }
-//   override getFeatures(pixel: Pixel) {
-//     const coordinate = this.getLayer()
-//       ?.getMapInternal()
-//       ?.getCoordinateFromPixel(pixel);
-//     return Promise.resolve(this.getFeaturesAtCoordinate(coordinate));
-//   }
-//   override forEachFeatureAtCoordinate<Feature>(
-//     coordinate: Coordinate,
-//     frameState: FrameState,
-//     hitTolerance: number,
-//     callback: FeatureCallback<Feature>,
-//   ): Feature | undefined {
-//     const features = this.getFeaturesAtCoordinate(coordinate, hitTolerance);
-//     features.forEach((feature) => {
-//       // @ts-expect-error
-//       callback(feature, this.layer_, feature.getGeometry());
-//     });
-//     return features?.[0] as Feature;
-//   }
-// }
+export default class MaplibreLayerRenderer extends MapLibreLayerRenderer {
+    constructor(layer) {
+        super(layer);
+        this.ignoreNextRender = false;
+        this.setIsReady = this.setIsReady.bind(this);
+        this.ignoreNextRender = false;
+    }
+    renderFrame(frameState) {
+        var _a, _b, _c;
+        (_b = (_a = this.getLayer()) === null || _a === void 0 ? void 0 : _a.mapLibreMap) === null || _b === void 0 ? void 0 : _b.off('idle', this.setIsReady);
+        const mapLibreMap = (_c = this.getLayer()) === null || _c === void 0 ? void 0 : _c.mapLibreMap;
+        mapLibreMap === null || mapLibreMap === void 0 ? void 0 : mapLibreMap.off('idle', this.setIsReady);
+        if (this.ignoreNextRender) {
+            this.ignoreNextRender = false;
+            const container = mapLibreMap === null || mapLibreMap === void 0 ? void 0 : mapLibreMap.getContainer();
+            if (container) {
+                return container;
+            }
+        }
+        this.ready = false;
+        const container = super.renderFrame(frameState);
+        // Mark the renderer as ready when the map is idle
+        mapLibreMap === null || mapLibreMap === void 0 ? void 0 : mapLibreMap.once('idle', this.setIsReady);
+        return container;
+    }
+    setIsReady() {
+        if (!this.ready) {
+            this.ready = true;
+            this.ignoreNextRender = true;
+            this.getLayer().changed();
+        }
+    }
+}

package/ol/renderers/MaplibreStyleLayerRenderer.js

@@ -19,7 +19,7 @@ export default class MaplibreStyleLayerRenderer extends LayerRenderer {
     forEachFeatureAtCoordinate(coordinate, frameState, hitTolerance, callback) {
         const features = this.getFeaturesAtCoordinate(coordinate, hitTolerance);
         features.forEach((feature) => {
-            // @ts-expect-error
+            // @ts-expect-error improve ts types
             callback(feature, this.layer_, feature.getGeometry());
         });
         return features === null || features === void 0 ? void 0 : features[0];
@@ -36,7 +36,7 @@ export default class MaplibreStyleLayerRenderer extends LayerRenderer {
         }
         const layer = this.getLayer();
         const map = layer.getMapInternal();
-        const { mapLibreMap } = layer.maplibreLayer;
+        const mapLibreMap = layer.maplibreLayer.mapLibreMap;
         const projection = ((_b = (_a = map === null || map === void 0 ? void 0 : map.getView()) === null || _a === void 0 ? void 0 : _a.getProjection()) === null || _b === void 0 ? void 0 : _b.getCode()) || 'EPSG:3857';
         let features = [];
         if (!formats[projection]) {

package/ol/renderers/RealtimeLayerRenderer.d.ts

@@ -14,7 +14,7 @@ import type RealtimeLayer from '../layers/RealtimeLayer';
 export default class RealtimeLayerRenderer extends CanvasLayerRenderer<RealtimeLayer> {
     private canvas;
     forEachFeatureAtCoordinate<Feature>(coordinate: Coordinate, frameState: FrameState, hitTolerance: number, callback: FeatureCallback<Feature>): Feature | undefined;
-    getData(pixel: Pixel): Uint8ClampedArray | null;
+    getData(pixel: Pixel): Uint8ClampedArray<ArrayBufferLike> | null;
     getFeatures(pixel: Pixel): Promise<Feature<Geometry>[]>;
     getFeaturesAtCoordinate(coordinate: Coordinate | undefined, hitTolerance?: number): Feature<Geometry>[];
     prepareFrame(): boolean;

package/ol/renderers/RealtimeLayerRenderer.js

@@ -1,20 +1,17 @@
-import { buffer, containsCoordinate } from 'ol/extent';
 import GeoJSON from 'ol/format/GeoJSON';
 import CanvasLayerRenderer from 'ol/renderer/canvas/Layer';
 import { composeCssTransform } from 'ol/transform';
-/** @private */
 const format = new GeoJSON();
 /**
  * This class is a renderer for Maplibre Layer to be able to use the native ol
  * functionnalities like map.getFeaturesAtPixel or map.hasFeatureAtPixel.
  * @private
  */
-// @ts-expect-error
 export default class RealtimeLayerRenderer extends CanvasLayerRenderer {
     forEachFeatureAtCoordinate(coordinate, frameState, hitTolerance, callback) {
         const features = this.getFeaturesAtCoordinate(coordinate, hitTolerance);
         features.forEach((feature) => {
-            // @ts-expect-error
+            // @ts-expect-error defintion to fix
             callback(feature, this.layer_, feature.getGeometry());
         });
         return features === null || features === void 0 ? void 0 : features[0];
@@ -43,37 +40,15 @@ export default class RealtimeLayerRenderer extends CanvasLayerRenderer {
         return Promise.resolve(this.getFeaturesAtCoordinate(coordinate));
     }
     getFeaturesAtCoordinate(coordinate, hitTolerance = 5) {
-        var _a;
         if (!coordinate) {
             return [];
         }
         const layer = this.getLayer();
-        const map = layer.getMapInternal();
-        const resolution = ((_a = map === null || map === void 0 ? void 0 : map.getView()) === null || _a === void 0 ? void 0 : _a.getResolution()) || 1;
-        const nb = 10;
-        const ext = buffer([...coordinate, ...coordinate], hitTolerance * resolution);
-        let features = [];
-        let trajectories = Object.values(layer.trajectories || {});
-        if (layer.sort) {
-            // @ts-expect-error
-            trajectories = trajectories.sort(this.sort);
-        }
-        const vehicles = [];
-        for (let i = 0; i < trajectories.length; i += 1) {
-            const trajectory = trajectories[i];
-            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]);
-            }
-            if (vehicles.length === nb) {
-                break;
-            }
-        }
-        features = vehicles.map((vehicle) => format.readFeature(vehicle));
-        return features;
+        const featureCollection = layer.engine.getVehiclesAtCoordinate(coordinate, {
+            hitTolerance,
+            nb: layer.maxNbFeaturesRequested,
+        });
+        return format.readFeatures(featureCollection);
     }
     // eslint-disable-next-line class-methods-use-this
     prepareFrame() {

package/ol/styles/fullTrajectoryDelayStyle.js

@@ -1,31 +1,29 @@
-import { Style, Fill, Stroke, Circle } from 'ol/style';
-/** @private */
+import { Circle, Fill, Stroke, Style } from 'ol/style';
 const stroke = new Style({
-    zIndex: 2,
     image: new Circle({
-        radius: 5,
         fill: new Fill({
             color: '#000000',
         }),
+        radius: 5,
     }),
     stroke: new Stroke({
         color: '#000000',
         width: 6,
     }),
+    zIndex: 2,
 });
-/** @private */
 const fill = new Style({
-    zIndex: 3,
     image: new Circle({
-        radius: 4,
         fill: new Fill({
             color: '#a0a0a0',
         }),
+        radius: 4,
     }),
     stroke: new Stroke({
         color: '#a0a0a0',
         width: 4,
     }),
+    zIndex: 3,
 });
 /**
  * @private

package/ol/styles/fullTrajectoryStyle.d.ts

@@ -1,5 +1,4 @@
-import type { FeatureLike } from 'ol/Feature';
 import { Style } from 'ol/style';
-/** @private */
+import type { FeatureLike } from 'ol/Feature';
 declare const fullTrajectorystyle: (feature: FeatureLike, resolution: number, options: any) => Style[];
 export default fullTrajectorystyle;

package/ol/styles/fullTrajectoryStyle.js

@@ -1,19 +1,17 @@
-import { Style, Fill, Stroke, Circle } from 'ol/style';
-/** @private */
+import { Circle, Fill, Stroke, Style } from 'ol/style';
 const borderStyle = new Style({
-    zIndex: 2,
     image: new Circle({
-        radius: 5,
         fill: new Fill({
             color: '#000000',
         }),
+        radius: 5,
     }),
     stroke: new Stroke({
         color: '#000000',
         width: 6,
     }),
+    zIndex: 2,
 });
-/** @private */
 const fullTrajectorystyle = (feature, resolution, options) => {
     let lineColor = '#ffffff'; // white
     const type = feature.get('type');
@@ -27,17 +25,17 @@ const fullTrajectorystyle = (feature, resolution, options) => {
     const style = [
         borderStyle,
         new Style({
-            zIndex: 3,
             image: new Circle({
-                radius: 4,
                 fill: new Fill({
                     color: lineColor,
                 }),
+                radius: 4,
             }),
             stroke: new Stroke({
                 color: lineColor,
                 width: 4,
             }),
+            zIndex: 3,
         }),
     ];
     return style;

package/ol/styles/routingStyle.d.ts

@@ -1,4 +1,3 @@
 import { StyleFunction } from 'ol/style/Style';
-/** @private */
 declare const routingStyle: StyleFunction;
 export default routingStyle;

package/ol/styles/routingStyle.js

@@ -1,24 +1,21 @@
 import { Circle, Fill, Stroke } from 'ol/style';
 import Style from 'ol/style/Style';
-/** @private */
 const circleStyle = new Circle({
-    radius: 6,
     fill: new Fill({
         color: [255, 0, 0, 1],
     }),
+    radius: 6,
     stroke: new Stroke({
         color: [0, 0, 0, 1],
         width: 1,
     }),
 });
-/** @private */
 const blackBorder = new Style({
     stroke: new Stroke({
         color: [0, 0, 0, 1],
         width: 5,
     }),
 });
-/** @private */
 const redLine = new Style({
     image: circleStyle,
     stroke: new Stroke({
@@ -26,27 +23,33 @@ const redLine = new Style({
         width: 3,
     }),
 });
-/** @private */
 const dashedRedLine = new Style({
     image: circleStyle,
     stroke: new Stroke({
         color: [255, 0, 0, 1],
-        width: 3,
         lineDash: [1, 10],
+        width: 3,
     }),
 });
-/** @private */
 const routingStyle = (feature, resolution) => {
+    var _a;
     const minResolution = feature.get('minResolution');
     const maxResolution = feature.get('maxResolution');
     const inRange = resolution <= minResolution && resolution > maxResolution;
     if (minResolution && maxResolution && !inRange) {
         return [];
     }
+    const zIndex = ((_a = feature === null || feature === void 0 ? void 0 : feature.getGeometry()) === null || _a === void 0 ? void 0 : _a.getType()) === 'Point' ? 100 : 0;
+    let styles = [blackBorder, redLine];
     const mot = feature.get('mot');
-    if (mot !== 'foot') {
-        return [blackBorder, redLine];
+    if (mot === 'foot') {
+        styles = [dashedRedLine];
     }
-    return [dashedRedLine];
+    styles = styles.map((style) => {
+        const tmp = style.clone();
+        tmp.setZIndex(zIndex);
+        return tmp;
+    });
+    return styles;
 };
 export default routingStyle;

package/ol/utils/defineDeprecatedProperties.d.ts

@@ -0,0 +1,10 @@
+import { Layer } from 'ol/layer';
+import { MobilityLayerOptions } from '../layers/Layer';
+/**
+ * obj function defines properties taht were used in mbt v2.
+ * They are all marked als deprecated.
+ * @param obj
+ * @returns
+ */
+declare const defineDeprecatedProperties: (obj: Layer, options: MobilityLayerOptions) => void;
+export default defineDeprecatedProperties;

package/ol/utils/defineDeprecatedProperties.js

@@ -0,0 +1,180 @@
+import debounce from 'lodash.debounce';
+let deprecated = () => { };
+if (typeof window !== 'undefined' &&
+    new URLSearchParams(window.location.search).get('deprecated')) {
+    deprecated = debounce((message) => {
+        // eslint-disable-next-line no-console
+        console.warn(message);
+    }, 1000);
+}
+const onChildrenChange = (layer, oldValue) => {
+    // Set the parent property
+    (oldValue || []).forEach((child) => {
+        child.set('parent', undefined);
+    });
+    (layer.get('children') || []).forEach((child) => {
+        child.set('parent', this);
+    });
+};
+/**
+ * obj function defines properties taht were used in mbt v2.
+ * They are all marked als deprecated.
+ * @param obj
+ * @returns
+ */
+const defineDeprecatedProperties = (obj, options) => {
+    if (options.properties) {
+        deprecated("Deprecated. Don't use properties options. Pass the values directly in options object.");
+        obj.setProperties(options.properties);
+    }
+    // Update parent property
+    obj.on('propertychange', (evt) => {
+        if (evt.key === 'children') {
+            onChildrenChange(evt.target, evt.oldValue);
+        }
+        if (evt.key === 'map') {
+            const map = evt.target.get(evt.key);
+            if (map) {
+                (evt.target.get('children') || []).forEach((child) => {
+                    map.addLayer(child);
+                });
+            }
+            else if (evt.oldValue) {
+                (evt.target.get('children') || []).forEach((child) => {
+                    evt.oldValue.removeLayer(child);
+                });
+            }
+        }
+    });
+    // Save options for cloning
+    obj.set('options', options);
+    obj.set('children', options.children || []); // Trigger the on children change event
+    Object.defineProperties(obj, {
+        children: {
+            /** @deprecated */
+            get: () => {
+                deprecated("Layer.children is deprecated. Use the Layer.get('children') method instead.");
+                return obj.get('children') || [];
+            },
+            /** @deprecated */
+            set: (newValue) => {
+                deprecated("Layer.children is deprecated. Use the Layer.set('children', children) method instead.");
+                obj.set('children', newValue || []);
+            },
+        },
+        copyrights: {
+            /** @deprecated */
+            get: () => {
+                deprecated('Layer.copyrights is deprecated. Get the attributions from the source object');
+                return obj.get('copyrights');
+            },
+            /** @deprecated */
+            set: (newCopyrights) => {
+                deprecated('Layer.copyrights is deprecated. Set the attributions to the source object.');
+                const arrValue = newCopyrights && !Array.isArray(newCopyrights)
+                    ? [newCopyrights]
+                    : newCopyrights;
+                obj.set('copyrights', arrValue || []);
+            },
+        },
+        disabled: {
+            /** @deprecated */
+            get() {
+                deprecated("Layer.disabled is deprecated. Use the Layer.get('disabled') method instead.");
+                return obj.get('disabled');
+            },
+            /** @deprecated */
+            set(newValue) {
+                deprecated("Layer.disabled is deprecated. Use the Layer.set('disabled', newValue) method instead.");
+                obj.set('disabled', newValue);
+            },
+        },
+        group: {
+            /** @deprecated */
+            get() {
+                deprecated("Layer.group is deprecated. Use the Layer.get('group') method instead.");
+                return obj.get('group');
+            },
+        },
+        hitTolerance: {
+            /** @deprecated */
+            get() {
+                deprecated('Layer.hitTolerance is deprecated. Pass the hitTolerance when you request the features.');
+                return obj.get('hitTolerance') || 5;
+            },
+            /** @deprecated */
+            set(newValue) {
+                deprecated('Layer.hitTolerance is deprecated. Pass the hitTolerance when you request the features.');
+                obj.set('hitTolerance', newValue);
+            },
+        },
+        key: {
+            /** @deprecated */
+            get() {
+                deprecated('Layer.key is deprecated. Use the Layer.get("key") method instead.');
+                return obj.get('key') || obj.get('name');
+            },
+        },
+        map: {
+            /** @deprecated */
+            get() {
+                deprecated('Layer.map is deprecated. Use the Layer.get("map") method instead.');
+                return obj.getMapInternal();
+            },
+        },
+        name: {
+            /** @deprecated */
+            get() {
+                deprecated("Layer.name is deprecated. Use the Layer.get('name') method instead.");
+                return obj.get('name');
+            },
+        },
+        olLayer: {
+            /** @deprecated */
+            get() {
+                deprecated("Layer.olLayer is deprecated. mobility-toolbox-js/ol layers inherits now from ol/layer/Layer class. obj getter is only a redirect to the current 'this' object.");
+                return obj;
+            },
+            /** @deprecated */
+            set() {
+                deprecated('Layer.olLayer is deprecated. mobility-toolbox-js/ol layers inherits now from ol/layer/Layer class. obj setter has no effect.');
+            },
+        },
+        options: {
+            /** @deprecated */
+            get() {
+                deprecated('Layer.options is deprecated. Use the Layer.get("options") method instead.');
+                return obj.get('options');
+            },
+            set(newValue) {
+                deprecated('Layer.options is deprecated.  Use the Layer.set("options", newValue) method instead.');
+                return obj.set('options', newValue);
+            },
+        },
+        parent: {
+            /** @deprecated */
+            get() {
+                deprecated("Layer.parent is deprecated. Use the Layer.get('parent') method instead.");
+                return obj.get('parent');
+            },
+            /** @deprecated */
+            set(newValue) {
+                deprecated("Layer.parent is deprecated. Use the Layer.set('parent', parent) method instead.");
+                obj.set('parent', newValue);
+            },
+        },
+        visible: {
+            /** @deprecated */
+            get() {
+                deprecated('Layer.visible is deprecated. Use the Layer.getVisible() method instead.');
+                return obj.getVisible();
+            },
+            /** @deprecated */
+            set(newValue) {
+                deprecated('Layer.visible is deprecated. Use the Layer.setVisible(newValue) method instead.');
+                obj.setVisible(newValue);
+            },
+        },
+    });
+};
+export default defineDeprecatedProperties;