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

package/ol/layers/MaplibreStyleLayer.js

@@ -1,9 +1,10 @@
 import debounce from 'lodash.debounce';
 import { Layer } from 'ol/layer';
+import { unByKey } from 'ol/Observable';
 import { Source } from 'ol/source';
 import { VECTOR_TILE_FEATURE_PROPERTY } from '../../common';
-import MobilityLayerMixin from '../mixins/MobilityLayerMixin';
 import MaplibreStyleLayerRenderer from '../renderers/MaplibreStyleLayerRenderer';
+import defineDeprecatedProperties from '../utils/defineDeprecatedProperties';
 let deprecated = () => { };
 if (typeof window !== 'undefined' &&
     new URLSearchParams(window.location.search).get('deprecated')) {
@@ -13,33 +14,113 @@ if (typeof window !== 'undefined' &&
     }, 1000);
 }
 /**
- * Layer for visualizing a specific set of layer from a MapboxLayer.
+ * Layer that helps show/hide a specific subset of style layers of a [MaplibreLayer](./MaplibreLayer.js~MaplibreLayer.html).
  *
  * @example
- * import { MapboxLayer, MapboxStyleLayer } from 'mobility-toolbox-js/ol';
+ * import { MaplibreLayer, MaplibreStyleLayer } from 'mobility-toolbox-js/ol';
  *
- * const maplibreLayer = new MapboxLayer({
- *   url: 'https://maps.geops.io/styles/travic_v2/style.json?key=[yourApiKey]',
+ * const maplibreLayer = new MaplibreLayer({
+ *   apiKey: 'yourApiKey',
  * });
  *
- * const layer = new MapboxStyleLayer({
+ * const layer = new MaplibreStyleLayer({
  *   maplibreLayer: maplibreLayer,
- *   styleLayersFilter: () => {},
+ *   layersFilter: (layer) => {
+ *     // show/hide only style layers related to stations
+ *     return /station/.test(layer.id);
+ *   },
  * });
  *
- * @classproperty {ol/Map~Map} map - The map where the layer is displayed.
+ * @see <a href="/example/ol-maplibre-style-layer">OpenLayers MaplibreStyle layer example</a>
  * @extends {ol/layer/Layer~Layer}
+ * @public
  */
-class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
+class MaplibreStyleLayer extends Layer {
+    get beforeId() {
+        return this.get('beforeId');
+    }
+    set beforeId(newValue) {
+        this.set('beforeId', newValue);
+    }
+    get layers() {
+        return this.get('layers');
+    }
+    set layers(newValue) {
+        this.set('layers', newValue);
+    }
+    get layersFilter() {
+        return this.get('layersFilter');
+    }
+    set layersFilter(newValue) {
+        this.set('layersFilter', newValue);
+    }
+    /**
+     * @deprecated Use MaplibreStyleLayer.maplibreLayer instead.
+     */
+    get mapboxLayer() {
+        deprecated('Deprecated. Use maplibreLayer instead.');
+        return this.get('maplibreLayer');
+    }
+    get maplibreLayer() {
+        return this.get('maplibreLayer');
+    }
+    set maplibreLayer(newValue) {
+        this.set('maplibreLayer', newValue);
+    }
+    get queryRenderedLayersFilter() {
+        return this.get('queryRenderedLayersFilter');
+    }
+    set queryRenderedLayersFilter(newValue) {
+        this.set('queryRenderedLayersFilter', newValue);
+    }
+    get sources() {
+        return this.get('sources');
+    }
+    set sources(newValue) {
+        this.set('sources', newValue);
+    }
+    /**
+     * @deprecated Use MaplibreStyleLayer.layer instead.
+     */
+    get styleLayer() {
+        deprecated('Deprecated. Use MaplibreStyleLayer.layer instead.');
+        return this.layers[0];
+    }
+    /**
+     * @deprecated
+     */
+    set styleLayer(newValue) {
+        deprecated('MaplibreStyleLayer.styleLayer is deprecated. Use MaplibreStyleLayer.layer instead.');
+        this.layers = [newValue];
+    }
+    /**
+     * Apply visibility to style layers that fits the styleLayersFilter function.
+     */
+    /**
+     * @deprecated
+     */
+    get styleLayers() {
+        deprecated('MaplibreStyleLayer.styleLayers is deprecated. Use MaplibreStyleLayer.layers instead.');
+        return this.layers;
+    }
+    /**
+     * @deprecated
+     */
+    set styleLayers(newValue) {
+        deprecated('MaplibreStyleLayer.styleLayers is deprecated. Use MaplibreStyleLayer.layers instead.');
+        this.layers = newValue;
+    }
     /**
      * Constructor.
      *
      * @param {Object} options
-     * @param {MapboxLayer} [options.maplibreLayer] The MaplibreLayer to use.
-     * @param {maplibregl.SourceSpecification[]} [options.sources] The source to add to the style on load.
+     * @param {string} [options.beforeId] The style layer id to use when the options.layers property is defined, unsused otherwise.
      * @param {maplibregl.AddLayerObject[]} [options.layers] The layers to add to the style on load.
      * @param {FilterFunction} [options.layersFilter] Filter function to decide which style layer to apply visiblity on. If not provided, the 'layers' property is used.
+     * @param {MaplibreLayer} [options.maplibreLayer] The MaplibreLayer to use.
      * @param {FilterFunction} [options.queryRenderedLayersFilter] Filter function to decide which style layer are available for query.
+     * @param {{[id: string]:maplibregl.SourceSpecification}} [options.sources] The sources to add to the style on load.
+     * @public
      */
     constructor(options = {
         mapLibreOptions: { style: { layers: [], sources: {}, version: 8 } },
@@ -52,12 +133,29 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
             // eslint-disable-next-line no-param-reassign
             delete options.mapboxLayer;
         }
+        if (options.styleLayers) {
+            deprecated('options.styleLayers is deprecated. Use options.layers instead.');
+            // eslint-disable-next-line no-param-reassign
+            options.layers = options.styleLayers;
+            // eslint-disable-next-line no-param-reassign
+            delete options.styleLayers;
+        }
+        if (options.styleLayersFilter) {
+            deprecated('options.styleLayersFilter is deprecated. Use options.layersFilter instead.');
+            // eslint-disable-next-line no-param-reassign
+            options.layersFilter = options.styleLayersFilter;
+            // eslint-disable-next-line no-param-reassign
+            delete options.styleLayersFilter;
+        }
         super(Object.assign({ source: new Source({}) }, options));
         this.highlightedFeatures = [];
+        this.olEventsKeys = [];
         this.selectedFeatures = [];
-        /**
-         * @private
-         */
+        // For backward compatibility with v2
+        defineDeprecatedProperties(this, options);
+        // For cloning
+        this.set('options', options);
+        this.beforeId = options.beforeId;
         this.onLoad = this.onLoad.bind(this);
         if (!this.layersFilter && this.layers) {
             this.layersFilter = (layer) => {
@@ -65,7 +163,6 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
             };
         }
     }
-    /** @private */
     addLayers() {
         var _a;
         if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.mapLibreMap) || !Array.isArray(this.layers)) {
@@ -85,7 +182,6 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
             this.applyLayoutVisibility();
         }
     }
-    /** @private */
     addSources() {
         var _a;
         if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.mapLibreMap) || !this.sources) {
@@ -130,17 +226,17 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
      * @override
      */
     attachToMap(map) {
-        if (this.maplibreLayer && !this.maplibreLayer.map) {
+        if (this.maplibreLayer && !this.maplibreLayer.getMapInternal()) {
             map.addLayer(this.maplibreLayer);
         }
-        super.attachToMap(map);
-        if (!this.map || !this.maplibreLayer) {
+        const mapInternal = this.getMapInternal();
+        if (!mapInternal || !this.maplibreLayer) {
             return;
         }
-        if (!this.map.getTargetElement()) {
+        if (!mapInternal.getTargetElement()) {
             // If ther e is no target element the mapLibreMap is not yet created, we
             // relaunch the initialisation when it's the case.
-            this.olEventsKeys.push(this.map.on('change:target', () => {
+            this.olEventsKeys.push(mapInternal.on('change:target', () => {
                 this.attachToMap(map);
             }));
             return;
@@ -171,15 +267,27 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
                 this.detachFromMap();
                 this.attachToMap(map);
             }
+        }), 
+        // When the style changes we wait that it is loaded to relaunch the onLoad
+        this.maplibreLayer.on('propertychange', (evt) => {
+            if (evt.key === 'style') {
+                evt.target.maplibreMap.once('styledata', () => {
+                    evt.target.maplibreMap.once('idle', () => {
+                        this.onLoad();
+                    });
+                });
+            }
         }));
     }
     /**
-     * Create a copy of the MapboxStyleLayer.
-     * @param {Object} newOptions Options to override.
-     * @return {MapboxStyleLayer} A MapboxStyleLayer.
+     * Create a copy of the MaplibreStyleLayer.
+     *
+     * @param {Object} newOptions Options to override. See constructor.
+     * @return {MapboxStyleLayer} A MaplibreStyleLayer.
+     * @public
      */
     clone(newOptions) {
-        return new MaplibreStyleLayer(Object.assign(Object.assign({}, this.options), newOptions));
+        return new MaplibreStyleLayer(Object.assign(Object.assign({}, this.get('options')), newOptions));
     }
     createRenderer() {
         return new MaplibreStyleLayerRenderer(this);
@@ -190,17 +298,18 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
      */
     detachFromMap() {
         var _a;
+        unByKey(this.olEventsKeys);
         if ((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.mapLibreMap) {
             this.maplibreLayer.mapLibreMap.off('load', this.onLoad);
             this.removeLayers();
             this.removeSources();
         }
-        super.detachFromMap();
     }
     /**
      * Request feature information for a given coordinate.
      * @param {ol/coordinate~Coordinate} coordinate Coordinate to request the information at.
      * @return {Promise<FeatureInfo>} Promise with features, layer and coordinate.
+     * @deprecated Use getFeatureInfoAtCoordinate([layer], coordinate) from mobility-toolbox-ol package instead.
      */
     getFeatureInfoAtCoordinate(coordinate) {
         var _a;
@@ -217,6 +326,7 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
         let layers = this.layers || [];
         if (this.layersFilter) {
             layers = mapLibreMap.getStyle().layers.filter(this.layersFilter);
+            console.log(layers);
         }
         if (this.queryRenderedLayersFilter) {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -251,11 +361,11 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
     /**
      * Highlight a list of features.
      * @param {Array<ol/Feature~Feature>} [features=[]] Features to highlight.
-     * @private
+     * @deprecated Use layer.setFeatureState(features, {hover: true|false}) instead.
      */
     highlight(features = []) {
         var _a;
-        deprecated(`Deprecated. Use layer.setFeatureState(features, {highlighted: true}) instead.`);
+        deprecated(`Deprecated. Use layer.setFeatureState(features, {hover: 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())
@@ -268,7 +378,6 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
     }
     /**
      * On Maplibre map load callback function. Add style layers and dynaimc filters.
-     * @private
      */
     onLoad() {
         var _a;
@@ -285,7 +394,6 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
         }
         this.applyLayoutVisibility();
     }
-    /** @private */
     removeLayers() {
         var _a;
         if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.mapLibreMap) || !Array.isArray(this.layers)) {
@@ -301,7 +409,22 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
             });
         }
     }
-    /** @private */
+    // /**
+    //  * Set filter that determines which features should be rendered in a style layer.
+    //  * @param {maplibregl.filter} filter Determines which features should be rendered in a style layer.
+    //  */
+    // setFilter(filter: { [key: string]: any }) {
+    //   if (!this.maplibreLayer?.mapLibreMap) {
+    //     return;
+    //   }
+    //   const { mapLibreMap } = this.maplibreLayer;
+    //   this.styleLayers.forEach(({ id }) => {
+    //     if (id && filter && mapLibreMap.getLayer(id)) {
+    //       // @ts-expect-error
+    //       mapLibreMap.setFilter(id, filter);
+    //     }
+    //   });
+    // }
     removeSources() {
         var _a;
         if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.mapLibreMap) || !this.sources) {
@@ -319,7 +442,7 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
     /**
      * Select a list of features.
      * @param {Array<ol/Feature~Feature>} [features=[]] Features to select.
-     * @private
+     * @deprecated Use layer.setFeatureState(features, {selected: true|false}) instead.
      */
     select(features = []) {
         deprecated(`Deprecated. Use layer.setFeatureState(features, {selected: true}) instead.`);
@@ -328,9 +451,10 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
         this.setHoverState(this.selectedFeatures || [], true);
     }
     /**
-     * Set the feature state of the features.
-     * @param {Array<ol/Feature~Feature>} features
-     * @param {{[key:string]:boolean}} state The feature state
+     * Set the [feature state](https://maplibre.org/maplibre-style-spec/expressions/#feature-state) of the features.
+     *
+     * @param {ol/Feature~Feature[]} features
+     * @param {{[key: string]: any}} state The feature state
      * @public
      */
     setFeatureState(features, state) {
@@ -338,7 +462,7 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
         if (!((_a = this.maplibreLayer) === null || _a === void 0 ? void 0 : _a.mapLibreMap) || !features.length) {
             return;
         }
-        const { mapLibreMap } = this.maplibreLayer;
+        const mapLibreMap = this.maplibreLayer.mapLibreMap;
         features.forEach((feature) => {
             const { source, sourceLayer } = feature.get(VECTOR_TILE_FEATURE_PROPERTY) || {};
             if ((!source && !sourceLayer) || !feature.getId()) {
@@ -358,98 +482,21 @@ class MaplibreStyleLayer extends MobilityLayerMixin(Layer) {
      * Set if features are hovered or not.
      * @param {Array<ol/Feature~Feature>} features
      * @param {boolean} state Is the feature hovered
-     * @private
+     * @deprecated Use layer.setFeatureState(features, {hover: true|false}) instead.
      */
     setHoverState(features, state) {
         deprecated(`Deprecated. Use layer.setFeatureState(features, {hover: ${state}}) instead.`);
         this.setFeatureState(features, { hover: state });
     }
-    get beforeId() {
-        return this.get('beforeId');
-    }
-    set beforeId(newValue) {
-        this.set('beforeId', newValue);
-    }
-    get layers() {
-        return this.get('layers');
-    }
-    set layers(newValue) {
-        this.set('layers', newValue);
-    }
-    get layersFilter() {
-        return this.get('layersFilter');
-    }
-    set layersFilter(newValue) {
-        this.set('layersFilter', newValue);
-    }
-    get mapboxLayer() {
-        deprecated('Deprecated. Use maplibreLayer instead.');
-        return this.get('maplibreLayer');
-    }
-    get maplibreLayer() {
-        return this.get('maplibreLayer');
-    }
-    set maplibreLayer(newValue) {
-        this.set('maplibreLayer', newValue);
-    }
-    get queryRenderedLayersFilter() {
-        return this.get('queryRenderedLayersFilter');
-    }
-    set queryRenderedLayersFilter(newValue) {
-        this.set('queryRenderedLayersFilter', newValue);
-    }
-    get sources() {
-        return this.get('sources');
-    }
-    // /**
-    //  * Set filter that determines which features should be rendered in a style layer.
-    //  * @param {maplibregl.filter} filter Determines which features should be rendered in a style layer.
-    //  */
-    // setFilter(filter: { [key: string]: any }) {
-    //   if (!this.maplibreLayer?.mapLibreMap) {
-    //     return;
-    //   }
-    //   const { mapLibreMap } = this.maplibreLayer;
-    //   this.styleLayers.forEach(({ id }) => {
-    //     if (id && filter && mapLibreMap.getLayer(id)) {
-    //       // @ts-expect-error
-    //       mapLibreMap.setFilter(id, filter);
-    //     }
-    //   });
-    // }
-    set sources(newValue) {
-        this.set('sources', newValue);
-    }
-    /**
-     * @deprecated
-     */
-    get styleLayer() {
-        deprecated('MaplibreStyleLayer.styleLayer is deprecated. Use MaplibreStyleLayer.layer instead.');
-        return this.layers[0];
-    }
-    /**
-     * @deprecated
-     */
-    set styleLayer(newValue) {
-        deprecated('MaplibreStyleLayer.styleLayer is deprecated. Use MaplibreStyleLayer.layer instead.');
-        this.layers = [newValue];
-    }
-    /**
-     * Apply visibility to style layers that fits the styleLayersFilter function.
-     */
-    /**
-     * @deprecated
-     */
-    get styleLayers() {
-        deprecated('MaplibreStyleLayer.styleLayers is deprecated. Use MaplibreStyleLayer.layers instead.');
-        return this.layers;
-    }
-    /**
-     * @deprecated
-     */
-    set styleLayers(newValue) {
-        deprecated('MaplibreStyleLayer.styleLayers is deprecated. Use MaplibreStyleLayer.layers instead.');
-        this.layers = newValue;
+    setMapInternal(map) {
+        if (map) {
+            super.setMapInternal(map);
+            this.attachToMap(map);
+        }
+        else {
+            this.detachFromMap();
+            super.setMapInternal(map);
+        }
     }
 }
 export default MaplibreStyleLayer;