@eeacms/volto-arcgis-block 0.1.138 → 0.1.139

package/CHANGELOG.md

@@ -4,6 +4,19 @@ 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.139](https://github.com/eea/volto-arcgis-block/compare/0.1.138...0.1.139) - 9 May 2023
+
+#### :hammer_and_wrench: Others
+
+- CLMS-1953 (fix): Ran linting scripts [ujbolivar - [`8bc10f2`](https://github.com/eea/volto-arcgis-block/commit/8bc10f2f50b42037dadd4af9e53b055f0f3ad333)]
+- CLMS-1953 (fix): Fixed broken legend images [ujbolivar - [`f794725`](https://github.com/eea/volto-arcgis-block/commit/f7947251ddfe5841074e4ef525317b86c6d4c98c)]
+- CLMS-1984 (fix): getting closer to a solution [ujbolivar - [`c994a5a`](https://github.com/eea/volto-arcgis-block/commit/c994a5ac475edaf23e05e19370f9fd3226f99b7c)]
+- latest update [ujbolivar - [`d758119`](https://github.com/eea/volto-arcgis-block/commit/d758119e12f13854b0969f2feab35cdebb831e76)]
+- latest update still working on it [ujbolivar - [`045321a`](https://github.com/eea/volto-arcgis-block/commit/045321a1bea32934561658ab109f3b391215c3d8)]
+- clms-2051 (fix): still not completed. saving for git pull [ujbolivar - [`c29d59e`](https://github.com/eea/volto-arcgis-block/commit/c29d59e921ffe5999cfd5321c465b6258b2680c3)]
+- CLMS-2051 (fix): Monitoring the creation and destruction of layers in the view now possible. Not completed [ujbolivar - [`2bc2a2e`](https://github.com/eea/volto-arcgis-block/commit/2bc2a2e77d5e6ce1be49c5a9d5d0fccb1adfbb3f)]
+- CLMS-1953-CLMS-2051 (bug): final update for the day [ujbolivar - [`0292d4d`](https://github.com/eea/volto-arcgis-block/commit/0292d4d9237074457a00ca153fa873ca6549f666)]
+- CLMS-1953-CLMS-2051 (FIX): Got the legend to update when a new layer is checked. However it is still missing one final update. Not completed. I can monitor the change in opacity slider but not getting through to setting the opacity style of the legend correctly yet. Not completed [ujbolivar - [`f70a51b`](https://github.com/eea/volto-arcgis-block/commit/f70a51bd949f9efa169c46c60f5030980d03f31d)]
 ### [0.1.138](https://github.com/eea/volto-arcgis-block/compare/0.1.137...0.1.138) - 9 May 2023
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/MapViewer/LegendWidget.jsx

@@ -2,7 +2,7 @@ import React, { createRef } from 'react';
 //import "@arcgis/core/assets/esri/css/main.css";
 //import "./css/ArcgisMap.css";
 import { loadModules } from 'esri-loader';
-var Legend;
+var Legend, LegendViewModel;
 
 class LegendWidget extends React.Component {
   /**
@@ -15,14 +15,41 @@ class LegendWidget extends React.Component {
     this.container = createRef();
     //Initially, we set the state of the component to
     //not be showing the basemap panel
-    this.state = { showMapMenu: false };
+    this.state = {
+      showMapMenu: false,
+    };
+    this.mapViewer = this.props.mapViewer;
     this.menuClass =
       'esri-icon-legend esri-widget--button esri-widget esri-interactive';
   }
 
+  brokenLegendImagePatch() {
+    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 src returns a broken link
+      if (!(img.complete && img.naturalHeight !== 0)) {
+        img.style.display = 'none';
+
+        let span = document.createElement('span');
+        span.innerHTML = 'No legend available';
+        element.parentNode.appendChild(span);
+      }
+    });
+  }
+
   loader() {
-    return loadModules(['esri/widgets/Legend']).then(([_Legend]) => {
+    return loadModules([
+      'esri/widgets/Legend',
+      'esri/widgets/Legend/LegendViewModel',
+    ]).then(([_Legend, _LegendViewModel]) => {
       Legend = _Legend;
+      LegendViewModel = _LegendViewModel;
     });
   }
 
@@ -60,6 +87,7 @@ class LegendWidget extends React.Component {
       this.setState({ showMapMenu: true });
     }
   }
+
   /**
    * This method is executed after the rener method is executed
    */
@@ -68,9 +96,19 @@ class LegendWidget extends React.Component {
     this.props.view.ui.add(this.container.current, 'top-right');
     this.LegendWidget = new Legend({
       view: this.props.view,
+      viewModel: new LegendViewModel({
+        view: this.props.view,
+      }),
       container: document.querySelector('.legend-panel'),
     });
+
+    this.props.view.allLayerViews.watch('length', () => {
+      setTimeout(() => {
+        this.brokenLegendImagePatch();
+      }, 1000);
+    });
   }
+
   /**
    * This method renders the component
    * @returns jsx

package/src/components/MapViewer/MapViewer.jsx

@@ -182,7 +182,6 @@ class MapViewer extends React.Component {
       this.view.watch('zoom', (newValue, oldValue, property, object) => {
         this.setZoomState(newValue);
       });
-
       this.view.popup.autoOpenEnabled = false;
       // After launching the MapViewerConfig action
       // we will have stored the json response here:
@@ -204,8 +203,6 @@ class MapViewer extends React.Component {
       this.view.destroy();
       delete this.view;
     }
-    //mapStatus = {};
-    //sessionStorage.clear();
   }
 
   setWidgetState() {}

package/src/components/MapViewer/MenuWidget.jsx

@@ -648,6 +648,25 @@ class MenuWidget extends React.Component {
     }, 1000);
   }
 
+  setLegendOpacity = () => {
+    const collection = document.getElementsByClassName('esri-legend__symbol');
+
+    Array.prototype.forEach.call(collection, function (element) {
+      let img = {};
+
+      if (element.hasChildNodes()) {
+        img = element.childNodes[0];
+      } else {
+        img = element;
+      }
+      // Set Legend opacity back to 1;
+      img.setAttribute(
+        'style',
+        'opacity:1; -moz-opacity:1; filter:alpha(opacity=100)',
+      );
+    });
+  };
+
   /**
    * This method is executed after the render method is executed
    */
@@ -2682,6 +2701,7 @@ class MenuWidget extends React.Component {
       '.active-layer[layer-id="' + layer + '"] .active-layer-opacity',
     ).dataset.opacity = value;
     // }
+    this.setLegendOpacity();
   }
 
   /**