@eeacms/volto-arcgis-block 0.1.154 → 0.1.155

package/CHANGELOG.md

@@ -4,6 +4,11 @@ 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.154",
+  "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/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 = {};
@@ -299,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 (
@@ -357,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 {