add settings inside the annotation layer panel

geosolutions-it · Sep 8, 2023 · b17e6a1 · b17e6a1
1 parent bef0fc6
commit b17e6a1
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 21 deletions.
diff --git a/web/client/epics/measurement.js b/web/client/epics/measurement.js
@@ -37,7 +37,7 @@ import {
     mergeAnnotationsFeatures
 } from '../plugins/Annotations/actions/annotations';
 import {updateDockPanelsList} from "../actions/maplayout";
-import { selectedAnnotationLayer } from '../plugins/Annotations/selectors/annotations';
+import { getSelectedAnnotationLayer } from '../plugins/Annotations/selectors/annotations';
 import {shutdownToolOnAnotherToolDrawing} from "../utils/ControlUtils";
 import { ANNOTATIONS } from '../plugins/Annotations/utils/AnnotationsUtils';
 
@@ -50,7 +50,7 @@ export const addAnnotationFromMeasureEpic = (action$, store) =>
             const { id = uuidv1(), visibility = true } = properties || {};
             const annotation = convertMeasuresToAnnotation(features, textLabels, uom, id, 'Annotations created from measurements');
             const state = store.getState();
-            const selected = selectedAnnotationLayer(state);
+            const selected = getSelectedAnnotationLayer(state);
             const commonActions = [
                 changeMeasurement(null),
                 changeMeasurement('LineString')

diff --git a/web/client/plugins/Annotations/containers/AnnotationsEditor.jsx b/web/client/plugins/Annotations/containers/AnnotationsEditor.jsx
@@ -24,7 +24,7 @@ import {
     selectAnnotationFeature
 } from '../actions/annotations';
 import {
-    selectedAnnotationLayer,
+    getSelectedAnnotationLayer,
     getAnnotationsSession,
     getSelectedAnnotationFeatureId
 } from '../selectors/annotations';
@@ -384,7 +384,7 @@ function AnnotationsEditor({
 const ConnectedAnnotationsEditor = connect(
     createSelector([
         createControlVariableSelector(ANNOTATIONS, 'ready'),
-        selectedAnnotationLayer,
+        getSelectedAnnotationLayer,
         mapSelector,
         is3DMode,
         getAnnotationsSession,

diff --git a/web/client/plugins/Annotations/containers/AnnotationsPanel.jsx b/web/client/plugins/Annotations/containers/AnnotationsPanel.jsx
@@ -8,7 +8,7 @@
 
 
 import React, { useEffect, useState } from 'react';
-import { Nav, NavItem, Glyphicon, ButtonGroup, Alert } from "react-bootstrap";
+import { Nav, NavItem, Glyphicon, ButtonGroup, Alert, ControlLabel } from "react-bootstrap";
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import isFunction from 'lodash/isFunction';
@@ -25,7 +25,7 @@ import {
     editAnnotation,
     removeAnnotation
 } from '../actions/annotations';
-import { selectedAnnotationLayer } from '../selectors/annotations';
+import { getSelectedAnnotationLayer } from '../selectors/annotations';
 import { createControlEnabledSelector } from '../../../selectors/controls';
 import { mapLayoutValuesSelector } from '../../../selectors/maplayout';
 import { setControlProperty } from '../../../actions/controls';
@@ -35,6 +35,7 @@ import { DEFAULT_TARGET_ID } from '../constants';
 import ConfirmDialog from '../../../components/misc/ConfirmDialog';
 import Portal from '../../../components/misc/Portal';
 import { mapSelector } from '../../../selectors/map';
+import VisibilityLimitsForm from '../../../components/TOC/fragments/settings/VisibilityLimitsForm';
 
 const Button = tooltip(MSButton);
 
@@ -141,7 +142,10 @@ function AnnotationsPanel({
     ],
     closeId,
     onCancel = () => {},
-    activeClickEventListener
+    activeClickEventListener,
+    projection,
+    resolutions,
+    zoom
 }) {
     const properties = {
         title: selected?.title,
@@ -236,6 +240,12 @@ function AnnotationsPanel({
                     {' '}
                     <Glyphicon glyph={validateFeatures() ? 'ok-sign text-success' : 'exclamation-mark text-danger'}/>
                 </NavItem>
+                <NavItem
+                    key="geometries"
+                    eventKey="settings"
+                    onClick={() => setTab('settings')}>
+                    <Message msgId="settings"/>
+                </NavItem>
                 <Button
                     className="square-button-md"
                     bsStyle="primary"
@@ -247,7 +257,7 @@ function AnnotationsPanel({
                 </Button>
             </Nav>
             <div className="ms-annotations-panel-body">
-                <div className="ms-annotations-properties" style={tab === 'properties' ? {  } : { display: 'none' }}>
+                <div className="ms-annotations-panel-content" style={tab === 'properties' ? {  } : { display: 'none' }}>
                     <AnnotationsFields
                         fields={fields}
                         properties={properties}
@@ -266,6 +276,16 @@ function AnnotationsPanel({
                 </div>
                 <div id={targetId} style={tab === 'geometries' ? {} : { display: 'none' }} >
                 </div>
+                <div className="ms-annotations-panel-content" style={tab === 'settings' ? {  } : { display: 'none' }}>
+                    <VisibilityLimitsForm
+                        title={<ControlLabel><Message msgId="layerProperties.visibilityLimits.title"/></ControlLabel>}
+                        layer={selected}
+                        onChange={(options) => onChange(selected.id, 'layers', options)}
+                        projection={projection}
+                        resolutions={resolutions}
+                        zoom={zoom}
+                    />
+                </div>
             </div>
             {activeClickEventListener && <Alert bsStyle="warning">
                 <Message msgId="annotations.deactivatedMapInteraction" msgParams={{ pluginName: capitalize(activeClickEventListener) }}/>
@@ -291,14 +311,17 @@ const ConnectedAnnotationsPanel = connect(
     createSelector([
         createControlEnabledSelector(ANNOTATIONS),
         state => mapLayoutValuesSelector(state, { height: true }),
-        selectedAnnotationLayer,
+        getSelectedAnnotationLayer,
         mapSelector
     ],
     (enabled, style, selected, map) => ({
         enabled,
         style,
         selected: enabled ? selected : null,
-        activeClickEventListener: map?.eventListeners?.click?.[0]
+        activeClickEventListener: map?.eventListeners?.click?.[0],
+        projection: map?.projection,
+        zoom: map?.zoom,
+        resolutions: map?.resolutions
     })),
     {
         onClose: confirmCloseAnnotations,

diff --git a/web/client/plugins/Annotations/selectors/__tests__/annotations-test.js b/web/client/plugins/Annotations/selectors/__tests__/annotations-test.js
@@ -11,7 +11,7 @@ import expect from 'expect';
 import {
     annotationsLayerSelector,
     annotationsLayersSelector,
-    selectedAnnotationLayer,
+    getSelectedAnnotationLayer,
     editingSelector,
     getAnnotationsSession,
     getSelectedAnnotationFeatureId
@@ -90,7 +90,7 @@ describe('annotations selectors', () => {
             }
         ]);
     });
-    it('selectedAnnotationLayer', () => {
+    it('getSelectedAnnotationLayer', () => {
         const state = {
             layers: {
                 flat: [
@@ -111,7 +111,7 @@ describe('annotations selectors', () => {
                 selected: ['annotations:1']
             }
         };
-        expect(selectedAnnotationLayer(state)).toEqual({
+        expect(getSelectedAnnotationLayer(state)).toEqual({
             id: 'annotations:1',
             type: 'vector',
             title: 'Annotations',

diff --git a/web/client/plugins/Annotations/selectors/annotations.js b/web/client/plugins/Annotations/selectors/annotations.js
@@ -21,7 +21,7 @@ export const annotationsLayersSelector = createSelector(
     [layersSelector],
     (layers) => layers.filter(isAnnotationLayer)
 );
-export const selectedAnnotationLayer = (state) => {
+export const getSelectedAnnotationLayer = (state) => {
     const selectedLayer = getSelectedLayer(state);
     return selectedLayer && isAnnotationLayer(selectedLayer) ? selectedLayer : null;
 };

diff --git a/web/client/plugins/TOC.jsx b/web/client/plugins/TOC.jsx
@@ -35,7 +35,7 @@ import { openQueryBuilder } from '../actions/layerFilter';
 import { getLayerCapabilities } from '../actions/layerCapabilities';
 import { zoomToExtent } from '../actions/map';
 import { error } from '../actions/notifications';
-
+import { getSelectedAnnotationLayer  } from './Annotations/selectors/annotations';
 import {
     groupsSelector,
     layersSelector,
@@ -112,7 +112,8 @@ const tocSelector = createShallowSelectorCreator(isEqual)(
     isCesium,
     userSelector,
     isLocalizedLayerStylesEnabledSelector,
-    (enabled, groups, settings, swipeSettings, layerMetadata, layerdownload, map, currentLocale, currentLocaleLanguage, selectedNodes, filterText, layers, mapName, catalogActive, activateWidgetTool, generalInfoFormat, isCesiumActive, user, isLocalizedLayerStylesEnabled) => ({
+    getSelectedAnnotationLayer,
+    (enabled, groups, settings, swipeSettings, layerMetadata, layerdownload, map, currentLocale, currentLocaleLanguage, selectedNodes, filterText, layers, mapName, catalogActive, activateWidgetTool, generalInfoFormat, isCesiumActive, user, isLocalizedLayerStylesEnabled, selectedAnnotationLayer) => ({
         enabled,
         groups,
         settings,
@@ -160,7 +161,8 @@ const tocSelector = createShallowSelectorCreator(isEqual)(
         catalogActive,
         activateWidgetTool,
         user,
-        isLocalizedLayerStylesEnabled
+        isLocalizedLayerStylesEnabled,
+        selectedAnnotationLayer
     })
 );
 
@@ -603,7 +605,8 @@ const checkPluginsEnhancer = branch(
             "activateLayerFilterTool",
             "activateSettingsTool",
             "FeatureEditor",
-            "activateLayerInfoTool"
+            "activateLayerInfoTool",
+            "selectedAnnotationLayer"
         ],
         ({
             items = [],
@@ -614,11 +617,14 @@ const checkPluginsEnhancer = branch(
             activateLayerFilterTool = true,
             activateWidgetTool = true,
             activateLayerInfoTool = true,
-            activateDownloadTool = true
+            activateDownloadTool = true,
+            // TODO: we should extract the toolbar button that could be injected (eg. TOCItemsSettings)
+            // in this way the logic could be moved in that plugin instead
+            selectedAnnotationLayer
         }) => ({
             activateAddLayerButton: activateAddLayerButton && !!find(items, { name: "MetadataExplorer" }) || false, // requires MetadataExplorer (Catalog)
             activateAddGroupButton: activateAddGroupButton && !!find(items, { name: "AddGroup" }) || false,
-            activateSettingsTool: activateSettingsTool && !!find(items, { name: "TOCItemsSettings"}) || false,
+            activateSettingsTool: activateSettingsTool && !selectedAnnotationLayer && !!find(items, { name: "TOCItemsSettings"}) || false,
             activateQueryTool: activateQueryTool && !!find(items, {name: "FeatureEditor"}) || false,
             activateLayerFilterTool: activateLayerFilterTool && !!find(items, {name: "FilterLayer"}) || false,
             // NOTE: activateWidgetTool is already controlled by a selector. TODO: Simplify investigating on the best approach

diff --git a/web/client/themes/default/less/annotations.less b/web/client/themes/default/less/annotations.less
@@ -343,7 +343,7 @@
     .ms-annotations-panel-body {
         flex: 1;
         position: relative;
-        .ms-annotations-properties {
+        .ms-annotations-panel-content {
             position: absolute;
             width: 100%;
             height: 100%;