@opengeoweb/webmap-react 9.20.2 → 9.21.0

package/index.esm.js

@@ -2822,12 +2822,15 @@ const checkHoverVertice = (feature, mouseX, mouseY, convertGeoCoordsToScreenCoor
     const featureCoords = feature.geometry.coordinates;
     /* Get all vertexes */
     const XYCoords = convertGeoCoordsToScreenCoords([featureCoords]);
-    if (XYCoords.length > 0 && distance(XYCoords[0], {
+    const calculatedDistance = XYCoords.length > 0 ? distance(XYCoords[0], {
       x: mouseX,
       y: mouseY
-    }) < maxDistance) {
+    }) : null;
+    if (calculatedDistance && calculatedDistance < maxDistance) {
       return {
-        coordinateIndexInFeature: 0
+        coordinateIndexInFeature: 0,
+        distance: calculatedDistance,
+        screenCoords: Object.assign({}, XYCoords[0])
       };
     }
   }
@@ -2840,12 +2843,15 @@ const checkHoverVertice = (feature, mouseX, mouseY, convertGeoCoordsToScreenCoor
       }
       /* Get all vertexes */
       const XYCoords = convertGeoCoordsToScreenCoords([featureCoords]);
-      if (XYCoords.length > 0 && distance(XYCoords[0], {
+      const calculatedDistance = XYCoords.length > 0 && distance(XYCoords[0], {
         x: mouseX,
         y: mouseY
-      }) < maxDistance) {
+      });
+      if (calculatedDistance && calculatedDistance < maxDistance) {
         return {
-          coordinateIndexInFeature: polygonIndex
+          coordinateIndexInFeature: polygonIndex,
+          distance: calculatedDistance,
+          screenCoords: Object.assign({}, XYCoords[0])
         };
       }
     }
@@ -2867,11 +2873,21 @@ const checkHoverVertice = (feature, mouseX, mouseY, convertGeoCoordsToScreenCoor
         if (isPointInPoly) {
           if (ignoreCoordinateIndexInFeature) {
             return {
-              coordinateIndexInFeature: 0
+              coordinateIndexInFeature: 0,
+              distance: 0,
+              screenCoords: {
+                x: mouseX,
+                y: mouseY
+              }
             };
           }
           return {
-            coordinateIndexInFeature: polygonIndex
+            coordinateIndexInFeature: polygonIndex,
+            distance: 0,
+            screenCoords: {
+              x: mouseX,
+              y: mouseY
+            }
           };
         }
       } catch (e) {
@@ -2894,7 +2910,12 @@ const checkHoverVertice = (feature, mouseX, mouseY, convertGeoCoordsToScreenCoor
         const isPointInPoly = turf.booleanPointInPolygon(turf.point(point), turf.polygon(poly));
         if (isPointInPoly) {
           return {
-            coordinateIndexInFeature: polygonIndex
+            coordinateIndexInFeature: polygonIndex,
+            distance: 0,
+            screenCoords: {
+              x: mouseX,
+              y: mouseY
+            }
           };
         }
       } catch (e) {
@@ -2914,7 +2935,9 @@ const checkHoverVertice = (feature, mouseX, mouseY, convertGeoCoordsToScreenCoor
         y: mouseY
       }) < maxDistance) {
         return {
-          coordinateIndexInFeature: j
+          coordinateIndexInFeature: j,
+          distance: 0,
+          screenCoords: Object.assign({}, coord)
         };
       }
     }
@@ -2922,18 +2945,30 @@ const checkHoverVertice = (feature, mouseX, mouseY, convertGeoCoordsToScreenCoor
   return null;
 };
 const checkHoverFeatures = (geojson, mouseX, mouseY, convertGeoCoordsToScreenCoords, ignoreCoordinateIndexInFeature) => {
+  const result = [];
   for (let j = 0; j < geojson.features.length; j += 1) {
     const feature = geojson.features[j];
     const hoverResult = checkHoverVertice(feature, mouseX, mouseY, convertGeoCoordsToScreenCoords, ignoreCoordinateIndexInFeature);
-    if (hoverResult != null) {
-      return {
+    if (hoverResult != null && hoverResult.distance != null) {
+      result.push({
         coordinateIndexInFeature: hoverResult.coordinateIndexInFeature,
         featureIndex: j,
-        feature
-      };
+        feature,
+        distance: hoverResult.distance,
+        screenCoords: Object.assign({}, hoverResult.screenCoords)
+      });
     }
   }
-  return null;
+  if (result.length === 0) {
+    return null;
+  }
+  /* Sort the list, closest distance on top */
+  result.sort((a, b) => {
+    const distanceA = a ? a.distance : 0;
+    const distanceB = b ? b.distance : 0;
+    return distanceA - distanceB;
+  }); // b - a for reverse sort
+  return result[0];
 };
 let generatedDrawFunctionIds = 0;
 const generateDrawFunctionId = () => {
@@ -3454,7 +3489,8 @@ class MapDraw extends React.PureComponent {
             mouseX,
             mouseY,
             isInEditMode,
-            feature: result.feature
+            feature: result.feature,
+            screenCoords: result.screenCoords
           };
           onHoverFeature(this.featureEvent);
         } else {
@@ -3775,10 +3811,22 @@ class MapDraw extends React.PureComponent {
         const feature = this.getSelectedFeature();
         if (feature.geometry.type === 'Polygon') {
           const featureCoords = feature.geometry.coordinates[this.snappedPolygonIndex];
-          featureCoords.push([this.mouseGeoCoord.x, this.mouseGeoCoord.y]);
-          this.featureHasChanged('vertex added to polygon');
-          this.mouseIsOverVertexNr = featureCoords.length - 1;
-          this.mouseMove(event);
+          // "featureCoords" is our polygon represented as a list of coordinates. The last element in the list is the ghost node following our cursor.
+          // We therefore extract the last two nodes, which will tell us the distance between the last placed node and the ghost node
+          const [coordA, coordB] = featureCoords.slice(-2);
+          const coordDistance = distance({
+            x: coordA[0],
+            y: coordA[1]
+          }, {
+            x: coordB[0],
+            y: coordB[1]
+          });
+          if (coordDistance > 0.005) {
+            featureCoords.push([this.mouseGeoCoord.x, this.mouseGeoCoord.y]);
+            this.featureHasChanged('vertex added to polygon');
+            this.mouseIsOverVertexNr = featureCoords.length - 1;
+            this.mouseMove(event);
+          }
         }
         return false;
       }
@@ -3938,7 +3986,8 @@ class MapDraw extends React.PureComponent {
           mouseX,
           mouseY,
           isInEditMode,
-          feature: result.feature
+          feature: result.feature,
+          screenCoords: Object.assign({}, result.screenCoords)
         };
         onClickFeature(featureEvent);
       } else {
@@ -4237,7 +4286,7 @@ class MapDraw extends React.PureComponent {
      just before viewer will flip the back canvas buffer to the front.
      You are free to draw anything you like on the canvas.
     */
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c;
     const {
       selectedFeatureIndex,
       isInEditMode,
@@ -4249,9 +4298,8 @@ class MapDraw extends React.PureComponent {
     this.textPositions = [];
     this.mouseOverPolygonCoordinates = [];
     this.mouseOverPolygonFeatureIndex = -1;
-    /* Current selected feature from GeoJSON */
-    for (let featureIndex = 0; featureIndex < this.geojson.features.length; featureIndex += 1) {
-      const feature = this.geojson.features[featureIndex];
+    const drawFeature = (feature, featureIndex) => {
+      var _a, _b, _c;
       const featureType = feature.geometry.type;
       const totalmiddle = {
         x: 0,
@@ -4263,7 +4311,7 @@ class MapDraw extends React.PureComponent {
         const XYCoords = getPixelCoordFromGeoCoord([featureCoords], mapId);
         if (XYCoords.length === 0) {
           // eslint-disable-next-line no-continue
-          continue;
+          return;
         }
         for (let j = 0; j < XYCoords.length; j += 1) {
           this.drawPoint(ctx, XYCoords[j], this.mouseIsOverVertexNr === j && selectedFeatureIndex === featureIndex, false, isInEditMode && selectedFeatureIndex === featureIndex, feature, featureIndex);
@@ -4273,8 +4321,7 @@ class MapDraw extends React.PureComponent {
         const featureCoords = feature.geometry.coordinates;
         const XYCoords = getPixelCoordFromGeoCoord(featureCoords, mapId);
         if (XYCoords.length === 0) {
-          // eslint-disable-next-line no-continue
-          continue;
+          return;
         }
         for (let j = 0; j < XYCoords.length; j += 1) {
           this.drawPoint(ctx, XYCoords[j], this.mouseIsOverVertexNr === j && selectedFeatureIndex === featureIndex, false, isInEditMode && selectedFeatureIndex === featureIndex, feature, featureIndex);
@@ -4312,7 +4359,7 @@ class MapDraw extends React.PureComponent {
         if (totalmiddle.nr > 0) {
           const mx = totalmiddle.x / totalmiddle.nr;
           const my = totalmiddle.y / totalmiddle.nr;
-          if ((_c = feature.properties) === null || _c === void 0 ? void 0 : _c.text) {
+          if ((_a = feature.properties) === null || _a === void 0 ? void 0 : _a.text) {
             this.textPositions.push({
               x: mx,
               y: my,
@@ -4333,7 +4380,7 @@ class MapDraw extends React.PureComponent {
             continue;
           }
           const middle = this.drawPolygon(ctx, XYCoords, featureIndex, polygonIndex);
-          if (middle && ((_d = feature.properties) === null || _d === void 0 ? void 0 : _d.text)) {
+          if (middle && ((_b = feature.properties) === null || _b === void 0 ? void 0 : _b.text)) {
             this.textPositions.push({
               x: middle.x,
               y: middle.y,
@@ -4359,17 +4406,15 @@ class MapDraw extends React.PureComponent {
         /* Loop through all line pints of the same feature */
         const featureCoords = feature.geometry.coordinates;
         if (!featureCoords || !featureCoords.length) {
-          // eslint-disable-next-line no-continue
-          continue;
+          return;
         }
         const XYCoords = getPixelCoordFromGeoCoord(featureCoords, mapId);
         /* Only draw if there is stuff to show */
         if (XYCoords.length === 0) {
-          // eslint-disable-next-line no-continue
-          continue;
+          return;
         }
         const middle = this.drawLine(ctx, XYCoords, featureIndex, 0);
-        if (middle && ((_e = feature.properties) === null || _e === void 0 ? void 0 : _e.text)) {
+        if (middle && ((_c = feature.properties) === null || _c === void 0 ? void 0 : _c.text)) {
           this.textPositions.push({
             x: middle.x,
             y: middle.y,
@@ -4383,7 +4428,17 @@ class MapDraw extends React.PureComponent {
           }
         }
       }
+    };
+    /* Draw all features */
+    for (let featureIndex = 0; featureIndex < this.geojson.features.length; featureIndex += 1) {
+      const feature = this.geojson.features[featureIndex];
+      /* Do not draw selected feature here, should be done last */
+      if (featureIndex !== selectedFeatureIndex) {
+        drawFeature(feature, featureIndex);
+      }
     }
+    /* Draw selected feature to display it on top */
+    drawFeature(this.getSelectedFeature(), selectedFeatureIndex);
     /* Higlight polygon with mousehover */
     if (isInEditMode === true && this.mouseOverPolygonFeatureIndex === selectedFeatureIndex && this.mouseIsOverVertexNr === VERTEX.NONE && this.snappedPolygonIndex === SNAPPEDFEATURE.NONE && this.selectedEdge === EDGE.NONE || this.mouseIsOverVertexNr === VERTEX.MIDDLE_POINT_OF_FEATURE) {
       const feature = this.getSelectedFeature();
@@ -4417,6 +4472,29 @@ class MapDraw extends React.PureComponent {
       ctx.font = '12px Arial';
       ctx.fillText(text, x, y);
     }
+    /* Draw hovered feature */
+    if (this.featureEvent) {
+      const {
+        feature,
+        featureIndex,
+        screenCoords
+      } = this.featureEvent;
+      const drawFunctionId = (_c = feature === null || feature === void 0 ? void 0 : feature.properties) === null || _c === void 0 ? void 0 : _c.hoverDrawFunctionId;
+      const drawFunction = getDrawFunctionFromStore(drawFunctionId);
+      if (drawFunction) {
+        drawFunction({
+          context: ctx,
+          featureIndex,
+          isInEditMode,
+          feature,
+          isHovered: true,
+          coord: screenCoords,
+          selected: featureIndex === selectedFeatureIndex,
+          mouseX: 0,
+          mouseY: 0
+        });
+      }
+    }
   }
   /* Checks if mouse is in proximity of given coordinate */
   checkDist(coord, polygonIndex, mouseX, mouseY) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/webmap-react",
-  "version": "9.20.2",
+  "version": "9.21.0",
   "description": "GeoWeb react wrapper for webmap",
   "license": "Apache-2.0",
   "repository": {
@@ -19,8 +19,8 @@
     "immer": "^10.0.3",
     "react-resize-detector": "^9.1.0",
     "throttle-debounce": "^5.0.0",
-    "i18next": "^23.7.11",
-    "react-i18next": "^13.5.0"
+    "i18next": "^23.11.5",
+    "react-i18next": "^14.1.2"
   },
   "peerDependencies": {
     "react": "18"

package/src/lib/components/MapDraw/MapDraw.d.ts

@@ -16,6 +16,10 @@ interface InputEvent {
 export interface FeatureEvent {
     coordinateIndexInFeature: number;
     featureIndex: number;
+    screenCoords: {
+        x: number;
+        y: number;
+    };
     mouseX: number;
     mouseY: number;
     isInEditMode: boolean;

package/src/lib/components/MapDraw/mapDrawUtils.d.ts

@@ -5,6 +5,11 @@ export type CheckHoverFeaturesResult = {
     coordinateIndexInFeature: number;
     featureIndex: number;
     feature: GeoJsonFeature;
+    distance: number;
+    screenCoords: {
+        x: number;
+        y: number;
+    };
 } | null;
 export type ProjectorCache = Record<string, InterfaceProjection>;
 export declare const Proj4js: typeof proj4;