@eeacms/volto-eea-map 5.0.2 → 5.0.4

package/CHANGELOG.md

@@ -4,11 +4,40 @@ 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).
 
-### [5.0.2](https://github.com/eea/volto-eea-map/compare/5.0.1...5.0.2) - 16 August 2024
+### [5.0.4](https://github.com/eea/volto-eea-map/compare/5.0.3...5.0.4) - 9 September 2024
 
-#### :hammer_and_wrench: Others
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`f537545`](https://github.com/eea/volto-eea-map/commit/f53754571332b1f984528aa5cf8ad9a52c2af403)]
+- style: Automated code fix [eea-jenkins - [`d91f093`](https://github.com/eea/volto-eea-map/commit/d91f09374b10dd887028b12c026eb09df4948528)]
+
+#### :hammer_and_wrench: Others
+
+- manage the redux and actions right [dobri1408 - [`44f7177`](https://github.com/eea/volto-eea-map/commit/44f7177958ee9b03ce25d178279e44f686c053c5)]
+- manage the redux and actions right [dobri1408 - [`83461ad`](https://github.com/eea/volto-eea-map/commit/83461ad0848e610349bd7be76a48ecc8b331e169)]
+- manage the redux and actions right [dobri1408 - [`7c28909`](https://github.com/eea/volto-eea-map/commit/7c289090f46eeb7a49ebb3f6043c30aeb978752f)]
+- Update preview_image.js [dobri1408 - [`2b1695b`](https://github.com/eea/volto-eea-map/commit/2b1695bd4da4f8850bcfba721ab96d5a878828f3)]
+- Update preview_image.js [dobri1408 - [`4a93291`](https://github.com/eea/volto-eea-map/commit/4a93291fd37139d7130ed9952e3ff9bbf67873b5)]
+- fix bug on maps zoom [dobri1408 - [`7d76531`](https://github.com/eea/volto-eea-map/commit/7d765312d372824b4f8a34bf761759b8db08d7f6)]
+- Update preview_image.js [dobri1408 - [`e2df116`](https://github.com/eea/volto-eea-map/commit/e2df116d0eacccfbc5b320e4102aad517c488afe)]
+- fix linter [dobri1408 - [`bb29959`](https://github.com/eea/volto-eea-map/commit/bb29959761865f5933739f8656af929df8b19f37)]
+- fix eslint [dobri1408 - [`f19375a`](https://github.com/eea/volto-eea-map/commit/f19375a7a7f825a41d415b5ed5a29b1e4517a33c)]
+- Update VisualizationWidget.jsx [dobri1408 - [`7e6cc7d`](https://github.com/eea/volto-eea-map/commit/7e6cc7da795f3b47c189aec1425d78f7c385e670)]
+- Update preview_image.js [dobri1408 - [`3b37b97`](https://github.com/eea/volto-eea-map/commit/3b37b97cb965fe5c3204a6272e159dbe03d8bf0b)]
+- Alert message if preview image not saved [dobri1408 - [`1213b99`](https://github.com/eea/volto-eea-map/commit/1213b99edf2623221610656301e0fa6e9cef78b7)]
+- update [Miu Razvan - [`af50deb`](https://github.com/eea/volto-eea-map/commit/af50deb4e623f82d11ac11c92f9342362f289a7f)]
+- fix tests [dobri1408 - [`f0a55c0`](https://github.com/eea/volto-eea-map/commit/f0a55c0f75f04cc3d66a00f6e9f32db77bb2ecd2)]
+- fix tests [dobri1408 - [`27a2c86`](https://github.com/eea/volto-eea-map/commit/27a2c8654ce9350e82a77a1cea6aadb08c0035e0)]
+- fix tests [dobri1408 - [`3f0a5bf`](https://github.com/eea/volto-eea-map/commit/3f0a5bfd8fa4ce578318876b4b3b77f846067bf6)]
+- fix tests [dobri1408 - [`65244c7`](https://github.com/eea/volto-eea-map/commit/65244c7d16c30d6d1d37f5e294add890a3f93405)]
+- fix tests [dobri1408 - [`e73568c`](https://github.com/eea/volto-eea-map/commit/e73568c32d66f22b938cbc9f8ed8a37b3061edb2)]
+- preview image [dobri1408 - [`c8e1b58`](https://github.com/eea/volto-eea-map/commit/c8e1b58d1bfd5c034a56a31fbf41fa2e463d4af8)]
+- add middleware [dobri1408 - [`2480fad`](https://github.com/eea/volto-eea-map/commit/2480fadb2a95a9b628a30ecb7a5c3fed49e64fb6)]
+- use arcgis reactiveUtils to take screenshot when layers are drawn [Miu Razvan - [`96794da`](https://github.com/eea/volto-eea-map/commit/96794da9fba1f4824edb5b7f28d18643d6f7a84e)]
+### [5.0.3](https://github.com/eea/volto-eea-map/compare/5.0.2...5.0.3) - 22 August 2024
+
+### [5.0.2](https://github.com/eea/volto-eea-map/compare/5.0.1...5.0.2) - 16 August 2024
 
-- fix small bug [Miu Razvan - [`41499bf`](https://github.com/eea/volto-eea-map/commit/41499bfc86d7a975fac49cad865f396b7deda187)]
 ### [5.0.1](https://github.com/eea/volto-eea-map/compare/5.0.0...5.0.1) - 16 August 2024
 
 ## [5.0.0](https://github.com/eea/volto-eea-map/compare/4.1.0...5.0.0) - 26 July 2024

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-map",
-  "version": "5.0.2",
+  "version": "5.0.4",
   "description": "@eeacms/volto-eea-map: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/Arcgis/Layer/Layer.jsx

@@ -145,7 +145,7 @@ class $Layer extends EventEmitter {
     if (this.#layer?.queryExtent && this.#props.zoomToExtent) {
       this.#layer.when(async () => {
         const data = await this.#layer.queryExtent();
-        if (!$map.view) return;
+        if (!$map.view?.ready) return;
         $map.view.goTo(data.extent).then(() => {
           const homeWidget = $map.view.ui.find('Home');
           if (!homeWidget) return;

package/src/Arcgis/Map/MapBuilder.jsx

@@ -56,6 +56,25 @@ const MapBuilder = forwardRef((props, ref) => {
 
   const rotationEnabled = settings.view?.constraints?.rotationEnabled ?? false;
 
+  const MapProperties = useMemo(
+    () => ({
+      ...(settings.map || {}),
+      basemap,
+    }),
+    [settings.map, basemap],
+  );
+
+  const ViewProperties = useMemo(
+    () => ({
+      ...(settings.view || {}),
+      constraints: {
+        ...(settings.view?.constraints || {}),
+        rotationEnabled,
+      },
+    }),
+    [settings.view, rotationEnabled],
+  );
+
   useEffect(() => {
     setRenderWidgets(false);
   }, [widgets]);
@@ -80,17 +99,8 @@ const MapBuilder = forwardRef((props, ref) => {
 
   return (
     <Map
-      MapProperties={{
-        ...(settings.map || {}),
-        basemap,
-      }}
-      ViewProperties={{
-        ...(settings.view || {}),
-        constraints: {
-          ...(settings.view?.constraints || {}),
-          rotationEnabled,
-        },
-      }}
+      MapProperties={MapProperties}
+      ViewProperties={ViewProperties}
       ref={$map}
     >
       {renderWidgets &&

package/src/Widgets/VisualizationWidget.jsx

@@ -1,9 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { Modal, Button, Grid } from 'semantic-ui-react';
 import { toast } from 'react-toastify';
-
 import { FormFieldWrapper, Icon, Toast } from '@plone/volto/components';
-
 import MapBuilder from '@eeacms/volto-eea-map/Arcgis/Map/MapBuilder';
 import {
   initEditor,
@@ -11,11 +9,10 @@ import {
   validateEditor,
   onPasteEditor,
 } from '@eeacms/volto-eea-map/jsoneditor';
-
 import editSVG from '@plone/volto/icons/editing.svg';
-
 import '@eeacms/volto-eea-map/styles/editor.less';
 import MapEditor from '../Arcgis/Editor/Editor';
+import { debounce } from '../Arcgis/helpers';
 
 function JsonEditorModal(props) {
   const { value, onClose, onChange } = props;
@@ -164,9 +161,73 @@ function MapEditorModal(props) {
 }
 
 const VisualizationWidget = (props) => {
+  const $map = useRef();
+  const controller = useRef({});
+  const $value = useRef(props.value);
   const { id, title, description, value } = props;
   const [showMapEditor, setShowMapEditor] = useState(false);
 
+  const onConnect = () => {
+    if (controller.current.multiple && !props.block && !$map.current) return;
+    props.onChange(props.id, {
+      ...$value.current,
+      preview: 'loading',
+    });
+    controller.current.agReactive = $map.current.modules.agReactiveUtils.watch(
+      () => $map.current?.view?.updating,
+      async (updating) => {
+        if (updating || !$map.current?.view) return;
+        debounce(
+          async () => {
+            if (!$map.current?.view) return;
+            const preview = await $map.current.view.takeScreenshot({
+              format: 'png',
+            });
+            props.onChange(props.id, {
+              ...$value.current,
+              preview: preview.dataUrl,
+            });
+          },
+          300,
+          'visualization-widget-screenshot',
+        );
+      },
+    );
+  };
+
+  const onDisconnect = () => {
+    if (!controller.current.agReactive) return;
+    controller.current.agReactive.remove();
+  };
+
+  useEffect(() => {
+    const map = $map.current;
+
+    if (!map) return;
+
+    const widgets = document.querySelectorAll(
+      '.field-wrapper-map_visualization_data',
+    );
+
+    if (widgets.length > 1) {
+      controller.current.multiple = true;
+    }
+
+    map.on('connected', onConnect);
+    map.on('disconnected', onDisconnect);
+
+    return () => {
+      if (!map) return;
+      map.off('connected', onConnect);
+      map.off('disconnected', onDisconnect);
+    };
+    // eslint-disable-next-line
+  }, []);
+
+  useEffect(() => {
+    $value.current = value;
+  }, [value]);
+
   if (__SERVER__ || !value) return null;
 
   return (
@@ -185,7 +246,7 @@ const VisualizationWidget = (props) => {
         </Button>
       </div>
       {description && <p className="help">{description}</p>}
-      <MapBuilder data={value} />
+      <MapBuilder data={value} ref={$map} />
       {showMapEditor && (
         <MapEditorModal
           {...props}

package/src/index.js

@@ -15,6 +15,7 @@ import ArcgisViewpointWidget from './Widgets/ArcgisViewpointWidget';
 import VisualizationViewWidget from './Widgets/VisualizationViewWidget';
 
 import VisualizationView from './Views/VisualizationView';
+import { preview_image } from './middlewares/preview_image';
 
 const applyConfig = (config) => {
   config.settings.allowed_cors_destinations = [
@@ -63,6 +64,10 @@ const applyConfig = (config) => {
     ],
     'id',
   );
+  config.settings.storeExtenders = [
+    ...(config.settings.storeExtenders || []),
+    preview_image,
+  ];
 
   config.views.contentTypesViews.map_visualization = VisualizationView;
 
@@ -72,6 +77,7 @@ const applyConfig = (config) => {
   config.widgets.widget.arcgis_viewpoint = ArcgisViewpointWidget;
 
   config.widgets.id.map_visualization_data = VisualizationWidget;
+
   config.widgets.views.id.map_visualization_data = VisualizationViewWidget;
 
   return config;

package/src/middlewares/preview_image.js

@@ -0,0 +1,100 @@
+import {
+  CREATE_CONTENT,
+  UPDATE_CONTENT,
+} from '@plone/volto/constants/ActionTypes';
+
+export const preview_image = (middlewares) => [
+  (store) => (next) => async (action) => {
+    if (![CREATE_CONTENT, UPDATE_CONTENT].includes(action.type)) {
+      return next(action);
+    }
+    const state = store.getState();
+    const contentData = state.content.data;
+    const type = action?.request?.data?.['@type'] || contentData['@type'];
+    const lastPreviewImage = Object.keys(action?.request?.data).includes(
+      'preview_image',
+    )
+      ? action?.request?.data.preview_image
+      : contentData?.preview_image;
+    if (
+      !contentData ||
+      type !== 'map_visualization' ||
+      contentData.preview_image_saved ||
+      !action?.request?.data?.map_visualization_data?.preview
+    ) {
+      return next(action);
+    }
+
+    if (
+      lastPreviewImage &&
+      lastPreviewImage?.filename !== 'preview_image_generated_map_simple.png'
+    ) {
+      if (action?.request?.data?.map_visualization_data?.preview) {
+        const mapVisualizationData = {
+          ...action.request.data.map_visualization_data,
+        };
+        delete mapVisualizationData.preview;
+
+        return next({
+          ...action,
+          request: {
+            ...action.request,
+            data: {
+              ...action.request.data,
+              map_visualization_data: mapVisualizationData,
+            },
+          },
+        });
+      } else return next(action);
+    }
+    const preview = action?.request?.data?.map_visualization_data?.preview;
+    if (
+      preview === 'loading' &&
+      // eslint-disable-next-line no-alert
+      window.confirm('Do you want to save a preview image?')
+    ) {
+      // eslint-disable-next-line no-alert
+      window.alert('Wait for the preview image to generate!');
+      return;
+    } else if (
+      preview !== 'loading' &&
+      // eslint-disable-next-line no-alert
+      !window.confirm('Do you want to save a preview image?')
+    ) {
+      return next(action);
+    }
+    try {
+      const previewImage = {
+        preview_image: {
+          data: action.request.data.map_visualization_data.preview.split(
+            ',',
+          )[1],
+          encoding: 'base64',
+          'content-type': 'image/png',
+          filename: 'preview_image_generated_map_simple.png',
+        },
+        preview_image_saved: true,
+      };
+
+      const mapVisualizationData = {
+        ...action.request.data.map_visualization_data,
+      };
+      delete mapVisualizationData.preview;
+
+      return next({
+        ...action,
+        request: {
+          ...action.request,
+          data: {
+            ...action.request.data,
+            ...previewImage,
+            map_visualization_data: mapVisualizationData,
+          },
+        },
+      });
+    } catch (error) {
+      return next(action);
+    }
+  },
+  ...middlewares,
+];