fix: manage rendercomplete event for MaplibreLayer

geops · Dec 11, 2024 · 618413c · 618413c
1 parent ad802d2
commit 618413c
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 156 deletions.
diff --git a/src/ol/layers/MaplibreLayer.ts b/src/ol/layers/MaplibreLayer.ts
@@ -23,8 +23,8 @@ export type MaplibreLayerOptions = {
   queryRenderedFeaturesOptions?: QueryRenderedFeaturesOptions | undefined;
   style?: maplibregl.StyleSpecification | null | string;
   url?: string;
-} & MapLibreLayerOptions &
-  MobilityLayerOptions;
+} & MobilityLayerOptions &
+  Omit<MapLibreLayerOptions, 'mapLibreOptions'>;
 
 const buildStyleUrl = (
   url: string,
@@ -221,6 +221,10 @@ class MaplibreLayer extends MapLibreLayer {
     });
   }
 
+  override createRenderer() {
+    return new MapLibreLayerRenderer(this);
+  }
+
   detachFromMap() {
     unByKey(this.olEventsKeys);
   }
@@ -259,7 +263,6 @@ class MaplibreLayer extends MapLibreLayer {
       super.setMapInternal(map);
     }
   }
-
   updateMaplibreMap() {
     try {
       this.mapLibreMap?.setStyle(this.getStyle(), { diff: false });

diff --git a/src/ol/renderers/MaplibreLayerRenderer.ts b/src/ol/renderers/MaplibreLayerRenderer.ts
@@ -1,160 +1,51 @@
-// /* 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';
+import { Layer } from 'ol/layer';
+import { FrameState } from 'ol/Map';
 
-// /**
-//  * @private
-//  */
-// const formats: {
-//   [key: string]: GeoJSON;
-// } = {
-//   'EPSG:3857': new GeoJSON({
-//     featureProjection: 'EPSG:3857',
-//   }),
-// };
+import { MaplibreLayer } from '../layers';
 
 // /**
-//  * 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 {
+  ignoreNextRender = false;
+
+  constructor(layer: MaplibreLayer) {
+    super(layer);
+    this.setIsReady = this.setIsReady.bind(this);
+    this.ignoreNextRender = false;
+  }
+
+  renderFrame(frameState: FrameState): HTMLElement {
+    this.getLayer()?.mapLibreMap?.off('idle', this.setIsReady);
+
+    const mapLibreMap = this.getLayer()?.mapLibreMap;
+    mapLibreMap?.off('idle', this.setIsReady);
+
+    if (this.ignoreNextRender) {
+      this.ignoreNextRender = false;
+      const container = 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?.once('idle', this.setIsReady);
+
+    return container;
+  }
+
+  setIsReady() {
+    if (!this.ready) {
+      this.ready = true;
+      this.ignoreNextRender = true;
+      this.getLayer().changed();
+    }
+  }
+}