Fix: consolidate drawing mode functionality (#3182)

Signed-off-by: Ayoub LABIDI <[email protected]>

Author: ayolab

src/components/diagrams/map-card.tsx

@@ -5,16 +5,16 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import { Box, Dialog, Fab, Theme, useTheme } from '@mui/material';
-import { forwardRef, MouseEventHandler, Ref, TouchEventHandler, useCallback, useState } from 'react';
+import { forwardRef, MouseEventHandler, Ref, TouchEventHandler, useCallback, useRef, useState } from 'react';
 import CardHeader from './card-header';
 import { UUID } from 'crypto';
 import AlertCustomMessageNode from 'components/utils/alert-custom-message-node';
-import { EquipmentType, LineFlowMode, mergeSx } from '@gridsuite/commons-ui';
+import { EquipmentType, LineFlowMode, mergeSx, useStateBoolean } from '@gridsuite/commons-ui';
 import { useDispatch, useSelector } from 'react-redux';
 import { AppState } from 'redux/reducer';
 import { resetMapEquipment, setMapDataLoading, setOpenMap, setReloadMapNeeded } from 'redux/actions';
 import WorldSvg from 'images/world.svg?react';
-import NetworkMapTab from 'components/network/network-map-tab';
+import NetworkMapTab, { NetworkMapTabRef } from 'components/network/network-map-tab';
 import { cardStyles } from './card-styles';
 import { Close } from '@mui/icons-material';
 import { FormattedMessage, useIntl } from 'react-intl';
@@ -82,12 +82,24 @@ export const MapCard = forwardRef((props: MapCardProps, ref: Ref<HTMLDivElement>
         dispatch(setOpenMap(true));
     }, [dispatch]);
 
-    const handleCloseMap = useCallback(() => {
-        dispatch(setOpenMap(false));
-        dispatch(resetMapEquipment());
-        dispatch(setMapDataLoading(false));
-        dispatch(setReloadMapNeeded(true));
-    }, [dispatch]);
+    const isInDrawingMode = useStateBoolean(false);
+    const networkMapTabRef = useRef<NetworkMapTabRef>(null);
+
+    const handleCloseMap = useCallback(
+        (event?: any, reason?: string) => {
+            if (isInDrawingMode.value) {
+                networkMapTabRef.current?.leaveDrawingMode();
+                if (reason && reason === 'escapeKeyDown') {
+                    return; // Do not close the map but only the drawing mode
+                }
+            }
+            dispatch(setOpenMap(false));
+            dispatch(resetMapEquipment());
+            dispatch(setMapDataLoading(false));
+            dispatch(setReloadMapNeeded(true));
+        },
+        [dispatch, isInDrawingMode]
+    );
 
     if (!studyUuid || !currentNode || !currentRootNetworkUuid || !networkVisuParams) {
         return (
@@ -135,6 +147,7 @@ export const MapCard = forwardRef((props: MapCardProps, ref: Ref<HTMLDivElement>
                         <FormattedMessage id="close" />
                     </Fab>
                     <NetworkMapTab
+                        ref={networkMapTabRef}
                         studyUuid={studyUuid}
                         visible={mapOpen}
                         lineFullPath={networkVisuParams.mapParameters.lineFullPath}
@@ -148,7 +161,7 @@ export const MapCard = forwardRef((props: MapCardProps, ref: Ref<HTMLDivElement>
                         }}
                         onOpenNetworkAreaDiagram={onOpenNetworkAreaDiagram}
                         onPolygonChanged={() => {}}
-                        onElementCreated={handleCloseMap}
+                        isInDrawingMode={isInDrawingMode}
                     ></NetworkMapTab>
                 </Dialog>
             </Box>

src/components/network-modification.type.ts

@@ -7,12 +7,8 @@
 
 // move here because of cyclic dependency between reducer and network-modification-tree-pane & network-modification-tree
 export enum StudyDisplayMode {
-    MAP = 'Map',
     TREE = 'Tree',
-    HYBRID = 'Hybrid',
-    DRAW = 'Draw',
     DIAGRAM_GRID_LAYOUT = 'DiagramGridLayout',
-    DIAGRAM_GRID_LAYOUT_AND_TREE = 'DiagramGridLayoutAndTree',
     MODIFICATIONS = 'Modifications',
     EVENT_SCENARIO = 'EventScenario',
 }

src/components/network/guidance-popup.tsx

@@ -29,7 +29,7 @@ const styles = {
     card: (theme: Theme) => ({
         position: 'absolute',
         left: theme.spacing(1.25),
-        bottom: theme.spacing(18.75),
+        bottom: theme.spacing(10.75),
         maxWidth: theme.spacing(25),
     }),
     header: (theme: Theme) => ({