@eeacms/volto-arcgis-block 0.1.138 → 0.1.140

package/CHANGELOG.md

@@ -4,6 +4,26 @@ 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.140](https://github.com/eea/volto-arcgis-block/compare/0.1.139...0.1.140) - 11 May 2023
+
+#### :hammer_and_wrench: Others
+
+- CLMS-1953 (lint): Sets only one span with text. Can handle layers with no legends [ujbolivar - [`4335250`](https://github.com/eea/volto-arcgis-block/commit/433525063af14ac1e48d9a5bb646127769efb5e2)]
+- CLMS-1953 (lint): Ran linting scripts [ujbolivar - [`b73661d`](https://github.com/eea/volto-arcgis-block/commit/b73661d000cda6629be6dd0b110d5acb96c1e1bf)]
+- CLMS-1953 (chore): cleaned up and took out unecessary functions [ujbolivar - [`60cd5f8`](https://github.com/eea/volto-arcgis-block/commit/60cd5f87f7737bfda0ae801b3acf7627bfe2c182)]
+### [0.1.139](https://github.com/eea/volto-arcgis-block/compare/0.1.138...0.1.139) - 10 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.140",
   "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,45 @@ 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)) {
+        if (img.style) {
+          img.style.display = 'none';
+        }
+
+        if (element.parentNode.querySelector('span')) return;
+
+        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 +91,7 @@ class LegendWidget extends React.Component {
       this.setState({ showMapMenu: true });
     }
   }
+
   /**
    * This method is executed after the rener method is executed
    */
@@ -68,9 +100,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() {}