@eeacms/volto-arcgis-block 0.1.153 → 0.1.155

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.155](https://github.com/eea/volto-arcgis-block/compare/0.1.154...0.1.155) - 7 June 2023
+
+#### :hammer_and_wrench: Others
+
+- CLMS-2107 - Fix PanWidget.jsx [Víctor Miguélez Blanco - [`06f1263`](https://github.com/eea/volto-arcgis-block/commit/06f12630f3e3c54ec37408c28b27f6ed503c9bac)]
+### [0.1.154](https://github.com/eea/volto-arcgis-block/compare/0.1.153...0.1.154) - 5 June 2023
+
 ### [0.1.153](https://github.com/eea/volto-arcgis-block/compare/0.1.152...0.1.153) - 30 May 2023
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/MapViewer/AreaWidget.jsx

@@ -166,6 +166,7 @@ class AreaWidget extends React.Component {
   }
   rectanglehandler() {
     this.clearWidget();
+    window.document.querySelector('.pan-container').style.display = 'flex';
     var fillSymbol = {
       type: 'simple-fill',
       color: [255, 255, 255, 0.5],
@@ -178,6 +179,7 @@ class AreaWidget extends React.Component {
     let extentGraphic = null;
     let origin = null;
     const drawGraphics = this.props.view.on('drag', (e) => {
+      if (this.props.mapViewer.pan_enabled) return;
       e.stopPropagation();
       if (e.action === 'start') {
         if (extentGraphic) this.props.view.graphics.remove(extentGraphic);
@@ -215,6 +217,7 @@ class AreaWidget extends React.Component {
     });
   }
   clearWidget() {
+    window.document.querySelector('.pan-container').style.display = 'none';
     this.props.mapViewer.view.popup.close();
     if (this.state.ShowGraphics) {
       this.state.ShowGraphics.remove();
@@ -443,7 +446,7 @@ class AreaWidget extends React.Component {
             </div>
           </div>
           {!this.props.download && this.state.showInfoPopup && (
-            <div className="map-container">
+            <div className="map-container popup-block">
               <div className="drawRectanglePopup-block">
                 <div className="drawRectanglePopup-content">
                   {this.state.infoPopupType === 'area' && (

package/src/components/MapViewer/LegendWidget.jsx

@@ -23,6 +23,27 @@ class LegendWidget extends React.Component {
       'esri-icon-legend esri-widget--button esri-widget esri-interactive';
   }
 
+  hideNutsLegend() {
+    //debugger;
+    const collection = document.getElementsByClassName('esri-legend__symbol');
+
+    Array.prototype.forEach.call(collection, (element) => {
+      let img = {};
+
+      if (element.hasChildNodes()) img = element.childNodes[0];
+      else img = element;
+
+      //if img is type of svg
+      if (img?.children?.[0]?.localName?.includes('svg') ?? false) {
+        img.closest(
+          '.esri-legend__service.esri-legend__group-layer',
+        ).style.display = 'none';
+        //img.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.firstElementChild.style.display = 'none';
+        //img.style.display = 'none';
+      }
+    });
+  }
+
   brokenLegendImagePatch() {
     const collection = document.getElementsByClassName('esri-legend__symbol');
 
@@ -32,8 +53,8 @@ class LegendWidget extends React.Component {
       if (element.hasChildNodes()) img = element.childNodes[0];
       else img = element;
 
-      // If img src returns a broken link
       if (!(img.complete && img.naturalHeight !== 0)) {
+        // If img src returns a broken link
         if (img?.src?.includes('all_present_lc_a_pol')) {
           //img.src =
           //  'https://clmsdemo.devel6cph.eea.europa.eu/en/products/lclcc-hot-spots/static-legends/dichotomous-reference-land-cover.png/@@images/image-283-df1c7b022cfd505c9bab4b4be08cd4f5.png';
@@ -158,10 +179,12 @@ class LegendWidget extends React.Component {
       }),
       container: document.querySelector('.legend-panel'),
     });
-
     this.props.view.allLayerViews.watch('length', () => {
       setTimeout(() => {
         this.brokenLegendImagePatch();
+        if (this.props.download) {
+          this.hideNutsLegend();
+        }
       }, 1000);
     });
   }

package/src/components/MapViewer/MapViewer.jsx

@@ -17,6 +17,7 @@ import LegendWidget from './LegendWidget';
 import InfoWidget from './InfoWidget';
 import MenuWidget from './MenuWidget';
 import HotspotWidget from './HotspotWidget';
+import PanWidget from './PanWidget';
 //import "isomorphic-fetch";  <-- Necessary to use fetch?
 var Map, MapView, Zoom, intl, Basemap, WebTileLayer, Extent;
 let mapStatus = {};
@@ -262,7 +263,14 @@ class MapViewer extends React.Component {
   }
 
   renderLegend() {
-    if (this.view) return <LegendWidget view={this.view} mapViewer={this} />;
+    if (this.view)
+      return (
+        <LegendWidget
+          view={this.view}
+          mapViewer={this}
+          download={this.props.mapviewer_config.Download}
+        />
+      );
   }
 
   renderMeasurement() {
@@ -292,6 +300,11 @@ class MapViewer extends React.Component {
       return <InfoWidget view={this.view} map={this.map} mapViewer={this} />;
   }
 
+  renderPan() {
+    if (this.view)
+      return <PanWidget view={this.view} map={this.map} mapViewer={this} />;
+  }
+
   renderHotspot() {
     if (this.view)
       return (
@@ -350,6 +363,7 @@ class MapViewer extends React.Component {
             {this.renderMeasurement()}
             {this.renderPrint()}
             {this.renderArea()}
+            {this.renderPan()}
             {this.renderScale()}
             {this.renderInfo()}
             {this.renderHotspot()}

package/src/components/MapViewer/PanWidget.jsx

@@ -0,0 +1,136 @@
+import React, { createRef } from 'react';
+
+class PanWidget extends React.Component {
+  /**
+   * Creator of the Basemap widget class
+   * @param {*} props
+   */
+  constructor(props) {
+    super(props);
+    //We create a reference to a DOM element to be mounted
+    this.container = createRef();
+    //Initially, we set the state of the component to
+    //not be showing the basemap panel
+    this.state = {};
+    this.PIXELS_TO_PAN = 50;
+    this.props.mapViewer.pan_enabled = false;
+  }
+
+  /**
+   * This method is executed after the rener method is executed
+   */
+  async componentDidMount() {
+    this.props.view.ui.add({
+      component: this.container.current,
+      position: 'top-right',
+      index: 0,
+    });
+  }
+
+  togglePan() {
+    this.props.mapViewer.pan_enabled = !this.props.mapViewer.pan_enabled;
+    let pan_toogle_button = window.document.querySelector(
+      '#pan_toogle_button>span',
+    );
+    if (this.props.mapViewer.pan_enabled) {
+      pan_toogle_button.classList.add('active-widget');
+    } else {
+      pan_toogle_button.classList.remove('active-widget');
+    }
+  }
+  async moveUp() {
+    let center = this.props.mapViewer.view.center;
+    let resolution = this.props.mapViewer.view.resolution;
+    center.y += resolution * this.PIXELS_TO_PAN;
+    await this.props.mapViewer.view.goTo({ target: center });
+  }
+  async moveDown() {
+    let center = this.props.mapViewer.view.center;
+    let resolution = this.props.mapViewer.view.resolution;
+    center.y -= resolution * this.PIXELS_TO_PAN;
+    await this.props.mapViewer.view.goTo({ target: center });
+  }
+  async moveLeft() {
+    let center = this.props.mapViewer.view.center;
+    let resolution = this.props.mapViewer.view.resolution;
+    center.x -= resolution * this.PIXELS_TO_PAN;
+    await this.props.mapViewer.view.goTo({ target: center });
+  }
+  async moveRight() {
+    let center = this.props.mapViewer.view.center;
+    let resolution = this.props.mapViewer.view.resolution;
+    center.x += resolution * this.PIXELS_TO_PAN;
+    await this.props.mapViewer.view.goTo({ target: center });
+  }
+
+  /**
+   * This method renders the component
+   * @returns jsx
+   */
+  render() {
+    return (
+      <>
+        <div ref={this.container} className="pan-container">
+          <div>
+            <div
+              id="pan_left_button"
+              className="esri-icon-left-arrow-circled esri-widget--button"
+              role="button"
+              tabIndex="0"
+              onClick={this.moveLeft.bind(this)}
+              onKeyDown={this.moveLeft.bind(this)}
+            ></div>
+          </div>
+          <div>
+            <div
+              id="pan_up_button"
+              className="esri-icon-up-arrow-circled esri-widget--button"
+              role="button"
+              tabIndex="0"
+              onClick={this.moveUp.bind(this)}
+              onKeyDown={this.moveUp.bind(this)}
+            ></div>
+            <div
+              id="pan_toogle_button"
+              className="esri-widget--button esri-widget esri-interactive"
+              role="button"
+              tabIndex="0"
+              aria-label="Toogle pan"
+              tooltip="Toogle pan"
+              direction="left"
+              type="widget"
+              onClick={this.togglePan.bind(this)}
+              onKeyDown={this.togglePan.bind(this)}
+            >
+              <span
+                aria-hidden="true"
+                role="presentation"
+                class="esri-widget--button esri-icon esri-icon-pan"
+              ></span>
+            </div>
+            <div
+              id="pan_down_button"
+              className="esri-icon-down-arrow-circled esri-widget--button"
+              role="button"
+              tabIndex="0"
+              onClick={this.moveDown.bind(this)}
+              onKeyDown={this.moveDown.bind(this)}
+            ></div>
+          </div>
+          <div>
+            <div
+              id="pan_right_button"
+              className="esri-icon-right-arrow-circled esri-widget--button"
+              role="button"
+              tabIndex="0"
+              onClick={this.moveRight.bind(this)}
+              onKeyDown={this.moveRight.bind(this)}
+            ></div>
+          </div>
+        </div>
+      </>
+    );
+  }
+}
+
+export default PanWidget;

package/src/components/MapViewer/css/ArcgisMap.css

@@ -1263,8 +1263,19 @@ input[type='range']::-ms-track {
   font-size: 0.875rem;
 }
 
-.area-container .drawRectanglePopup-content {
-  transform: translate(-34vw, -214%);
+div.map-container.popup-block {
+  position: absolute;
+  top: 0px;
+  left: -34vw;
+  height: auto;
+}
+
+.esri-ui-corner .esri-component.pan-container {
+  display: none;
+  flex-direction: row;
+  align-items: center;
+  margin-left: -72px;
+  box-shadow: none;
 }
 
 .esri-component.drawRectanglePopup-block {