Skip to content

Commit

Permalink
Merge pull request #84 from eea/develop
Browse files Browse the repository at this point in the history
Take screenshot of preview image middleware
  • Loading branch information
razvanMiu authored Sep 9, 2024
2 parents fe2d5b3 + 1d49625 commit e9e9929
Show file tree
Hide file tree
Showing 7 changed files with 225 additions and 21 deletions.
33 changes: 30 additions & 3 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,38 @@ 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.3](https://github.com/eea/volto-eea-map/compare/5.0.2...5.0.3) - 21 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

- don't run volto 16 tests [Miu Razvan - [`9df649b`](https://github.com/eea/volto-eea-map/commit/9df649b1702c29f010aa212de37edf7d44922549)]
### [5.0.2](https://github.com/eea/volto-eea-map/compare/5.0.1...5.0.2) - 16 August 2024

### [5.0.1](https://github.com/eea/volto-eea-map/compare/5.0.0...5.0.1) - 16 August 2024
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@eeacms/volto-eea-map",
"version": "5.0.3",
"version": "5.0.4",
"description": "@eeacms/volto-eea-map: Volto add-on",
"main": "src/index.js",
"author": "European Environment Agency: IDM2 A-Team",
Expand Down
2 changes: 1 addition & 1 deletion src/Arcgis/Layer/Layer.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
32 changes: 21 additions & 11 deletions src/Arcgis/Map/MapBuilder.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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]);
Expand All @@ -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 &&
Expand Down
71 changes: 66 additions & 5 deletions src/Widgets/VisualizationWidget.jsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,18 @@
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,
destroyEditor,
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;
Expand Down Expand Up @@ -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 (
Expand All @@ -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}
Expand Down
6 changes: 6 additions & 0 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down Expand Up @@ -63,6 +64,10 @@ const applyConfig = (config) => {
],
'id',
);
config.settings.storeExtenders = [
...(config.settings.storeExtenders || []),
preview_image,
];

config.views.contentTypesViews.map_visualization = VisualizationView;

Expand All @@ -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;
Expand Down
100 changes: 100 additions & 0 deletions src/middlewares/preview_image.js
Original file line number Diff line number Diff line change
@@ -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,
];

0 comments on commit e9e9929

Please sign in to comment.