Improve layout in the map viewer

web/client/components/layout/MapViewerLayout.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+import FlexBox, { FlexFill } from "./FlexBox";
+
+export default ({
+    id,
+    header,
+    footer,
+    background,
+    leftColumn,
+    rightColumn,
+    columns,
+    className,
+    top,
+    bottom,
+    children,
+    bodyClassName
+}) => {
+    return (
+        <FlexBox id={id} className={className} column classNames={['_fill', '_absolute']}>
+            {header}
+            <FlexFill flexBox column className={bodyClassName} classNames={['_relative', 'ms2-layout-body']}>
+                <div className="_fill _absolute">{background}</div>
+                <div className="_relative">{top}</div>
+                <FlexFill flexBox classNames={['_relative', 'ms2-layout-main-content']}>
+                    <div className="_relative ms2-layout-left-column">{leftColumn}</div>
+                    <FlexFill classNames={['_relative', 'ms2-layout-content']}>
+                        {children}
+                    </FlexFill>
+                    <div className="_relative ms2-layout-right-column">{rightColumn}</div>
+                    <div className="ms2-layout-columns">{columns}</div>
+                </FlexFill>
+                <div className="_relative">{bottom}</div>
+            </FlexFill>
+            {footer}
+        </FlexBox>
+    );
+};

web/client/configs/localConfig.json

@@ -409,6 +409,7 @@
       {
         "name": "Map",
         "cfg": {
+          "containerPosition": "background",
           "mapOptions": {
             "openlayers": {
               "interactions": {
@@ -475,7 +476,12 @@
         }
       },
       "Home",
-      "FeatureEditor",
+      {
+        "name": "FeatureEditor",
+        "cfg": {
+          "containerPosition": "bottom"
+        }
+      },
       "LayerDownload",
       {
         "name": "QueryPanel",

web/client/containers/MapViewer.jsx

@@ -16,9 +16,9 @@ const urlQuery = url.parse(window.location.href, true).query;
 import ConfigUtils from '../utils/ConfigUtils';
 import { getMonitoredState } from '../utils/PluginsUtils';
 import ModulePluginsContainer from "../product/pages/containers/ModulePluginsContainer";
-import { createShallowSelectorCreator } from '../utils/ReselectUtils';
-import BorderLayout from '../components/layout/BorderLayout';
+import MapViewerLayout from '../components/layout/MapViewerLayout';
 
+import { createShallowSelectorCreator } from '../utils/ReselectUtils';
 const PluginsContainer = connect(
     createShallowSelectorCreator(isEqual)(
         state => state.plugins,
@@ -66,7 +66,7 @@ class MapViewer extends React.Component {
             params={this.props.params}
             loaderComponent={this.props.loaderComponent}
             onLoaded={this.props.onLoaded}
-            component={this.props.component || BorderLayout}
+            component={this.props.component || MapViewerLayout}
         />);
     }
 }

web/client/plugins/featuregrid/FeatureEditor.jsx

@@ -7,37 +7,27 @@
  */
 import React, { useMemo } from 'react';
 import {connect} from 'react-redux';
-import {createSelector, createStructuredSelector} from 'reselect';
+import {createStructuredSelector} from 'reselect';
 import {bindActionCreators} from 'redux';
 import { get, pick, isEqual } from 'lodash';
 import {compose, lifecycle, defaultProps } from 'recompose';
-import ReactDock from 'react-dock';
 import ContainerDimensions from 'react-container-dimensions';
 
 import Grid from '../../components/data/featuregrid/FeatureGrid';
 import BorderLayout from '../../components/layout/BorderLayout';
 import { toChangesMap} from '../../utils/FeatureGridUtils';
 import { sizeChange, setUp, setSyncTool } from '../../actions/featuregrid';
-import {mapLayoutValuesSelector} from '../../selectors/maplayout';
 import {paginationInfo, describeSelector, attributesJSONSchemaSelector, wfsURLSelector, typeNameSelector, isSyncWmsActive} from '../../selectors/query';
-import {modeSelector, changesSelector, newFeaturesSelector, hasChangesSelector, selectedLayerFieldsSelector, selectedFeaturesSelector, getDockSize} from '../../selectors/featuregrid';
+import {modeSelector, changesSelector, newFeaturesSelector, hasChangesSelector, selectedLayerFieldsSelector, selectedFeaturesSelector} from '../../selectors/featuregrid';
 
 import {getPanels, getHeader, getFooter, getDialogs, getEmptyRowsView, getFilterRenderers} from './panels/index';
 import {gridTools, gridEvents, pageEvents, toolbarEvents} from './index';
 import useFeatureValidation from './hooks/useFeatureValidation';
+import withResize from './hoc/withResize';
 
 const EMPTY_ARR = [];
 const EMPTY_OBJ = {};
 
-const Dock = connect(createSelector(
-    getDockSize,
-    state => mapLayoutValuesSelector(state, {transform: true}),
-    (size, dockStyle) => ({
-        size,
-        dockStyle
-    })
-)
-)(ReactDock);
 /**
   * @name FeatureEditor
   * @memberof plugins
@@ -171,24 +161,13 @@ const Dock = connect(createSelector(
   * ```
   *
 */
-const FeatureDock = (props = {
+const Editor = (props = {
     tools: EMPTY_OBJ,
     dialogs: EMPTY_OBJ,
     select: EMPTY_ARR
 }) => {
     const virtualScroll  = props.virtualScroll ?? true;
     const maxZoom  = props?.pluginCfg?.maxZoom;
-    const dockProps = {
-        dimMode: "none",
-        defaultSize: 0.35,
-        fluid: true,
-        isVisible: props.open,
-        maxDockSize: 0.7,
-        minDockSize: 0.1,
-        position: "bottom",
-        setDockSize: () => {},
-        zIndex: 1060
-    };
     const items = props?.items ?? [];
     const toolbarItems = items.filter(({target}) => target === 'toolbar');
     const filterRenderers = useMemo(() => {
@@ -208,72 +187,70 @@ const FeatureDock = (props = {
     });
 
     return (
-        <div className={"feature-grid-wrapper"}>
-            <Dock  {...dockProps} onSizeChange={size => { props.onSizeChange(size, dockProps); }}>
-                {props.open &&
-                    (<ContainerDimensions>
-                        { ({ height }) =>
-                        // added height to solve resize issue in firefox, edge and ie
-                            <BorderLayout
-                                className="feature-grid-container"
-                                key={"feature-grid-container"}
-                                height={height - (42 + 32)}
-                                header={getHeader({
-                                    toolbarItems,
-                                    hideCloseButton: props.hideCloseButton,
-                                    hideLayerTitle: props.hideLayerTitle,
-                                    pluginCfg: props.pluginCfg,
-                                    validationErrors
-                                })}
-                                columns={getPanels(props.tools)}
-                                footer={getFooter(props)}>
-                                {getDialogs(props.tools)}
-                                <Grid
-                                    isWithinAttrTbl
-                                    showCheckbox={props.showCheckbox}
-                                    editingAllowedRoles={props.editingAllowedRoles}
-                                    customEditorsOptions={props.customEditorsOptions}
-                                    autocompleteEnabled={props.autocompleteEnabled}
-                                    url={props.url}
-                                    typeName={props.typeName}
-                                    filterRenderers={filterRenderers}
-                                    enableColumnFilters={props.enableColumnFilters}
-                                    emptyRowsView={getEmptyRowsView()}
-                                    focusOnEdit={props.focusOnEdit}
-                                    newFeatures={props.newFeatures}
-                                    changes={changes}
-                                    mode={props.mode}
-                                    select={props.select}
-                                    key={"feature-grid-container"}
-                                    columnSettings={props.attributes}
-                                    fields={props.fields}
-                                    gridEvents={props.gridEvents}
-                                    pageEvents={props.pageEvents}
-                                    describeFeatureType={props.describe}
-                                    features={props.features}
-                                    minHeight={600}
-                                    tools={props.gridTools}
-                                    pagination={props.pagination}
-                                    pages={props.pages}
-                                    virtualScroll={virtualScroll}
-                                    maxStoredPages={props.maxStoredPages}
-                                    vsOverScan={props.vsOverScan}
-                                    scrollDebounce={props.scrollDebounce}
-                                    size={props.size}
-                                    actionOpts={{maxZoom}}
-                                    dateFormats={props.dateFormats}
-                                    useUTCOffset={props.useUTCOffset}
-                                    validationErrors={validationErrors}
-                                    featurePropertiesJSONSchema={props.featurePropertiesJSONSchema}
-                                    primaryKeyAttributes={primaryKeyAttributes}
-                                />
-                            </BorderLayout> }
-
-                    </ContainerDimensions>)
-                }
-            </Dock>
-        </div>);
+        <ContainerDimensions>
+            { ({ height }) =>
+                // added height to solve resize issue in firefox, edge and ie
+                <BorderLayout
+                    className="feature-grid-container"
+                    key={"feature-grid-container"}
+                    height={height - (42 + 32)}
+                    header={getHeader({
+                        toolbarItems,
+                        hideCloseButton: props.hideCloseButton,
+                        hideLayerTitle: props.hideLayerTitle,
+                        pluginCfg: props.pluginCfg,
+                        validationErrors
+                    })}
+                    columns={getPanels(props.tools)}
+                    footer={getFooter(props)}>
+                    {getDialogs(props.tools)}
+                    <Grid
+                        isWithinAttrTbl
+                        showCheckbox={props.showCheckbox}
+                        editingAllowedRoles={props.editingAllowedRoles}
+                        customEditorsOptions={props.customEditorsOptions}
+                        autocompleteEnabled={props.autocompleteEnabled}
+                        url={props.url}
+                        typeName={props.typeName}
+                        filterRenderers={filterRenderers}
+                        enableColumnFilters={props.enableColumnFilters}
+                        emptyRowsView={getEmptyRowsView()}
+                        focusOnEdit={props.focusOnEdit}
+                        newFeatures={props.newFeatures}
+                        changes={changes}
+                        mode={props.mode}
+                        select={props.select}
+                        key={"feature-grid-container"}
+                        columnSettings={props.attributes}
+                        fields={props.fields}
+                        gridEvents={props.gridEvents}
+                        pageEvents={props.pageEvents}
+                        describeFeatureType={props.describe}
+                        features={props.features}
+                        minHeight={600}
+                        tools={props.gridTools}
+                        pagination={props.pagination}
+                        pages={props.pages}
+                        virtualScroll={virtualScroll}
+                        maxStoredPages={props.maxStoredPages}
+                        vsOverScan={props.vsOverScan}
+                        scrollDebounce={props.scrollDebounce}
+                        size={props.size}
+                        actionOpts={{maxZoom}}
+                        dateFormats={props.dateFormats}
+                        useUTCOffset={props.useUTCOffset}
+                        validationErrors={validationErrors}
+                        featurePropertiesJSONSchema={props.featurePropertiesJSONSchema}
+                        primaryKeyAttributes={primaryKeyAttributes}
+                    />
+                </BorderLayout> }
+        </ContainerDimensions>
+    );
 };
+
+// Wrap Editor with resize HOC
+const ResizableEditor = withResize(Editor);
+
 export const selector = createStructuredSelector({
     open: state => get(state, "featuregrid.open"),
     customEditorsOptions: state => get(state, "featuregrid.customEditorsOptions"),
@@ -344,6 +321,6 @@ const EditorPlugin = compose(
             onSizeChange: (...params) => dispatch(sizeChange(...params))
         })
     )
-)(FeatureDock);
+)(ResizableEditor);
 
 export default EditorPlugin;