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

package/ol/layers/MaplibreLayer.d.ts

@@ -1,6 +1,7 @@
 import { MapLibreLayer } from '@geoblocks/ol-maplibre-layer/lib';
 import { EventsKey } from 'ol/events';
 import Map from 'ol/Map';
+import MaplibreLayerRenderer from '../renderers/MaplibreLayerRenderer';
 import { MobilityLayerOptions } from './Layer';
 import type { MapLibreLayerOptions, MapLibreOptions } from '@geoblocks/ol-maplibre-layer/lib/MapLibreLayer';
 import type { QueryRenderedFeaturesOptions } from 'maplibre-gl';
@@ -11,7 +12,7 @@ export type MaplibreLayerOptions = {
     queryRenderedFeaturesOptions?: QueryRenderedFeaturesOptions | undefined;
     style?: maplibregl.StyleSpecification | null | string;
     url?: string;
-} & MapLibreLayerOptions & MobilityLayerOptions;
+} & MobilityLayerOptions & Omit<MapLibreLayerOptions, 'mapLibreOptions'>;
 /**
  * An OpenLayers layer able to display data from the [geOps Maps API](https://developer.geops.io/apis/maps).
  *
@@ -83,6 +84,7 @@ declare class MaplibreLayer extends MapLibreLayer {
      * @public
      */
     clone(newOptions: MaplibreLayerOptions): MaplibreLayer;
+    createRenderer(): MaplibreLayerRenderer;
     detachFromMap(): void;
     getStyle(): any;
     setMapInternal(map: Map): void;

package/ol/layers/MaplibreLayer.js

@@ -2,6 +2,7 @@ import { MapLibreLayer } from '@geoblocks/ol-maplibre-layer/lib';
 import debounce from 'lodash.debounce';
 import { unByKey } from 'ol/Observable';
 import { getUrlWithParams } from '../../common/utils';
+import MaplibreLayerRenderer from '../renderers/MaplibreLayerRenderer';
 import defineDeprecatedProperties from '../utils/defineDeprecatedProperties';
 const buildStyleUrl = (url, style, apiKey, apiKeyName) => {
     return getUrlWithParams(`${url}/styles/${style}/style.json`, {
@@ -146,6 +147,9 @@ class MaplibreLayer extends MapLibreLayer {
     clone(newOptions) {
         return new MaplibreLayer(Object.assign(Object.assign({}, (this.get('options') || {})), (newOptions || {})));
     }
+    createRenderer() {
+        return new MaplibreLayerRenderer(this);
+    }
     detachFromMap() {
         unByKey(this.olEventsKeys);
     }

package/ol/renderers/MaplibreLayerRenderer.d.ts

@@ -0,0 +1,9 @@
+import { MapLibreLayerRenderer } from '@geoblocks/ol-maplibre-layer/lib';
+import { FrameState } from 'ol/Map';
+import { MaplibreLayer } from '../layers';
+export default class MaplibreLayerRenderer extends MapLibreLayerRenderer {
+    ignoreNextRender: boolean;
+    constructor(layer: MaplibreLayer);
+    renderFrame(frameState: FrameState): HTMLElement;
+    setIsReady(): void;
+}

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/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",
+  "version": "3.0.1-beta.2",
   "homepage": "https://mobility-toolbox-js.geops.io/",
   "exports": {
     ".": "./index.js",
@@ -108,6 +108,7 @@
     "esbuild:iife:unminify": "yarn esbuild:iife:base --outfile=build/mbt.js",
     "format": "prettier --write 'src/**/*.js' 'src/**/*.test.js' && eslint src/**/*.js src/**/*.test.js src/**/*.ts --fix && stylelint 'src/**/*.css' 'src/**/*.scss' --fix --allow-empty-input",
     "lint": "eslint src/**/*.js src/**/*.ts && stylelint src/**/*.css src/**/*.scss --allow-empty-input",
+    "prepare": "is-ci || husky",
     "publish:beta": "HUSKY=0 yarn release -- --prerelease beta --skip.changelog  && yarn run build && cd build && HUSKY=0 yarn publish --tag beta && git push origin HEAD && git push --tags ",
     "publish:beta:dryrun": "yarn release -- --prerelease beta --dry-run --skip.changelog",
     "publish:public": "yarn release  && yarn run build && cd build && HUSKY=0 yarn publish && git push origin HEAD && git push --tags ",