Move the viewer layout to container level (#551)

GeoNode · Oct 28, 2021 · 851adc1 · 851adc1
1 parent 0d3e632
commit 851adc1
Show file tree

Hide file tree

Showing 14 changed files with 249 additions and 582 deletions.
diff --git a/geonode_mapstore_client/client/js/components/ViewerLayout/ViewerLayout.jsx b/geonode_mapstore_client/client/js/components/ViewerLayout/ViewerLayout.jsx
@@ -0,0 +1,80 @@
+/*
+ * Copyright 2021, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+function ViewerLayout({
+    id,
+    className,
+    header,
+    leftColumn,
+    rightColumn,
+    rightOverlay,
+    children,
+    footer
+}) {
+
+    return (
+        <div
+            id={id}
+            className={`${className ? `${className} ` : ''}gn-viewer-layout`}
+            style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+                display: 'flex',
+                flexDirection: 'column'
+            }}>
+            <header>
+                {header}
+            </header>
+            <div
+                className="gn-viewer-layout-body"
+                style={{
+                    display: 'flex',
+                    width: '100%',
+                    flex: 1,
+                    position: 'relative'
+                }}>
+                <div className="gn-viewer-left-column">
+                    {leftColumn}
+                </div>
+                <div
+                    className="gn-viewer-layout-center"
+                    style={{
+                        flex: 1,
+                        position: 'relative'
+                    }}
+                >
+                    {children}
+                </div>
+                <div className="gn-viewer-right-column">
+                    {rightColumn}
+                </div>
+            </div>
+            <div
+                className="gn-viewer-right-overlay shadow-far"
+                style={{
+                    position: 'absolute',
+                    right: 0,
+                    height: '100%',
+                    zIndex: 2000,
+                    transform: 'all 0.3s'
+                }}>
+                {rightOverlay}
+            </div>
+            <footer>
+                {footer}
+            </footer>
+        </div>
+    );
+}
+
+export default ViewerLayout;
diff --git a/geonode_mapstore_client/client/js/components/ViewerLayout/index.js b/geonode_mapstore_client/client/js/components/ViewerLayout/index.js
@@ -0,0 +1 @@
+export { default } from './ViewerLayout';
diff --git a/geonode_mapstore_client/client/js/epics/gnresource.js b/geonode_mapstore_client/client/js/epics/gnresource.js
@@ -69,6 +69,7 @@ import { STYLE_OWNER_NAME } from '@mapstore/framework/utils/StyleEditorUtils';
 import StylesAPI from '@mapstore/framework/api/geoserver/Styles';
 import { styleServiceSelector } from '@mapstore/framework/selectors/styleeditor';
 import { updateStyleService } from '@mapstore/framework/api/StyleEditor';
+import { resizeMap } from '@mapstore/framework/actions/map';
 
 const resourceTypes = {
     [ResourceTypes.DATASET]: {
@@ -128,7 +129,8 @@ const resourceTypes = {
                             ? [
                                 setControlProperty('visualStyleEditor', 'enabled', true),
                                 updateAdditionalLayer(newLayer.id, STYLE_OWNER_NAME, 'override', {}),
-                                updateStatus('edit')
+                                updateStatus('edit'),
+                                resizeMap()
                             ]
                             : [])
                     );
@@ -260,7 +262,8 @@ const resourceTypes = {
 const getResetActions = (isSameResource) => [
     resetControls(),
     ...(!isSameResource ? [ resetResourceState() ] : []),
-    setControlProperty('rightOverlay', 'enabled', false)
+    setControlProperty('rightOverlay', 'enabled', false),
+    setControlProperty('fitBounds', 'geometry', null)
 ];
 
 export const gnViewerRequestNewResourceConfig = (action$, store) =>

diff --git a/geonode_mapstore_client/client/js/plugins/ActionNavbar.jsx b/geonode_mapstore_client/client/js/plugins/ActionNavbar.jsx
@@ -19,7 +19,8 @@ import {
     getResourcePerms,
     canAddResource,
     getResourceData,
-    getResourceDirtyState
+    getResourceDirtyState,
+    getSelectedLayerPermissions
 } from '@js/selectors/resource';
 import { hasPermissionsTo, reduceArrayRecursive } from '@js/utils/MenuUtils';
 import { getResourceTypesInfo } from '@js/utils/ResourceUtils';
@@ -40,13 +41,14 @@ function ActionNavbarPlugin({
     rightMenuItems,
     resourcePerms,
     resource,
-    isDirtyState
+    isDirtyState,
+    selectedLayerPermissions
 }, context) {
 
     const types = getResourceTypesInfo();
     const { icon } = types[resource?.resource_type] || {};
     const { loadedPlugins } = context;
-    const configuredItems = usePluginItems({ items, loadedPlugins });
+    const configuredItems = usePluginItems({ items, loadedPlugins }, [resource?.pk, selectedLayerPermissions]);
 
     const leftMenuItemsPlugins = reduceArrayRecursive(leftMenuItems, (item) => {
         configuredItems.find(plugin => {
@@ -108,24 +110,21 @@ const ConnectedActionNavbarPlugin = connect(
         getResourcePerms,
         canAddResource,
         getResourceData,
-        getResourceDirtyState
-    ], (resourcePerms, userCanAddResource, resource, dirtyState) => ({
+        getResourceDirtyState,
+        getSelectedLayerPermissions
+    ], (resourcePerms, userCanAddResource, resource, dirtyState, selectedLayerPermissions) => ({
         resourcePerms: (resourcePerms.length > 0 ) ?
             resourcePerms : ((userCanAddResource)
                 ? [ "change_resourcebase"] : [] ),
         resource,
-        isDirtyState: !!dirtyState
+        isDirtyState: !!dirtyState,
+        selectedLayerPermissions
     }))
 )(ActionNavbarPlugin);
 
 export default createPlugin('ActionNavbar', {
     component: ConnectedActionNavbarPlugin,
-    containers: {
-        ViewerLayout: {
-            priority: 1,
-            target: 'header'
-        }
-    },
+    containers: {},
     epics: {},
     reducers: {}
 });
diff --git a/geonode_mapstore_client/client/js/plugins/DetailViewer.jsx b/geonode_mapstore_client/client/js/plugins/DetailViewer.jsx
@@ -191,15 +191,9 @@ const DetailViewerPlugin = connect(
 export default createPlugin('DetailViewer', {
     component: DetailViewerPlugin,
     containers: {
-        ViewerLayout: {
-            name: 'DetailViewer',
-            target: 'rightOverlay',
-            priority: 1
-        },
         ActionNavbar: {
             name: 'DetailViewerButton',
-            Component: ConnectedButton,
-            priority: 1
+            Component: ConnectedButton
         }
     },
     epics: {},

diff --git a/geonode_mapstore_client/client/js/plugins/DownloadResource.jsx b/geonode_mapstore_client/client/js/plugins/DownloadResource.jsx
@@ -49,7 +49,8 @@ export default createPlugin('DownloadResource', {
     containers: {
         ActionNavbar: {
             name: 'DownloadResource',
-            Component: ConnectedDownloadResource
+            Component: ConnectedDownloadResource,
+            priority: 1
         }
     },
     epics: {},

diff --git a/geonode_mapstore_client/client/js/plugins/FitBounds.jsx b/geonode_mapstore_client/client/js/plugins/FitBounds.jsx
@@ -6,21 +6,31 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { createPlugin } from '@mapstore/framework/utils/PluginsUtils';
 import { projectionSelector } from '@mapstore/framework/selectors/map';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import isEqual from 'lodash/isEqual';
 import FitBounds from '@mapstore/framework/components/geostory/common/map/FitBounds';
 
-const MAX_EXTENT_WEB_MERCATOR = [-180, -85.06, 180, 85.06];
+const MAX_EXTENT_WEB_MERCATOR = [-180, -85, 180, 85];
 
 function FitBoundsPlugin({ mapProjection, ...props }) {
-    const geometry = ['EPSG:900913', 'EPSG:3857'].includes(mapProjection) && isEqual(props.geometry, [-180, -90, 180, 90])
-        ? MAX_EXTENT_WEB_MERCATOR
-        : props.geometry;
-    return (<FitBounds active { ...props } geometry={geometry}/>);
+    function validateGeometry(geometry, projection) {
+        if (geometry && ['EPSG:900913', 'EPSG:3857'].includes(projection)) {
+            const [minx, miny, maxx, maxy] = geometry;
+            const [eMinx, eMiny, eMaxx, eMaxy] = MAX_EXTENT_WEB_MERCATOR;
+            return [
+                minx < eMinx ? eMinx : minx,
+                miny < eMiny ? eMiny : miny,
+                maxx > eMaxx ? eMaxx : maxx,
+                maxy > eMaxy ? eMaxy : maxy
+            ];
+        }
+        return geometry;
+    }
+    const geometry = useMemo(() => validateGeometry(props.geometry, mapProjection), [props.geometry, mapProjection]);
+    return <FitBounds active { ...props } geometry={geometry}/>;
 }
 
 const ConnectedFitBoundsPlugin = connect(

diff --git a/geonode_mapstore_client/client/js/plugins/MediaViewer.jsx b/geonode_mapstore_client/client/js/plugins/MediaViewer.jsx
@@ -42,12 +42,7 @@ const MediaViewerPlugin = connect(
 
 export default createPlugin('MediaViewer', {
     component: MediaViewerPlugin,
-    containers: {
-        ViewerLayout: {
-            name: 'MediaViewer',
-            priority: 1
-        }
-    },
+    containers: {},
     epics: {},
     reducers: {
         gnresource

diff --git a/geonode_mapstore_client/client/js/plugins/Share.jsx b/geonode_mapstore_client/client/js/plugins/Share.jsx
@@ -260,15 +260,9 @@ const ConnectedShareButton = connect(
 export default createPlugin('Share', {
     component: SharePlugin,
     containers: {
-        ViewerLayout: {
-            name: 'Share',
-            target: 'rightOverlay',
-            priority: 1
-        },
         ActionNavbar: {
             name: 'Share',
-            Component: ConnectedShareButton,
-            priority: 1
+            Component: ConnectedShareButton
         }
     },
     epics: {},