Fix set thumbnail map widget (#747)

GeoNode · Jan 25, 2022 · 7224bc7 · 7224bc7
1 parent 11d85d7
commit 7224bc7
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 73 deletions.
diff --git a/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx b/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx
@@ -22,13 +22,12 @@ import debounce from 'lodash/debounce';
 import CopyToClipboardCmp from 'react-copy-to-clipboard';
 import { TextEditable, ThumbnailEditable } from '@js/components/ContentsEditable/';
 import ResourceStatus from '@js/components/ResourceStatus/';
-import turfBbox from '@turf/bbox';
 import BaseMap from '@mapstore/framework/components/map/BaseMap';
 import mapTypeHOC from '@mapstore/framework/components/map/enhancers/mapType';
-import { boundsToExtentString, getFeatureFromExtent } from '@js/utils/CoordinatesUtils';
 import AuthorInfo from '@js/components/AuthorInfo/AuthorInfo';
 import Loader from '@mapstore/framework/components/misc/Loader';
 import { getUserName } from '@js/utils/SearchUtils';
+import FitBounds from '@mapstore/framework/components/geostory/common/map/FitBounds';
 
 const Map = mapTypeHOC(BaseMap);
 Map.displayName = 'Map';
@@ -122,37 +121,18 @@ const DefinitionListContainer = ({itemslist}) => {
     );
 };
 
-function getExtent({
-    features,
-    layers
-}) {
-    if (features && features.length > 0) {
-        return turfBbox({ type: 'FeatureCollection', features });
-    }
-    const { bbox } = layers.find(({ isDataset }) => isDataset) || {};
-    const { bounds, crs } = bbox || {};
-    if (bounds && crs === 'EPSG:4326') {
-        const { minx, miny, maxx, maxy } = bounds;
-        return [ minx, miny, maxx, maxy ];
-    }
-    return null;
-}
-
-const MapThumbnailView = ({ layers, featuresProp = [], onMapThumbnail, onClose, savingThumbnailMap } ) => {
+const MapThumbnailView = ({ initialBbox, layers, onMapThumbnail, onClose, savingThumbnailMap } ) => {
 
-    const [currentExtent, setCurrentExtent] = useState();
     const [currentBbox, setCurrentBbox] = useState();
 
     function handleOnMapViewChanges(center, zoom, bbox) {
-        const { bounds, crs } = bbox;
-        const newExtent = boundsToExtentString(bounds, crs);
         setCurrentBbox(bbox);
-        setCurrentExtent(newExtent);
     }
 
-    const [extent] = useState(getExtent({ layers, features: featuresProp }));
-
-    const featureFromExtent = currentExtent ? currentExtent : extent?.join();
+    const { bounds, crs } = initialBbox;
+    const { minx, miny, maxx, maxy } = bounds;
+    const extent = [minx, miny, maxx, maxy];
+    const projection = crs;
 
     return (
         <div>
@@ -164,7 +144,7 @@ const MapThumbnailView = ({ layers, featuresProp = [], onMapThumbnail, onClose,
                     mapType="openlayers"
                     map={{
                         registerHooks: false,
-                        projection: 'EPSG:3857' // da usare paramentro projection
+                        projection: 'EPSG:3857' // to use parameter projection
                     }}
                     styleMap={{
                         position: 'absolute',
@@ -175,32 +155,24 @@ const MapThumbnailView = ({ layers, featuresProp = [], onMapThumbnail, onClose,
                         onMapViewChanges: handleOnMapViewChanges
                     }}
                     layers={[
-                        ...(layers ? layers : []),
-                        ...(featureFromExtent
-                            ? [{
-                                id: 'highlight',
-                                type: 'vector',
-                                features: [getFeatureFromExtent(featureFromExtent)],
-                                style: {
-                                    color: '#397AAB',
-                                    opacity: 0.8,
-                                    fillColor: '#397AAB',
-                                    fillOpacity: 0.4,
-                                    weight: 0.001
-                                }
-                            }]
-                            : []
-                        )
+                        ...(layers ? layers : [])
                     ]}
                 >
+                    <FitBounds
+                        mapType="openlayers"
+                        active
+                        geometry={extent}
+                        duration={300}
+                        geometryProjection={projection}
+                    />
                 </Map>
                 {savingThumbnailMap && <div className="gn-details-thumbnail-loader">
-                    <Loader size={150} />
+                    <Loader size={50} />
                 </div>
                 }
             </div>
             <div className="gn-detail-extent-action" >
-                <Button onClick={() => onMapThumbnail(currentBbox)} ><Message msgId={"gnviewer.save"} /></Button><Button onClick={() => onClose() }><Message msgId={"gnviewer.close"} /></Button></div>
+                <Button className="btn-primary" onClick={() => onMapThumbnail(currentBbox)} ><Message msgId={"gnhome.apply"} /></Button><Button onClick={() => onClose() }><i className="fa fa-close"/></Button></div>
         </div>
     );
 
@@ -235,7 +207,8 @@ function DetailsPanel({
     layers,
     isThumbnailChanged,
     onResourceThumbnail,
-    resourceThumbnailUpdating
+    resourceThumbnailUpdating,
+    initialBbox
 }) {
     const detailsContainerNode = useRef();
     const isMounted = useRef();
@@ -549,6 +522,7 @@ function DetailsPanel({
                                     onMapThumbnail={onMapThumbnail}
                                     onClose={handleEnableMapViewer}
                                     savingThumbnailMap={savingThumbnailMap}
+                                    initialBbox={initialBbox}
                                 />
                             }
                         </div>}

diff --git a/geonode_mapstore_client/client/js/components/Permissions/GeoLimits.jsx b/geonode_mapstore_client/client/js/components/Permissions/GeoLimits.jsx
@@ -15,27 +15,11 @@ import FitBounds from '@mapstore/framework/components/geostory/common/map/FitBou
 import Button from '@js/components/Button';
 import FaIcon from '@js/components/FaIcon';
 import Spinner from '@js/components/Spinner';
-import turfBbox from '@turf/bbox';
+import { getExtent } from '@js/utils/CoordinatesUtils';
 
 const Map = mapTypeHOC(BaseMap);
 Map.displayName = 'Map';
 
-function getExtent({
-    features,
-    layers
-}) {
-    if (features && features.length > 0) {
-        return turfBbox({ type: 'FeatureCollection', features });
-    }
-    const { bbox } = layers.find(({ isDataset }) => isDataset) || {};
-    const { bounds, crs } = bbox || {};
-    if (bounds && crs === 'EPSG:4326') {
-        const { minx, miny, maxx, maxy } = bounds;
-        return [ minx, miny, maxx, maxy ];
-    }
-    return null;
-}
-
 function GeoLimits({
     projection,
     layers,

diff --git a/geonode_mapstore_client/client/js/plugins/DetailViewer.jsx b/geonode_mapstore_client/client/js/plugins/DetailViewer.jsx
@@ -39,6 +39,7 @@ import { withRouter } from 'react-router';
 import { hashLocationToHref } from '@js/utils/SearchUtils';
 import Message from '@mapstore/framework/components/I18N/Message';
 import { layersSelector } from '@mapstore/framework/selectors/layers';
+import { mapSelector } from '@mapstore/framework/selectors/map';
 
 const ConnectedDetailsPanel = connect(
     createSelector([
@@ -48,15 +49,17 @@ const ConnectedDetailsPanel = connect(
         state => state?.gnsave?.savingThumbnailMap || false,
         layersSelector,
         isThumbnailChanged,
-        updatingThumbnailResource
-    ], (resource, loading, favorite, savingThumbnailMap, layers, thumbnailChanged, resourceThumbnailUpdating) => ({
+        updatingThumbnailResource,
+        mapSelector
+    ], (resource, loading, favorite, savingThumbnailMap, layers, thumbnailChanged, resourceThumbnailUpdating, mapData) => ({
         layers: layers,
         resource,
         loading,
         savingThumbnailMap,
         favorite,
         isThumbnailChanged: thumbnailChanged,
-        resourceThumbnailUpdating
+        resourceThumbnailUpdating,
+        initialBbox: mapData?.bbox
     })),
     {
         closePanel: setControlProperty.bind(null, 'rightOverlay', 'enabled', false),

diff --git a/geonode_mapstore_client/client/js/utils/CoordinatesUtils.js b/geonode_mapstore_client/client/js/utils/CoordinatesUtils.js
@@ -10,6 +10,7 @@
 import isNil from 'lodash/isNil';
 import join from 'lodash/join';
 import { reprojectBbox, getViewportGeometry } from '@mapstore/framework/utils/CoordinatesUtils';
+import turfBbox from '@turf/bbox';
 
 /**
 * Utilities for api requests
@@ -120,3 +121,27 @@ export function bboxToPolygon(bbox, crs) {
         ]]
     };
 }
+
+/**
+ * Get the extent of area of interest from map bbox
+ * the values of the extent are expressed in the unit of the projection
+ * @param {Object} Options containing layers and features
+ * @returns {Array} containng minx, miny, maxx, maxy
+ * minx, miny -> bottom-left corner of square
+ * maxx, maxy -> top-right corner of square
+ */
+export const getExtent = ({
+    features,
+    layers
+}) => {
+    if (features && features.length > 0) {
+        return turfBbox({ type: 'FeatureCollection', features });
+    }
+    const { bbox } = layers.find(({ isDataset }) => isDataset) || {};
+    const { bounds, crs } = bbox || {};
+    if (bounds && crs === 'EPSG:4326') {
+        const { minx, miny, maxx, maxy } = bounds;
+        return [minx, miny, maxx, maxy];
+    }
+    return null;
+};
diff --git a/geonode_mapstore_client/client/js/utils/ResourceUtils.js b/geonode_mapstore_client/client/js/utils/ResourceUtils.js
@@ -575,5 +575,3 @@ export const parseMapConfig = (mapResponse, resource = {}) => {
         type: 'map'
     };
 };
-
-
diff --git a/geonode_mapstore_client/client/js/utils/__tests__/CoordinatesUtils-test.js b/geonode_mapstore_client/client/js/utils/__tests__/CoordinatesUtils-test.js
@@ -9,7 +9,8 @@
 
 import expect from 'expect';
 import {
-    bboxToPolygon
+    bboxToPolygon,
+    getExtent
 } from '../CoordinatesUtils';
 
 describe('Test Coordinates Utils', () => {
@@ -28,4 +29,16 @@ describe('Test Coordinates Utils', () => {
             [-10, -10]
         ]]);
     });
+
+    it('should get extent from Bbox', () => {
+        const layers = [{
+            isDataset: true,
+            bbox: {
+                bounds: { minx: -10, miny: -10, maxx: 10, maxy: 10 },
+                crs: 'EPSG:4326'
+            }
+        }];
+
+        expect(getExtent({ layers, features: [] })).toEqual([-10, -10, 10, 10]);
+    });
 });
diff --git a/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less b/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less
@@ -225,12 +225,20 @@
         .gn-detail-extent {
             position: relative;
             width: 250px;
-            height: 250px;
+            height: 180px;
 
         }
-        .gn-detail-extent-action .btn-default {
-            width: 50%;
-        }
+        .gn-detail-extent-action { 
+            position: absolute;
+            top: 0;
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+
+            .btn {
+                margin: 0.6rem;
+            }
+        } 
         .upload-thumbnail{
             position: absolute;
             top: 10px;