#6024: Retain geometry on deselect

web/client/actions/__tests__/annotations-test.js

@@ -93,7 +93,8 @@ import {
     GEOMETRY_HIGHLIGHT, geometryHighlight,
     INIT_PLUGIN, initPlugin,
     TOGGLE_SHOW_AGAIN, toggleShowAgain,
-    HIDE_MEASURE_WARNING, hideMeasureWarning
+    HIDE_MEASURE_WARNING, hideMeasureWarning,
+    UNSELECT_FEATURE, unSelectFeature
 } from '../annotations';
 
 describe('Test correctness of the annotations actions', () => {
@@ -424,4 +425,8 @@ describe('Test correctness of the annotations actions', () => {
         const result = hideMeasureWarning();
         expect(result.type).toBe(HIDE_MEASURE_WARNING);
     });
+    it('unSelectFeature ', () => {
+        const result = unSelectFeature();
+        expect(result.type).toBe(UNSELECT_FEATURE);
+    });
 });

web/client/actions/annotations.js

@@ -62,6 +62,7 @@ export const FILTER_MARKER = 'ANNOTATIONS:FILTER_MARKER';
 export const HIDE_MEASURE_WARNING = 'ANNOTATIONS:HIDE_MEASURE_WARNING';
 export const TOGGLE_SHOW_AGAIN = 'ANNOTATIONS:TOGGLE_SHOW_AGAIN';
 export const GEOMETRY_HIGHLIGHT = 'ANNOTATIONS:GEOMETRY_HIGHLIGHT';
+export const UNSELECT_FEATURE = 'ANNOTATIONS:UNSELECT_FEATURE';
 
 export const initPlugin = () => ({
     type: INIT_PLUGIN
@@ -349,6 +350,11 @@ export const resetCoordEditor = () => {
         type: RESET_COORD_EDITOR
     };
 };
+export const unSelectFeature = () => {
+    return {
+        type: UNSELECT_FEATURE
+    };
+};
 export const changeRadius = (radius, components, crs) => {
     return {
         type: CHANGE_RADIUS,

web/client/components/mapcontrols/annotations/AnnotationsEditor.jsx

@@ -121,6 +121,7 @@ const {MEASURE_TYPE} = require('../../../utils/MeasurementUtils');
  * @prop {function} onToggleShowAgain triggered when interacting with the checkbox on measure annotation warning popup
  * @prop {function} onInitPlugin triggered when annotation editor is mounted
  * @prop {function} onGeometryHighlight triggered onMouseEnter and onMouseLeave of the geometry card
+ * @prop {function} onUnSelectFeature triggered on unselecting a geometry card
  *
  * In addition, as the Identify viewer interface mandates, every feature attribute is mapped as a component property (in addition to the feature object).
  */
@@ -224,7 +225,8 @@ class AnnotationsEditor extends React.Component {
         showPopupWarning: PropTypes.bool,
         onToggleShowAgain: PropTypes.func,
         onInitPlugin: PropTypes.func,
-        onGeometryHighlight: PropTypes.func
+        onGeometryHighlight: PropTypes.func,
+        onUnSelectFeature: PropTypes.func
     };
 
     static defaultProps = {
@@ -469,7 +471,7 @@ class AnnotationsEditor extends React.Component {
                     onStyleGeometry={this.props.onStyleGeometry}
                     onSelectFeature={this.props.onSelectFeature}
                     drawing={this.props.drawing}
-                    onUnselectFeature={this.props.onResetCoordEditor}
+                    onUnselectFeature={this.props.onUnSelectFeature}
                     onGeometryHighlight={this.props.onGeometryHighlight}
                     isMeasureEditDisabled={this.isMeasureEditDisabled()}
                     onSetAnnotationMeasurement={this.setAnnotationMeasurement}

web/client/components/mapcontrols/annotations/FeaturesList.jsx

@@ -143,16 +143,19 @@ const FeatureCard = ({feature, selected, onDeleteGeometry, onZoom, maxZoom, onSe
     const {properties} = feature;
     const {glyph, label} = getGeometryGlyphInfo(type);
     const unselect = selected?.properties?.id === properties?.id;
-    const isValidFeature = selected?.properties?.isValidFeature || properties?.isValidFeature;
+    const selectedIsValidFeature = get(selected, "properties.isValidFeature", true);
+    const isValidFeature = selectedIsValidFeature || properties?.isValidFeature;
+    const allowCardMouseEvent = !unselect && selectedIsValidFeature;
 
     return (
         <div
             className={cs('geometry-card', {'ms-selected': unselect})}
-            onMouseEnter={() => !unselect && onGeometryHighlight(properties.id)}
-            onMouseLeave={() => !unselect && onGeometryHighlight(properties.id, false)}
+            onMouseEnter={() => allowCardMouseEvent && onGeometryHighlight(properties.id)}
+            onMouseLeave={() => allowCardMouseEvent && onGeometryHighlight(properties.id, false)}
             onClick={() =>{
                 if (unselect) {
                     onUnselectFeature();
+                    onGeometryHighlight(properties.id);
                 } else {
                     onSelectFeature([feature]);
                     setTabValue(isMeasureEditDisabled ? 'coordinates' : 'style');

web/client/components/mapcontrols/annotations/__tests__/FeatureList-test.js

@@ -152,10 +152,12 @@ describe("test FeatureList component", () => {
             selected: {properties: {id: '1'}}
         };
         const testHandlers = {
-            onUnselectFeature: () => {}
+            onUnselectFeature: () => {},
+            onGeometryHighlight: () => {}
         };
         const spyOnUnselectFeature = expect.spyOn(testHandlers, "onUnselectFeature");
-        ReactDOM.render(<FeaturesList {...props} onUnselectFeature={testHandlers.onUnselectFeature}/>, document.getElementById("container"));
+        const spyOnGeometryHighlight = expect.spyOn(testHandlers, "onGeometryHighlight");
+        ReactDOM.render(<FeaturesList {...props} onUnselectFeature={testHandlers.onUnselectFeature} onGeometryHighlight={testHandlers.onGeometryHighlight}/>, document.getElementById("container"));
         const container = document.getElementById('container');
         expect(container).toBeTruthy();
 
@@ -165,6 +167,8 @@ describe("test FeatureList component", () => {
         // OnUnSelectFeature
         TestUtils.Simulate.click(featureCard[0]);
         expect(spyOnUnselectFeature).toHaveBeenCalled();
+        expect(spyOnGeometryHighlight).toHaveBeenCalled();
+        expect(spyOnGeometryHighlight.calls[0].arguments[0]).toBe('1');
     });
 
     it('test geometry highlight', () => {
@@ -207,6 +211,39 @@ describe("test FeatureList component", () => {
         expect(spyOnGeometryHighlight).toHaveBeenCalled();
         expect(spyOnGeometryHighlight.calls[1].arguments[0]).toBe('1');
         expect(spyOnGeometryHighlight.calls[1].arguments[1]).toBe(false);
+    });
 
+    it('test geometry highlight limitations', () => {
+        let props = {
+            editing: {
+                features: [{
+                    type: "Feature",
+                    properties: {id: '1', isValidFeature: false, geometryTitle: 'Polygon'},
+                    geometry: {type: "Polygon"}
+                }]
+            },
+            selected: {properties: {id: '2', isValidFeature: false}}
+        };
+        const testHandlers = {
+            onGeometryHighlight: () => {}
+        };
+        const spyOnGeometryHighlight = expect.spyOn(testHandlers, "onGeometryHighlight");
+        ReactDOM.render(<FeaturesList {...props} onGeometryHighlight={testHandlers.onGeometryHighlight}/>, document.getElementById("container"));
+        let container = document.getElementById('container');
+        expect(container).toBeTruthy();
+
+        let featureCard = document.getElementsByClassName('geometry-card');
+        expect(featureCard).toBeTruthy();
+
+        ReactDOM.render(<FeaturesList {...props} onGeometryHighlight={testHandlers.onGeometryHighlight}/>, document.getElementById("container"));
+        container = document.getElementById('container');
+        featureCard = document.getElementsByClassName('geometry-card');
+        // OnMouseEnter
+        TestUtils.Simulate.mouseEnter(featureCard[0]);
+        expect(spyOnGeometryHighlight).toNotHaveBeenCalled();
+
+        // OnMouseLeave
+        TestUtils.Simulate.mouseLeave(featureCard[0]);
+        expect(spyOnGeometryHighlight).toNotHaveBeenCalled();
     });
 });

web/client/epics/annotations.js

@@ -29,7 +29,7 @@ const {updateAnnotationGeometry, setStyle, toggleStyle, cleanHighlight, toggleAd
     SET_STYLE, RESTORE_STYLE, HIGHLIGHT, CLEAN_HIGHLIGHT, CONFIRM_CLOSE_ANNOTATIONS, START_DRAWING,
     CANCEL_CLOSE_TEXT, SAVE_TEXT, DOWNLOAD, LOAD_ANNOTATIONS, CHANGED_SELECTED, RESET_COORD_EDITOR, CHANGE_RADIUS,
     ADD_NEW_FEATURE, SET_EDITING_FEATURE, CHANGE_TEXT, NEW_ANNOTATION, TOGGLE_STYLE, CONFIRM_DELETE_FEATURE, OPEN_EDITOR,
-    TOGGLE_ANNOTATION_VISIBILITY, LOAD_DEFAULT_STYLES, GEOMETRY_HIGHLIGHT
+    TOGGLE_ANNOTATION_VISIBILITY, LOAD_DEFAULT_STYLES, GEOMETRY_HIGHLIGHT, UNSELECT_FEATURE
 } = require('../actions/annotations');
 
 const uuidv1 = require('uuid/v1');
@@ -575,7 +575,7 @@ module.exports = (viewer) => ({
             }, assign({}, style, {highlight: false}));
             return Rx.Observable.of(action);
         }),
-    onBackToEditingFeatureEpic: (action$, {getState}) => action$.ofType( RESET_COORD_EDITOR, CONFIRM_DELETE_FEATURE )
+    onBackToEditingFeatureEpic: (action$, {getState}) => action$.ofType( RESET_COORD_EDITOR, CONFIRM_DELETE_FEATURE, UNSELECT_FEATURE )
         .switchMap(({}) => {
             const state = getState();
             const feature = state.annotations.editing;

web/client/plugins/Annotations.jsx

@@ -25,7 +25,7 @@ const {cancelRemoveAnnotation, confirmRemoveAnnotation, editAnnotation, newAnnot
     changeSelected, resetCoordEditor, changeRadius, changeText, toggleUnsavedGeometryModal, addNewFeature, setInvalidSelected,
     highlightPoint, confirmDeleteFeature, toggleDeleteFtModal, changeFormat, openEditor, updateSymbols, changePointType,
     setErrorSymbol, toggleVisibilityAnnotation, loadDefaultStyles, changeGeometryTitle, filterMarker, toggleShowAgain, hideMeasureWarning,
-    initPlugin, geometryHighlight
+    initPlugin, geometryHighlight, unSelectFeature
 } = require('../actions/annotations');
 
 const {selectFeatures} = require('../actions/draw');
@@ -83,7 +83,8 @@ const commonEditorActions = {
     onSetAnnotationMeasurement: setAnnotationMeasurement,
     onHideMeasureWarning: hideMeasureWarning,
     onToggleShowAgain: toggleShowAgain,
-    onInitPlugin: initPlugin
+    onInitPlugin: initPlugin,
+    onUnSelectFeature: unSelectFeature
 };
 const AnnotationsEditor = connect(annotationsInfoSelector,
     {

web/client/reducers/__tests__/annotations-test.js

@@ -72,7 +72,8 @@ import {
     filterMarker,
     initPlugin,
     hideMeasureWarning,
-    toggleShowAgain
+    toggleShowAgain,
+    unSelectFeature
 } from '../../actions/annotations';
 
 import { PURGE_MAPINFO_RESULTS } from '../../actions/mapInfo';
@@ -1671,4 +1672,37 @@ describe('Test the annotations reducer', () => {
         expect(state.showAgain).toBeTruthy();
         expect(state.showAgain).toBe(true);
     });
+    it('unSelectFeature', ()=>{
+        const selected = {
+            properties: {
+                isText: true,
+                canEdit: true,
+                valueText: "text",
+                id: '1'
+            },
+            geometry: {
+                type: "LineString",
+                coordinates: [1, 1]
+            },
+            style: [
+                {...DEFAULT_ANNOTATIONS_STYLES.LineString},
+                {...DEFAULT_ANNOTATIONS_STYLES.Point, filtering: false},
+                {...DEFAULT_ANNOTATIONS_STYLES.Point, filtering: false}
+            ]
+        };
+        const state = annotations({
+            editing: {
+                features: [selected, {...selected, properties: {...selected.properties, id: "2"}}]
+            },
+            selected
+        }, unSelectFeature());
+        expect(state.drawing).toBe(false);
+        expect(state.coordinateEditorEnabled).toBe(false);
+        expect(state.unsavedGeometry).toBe(false);
+        expect(state.selected).toBeFalsy();
+        expect(state.showUnsavedGeometryModal).toBe(false);
+        const features = state.editing.features;
+        expect(features[0].properties.canEdit).toBe(false);
+        expect(features[1].properties.canEdit).toBe(false);
+    });
 });

web/client/reducers/annotations.js

@@ -59,7 +59,8 @@ import {
     FILTER_MARKER,
     HIDE_MEASURE_WARNING,
     TOGGLE_SHOW_AGAIN,
-    INIT_PLUGIN
+    INIT_PLUGIN,
+    UNSELECT_FEATURE
 } from '../actions/annotations';
 
 import {
@@ -368,6 +369,24 @@ function annotations(state = {validationErrors: {}}, action) {
             showUnsavedGeometryModal: false
         });
     }
+    case UNSELECT_FEATURE: {
+        let editing = state.editing;
+        const selected = state.selected;
+        const ftChangedIndex = findIndex(editing.features, (f) => f.properties.id === selected.properties.id);
+        const selectedGeoJSON = editing.features[ftChangedIndex];
+        const styleChanged = castArray(selectedGeoJSON.style).map(s => ({...s, highlight: false}));
+        editing = set(`features[${ftChangedIndex}]`, set("style", styleChanged, selectedGeoJSON), editing);
+        let newState = set(`editing.features`, editing.features.map(f => {
+            return set("properties.canEdit", false, f);
+        }), state);
+        return assign({}, newState, {
+            drawing: false,
+            coordinateEditorEnabled: false,
+            unsavedGeometry: false,
+            selected: null,
+            showUnsavedGeometryModal: false
+        });
+    }
     case ADD_NEW_FEATURE: {
         let selected = state.selected;
         let newState = state;