mobility-toolbox-js 3.0.0-beta.13 → 3.0.0-beta.15

package/ol/mixins/PropertiesLayerMixin.js

@@ -1,41 +1,56 @@
 import { getUid } from 'ol';
+import debounce from 'lodash.debounce';
 import getLayersAsFlatArray from '../../common/utils/getLayersAsFlatArray';
+const deprecated = debounce((message) => {
+    // eslint-disable-next-line no-console
+    console.warn(message);
+}, 1000);
 /**
  * This mixin adds some properties to access ol custom properties easily.
  */
 function PropertiesLayerMixin(Base) {
     return class PropertiesLayer extends Base {
+        /** @deprecated */
         get children() {
+            deprecated("Layer.children is deprecated. Use the Layer.get('children') method instead.");
             return this.get('children') || [];
         }
+        /** @deprecated */
         set children(newValue) {
+            deprecated("Layer.children is deprecated. Use the Layer.set('children', children) method instead.");
             this.set('children', newValue || []);
         }
+        /** @deprecated */
         get copyrights() {
-            // eslint-disable-next-line no-console
-            console.warn('Deprecated. Use the source object to get the attributions');
+            deprecated('Layer.copyrights is deprecated. Get the attributions from the source object');
             return this.get('copyrights');
         }
+        /** @deprecated */
         set copyrights(newCopyrights) {
-            // eslint-disable-next-line no-console
-            console.warn('Deprecated. Use the source object to set the attributions');
+            deprecated('Layer.copyrights is deprecated. Set the attributions to the source object.');
             const arrValue = newCopyrights && !Array.isArray(newCopyrights)
                 ? [newCopyrights]
                 : newCopyrights;
             this.set('copyrights', arrValue || []);
         }
+        /** @deprecated */
         get disabled() {
+            deprecated("Layer.disabled is deprecated. Use the Layer.get('disabled') method instead.");
             return this.get('disabled');
         }
+        /** @deprecated */
         set disabled(newValue) {
+            deprecated("Layer.disabled is deprecated. Use the Layer.set('disabled', newValue) method instead.");
             this.set('disabled', newValue);
         }
+        /** @deprecated */
         get group() {
+            deprecated("Layer.group is deprecated. Use the Layer.get('group') method instead.");
             return this.get('group');
         }
+        /** @deprecated */
         get hitTolerance() {
-            // eslint-disable-next-line no-console
-            console.warn('Deprecated. Pass the pixelTolerance when you request the features.');
+            deprecated('Layer.hitTolerance is deprecated.Pass the hitTolerance when you request the features.');
             return this.get('hitTolerance') || 5;
         }
         get key() {
@@ -44,29 +59,39 @@ function PropertiesLayerMixin(Base) {
         get map() {
             return this.getMapInternal();
         }
+        /** @deprecated */
         get name() {
+            deprecated("Layer.name is deprecated. Use the Layer.get('name') method instead.");
             return this.get('name');
         }
+        /** @deprecated */
         get olLayer() {
-            // eslint-disable-next-line no-console
-            console.warn("Deprecated property: mobility-toolbox-js/ol layers inherits now from ol/layer/Layer class. This getter is only a redirect to the current 'this' object.");
+            deprecated("Layer.olLayer is deprecated. mobility-toolbox-js/ol layers inherits now from ol/layer/Layer class. This getter is only a redirect to the current 'this' object.");
             return this;
         }
+        /** @deprecated */
         // eslint-disable-next-line class-methods-use-this
         set olLayer(newValue) {
-            // eslint-disable-next-line no-console
-            console.log('Deprecated property: mobility-toolbox-js/ol layers inherits now from ol/layer/Layer class. This setter has no effect.');
+            deprecated('Layer.olLayer is deprecated. mobility-toolbox-js/ol layers inherits now from ol/layer/Layer class. This setter has no effect.');
         }
+        /** @deprecated */
         get parent() {
+            deprecated("Layer.parent is deprecated. Use the Layer.get('parent') method instead.");
             return this.get('parent');
         }
+        /** @deprecated */
         set parent(newValue) {
+            deprecated("Layer.parent is deprecated. Use the Layer.set('parent', parent) method instead.");
             this.set('parent', newValue);
         }
+        /** @deprecated */
         get visible() {
+            deprecated('Layer.visible is deprecated. Use the Layer.getVisible() method instead.');
             return this.getVisible();
         }
+        /** @deprecated */
         set visible(newValue) {
+            deprecated('Layer.visible is deprecated. Use the Layer.setVisible(newValue) method instead.');
             this.setVisible(newValue);
         }
         constructor(...args) {
@@ -74,13 +99,12 @@ function PropertiesLayerMixin(Base) {
             const options = args[0];
             super(options);
             this.options = {};
-            this.olListenersKeys = [];
+            this.olEventsKeys = [];
             if (options.properties) {
-                // eslint-disable-next-line no-console
-                console.warn("Deprecated. Don't use properties options. Pass the values directly in options object.");
+                deprecated("Deprecated. Don't use properties options. Pass the values directly in options object.");
                 this.setProperties(options.properties);
             }
-            (_a = this.olListenersKeys) === null || _a === void 0 ? void 0 : _a.push(
+            (_a = this.olEventsKeys) === null || _a === void 0 ? void 0 : _a.push(
             // Update parent property
             this.on('propertychange', (evt) => {
                 if (evt.key === 'children') {
@@ -134,8 +158,10 @@ function PropertiesLayerMixin(Base) {
         }
         /**
          * Return the an array containing all the descendants of the layer in a flat array. Including the current layer.
+         * @deprecated
          */
         flat() {
+            deprecated('Layer.flat is deprecated. Use getLayersAsFlatArray utils method instead.');
             return getLayersAsFlatArray(this);
         }
     };

package/ol/renderers/MaplibreLayerRenderer.d.ts

@@ -1,20 +0,0 @@
-import { FrameState } from 'ol/Map';
-import LayerRenderer from 'ol/renderer/Layer';
-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 type MaplibreLayer from '../layers/MaplibreLayer';
-/**
- * This class is a renderer for Maplibre Layer to be able to use the native ol
- * functionnalities like map.getFeaturesAtPixel or map.hasFeatureAtPixel.
- * @private
- */
-export default class MaplibreLayerRenderer extends LayerRenderer<MaplibreLayer> {
-    getFeaturesAtCoordinate(coordinate: Coordinate | undefined, hitTolerance?: number): Feature<Geometry>[];
-    prepareFrame(): boolean;
-    renderFrame(frameState: FrameState): HTMLElement | null;
-    getFeatures(pixel: Pixel): Promise<Feature<Geometry>[]>;
-    forEachFeatureAtCoordinate<Feature>(coordinate: Coordinate, frameState: FrameState, hitTolerance: number, callback: FeatureCallback<Feature>): Feature | undefined;
-}

package/ol/renderers/MaplibreLayerRenderer.js

@@ -1,114 +1,142 @@
-import { toDegrees } from 'ol/math';
-import { toLonLat } from 'ol/proj';
-import LayerRenderer from 'ol/renderer/Layer';
-import GeoJSON from 'ol/format/GeoJSON';
-import { VECTOR_TILE_FEATURE_PROPERTY } from '../../common';
-/**
- * @private
- */
-const formats = {
-    'EPSG:3857': new GeoJSON({
-        featureProjection: 'EPSG:3857',
-    }),
-};
-/**
- * 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-ignore
-export default class MaplibreLayerRenderer extends LayerRenderer {
-    getFeaturesAtCoordinate(coordinate, hitTolerance = 5) {
-        var _a, _b;
-        if (!coordinate) {
-            return [];
-        }
-        const layer = this.getLayer();
-        const map = layer.getMapInternal();
-        const { mbMap } = layer;
-        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]) {
-            formats[projection] = new GeoJSON({
-                featureProjection: projection,
-            });
-        }
-        if (mbMap === null || mbMap === void 0 ? void 0 : mbMap.isStyleLoaded()) {
-            const pixel = coordinate && mbMap.project(toLonLat(coordinate));
-            if ((pixel === null || pixel === void 0 ? void 0 : pixel.x) && (pixel === null || pixel === void 0 ? void 0 : pixel.y)) {
-                let pixels = [
-                    pixel.x,
-                    pixel.y,
-                ];
-                if (hitTolerance) {
-                    const [x, y] = pixels;
-                    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
-                    .queryRenderedFeatures(pixels, layer.queryRenderedFeaturesOptions || {})
-                    .map((feature) => {
-                    const olFeature = formats[projection].readFeature(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-ignore
-                        olFeature.set(VECTOR_TILE_FEATURE_PROPERTY, feature);
-                    }
-                    return olFeature;
-                });
-            }
-        }
-        return features;
-    }
-    // eslint-disable-next-line class-methods-use-this
-    prepareFrame() {
-        return true;
-    }
-    renderFrame(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),
-            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();
-    }
-    getFeatures(pixel) {
-        var _a, _b;
-        const coordinate = (_b = (_a = this.getLayer()) === null || _a === void 0 ? void 0 : _a.getMapInternal()) === null || _b === void 0 ? void 0 : _b.getCoordinateFromPixel(pixel);
-        return Promise.resolve(this.getFeaturesAtCoordinate(coordinate));
-    }
-    forEachFeatureAtCoordinate(coordinate, frameState, hitTolerance, callback) {
-        const features = this.getFeaturesAtCoordinate(coordinate, hitTolerance);
-        features.forEach((feature) => {
-            // @ts-ignore
-            callback(feature, this.layer_, feature.getGeometry());
-        });
-        return features === null || features === void 0 ? void 0 : features[0];
-    }
-}
+"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';
+// /**
+//  * @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
+//  * functionnalities like map.getFeaturesAtPixel or map.hasFeatureAtPixel.
+//  * @private
+//  */
+// // @ts-ignore
+// 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-ignore
+//               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-ignore
+//       callback(feature, this.layer_, feature.getGeometry());
+//     });
+//     return features?.[0] as Feature;
+//   }
+// }

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": "3.0.0-beta.13",
+  "version": "3.0.0-beta.15",
   "homepage": "https://mobility-toolbox-js.geops.io/",
   "exports": {
     ".": "./index.js",
@@ -12,6 +12,7 @@
     "./types": "./types/index.d.ts"
   },
   "dependencies": {
+    "@geoblocks/ol-maplibre-layer": "^1.0.0",
     "@turf/helpers": "6.5.0",
     "@turf/transform-rotate": "6.5.0",
     "lodash.debounce": "4.0.8",