@eeacms/volto-eea-map 0.1.28 → 0.1.30

package/.coverage.babel.config.js

@@ -2,7 +2,7 @@ const defaultBabel = require('@plone/volto/babel');
 
 function applyDefault(api) {
   const voltoBabel = defaultBabel(api);
-  voltoBabel.plugins.push('@babel/plugin-transform-modules-commonjs', 'transform-class-properties', 'istanbul');
+  voltoBabel.plugins.push('istanbul');
   return voltoBabel;
 }
 

package/CHANGELOG.md

@@ -4,12 +4,22 @@ 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.30](https://github.com/eea/volto-eea-map/compare/0.1.29...0.1.30) - 4 November 2022
+
+#### :hammer_and_wrench: Others
+
+- jest transforms [Andrei Grigore - [`432aeee`](https://github.com/eea/volto-eea-map/commit/432aeeec40be5ecbb04c119df347be5d03950426)]
+- cy10/razzle4 updates [Andrei Grigore - [`419fe6b`](https://github.com/eea/volto-eea-map/commit/419fe6b8a7cfbc7561ba2585a2cc4f5a7583fac5)]
+- config new slate route [andreiggr - [`5343926`](https://github.com/eea/volto-eea-map/commit/5343926755aa0ace5ee4741e00df3aa4679e8bd7)]
+- use alpha in cy [andreiggr - [`775a92c`](https://github.com/eea/volto-eea-map/commit/775a92c959013a08c9a5c9c121df798a289088a9)]
+- update embed version and slate from volto [andreiggr - [`72bcc90`](https://github.com/eea/volto-eea-map/commit/72bcc90b993b1a40f81e272a6b15b41c9cf59f1b)]
+### [0.1.29](https://github.com/eea/volto-eea-map/compare/0.1.28...0.1.29) - 19 October 2022
+
 ### [0.1.28](https://github.com/eea/volto-eea-map/compare/0.1.27...0.1.28) - 7 October 2022
 
 #### :hammer_and_wrench: Others
 
 - Clear [andreiggr - [`cef77e6`](https://github.com/eea/volto-eea-map/commit/cef77e6bf85f919c4968d5001f342c7d6c0e63f5)]
-- Custom base import [andreiggr - [`ac15d5a`](https://github.com/eea/volto-eea-map/commit/ac15d5aa8edb3dc33b317f47fc11424e74035ce8)]
 ### [0.1.27](https://github.com/eea/volto-eea-map/compare/0.1.26...0.1.27) - 7 October 2022
 
 #### :hammer_and_wrench: Others

package/jest-addon.config.js

@@ -11,16 +11,14 @@ module.exports = {
     '@package/(.*)$': '<rootDir>/src/$1',
     '@plone/volto-quanta/(.*)$': '<rootDir>/src/addons/volto-quanta/src/$1',
     '@eeacms/(.*?)/(.*)$': '<rootDir>/src/addons/$1/src/$2',
-    'volto-slate/(.*)$': '<rootDir>/src/addons/volto-slate/src/$1',
+    '@plone/volto-slate':
+      '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src',
     '~/(.*)$': '<rootDir>/src/$1',
     'load-volto-addons':
       '<rootDir>/node_modules/@plone/volto/jest-addons-loader.js',
   },
   transform: {
     '^.+\\.js(x)?$': 'babel-jest',
-    '^.+\\.css$': 'jest-css-modules',
-    '^.+\\.less$': 'jest-css-modules',
-    '^.+\\.scss$': 'jest-css-modules',
     '^.+\\.(png)$': 'jest-file',
     '^.+\\.(jpg)$': 'jest-file',
     '^.+\\.(svg)$': './node_modules/@plone/volto/jest-svgsystem-transform.js',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-map",
-  "version": "0.1.28",
+  "version": "0.1.30",
   "description": "@eeacms/volto-eea-map: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -17,16 +17,14 @@
     "url": "git@github.com:eea/volto-eea-map.git"
   },
   "addons": [
-    "@eeacms/volto-embed",
-    "volto-slate"
+    "@eeacms/volto-embed"
   ],
   "dependencies": {
-    "@eeacms/volto-embed": "4.0.2",
+    "@eeacms/volto-embed": "5.0.0",
     "@plone/scripts": "*",
     "esri-loader": "3.6.0",
     "lodash": "4.17.21",
-    "react-querybuilder": "4.2.3",
-    "volto-slate": "*"
+    "react-querybuilder": "4.2.3"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.5",

package/src/components/ExtraViews.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { UniversalLink, Icon } from '@plone/volto/components';
 
 import LegendWidget from './widgets/LegendWidget';
-import { serializeNodes } from 'volto-slate/editor/render';
+import { serializeNodes } from '@plone/volto-slate/editor/render';
 
 import rightKeySVG from '@plone/volto/icons/right-key.svg';
 import downKeySVG from '@plone/volto/icons/down-key.svg';

package/src/components/Webmap.jsx

@@ -146,41 +146,48 @@ const Webmap = (props) => {
       map_layers && map_layers.length > 0
         ? map_layers
             .filter(({ map_service_url, layer }) => map_service_url && layer)
-            .map(({ map_service_url, layer, fullLayer, query = '' }, index) => {
-              const url = `${map_service_url}/${layer?.id}`;
-              let mapLayer;
-              switch (layer.type) {
-                case 'Raster Layer':
-                  mapLayer = new MapImageLayer({
-                    url: map_service_url,
-                    sublayers: [
-                      {
-                        id: layer.id,
-                        minScale: layer?.minScale,
-                        maxScale: layer?.maxScale,
-                        definitionExpression: query
-                          ? formatQuery(query, 'sql')
-                          : '',
-                      },
-                    ],
-                  });
-                  break;
-                case 'Feature Layer':
-                  mapLayer = new FeatureLayer({
-                    layerId: layer.id,
-                    url,
-                    definitionExpression: query
-                      ? formatQuery(query, 'sql')
-                      : '',
-                    minScale: layer?.minScale,
-                    maxScale: layer?.maxScale,
-                  });
-                  break;
-                default:
-                  break;
-              }
-              return mapLayer;
-            })
+            .map(
+              (
+                { map_service_url, layer, fullLayer, query = '', opacity = 1 },
+                index,
+              ) => {
+                const url = `${map_service_url}/${layer?.id}`;
+                let mapLayer;
+                switch (layer.type) {
+                  case 'Raster Layer':
+                    mapLayer = new MapImageLayer({
+                      url: map_service_url,
+                      sublayers: [
+                        {
+                          id: layer.id,
+                          minScale: layer?.minScale,
+                          maxScale: layer?.maxScale,
+                          opacity: opacity ? parseFloat(opacity) : 1,
+                          definitionExpression: query
+                            ? formatQuery(query, 'sql')
+                            : '',
+                        },
+                      ],
+                    });
+                    break;
+                  case 'Feature Layer':
+                    mapLayer = new FeatureLayer({
+                      layerId: layer.id,
+                      url,
+                      definitionExpression: query
+                        ? formatQuery(query, 'sql')
+                        : '',
+                      minScale: layer?.minScale,
+                      maxScale: layer?.maxScale,
+                      opacity: opacity ? parseFloat(opacity) : 1,
+                    });
+                    break;
+                  default:
+                    break;
+                }
+                return mapLayer;
+              },
+            )
         : [];
 
     const mapBaseLayer = new WebTileLayer({

package/src/components/widgets/LayerSelectWidget.jsx

@@ -4,7 +4,7 @@ import { Input, Select, Button, Grid, Checkbox } from 'semantic-ui-react';
 import { QueryBuilder } from 'react-querybuilder';
 import 'react-querybuilder/dist/query-builder.css';
 
-import RichTextWidget from 'volto-slate/widgets/RichTextWidget';
+import RichTextWidget from '@plone/volto-slate/widgets/RichTextWidget';
 
 import { connect } from 'react-redux';
 import { compose } from 'redux';
@@ -172,6 +172,13 @@ const LayerSelectWidget = (props) => {
     }
   };
 
+  const handleOpacityChange = (val) => {
+    onChange(id, {
+      ...value,
+      opacity: val,
+    });
+  };
+
   const handleChangeServiceUrl = (value) => {
     setServiceUrlError('');
     setCheckColor('');
@@ -285,6 +292,27 @@ const LayerSelectWidget = (props) => {
         )}
         {availableLayers && availableLayers.length > 0 && selectedLayer && (
           <div className="spaced-row">
+            <Grid.Row stretched>
+              <h5>Opacity:</h5>
+              <input
+                className="map-number-input"
+                type="number"
+                min={0}
+                max={1}
+                step={0.1}
+                value={value?.opacity ? value?.opacity : 1}
+                onChange={(e) => handleOpacityChange(e.target.value)}
+              />
+              <input
+                className="map-range-input"
+                type="range"
+                min={0}
+                max={1}
+                step={0.1}
+                value={value?.opacity ? value?.opacity : 1}
+                onChange={(e) => handleOpacityChange(e.target.value)}
+              />
+            </Grid.Row>
             <Grid.Row stretched>
               <h5 style={{ padding: '0', margin: '15px 0px 5px 0px' }}>
                 Description

package/src/components/widgets/LegendWidget.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Grid } from 'semantic-ui-react';
 import { fetchArcGISData, setLegendColumns } from '../../utils';
 import { Icon } from '@plone/volto/components';
-import { serializeNodes } from 'volto-slate/editor/render';
+import { serializeNodes } from '@plone/volto-slate/editor/render';
 
 import rightKeySVG from '@plone/volto/icons/right-key.svg';
 import downKeySVG from '@plone/volto/icons/down-key.svg';

package/src/styles/map.css

@@ -185,6 +185,16 @@
   cursor: pointer;
 }
 
+.map-number-input {
+  padding: 5px !important;
+}
+
+.map-range-input {
+  width: 100%;
+  margin: 7px 0;
+  color: green;
+}
+
 @keyframes fadeDown {
   from {
     opacity: 0;