@eeacms/volto-arcgis-block 0.1.376 → 0.1.378

package/CHANGELOG.md

@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [0.1.378](https://github.com/eea/volto-arcgis-block/compare/0.1.377...0.1.378) - 11 August 2025
+
+### [0.1.377](https://github.com/eea/volto-arcgis-block/compare/0.1.376...0.1.377) - 30 July 2025
+
+#### :hammer_and_wrench: Others
+
+- Merge pull request #995 from eea/develop [Unai Bolivar - [`194ef38`](https://github.com/eea/volto-arcgis-block/commit/194ef385764f9d153fb46ac121bdc0f55d75ce20)]
 ### [0.1.376](https://github.com/eea/volto-arcgis-block/compare/0.1.375...0.1.376) - 17 July 2025
 
 ### [0.1.375](https://github.com/eea/volto-arcgis-block/compare/0.1.374...0.1.375) - 14 July 2025

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.376",
+  "version": "0.1.378",
   "description": "volto-arcgis-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: CodeSyntax",

package/src/components/MapViewer/AreaWidget.jsx

@@ -34,6 +34,12 @@ class AreaWidget extends React.Component {
       showMapMenu: false,
       showInfoPopup: this.props.download ? true : false,
       infoPopupType: 'area',
+      coordinates: {
+        north: '',
+        south: '',
+        east: '',
+        west: '',
+      },
     };
     this.menuClass =
       'esri-icon-cursor-marquee esri-widget--button esri-widget esri-interactive';
@@ -156,6 +162,11 @@ class AreaWidget extends React.Component {
       this.props.uploadFileHandler(true);
       this.clearWidget();
       document.querySelector('.coordinateWindow').style.display = 'none';
+      document.querySelector('.coordinateContainer').style.display = 'block';
+      document.querySelector('.coordinateWindow').style.height = '13rem';
+      document
+        .querySelector('.closeCoordinates')
+        .classList.replace('esri-icon-up-arrow', 'esri-icon-close');
       this.removeFileUploadedLayer();
       this.container.current.querySelector(
         '#download_area_select_nuts0',
@@ -235,18 +246,19 @@ class AreaWidget extends React.Component {
       document.querySelector('.coordinateWindow').style.display = 'block';
     } else {
       document.querySelector('.coordinateWindow').style.display = 'none';
-      if (document.getElementById('menu-north')) {
-        document.getElementById('menu-north').value = null;
-      }
-      if (document.getElementById('menu-south')) {
-        document.getElementById('menu-south').value = null;
-      }
-      if (document.getElementById('menu-east')) {
-        document.getElementById('menu-east').value = null;
-      }
-      if (document.getElementById('menu-west')) {
-        document.getElementById('menu-west').value = null;
-      }
+      document.querySelector('.coordinateContainer').style.display = 'block';
+      document.querySelector('.coordinateWindow').style.height = '13rem';
+      document
+        .querySelector('.closeCoordinates')
+        .classList.replace('esri-icon-up-arrow', 'esri-icon-close');
+      this.setState({
+        coordinates: {
+          north: '',
+          south: '',
+          east: '',
+          west: '',
+        },
+      });
     }
   }
   nuts0handler(e) {
@@ -1009,80 +1021,109 @@ class AreaWidget extends React.Component {
   }
   addCoordinates() {
     this.clearWidget();
-    let pointNorth = document.getElementById('menu-north');
-    if (pointNorth.value > 90) {
-      pointNorth.value = 90;
-    } else if (pointNorth.value < -90) {
-      pointNorth.value = -90;
+    let valid = true;
+    let pointNorth = this.state.coordinates.north;
+    if (
+      pointNorth > 90 ||
+      pointNorth < -90 ||
+      pointNorth === null ||
+      pointNorth === ''
+    ) {
+      valid = false;
     }
-    let pointSouth = document.getElementById('menu-south');
-    if (pointSouth.value > 90) {
-      pointSouth.value = 90;
-    } else if (pointSouth.value < -90) {
-      pointSouth.value = -90;
+    let pointSouth = this.state.coordinates.south;
+    if (
+      pointSouth > 90 ||
+      pointSouth < -90 ||
+      pointSouth === null ||
+      pointSouth === ''
+    ) {
+      valid = false;
     }
-    let pointEast = document.getElementById('menu-east');
-    if (pointEast.value > 180) {
-      pointEast.value = 180;
-    } else if (pointEast.value < -180) {
-      pointEast.value = -180;
+    let pointEast = this.state.coordinates.east;
+    if (
+      pointEast > 180 ||
+      pointEast < -180 ||
+      pointEast === null ||
+      pointEast === ''
+    ) {
+      valid = false;
     }
-    let pointWest = document.getElementById('menu-west');
-    if (pointWest.value > 180) {
-      pointWest.value = 180;
-    } else if (pointWest.value < -180) {
-      pointWest.value = -180;
+    let pointWest = this.state.coordinates.west;
+    if (
+      pointWest > 180 ||
+      pointWest < -180 ||
+      pointWest === null ||
+      pointWest === ''
+    ) {
+      valid = false;
     }
-    let pointNW = [pointNorth.value, pointWest.value];
-    let pointSE = [pointSouth.value, pointEast.value];
-    var fillSymbol = {
-      type: 'simple-fill',
-      color: [255, 255, 255, 0.5],
-      outline: {
-        color: [0, 0, 0],
-        width: 1,
-      },
-    };
-    let extentGraphic = new Graphic({
-      geometry: new Extent({
-        xmin: Math.min(pointNW[1], pointSE[1]),
-        xmax: Math.max(pointNW[1], pointSE[1]),
-        ymin: Math.min(pointNW[0], pointSE[0]),
-        ymax: Math.max(pointNW[0], pointSE[0]),
-        spatialReference: { wkid: 4326 },
-      }),
-      symbol: fillSymbol,
-    });
-    let outSpatialReference = new SpatialReference({
-      wkid: 102100,
-    });
-    let graphicProjection = projection.project(
-      extentGraphic.geometry,
-      outSpatialReference,
-    );
-    if (extentGraphic && this.checkExtent(graphicProjection)) {
-      this.setState({
-        showInfoPopup: true,
-        infoPopupType: 'fullDataset',
+    if (valid) {
+      let pointNW = [pointNorth, pointWest];
+      let pointSE = [pointSouth, pointEast];
+      var fillSymbol = {
+        type: 'simple-fill',
+        color: [255, 255, 255, 0.5],
+        outline: {
+          color: [0, 0, 0],
+          width: 1,
+        },
+      };
+      let extentGraphic = new Graphic({
+        geometry: new Extent({
+          xmin: Math.min(pointNW[1], pointSE[1]),
+          xmax: Math.max(pointNW[1], pointSE[1]),
+          ymin: Math.min(pointNW[0], pointSE[0]),
+          ymax: Math.max(pointNW[0], pointSE[0]),
+          spatialReference: { wkid: 4326 },
+        }),
+        symbol: fillSymbol,
       });
-      this.props.uploadFileHandler(true);
+      let outSpatialReference = new SpatialReference({
+        wkid: 102100,
+      });
+      let graphicProjection = projection.project(
+        extentGraphic.geometry,
+        outSpatialReference,
+      );
+      if (this.checkExtent(graphicProjection)) {
+        this.setState({
+          showInfoPopup: true,
+          infoPopupType: 'fullDataset',
+        });
+      } else {
+        this.setState({
+          showInfoPopup: true,
+          infoPopupType: 'download',
+        });
+        this.closeCoordinates();
+      }
+      this.props.updateArea({
+        origin: {
+          x: extentGraphic.geometry.xmin,
+          y: extentGraphic.geometry.ymax,
+        },
+        end: { x: extentGraphic.geometry.xmax, y: extentGraphic.geometry.ymin },
+      });
+      this.props.view.graphics.add(extentGraphic);
     } else {
       this.setState({
         showInfoPopup: true,
-        infoPopupType: 'download',
+        infoPopupType: 'invalidCoordinates',
       });
-      this.props.uploadFileHandler(true);
-      this.closeCoordinates();
     }
-    this.props.updateArea({
-      origin: {
-        x: extentGraphic.geometry.xmin,
-        y: extentGraphic.geometry.ymax,
-      },
-      end: { x: extentGraphic.geometry.xmax, y: extentGraphic.geometry.ymin },
-    });
-    this.props.view.graphics.add(extentGraphic);
   }
+  handleCoordinateChange = (e) => {
+    const { id, value } = e.target;
+    // id will be "menu-north", "menu-south", "menu-east", or "menu-west"
+    const key = id.replace('menu-', ''); // gives you 'north', 'south', etc.
+    this.setState((prevState) => ({
+      coordinates: {
+        ...prevState.coordinates,
+        [key]: value,
+      },
+    }));
+  };
   openCoordinates(event) {
     this.clearWidget();
     this.nutsRadioButton(event.target.value);
@@ -1761,6 +1802,16 @@ class AreaWidget extends React.Component {
                       </div>
                     </>
                   )}
+                  {this.state.infoPopupType === 'invalidCoordinates' && (
+                    <>
+                      <span className="drawRectanglePopup-icon">
+                        <FontAwesomeIcon icon={['fas', 'info-circle']} />
+                      </span>
+                      <div className="drawRectanglePopup-text">
+                        Invalid coordinates.
+                      </div>
+                    </>
+                  )}
                 </div>
               </div>
             </div>
@@ -1789,6 +1840,8 @@ class AreaWidget extends React.Component {
                   max="90"
                   placeholder="00.000000"
                   className="coordinateInput"
+                  value={this.state.coordinates.north}
+                  onChange={this.handleCoordinateChange}
                 />
               </div>
               <div>
@@ -1800,6 +1853,8 @@ class AreaWidget extends React.Component {
                   max="180"
                   placeholder="00.000000"
                   className="coordinateInput"
+                  value={this.state.coordinates.west}
+                  onChange={this.handleCoordinateChange}
                 />
               </div>
             </div>
@@ -1814,6 +1869,8 @@ class AreaWidget extends React.Component {
                   max="90"
                   placeholder="00.000000"
                   className="coordinateInput"
+                  value={this.state.coordinates.south}
+                  onChange={this.handleCoordinateChange}
                 />
               </div>
               <div>
@@ -1825,6 +1882,8 @@ class AreaWidget extends React.Component {
                   max="180"
                   placeholder="00.000000"
                   className="coordinateInput"
+                  value={this.state.coordinates.east}
+                  onChange={this.handleCoordinateChange}
                 />
               </div>
             </div>

package/src/components/MapViewer/MenuWidget.jsx

@@ -1093,6 +1093,7 @@ class MenuWidget extends React.Component {
               let button = familyDropdown.querySelector(
                 '.ccl-expandable__button',
               );
+              scrollPosition = familyDropdown.offsetTop;
               if (button) {
                 button.setAttribute('aria-expanded', 'true');
               }