#10424: The measure tool is not opened properly if Measure plugin has…

… 'showCoordinateEditor' with true into cfg.defaultOptions (#10428) (#10440)
geosolutions-it · Jun 25, 2024 · 52e88d9 · 52e88d9
1 parent d7cbf97
commit 52e88d9
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/web/client/plugins/Measure.jsx b/web/client/plugins/Measure.jsx
@@ -175,7 +175,7 @@ const MeasurePlugin = connect(
     }))
 )(({coordsAeronauticalEnabled, ...props}) => {
     return (
-        <div className="measure-container" style={{top: coordsAeronauticalEnabled ? 88 : 48}}>
+        <div className={props.mapType !== MapLibraries.CESIUM && props?.defaultOptions?.showCoordinateEditor ? "measure-container measure-coords-editor" : "measure-container"} style={{top: coordsAeronauticalEnabled ? 88 : 48}}>
             {
                 props.mapType === MapLibraries.CESIUM
                     ? <div id="measure-cesium-wrapper"/>

diff --git a/web/client/plugins/__tests__/Measure-test.jsx b/web/client/plugins/__tests__/Measure-test.jsx
@@ -34,4 +34,12 @@ describe('Measure Plugin', () => {
         Simulate.click(closeNode.parentNode);
         expect(store.getState().controls.measure.enabled).toBe(false);
     });
+    it('test measure in case default options showCoordinateEditor = true', () => {
+        const { Plugin} = getPluginForTest(Measure, { controls: { measure: { enabled: true } } });
+        ReactDOM.render(<Plugin defaultOptions={{showCoordinateEditor: true}} />, document.getElementById("container"));
+        const measureCoordEditor2DNode = document.querySelector('.measure-container.measure-coords-editor');
+        expect(measureCoordEditor2DNode).toBeTruthy();
+        const measureToolbarNode = document.querySelector('.ms-measure-toolbar');
+        expect(measureToolbarNode).toBeTruthy();
+    });
 });
diff --git a/web/client/themes/default/less/measure.less b/web/client/themes/default/less/measure.less
@@ -113,12 +113,14 @@
         }
     }
 }
-.measure-container {
+.measure-container:not(.measure-coords-editor){
     position: absolute;
     z-index: 100;
     right: 46px;
     margin: 0;
     top: 48px;
+}
+.measure-container {
     .ms-measure-toolbar {
         position: relative;
         background-color: #ffffff;