chore: fix cursor handling

geops · Jan 15, 2025 · 35d5e91 · 35d5e91
1 parent 14193c4
commit 35d5e91
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 55 deletions.
diff --git a/src/components/Map/Map.js b/src/components/Map/Map.js
@@ -176,34 +176,36 @@ class Map extends PureComponent {
     }
 
     const queryableLayers = getQueryableLayers("pointermove", layers, map);
-    getFeatureInfoAtCoordinate(coordinate, queryableLayers).then((newInfos) => {
-      // If the featureInfos contains one from a priority layer.
-      // We display only these featureInfos.
-      // See DirektVerbindungen layers for an example.
-      const priorityLayersInfos = newInfos.filter(({ layer }) =>
-        layer.get("priorityFeatureInfo"),
-      );
-      const hasPriorityLayer = !!priorityLayersInfos.length;
-
-      const otherLayersInfos = newInfos.filter(
-        ({ layer }) => !layer.get("priorityFeatureInfo"),
-      );
-
-      const infos = hasPriorityLayer ? priorityLayersInfos : otherLayersInfos;
-
-      // Show the hover style if the layer has the method.
-      infos.forEach(({ layer, features }) => {
-        if (!layer.get("priorityFeatureInfo")) {
-          layer?.hover?.(features);
-        }
-      });
-
-      map.getTarget().style.cursor = infos.find(
-        ({ features }) => !!features.length,
-      )
-        ? "pointer"
-        : "auto";
-    });
+    getFeatureInfoAtCoordinate(coordinate, queryableLayers, "pointermove").then(
+      (newInfos) => {
+        // If the featureInfos contains one from a priority layer.
+        // We display only these featureInfos.
+        // See DirektVerbindungen layers for an example.
+        const priorityLayersInfos = newInfos.filter(({ layer }) =>
+          layer.get("priorityFeatureInfo"),
+        );
+        const hasPriorityLayer = !!priorityLayersInfos.length;
+
+        const otherLayersInfos = newInfos.filter(
+          ({ layer }) => !layer.get("priorityFeatureInfo"),
+        );
+
+        const infos = hasPriorityLayer ? priorityLayersInfos : otherLayersInfos;
+
+        // Show the hover style if the layer has the method.
+        infos.forEach(({ layer, features }) => {
+          if (!layer.get("priorityFeatureInfo")) {
+            layer?.hover?.(features);
+          }
+        });
+
+        map.getTarget().style.cursor = infos.find(
+          ({ features }) => !!features.length,
+        )
+          ? "pointer"
+          : "auto";
+      },
+    );
   }
 
   onSingleClick(evt) {
@@ -226,7 +228,7 @@ class Map extends PureComponent {
     }
 
     const queryableLayers = getQueryableLayers("singleclick", layers, map);
-    getFeatureInfoAtCoordinate(coordinate, queryableLayers).then(
+    getFeatureInfoAtCoordinate(coordinate, queryableLayers, "singleclick").then(
       (featureInfos) => {
         // If the featureInfos contains one from a priority layer.
         // We display only these featureInfos.

diff --git a/src/layers/KilometrageLayer/KilometrageLayer.js b/src/layers/KilometrageLayer/KilometrageLayer.js
@@ -4,7 +4,7 @@ import { Feature } from "ol";
 
 /**
  * Layer for kilometrage popup
- * Extends {@link https://mobility-toolbox-js.netlify.app/api/class/src/ol/layers/Layer%20js~Layer%20html}
+ * Extends {@link https://mobility-toolbox-js.geops.io/doc/class/build/ol/layers/MapboxStyleLayer%20js~MapboxStyleLayer%20html-offset-anchor}
  * @private
  * @class
  * @param {Object} [options] Layer options.
@@ -26,9 +26,39 @@ class KilometrageLayer extends MapboxStyleLayer {
         ...(options || {}).properties,
       },
     });
+    this.abortController = new AbortController();
   }
 
-  getFeatureInfoAtCoordinate(coordinate) {
+  fetchKilometrage(coordinate, lines, generalization) {
+    this.abortController?.abort();
+    this.abortController = new AbortController();
+    return fetch(
+      `${this.searchUrl}/search/measure?coords=${coordinate}&generalization_level=${generalization}&lines=${lines.toString()}`,
+      { signal: this.abortController.signal },
+    )
+      .then((data) => data.json())
+      .then((data) => {
+        if (data.error || data.detail || !data.length) {
+          return { features: [], layer: this, coordinate };
+        }
+        return {
+          features: [
+            new Feature({
+              lines: data,
+            }),
+          ],
+          layer: this,
+          coordinate,
+        };
+      })
+      .catch((error) => {
+        // eslint-disable-next-line no-console
+        console.error("Could not fetch kilometrage data", error);
+        return { features: [], layer: this, coordinate };
+      });
+  }
+
+  getFeatureInfoAtCoordinate(coordinate, eventType) {
     return super.getFeatureInfoAtCoordinate(coordinate).then((info) => {
       const { features } = info;
 
@@ -41,29 +71,14 @@ class KilometrageLayer extends MapboxStyleLayer {
       const generalization = features
         .find((feat) => feat.get("line_number"))
         ?.get("generalization_level");
-      return fetch(
-        `${this.searchUrl}/search/measure?coords=${coordinate}&generalization_level=${generalization}&lines=${lines.toString()}`,
-      )
-        .then((data) => data.json())
-        .then((data) => {
-          if (data.error || data.detail || !data.length) {
-            return { features: [], layer: this, coordinate };
-          }
-          return {
-            features: [
-              new Feature({
-                lines: data,
-              }),
-            ],
+
+      return eventType === "singleclick" && lines.length
+        ? this.fetchKilometrage(coordinate, lines, generalization)
+        : {
+            features: lines.length ? [new Feature()] : [], // Return empty feature for cursor style
             layer: this,
             coordinate,
           };
-        })
-        .catch((error) => {
-          // eslint-disable-next-line no-console
-          console.error("Could not fetch kilometrage data", error);
-          return { features: [], layer: this, coordinate };
-        });
     });
   }
 

diff --git a/src/utils/getFeatureInfoAtCoordinate.js b/src/utils/getFeatureInfoAtCoordinate.js
@@ -1,8 +1,10 @@
-const getFeatureInfoAtCoordinate = (coordinate, layers) => {
+const getFeatureInfoAtCoordinate = (coordinate, layers, eventType) => {
   const promises = layers.map((layer) => {
-    return layer.getFeatureInfoAtCoordinate(coordinate).then((featureInfo) => {
-      return featureInfo;
-    });
+    return layer
+      .getFeatureInfoAtCoordinate(coordinate, eventType)
+      .then((featureInfo) => {
+        return featureInfo;
+      });
   });
   return Promise.all(promises);
 };